spectator see names

1 files changed, 26 insertions, 3 deletions

diff --git a/src/spectate/main.ts b/src/spectate/main.ts
index 422a2c6..ea84924 100644
--- a/src/spectate/main.ts
+++ b/src/spectate/main.ts
@@ -70,7 +70,7 @@ function redraw() {
             }
             ctx.lineCap = "round"
             ctx.lineJoin = "round"
-            if (snake.dead) ctx.lineWidth = tick_lerp(0.6, 0)
+            if (snake.dead) ctx.lineWidth = tick_lerp(0.6, 0.001)
             else ctx.lineWidth = 0.6;
             ctx.strokeStyle = snake.color
             ctx.stroke()
@@ -78,6 +78,26 @@ function redraw() {
         ctx.restore()
     }
     ctx.restore()
+
+    ctx.save()
+    ctx.translate(scale / 2, scale / 4)
+    for (const [xo, yo] of [[0, 0], [-size * scale, 0], [size * scale, 0], [0, -size * scale], [0, size * scale]]) {
+        ctx.save()
+        ctx.translate(xo, yo)
+        for (const snake of snakes.values()) {
+            const p = snake.parts[snake.parts.length - 1];
+            if (!p) continue
+            ctx.font = "30px sans-serif"
+            if (snake.dead) ctx.fillStyle = `rgba(1,1,1,${tick_lerp(1, 0)})`
+            else ctx.fillStyle = "white"
+            ctx.textAlign = "center"
+            ctx.textBaseline = "bottom"
+            ctx.fillText(snake.name, tick_lerp(p.x - p.dx, p.x) * scale, tick_lerp(p.y - p.dy, p.y) * scale)
+        }
+        ctx.restore()
+    }
+    ctx.restore()
+
     tick_anim += 0.1
     tick_anim = Math.min(1, tick_anim)
     requestAnimationFrame(redraw)
@@ -90,10 +110,13 @@ function tick_lerp(f: number, t: number) {
 function name_color(name: string): string {
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
-        hash = ((hash << 5) - hash) + name.charCodeAt(i);
+        hash += name.charCodeAt(i);
         hash |= 0;
+        hash ^= hash << 13;
+        hash ^= hash >> 17;
+        hash ^= hash << 5;
     }
-    return `hsl(${hash % 360}deg 100% 50%)`;
+    return `hsl(${hash % 360}deg 80% 40%)`;
 }
 
 ws.onerror = console.error