prevent animation glitch by queueing packets on the client

1 files changed, 35 insertions, 26 deletions

diff --git a/src/spectate/main.ts b/src/spectate/main.ts
index b92e5be..567c75e 100644
--- a/src/spectate/main.ts
+++ b/src/spectate/main.ts
@@ -124,35 +124,44 @@ function name_color(name: string): string {
 ws.onerror = console.error
 ws.onmessage = message => {
     const p = JSON.parse(message.data) as Packet
-    if (p == "tick") {
-        tick_anim = 0
-        const d = []
-        for (const [k, s] of snakes) {
-            if (s.dead) d.push(k)
-        }
-        d.forEach(k => snakes.delete(k))
-    } else if ("game" in p) {
-        snakes.clear()
-        update_stats()
-        size = p.game.width
-    } else if ("win" in p) {
-        const winner = snakes.get(p.win[0])?.name;
-        if (winner) chat(`${winner} won this round.`, "win")
-        else chat(`round ended in a tie.`, "tie")
-    } else if ("player" in p) {
-        snakes.set(p.player.id, new Snake(p.player.name))
-    } else if ("pos" in p) {
-        snakes.get(p.pos.id)?.add_part(p.pos.x, p.pos.y)
-    } else if ("die" in p) {
-        chat(`${p.die.map(e => snakes.get(e)?.name).join(", ")} died.`, "die")
-        for (const d of p.die) {
-            const s = snakes.get(d)
-            if (s) s.dead = true
-        }
-    } else if ("message" in p) {
+    packet_queue.push(p)
+    if (p == "tick") process_packets()
+    else if ("message" in p) {
         chat(`${snakes.get(p.message.id)?.name}: ${p.message.message}`)
     }
 }
+let packet_queue: Packet[] = []
+function process_packets() {
+    for (const p of packet_queue) {
+        if (p == "tick") {
+            tick_anim = 0
+            const d = []
+            for (const [k, s] of snakes) {
+                if (s.dead) d.push(k)
+            }
+            d.forEach(k => snakes.delete(k))
+        } else if ("game" in p) {
+            snakes.clear()
+            update_stats()
+            size = p.game.width
+        } else if ("win" in p) {
+            const winner = snakes.get(p.win[0])?.name;
+            if (winner) chat(`${winner} won this round.`, "win")
+            else chat(`round ended in a tie.`, "tie")
+        } else if ("player" in p) {
+            snakes.set(p.player.id, new Snake(p.player.name))
+        } else if ("pos" in p) {
+            snakes.get(p.pos.id)?.add_part(p.pos.x, p.pos.y)
+        } else if ("die" in p) {
+            chat(`${p.die.map(e => snakes.get(e)?.name).join(", ")} died.`, "die")
+            for (const d of p.die) {
+                const s = snakes.get(d)
+                if (s) s.dead = true
+            }
+        }
+    }
+    packet_queue = []
+}
 
 const chat_history: HTMLElement[] = [];
 function chat(message: string, clas = "chat") {