highlight player dot/spec on hover

script/viewer/Analyse/Analyser.tsx

@@ -51,6 +51,7 @@ export const Analyser = (props: AnalyseProps) => {
     const closeDialogs = () => {
         setModalState(ModalState.Closed);
     };
+    const [highlighted, setHighlighted] = createSignal<number>(0);
 
     createEffect(() => {
         const e = event();
@@ -243,7 +244,10 @@ export const Analyser = (props: AnalyseProps) => {
                                projectiles={projectiles()}
                                header={props.header}
                                world={backgroundBoundaries}
-                               scale={scale()}/>
+                               scale={scale()}
+                               onHover={setHighlighted}
+                               highlighted={highlighted()}
+                    />
                 </MapContainer>
                 <AnalyseMenu sessionName={sessionName()}
                              onShare={() => {
@@ -261,7 +265,9 @@ export const Analyser = (props: AnalyseProps) => {
                              inShared={inShared}
                 />
                 <SpecHUD parser={parser} tick={tick()}
-                         players={players()} events={events}/>
+                         players={players()} events={events}
+                         highlighted={highlighted()}
+                         onHover={setHighlighted}/>
             </div>
             <div class="time-control"
                  title={timeTitle()}>

script/viewer/Analyse/MapRender.tsx

@@ -16,6 +16,8 @@ export interface MapRenderProps {
     },
     world: WorldBoundaries;
     scale: number;
+    onHover: (userId: number) => void;
+    highlighted: number;
 }
 
 const map_root = document.querySelector('[data-maps]').getAttribute('data-maps');
@@ -30,7 +32,10 @@ export function MapRender(props: MapRenderProps) {
              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}/>
+                    <PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}
+                               onHover={props.onHover}
+                               highlighted={props.highlighted === player.info.userId}
+                    />
                 </Show>
             }</For>
             <For each={props.buildings}>{(building) =>

script/viewer/Analyse/Render/KillFeed.tsx

@@ -71,7 +71,7 @@ export function KillFeedDestroyedItem(props: KillFeedDestroyedItemProps) {
     return <li class="kill">
         <PlayerNames players={[attacker, assister]}/>
         <KillIcon kill={props.event}/>
-        <PlayerName player={victim}/><span className={teamMap[victim.team]}>({props.event.building_type})</span>
+        <PlayerName player={victim}/><span class={teamMap[victim.team]}>({props.event.building_type})</span>
     </li>
 }
 
@@ -98,7 +98,7 @@ interface PlayerNameProps {
 
 export function PlayerName(props: PlayerNameProps) {
     return <Show when={props.player}>
-        <span className={"player " + teamMap[props.player.team]}>
+        <span class={"player " + teamMap[props.player.team]}>
             {props.player.info.name}
         </span>
     </Show>
@@ -111,7 +111,7 @@ interface PlayerNamesProps {
 export function PlayerNames(props: PlayerNamesProps) {
     return <For each={props.players}>{(player, i) => <>
         <Show when={i() > 0 && player}>
-            <span className={teamMap[player.team]}>+</span>
+            <span class={teamMap[player.team]}>+</span>
         </Show>
         <PlayerName player={player}/>
     </>}</For>

script/viewer/Analyse/Render/Player.tsx

@@ -8,6 +8,8 @@ export interface PlayerProp {
         height: number;
     };
     scale: number;
+    onHover: (userId: number) => void;
+    highlighted: boolean;
 }
 
 const healthMap = {
@@ -51,12 +53,15 @@ export function Player(props: PlayerProp) {
     const rotate = () => `rotate(${270 - props.player.angle})`;
 
     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={1.5} stroke="white" fill={teamColor()}
+        <circle r={16} stroke-width={props.highlighted ? 5 : 1.5} stroke="white" fill={teamColor()}
-                opacity={alpha()}/>
+                opacity={alpha()}
+        />
         {getClassImage(props.player, imageOpacity())}
     </g>
 }

script/viewer/Analyse/Render/PlayerSpec.tsx

@@ -3,6 +3,8 @@ import {KillFeedItem} from "./KillFeed";
 
 export interface PlayerSpecProps {
     player: PlayerState;
+    onHover: (userId: number) => void;
+    highlighted: boolean;
 }
 
 const healthMap = {
@@ -51,16 +53,20 @@ const teamMap = {
 
 export interface PlayersSpecProps {
     players: PlayerState[];
+    onHover: (userId: number) => void;
+    highlighted: number;
 }
 
 function sortPlayer(a, b) {
     return classSort[a.playerClass] - classSort[b.playerClass];
 }
+
 function filterPlayers(players: PlayerState[], team: number): PlayerState[] {
     const filtered = players.filter((player) => player.team === team);
     filtered.sort(sortPlayer);
     return filtered;
 }
+
 function medics(players: PlayerState[]): PlayerState[] {
     return players.filter(player => player.playerClass === 5);
 }
@@ -73,8 +79,9 @@ export function PlayersSpec(props: PlayersSpecProps) {
 
     return (<div>
         <div class="redSpecHolder">
-			<For each={redPlayers()}>{(player) =>
+            <For each={redPlayers()}>{(player: PlayerState) =>
-				<PlayerSpec player={player}/>
+                <PlayerSpec player={player} highlighted={player.info.userId == props.highlighted}
+                            onHover={props.onHover}/>
             }</For>
             <For each={redMedics()}>{(player) =>
                 <UberSpec
@@ -86,7 +93,8 @@ export function PlayersSpec(props: PlayersSpecProps) {
         </div>
         <div class="blueSpecHolder">
             <For each={bluePlayers()}>{(player) =>
-				<PlayerSpec player={player}/>
+                <PlayerSpec player={player} highlighted={player.info.userId == props.highlighted}
+                            onHover={props.onHover}/>
             }</For>
             <For each={blueMedics()}>{(player) =>
                 <UberSpec
@@ -99,19 +107,27 @@ export function PlayersSpec(props: PlayersSpecProps) {
     </div>);
 }
 
-export function PlayerSpec({player}: PlayerSpecProps) {
+export function PlayerSpec(props: PlayerSpecProps) {
-	const healthPercent = Math.min(100, player.health / healthMap[player.playerClass] * 100);
+    const healthPercent = () => Math.min(100, props.player.health / healthMap[props.player.playerClass] * 100);
-	const healthStatusClass = (player.health > healthMap[player.playerClass]) ? 'overhealed' : (player.health <= 0 ? 'dead' : '');
+    const healthStatusClass = () => (props.player.health > healthMap[props.player.playerClass]) ? 'overhealed' : (props.player.health <= 0 ? 'dead' : '');
 
     return (
         <div
-			class={"playerspec " + teamMap[player.team] + " webp " + healthStatusClass}>
+            onmouseover={() => props.onHover(props.player.info.userId)}
-			{getPlayerIcon(player)}
+            onmouseout={() => props.onHover(0)}
+            classList={{
+                "playerspec": true,
+                [teamMap[props.player.team]]: true,
+                "webp": true,
+                [healthStatusClass()]: true,
+                highlighted: props.highlighted,
+            }}>
+            {getPlayerIcon(props.player)}
             <div class="health-container">
                 <div class="healthbar"
-					 style={{width: healthPercent + '%'}}/>
+                     style={{width: healthPercent() + '%'}}/>
-				<span class="player-name">{player.info.name}</span>
+                <span class="player-name">{props.player.info.name}</span>
-				<span class="health">{player.health}</span>
+                <span class="health">{props.player.health}</span>
             </div>
         </div>
     );

script/viewer/Analyse/Render/SpecHUD.tsx

@@ -7,13 +7,15 @@ export interface SpecHUDProps {
     tick: number;
     parser: AsyncParser;
     players: PlayerState[];
-    events: Event[]
+    events: Event[];
+    onHover: (userId: number) => void;
+    highlighted: number | null;
 }
 
 export function SpecHUD(props: SpecHUDProps) {
     return (<div class="spechud">
         <KillFeed tick={props.tick} events={props.events} players={props.players}/>
-        <PlayersSpec players={props.players}/>
+        <PlayersSpec players={props.players} onHover={props.onHover} highlighted={props.highlighted}/>
     </div>)
 }
 

style/pages/viewer/PlayerSpec.css

@@ -63,6 +63,7 @@
         width: calc(100% - 42px);
         line-height: 28px;
         font-weight: bold;
+
         & .health {
             position: relative;
             float: right;
@@ -89,30 +90,39 @@
         & .class-icon.scout {
             background-image: url('inline://images/class_portraits/Icon_scout.webp');
         }
+
         & .class-icon.soldier {
             background-image: url('inline://images/class_portraits/Icon_soldier.webp');
         }
+
         & .class-icon.pyro {
             background-image: url('inline://images/class_portraits/Icon_pyro.webp');
         }
+
         & .class-icon.demoman {
             background-image: url('inline://images/class_portraits/Icon_demoman.webp');
         }
+
         & .class-icon.engineer {
             background-image: url('inline://images/class_portraits/Icon_engineer.webp');
         }
+
         & .class-icon.heavy {
             background-image: url('inline://images/class_portraits/Icon_heavy.webp');
         }
+
         & .class-icon.medic {
             background-image: url('inline://images/class_portraits/Icon_medic.webp');
         }
+
         & .class-icon.sniper {
             background-image: url('inline://images/class_portraits/Icon_sniper.webp');
         }
+
         & .class-icon.spy {
             background-image: url('inline://images/class_portraits/Icon_spy.webp');
         }
+
         & .class-icon.uber {
             background-image: url('inline://images/charge_red.svg');
         }
@@ -150,35 +160,48 @@
         & .class-icon.scout {
             background-image: url('inline://images/class_portraits/Icon_scout_blue.webp');
         }
+
         & .class-icon.soldier {
             background-image: url('inline://images/class_portraits/Icon_soldier_blue.webp');
         }
+
         & .class-icon.pyro {
             background-image: url('inline://images/class_portraits/Icon_pyro_blue.webp');
         }
+
         & .class-icon.demoman {
             background-image: url('inline://images/class_portraits/Icon_demoman_blue.webp');
         }
+
         & .class-icon.engineer {
             background-image: url('inline://images/class_portraits/Icon_engineer_blue.webp');
         }
+
         & .class-icon.heavy {
             background-image: url('inline://images/class_portraits/Icon_heavy_blue.webp');
         }
+
         & .class-icon.medic {
             background-image: url('inline://images/class_portraits/Icon_medic_blue.webp');
         }
+
         & .class-icon.sniper {
             background-image: url('inline://images/class_portraits/Icon_sniper_blue.webp');
         }
+
         & .class-icon.spy {
             background-image: url('inline://images/class_portraits/Icon_spy_blue.webp');
         }
+
         & .class-icon.uber {
             background-image: url('inline://images/charge_blue.svg');
         }
     }
 
+    &.highlighted:not(.dead) {
+        outline: white 2px solid;
+    }
+
     &.overhealed {
         & .health {
             color: #79d297;