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

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) {