highlight ubered players

package-lock.json

@@ -6,7 +6,7 @@
     "": {
       "dependencies": {
         "@demostf/edit": "0.2.0",
-        "@demostf/tf-demos-viewer": "^0.2.1",
+        "@demostf/tf-demos-viewer": "^0.2.3",
         "@lutaok/solid-modal": "^0.1.1",
         "@solid-primitives/autofocus": "^0.0.111",
         "@solid-primitives/keyboard": "^1.2.8",
@@ -23,9 +23,9 @@
       "integrity": "sha512-s9wk3QVm+aTpMhIyfdGIHRm5qHp7FQ1dq/Jn0fms+lXsB1xY3wgjfWH+5gwRjjo/Dd3UMNM0o3atjO2uh+CxOQ=="
     },
     "node_modules/@demostf/tf-demos-viewer": {
-      "version": "0.2.1",
+      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.3.tgz",
-      "integrity": "sha512-YDDi+hBMWYpVimQ4Y2YAnm7yAuFpRpmf8ZSgKBAdpSfUUSKVnlYuVeri4yZIYOHS2fLRYUAg2OH5J/ejumiOlg=="
+      "integrity": "sha512-pN+D6qKy+qy835ituO5DJ8zHGOdX7/ubwXpwWST0ae3u1QARegw/KdJzKrvhU47hLzn5zp1uUgRWqZdOReBckw=="
     },
     "node_modules/@lutaok/solid-modal": {
       "version": "0.1.1",

package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@demostf/edit": "0.2.0",
-    "@demostf/tf-demos-viewer": "^0.2.1",
+    "@demostf/tf-demos-viewer": "^0.2.3",
     "@lutaok/solid-modal": "^0.1.1",
     "@solid-primitives/autofocus": "^0.0.111",
     "@solid-primitives/keyboard": "^1.2.8",

script/viewer/Analyse/Data/Parser.ts

@@ -168,6 +168,7 @@ export interface PlayerState {
     playerClass: Class,
     info: PlayerInfo,
     charge: number,
+    ubered: boolean,
 }
 
 export interface BuildingState {
@@ -290,7 +291,8 @@ function unpackPlayer(bytes: Uint8Array, base: number, world: WorldBoundaries, i
     const y = unpack_f32(bytes[base + 2] + (bytes[base + 3] << 8), world.boundary_min.y, world.boundary_max.y);
     const team_class_health = bytes[base + 4] + (bytes[base + 5] << 8);
     const angle = unpack_angle(bytes[base + 6]);
-    const health = team_class_health & 1013;
+    const ubered = (team_class_health & 1) == 1;
+    const health = (team_class_health >> 1) & 511;
     const team = (team_class_health >> 14) as Team;
     const playerClass = ((team_class_health >> 10) & 15) as Class;
     const charge = bytes[base + 7];
@@ -302,7 +304,8 @@ function unpackPlayer(bytes: Uint8Array, base: number, world: WorldBoundaries, i
         team,
         playerClass,
         info,
-        charge
+        charge,
+        ubered,
     }
 }
 

script/viewer/Analyse/MapRender.tsx

@@ -30,6 +30,29 @@ export function MapRender(props: MapRenderProps) {
     return (
         <svg class="map-background" width={props.size.width} height={props.size.height}
              style={{"background-image": background}}>
+            <defs>
+                <filter id="sofGlowRed" height="300%" width="300%" x="-75%" y="-75%">
+                    <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"/>
+                    <feGaussianBlur in="thicken" stdDeviation="5" result="blurred"/>
+                    <feFlood flood-color="rgb(255,52,0)" result="glowColor"/>
+                    <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored"/>
+                    <feMerge>
+                        <feMergeNode in="softGlow_colored"/>
+                        <feMergeNode in="SourceGraphic"/>
+                    </feMerge>
+                </filter>
+                <filter id="sofGlowBlue" height="300%" width="300%" x="-75%" y="-75%">
+                    <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"/>
+                    <feGaussianBlur in="thicken" stdDeviation="5" result="blurred"/>
+                    <feFlood flood-color="rgb(0,186,255)" result="glowColor"/>
+                    <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored"/>
+                    <feMerge>
+                        <feMergeNode in="softGlow_colored"/>
+                        <feMergeNode in="SourceGraphic"/>
+                    </feMerge>
+                </filter>
+            </defs>
+
             <For each={props.players}>{(player) =>
                 <Show when={player.health}>
                     <PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}

script/viewer/Analyse/Render/Player.tsx

@@ -51,6 +51,9 @@ export function Player(props: PlayerProp) {
     const imageOpacity = () => props.player.health === 0 ? 0 : (1 + alpha()) / 2;
     const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
     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)}
@@ -59,8 +62,10 @@ export function Player(props: PlayerProp) {
         <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" fill={teamColor()}
+        <circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white"
+                fill={teamColor()}
                 opacity={alpha()}
+                filter={filter()}
         />
         {getClassImage(props.player, imageOpacity())}
     </g>