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

show projectiles in viewer

Browse source
This commit is contained in:
Robin Appelman 2024-12-05 21:30:49 +01:00
commit 22ad43a4b7
7 changed files with 215 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,50 @@
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} from "./Data/Parser";
import {createEffect, Show} from "solid-js";
import {PlayerState, Header, WorldBoundaries, BuildingState, ProjectileState} from "./Data/Parser";
import {Show} from "solid-js";
export interface MapRenderProps {
header: Header;
players: PlayerState[];
buildings: BuildingState[];
size: {
width: number;
height: number;
},
world: WorldBoundaries;
scale: number;
header: Header;
players: PlayerState[];
buildings: BuildingState[];
projectiles: ProjectileState[];
size: {
width: number;
height: number;
},
world: WorldBoundaries;
scale: number;
}
const map_root = document.querySelector('[data-maps]').getAttribute('data-maps');
export function MapRender(props: MapRenderProps) {
const mapAlias = findMapAlias(props.header.map);
const image = `${map_root}images/${mapAlias}.webp`;
const background = `url(${image})`;
const mapAlias = findMapAlias(props.header.map);
const image = `${map_root}images/${mapAlias}.webp`;
const background = `url(${image})`;
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale} />
</Show>
}</For>
<For each={props.buildings}>{(building) =>
<Show when={building.position.x}>
<BuildingDot building={building} mapBoundary={props.world} targetSize={props.size} scale={props.scale}/>
</Show>
}</For>
</svg>
);
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}/>
</Show>
}</For>
<For each={props.buildings}>{(building) =>
<Show when={building.position.x}>
<BuildingDot building={building} mapBoundary={props.world} targetSize={props.size}
scale={props.scale}/>
</Show>
}</For>
<For each={props.projectiles}>{(projectile) =>
<Show when={projectile.position.x}>
<ProjectileDot projectile={projectile} mapBoundary={props.world} targetSize={props.size}
scale={props.scale}/>
</Show>
}</For>
</svg>
);
}