demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

render cart

Browse source
This commit is contained in:
Robin Appelman 2025-06-26 16:55:55 +02:00
commit a4d835f0c6
9 changed files with 97 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -6,7 +6,7 @@
"": {
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.2.3",
"@demostf/tf-demos-viewer": "^0.2.4",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/autofocus": "^0.0.111",
"@solid-primitives/keyboard": "^1.2.8",
@ -23,9 +23,9 @@
"integrity": "sha512-s9wk3QVm+aTpMhIyfdGIHRm5qHp7FQ1dq/Jn0fms+lXsB1xY3wgjfWH+5gwRjjo/Dd3UMNM0o3atjO2uh+CxOQ=="
},
"node_modules/@demostf/tf-demos-viewer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.3.tgz",
"integrity": "sha512-pN+D6qKy+qy835ituO5DJ8zHGOdX7/ubwXpwWST0ae3u1QARegw/KdJzKrvhU47hLzn5zp1uUgRWqZdOReBckw=="
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.4.tgz",
"integrity": "sha512-3wqgqKJHJZMIBpxfXxLBV1Yx7bRIyvMJGNwq9osB1wXipyXcKDzzStmj6yEenTj9s+HfotAbPRzfZGlkVLWfog=="
},
"node_modules/@lutaok/solid-modal": {
"version": "0.1.1",

2
package.json
View file

@ -1,7 +1,7 @@
{
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.2.3",
"@demostf/tf-demos-viewer": "^0.2.4",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/autofocus": "^0.0.111",
"@solid-primitives/keyboard": "^1.2.8",

2
script/viewer/Analyse/Analyser.tsx
View file

@ -264,6 +264,7 @@ export const Analyser = (props: AnalyseProps) => {
const players = () => parser.getPlayersAtTick(tick());
const buildings = () => parser.getBuildingsAtTick(tick());
const projectiles = () => parser.getProjectilesAtTick(tick());
const cart = () => parser.getCart(tick());
const events = parser.getEvents();
const playButtonText = () => (playing()) ? '⏸' : '▶️';
const inShared = session && !session.isOwner();
@ -280,6 +281,7 @@ export const Analyser = (props: AnalyseProps) => {
players={players()}
buildings={buildings()}
projectiles={projectiles()}
cart={cart()}
header={props.header}
world={backgroundBoundaries}
scale={scale()}

7
script/viewer/Analyse/Data/AsyncParser.ts
View file

@ -1,5 +1,5 @@
import {
BuildingState,
BuildingState, CartState,
Event,
Kill,
ParsedDemo,
@ -46,6 +46,7 @@ export class AsyncParser {
cachedData.playerCount,
cachedData.buildingCount,
cachedData.projectileCount,
cachedData.hasCart,
cachedData.world,
cachedData.header,
cachedData.data,
@ -93,6 +94,10 @@ export class AsyncParser {
return projectiles;
}
getCart(tick: number): CartState | null {
return this.demo.getCart(tick);
}
getKills(): Kill[] {
return this.demo.kills
}

39
script/viewer/Analyse/Data/Parser.ts
View file

@ -21,6 +21,7 @@ export async function parseDemo(bytes: Uint8Array, progressCallback: (progress:
let playerCount = state.player_count;
let buildingCount = state.building_count;
let projectileCount = state.projectile_count;
let hasCart = state.has_cart;
let boundaries = state.boundaries;
let interval_per_tick = state.interval_per_tick;
let tickCount = state.tick_count;
@ -76,6 +77,7 @@ export async function parseDemo(bytes: Uint8Array, progressCallback: (progress:
playerCount,
buildingCount,
projectileCount,
hasCart,
{
boundary_min: {
x: boundaries.boundary_min.x,
@ -191,6 +193,7 @@ export interface ProjectileState {
angle: number,
team: Team,
projectileType: ProjectileType,
critical: boolean,
}
export interface Header {
@ -206,6 +209,13 @@ export interface Kill {
weapon: string,
}
export interface CartState {
position: {
x: number,
y: number
},
}
function unpack_f32(val: number, min: number, max: number): number {
const ratio = val / (Math.pow(2, 16) - 1);
return ratio * (max - min) + min;
@ -220,6 +230,7 @@ export class ParsedDemo {
public readonly playerCount: number;
public readonly buildingCount: number;
public readonly projectileCount: number;
public readonly hasCart: boolean;
public readonly world: WorldBoundaries;
public readonly data: Uint8Array;
public readonly header: Header;
@ -232,6 +243,7 @@ export class ParsedDemo {
playerCount: number,
buildingCount: number,
projectileCount: number,
hasCart: boolean,
world: WorldBoundaries,
header: Header,
data: Uint8Array,
@ -243,6 +255,7 @@ export class ParsedDemo {
this.playerCount = playerCount;
this.buildingCount = buildingCount;
this.projectileCount = projectileCount;
this.hasCart = hasCart;
this.world = world;
this.header = header;
this.data = data;
@ -280,11 +293,24 @@ export class ParsedDemo {
((projectileIndex * this.tickCount) + tick) * PROJECTILE_PACK_SIZE;
return unpackProjectile(this.data, base, this.world);
}
getCart(tick: number): CartState | null {
if (this.hasCart) {
const base = (this.playerCount * this.tickCount * PLAYER_PACK_SIZE) +
(this.buildingCount * this.tickCount * BUILDING_PACK_SIZE) +
(this.projectileCount * this.tickCount * PROJECTILE_PACK_SIZE) +
(tick * CART_PACK_SIZE);
return unpackCart(this.data, base, this.world);
} else {
return null;
}
}
}
const PLAYER_PACK_SIZE = 8;
const BUILDING_PACK_SIZE = 7;
const PROJECTILE_PACK_SIZE = 6;
const CART_PACK_SIZE = 4;
function unpackPlayer(bytes: Uint8Array, base: number, world: WorldBoundaries, info: PlayerInfo): PlayerState {
const x = unpack_f32(bytes[base] + (bytes[base + 1] << 8), world.boundary_min.x, world.boundary_max.x);
@ -335,13 +361,24 @@ function unpackProjectile(bytes: Uint8Array, base: number, world: WorldBoundarie
const team_type = bytes[base + 4];
const team = (((team_type >> 4) & 1) === 0) ? Team.Blue : Team.Red;
const projectileType = ((team_type >> 5) & 7) as ProjectileType;
const angle = unpack_angle(bytes[base + 5]);
const critical = bytes[base + 5] >> 7 == 1;
const angle = unpack_angle(bytes[base + 5] >> 1);
return {
position: {x, y},
angle,
team,
projectileType,
critical,
}
}
function unpackCart(bytes: Uint8Array, base: number, world: WorldBoundaries): CartState {
const x = unpack_f32(bytes[base] + (bytes[base + 1] << 8), world.boundary_min.x, world.boundary_max.x);
const y = unpack_f32(bytes[base + 2] + (bytes[base + 3] << 8), world.boundary_min.y, world.boundary_max.y);
return {
position: {x, y},
}
}

10
script/viewer/Analyse/MapRender.tsx
View file

@ -2,14 +2,16 @@ import {Player as PlayerDot} from './Render/Player';
import {Building as BuildingDot} from './Render/Building';
import {Projectile as ProjectileDot} from './Render/Projectile';
import {findMapAlias} from './MapBoundries';
import {PlayerState, Header, WorldBoundaries, BuildingState, ProjectileState} from "./Data/Parser";
import {PlayerState, Header, WorldBoundaries, BuildingState, ProjectileState, CartState} from "./Data/Parser";
import {Show} from "solid-js";
import {Projectile} from "./Render/Cart";
export interface MapRenderProps {
header: Header;
players: PlayerState[];
buildings: BuildingState[];
projectiles: ProjectileState[];
cart: CartState | null;
size: {
width: number;
height: number;
@ -27,6 +29,8 @@ export function MapRender(props: MapRenderProps) {
const image = `${map_root}images/${mapAlias}.webp`;
const background = `url(${image})`;
console.log(props.cart);
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
@ -73,6 +77,10 @@ export function MapRender(props: MapRenderProps) {
scale={props.scale}/>
</Show>
}</For>
<Show when={props.cart}>
<Projectile cart={props.cart} mapBoundary={props.world} targetSize={props.size}
scale={props.scale}/>
</Show>
</svg>
);
}

32
script/viewer/Analyse/Render/Cart.tsx Normal file
View file

@ -0,0 +1,32 @@
import {CartState, WorldBoundaries} from "../Data/Parser";
export interface CartProp {
cart: CartState;
mapBoundary: WorldBoundaries;
targetSize: {
width: number;
height: number;
};
scale: number;
}
export function Projectile(props: CartProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x;
const worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.cart.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.cart.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(0)`; // todo
try {
return <g transform={transform()}>
<path fill="#5b818f" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"
transform="translate(-12 -12) scale(0.75)"
d="m1 5 3.6 13h7.9l-.11 3.1c-.4-.95-1.6-1.9-3.8-1.8-2.2.06-4.2 1.5-4.1 4.1.03 2.6 2.3 4.6 4.6 4.4 1.7-.1 3.9-1.4 4.1-4.1l5.9.05c.07 2.3 1.7 4 4.1 4 2.5-.08 3.8-2.2 3.9-4.1.08-1.9-1.1-4.2-4-4.2-2.2-.04-2.9 1-3.6 1.8l.11-3.3H27l3.6-13z"/>
</g>
} catch (e) {
return null;
}
}

2
script/viewer/Analyse/Render/Player.tsx
View file

@ -53,8 +53,6 @@ export function Player(props: PlayerProp) {
const rotate = () => `rotate(${270 - props.player.angle})`;
const filter = () => props.player.ubered ? ((props.player.team === Team.Red) ? 'url(#sofGlowRed)' : 'url(#sofGlowBlue)') : '';
console.log(props.player);
return <g
onmouseover={() => props.onHover(props.player.info.userId)}
onmouseout={() => props.onHover(0)}

7
script/viewer/Analyse/Render/Projectile.tsx
View file

@ -19,6 +19,7 @@ export function Projectile(props: ProjectileProp) {
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const teamColor = () => (props.projectile.team === Team.Red) ? '#a75d50' : '#5b818f';
const filter = () => props.projectile.critical ? ((props.projectile.team === Team.Red) ? 'url(#sofGlowRed)' : 'url(#sofGlowBlue)') : '';
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.projectile.angle})`;
@ -26,10 +27,12 @@ export function Projectile(props: ProjectileProp) {
return <g transform={transform()}>
<Show when={projectileIsAngled(props.projectile.projectileType)}>
<polygon points="-3,-4 0,0 3,-4 0,8" stroke="white" fill={teamColor()}
transform={rotate()}/>
transform={rotate()}
filter={filter()}/>
</Show>
<Show when={!projectileIsAngled(props.projectile.projectileType)}>
<circle r={3} stroke-width={1} stroke="white" fill={teamColor()}/>
<circle r={3} stroke-width={1} stroke="white" fill={teamColor()}
filter={filter()}/>
</Show>
</g>
} catch (e) {