frontend/script/viewer/Analyse/Render/Cart.tsx

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;
    }
}