heal beam

script/viewer/Analyse/Render/HealBeam.tsx

@@ -0,0 +1,67 @@
+import {Class, MedicState, PlayerState, WorldBoundaries} from "../Data/Parser";
+import {Show} from "solid-js";
+
+export interface HealBeamProp {
+    player: PlayerState;
+    mapBoundary: WorldBoundaries;
+    targetSize: {
+        width: number;
+        height: number;
+    };
+    scale: number;
+    players: PlayerState[];
+}
+
+export function HealBeam(props: HealBeamProp) {
+    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 scaleX = (x) => (x - props.mapBoundary.boundary_min.x) / worldWidth * props.targetSize.width;
+    const scaleY = (y) => (worldHeight - (y - props.mapBoundary.boundary_min.y)) / worldHeight * props.targetSize.height;
+    const scaledX = () => scaleX(props.player.position.x);
+    const scaledY = () => scaleY(props.player.position.y);
+
+    const targetPosition = () => {
+        if (props.player.playerClass !== Class.Medic) {
+            return null;
+        }
+        const target = (props.player.class_data as MedicState).target;
+        if (target === 0) {
+            return null;
+        }
+        for (let player of props.players) {
+            if (player.info.entityId === target) {
+                return {
+                    x: scaleX(player.position.x),
+                    y: scaleY(player.position.y),
+                };
+            }
+        }
+        return null;
+    };
+    const distance = () => Math.sqrt(Math.pow(Math.abs(scaledX() - targetPosition().x), 2) + Math.pow(Math.abs(scaledY() - targetPosition().y), 2));
+    const aimHandle = () => {
+        let angle = (270 - props.player.angle) / 360 * (Math.PI * 2);
+        return {
+            x: scaledX() - Math.sin(angle) * (distance() / 2),
+            y: scaledY() + Math.cos(angle) * (distance() / 2)
+        }
+    }
+    const aimStart = () => {
+        let angle = (270 - props.player.angle) / 360 * (Math.PI * 2);
+        return {
+            x: scaledX() - Math.sin(angle) * (16 / props.scale),
+            y: scaledY() + Math.cos(angle) * (16 / props.scale)
+        }
+    }
+
+    const path = () => `M ${aimStart().x} ${aimStart().y} C ${aimHandle().x} ${aimHandle().y} ${aimHandle().x} ${aimHandle().y} ${targetPosition().x} ${targetPosition().y}`;
+
+    return <g>
+        <Show when={targetPosition()}>
+            <path
+                d={path()}
+                fill="transparent" stroke="white" stroke-width={1.5 / props.scale}
+            />
+        </Show>
+    </g>
+}

script/viewer/Analyse/Render/Player.tsx

@@ -10,6 +10,7 @@ export interface PlayerProp {
     scale: number;
     onHover: (userId: number) => void;
     highlighted: boolean;
+    players: PlayerState[];
 }
 
 const healthMap = {
@@ -65,21 +66,22 @@ export function Player(props: PlayerProp) {
     const teamHatch = () => (props.player.team === Team.Red) ? `url(#diagonalHatchRed)` : `url(#diagonalHatchBlue)`
     const fill = () => props.player.cloaked ? teamHatch() : teamColor();
 
-    return <g
-        onmouseover={() => props.onHover(props.player.info.userId)}
-        onmouseout={() => props.onHover(0)}
-        transform={transform()}>
-        <polygon points="-6,14 0, 16 6,14 0,24" fill="white"
-                 opacity={imageOpacity()}
-                 transform={rotate()}/>
-        <circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white"
-                stroke-dasharray={circleStrokeStyle()}
-                fill={fill()}
-                opacity={alpha()}
-                filter={filter()}
-        />
-        {getClassImage(props.player, imageOpacity())}
-    </g>
+    return (
+        <g
+            onmouseover={() => props.onHover(props.player.info.userId)}
+            onmouseout={() => props.onHover(0)}
+            transform={transform()}>
+            <polygon points="-6,14 0, 16 6,14 0,24" fill="white"
+                     opacity={imageOpacity()}
+                     transform={rotate()}/>
+            <circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white"
+                    stroke-dasharray={circleStrokeStyle()}
+                    fill={fill()}
+                    opacity={alpha()}
+                    filter={filter()}
+            />
+            {getClassImage(props.player, imageOpacity())}
+        </g>)
 }
 
 function getClassImage(player: PlayerState, imageOpacity: number) {

script/viewer/Analyse/Render/PlayerSpec.tsx

@@ -66,7 +66,7 @@ function filterPlayers(players: PlayerState[], team: number): PlayerState[] {
     return filtered;
 }
 
-function medics(players: PlayerState[]): PlayerState[] {
+export function medics(players: PlayerState[]): PlayerState[] {
     return players.filter(player => player.playerClass === Class.Medic);
 }