add an animation to score changes

public/monitor.js

@@ -5,7 +5,6 @@ const location = document.location
 const performance = window.performance
 
 import {
-  clear,
   Connection,
   ms_ns,
   node,
@@ -15,9 +14,7 @@ import {
   session_url,
 } from "./shared.js"
 
-let conn,
-  clients = {},
-  me
+let conn
 
 function setup_url() {
   const sid = session_id() || ""
@@ -60,20 +57,38 @@ function test_prettynum() {
 test_prettynum()
 
 const player_list = q("#players")
-function redraw_clients(me, clients) {
+function _redraw_clients(me, clients) {
   if (!me) {
     return
   }
-  clear(player_list)
+
+  // Remove all gone players.
+  const client_ids = clients.map((c) => "" + c.id)
+  for (const el of player_list.querySelectorAll(".player")) {
+    if (!client_ids.includes(el.dataset.cid)) {
+      el.remove()
+    }
+  }
+
   const player_tpl = q("template#player").content.firstElementChild
-  for (const c of Object.values(clients)) {
+  for (const c of clients) {
     if (c.id === me.id) {
       continue
     }
-    const player_el = node(player_tpl.cloneNode(true), {
-      data: { cid: c.id },
-      appendTo: player_list,
-    })
+    let player_el = q(`.player[data-cid='${c.id}']`)
+    if (!player_el) {
+      player_el = node(player_tpl.cloneNode(true), {
+        data: { cid: c.id },
+        appendTo: player_list,
+      })
+    } else if (q(".points", player_el).textContent !== prettynum(c.points)) {
+      q(".points.fg", player_el).classList.add("big")
+      q(".points.bg", player_el).classList.add("big")
+      setTimeout(() => {
+        q(".points.fg", player_el).classList.remove("big")
+        q(".points.bg", player_el).classList.remove("big")
+      }, 200)
+    }
     q(".name", player_el).textContent = c.name
     q(".points.fg", player_el).textContent = prettynum(c.points)
     q(".points.bg", player_el).textContent = prettynum(c.points)
@@ -81,6 +96,21 @@ function redraw_clients(me, clients) {
   }
 }
 
+function debounce(func, ms) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      timer = null
+      func(...args)
+    }, ms)
+  }
+}
+
+const redraw_clients = debounce(_redraw_clients, 200)
+
 let highlighted = false
 function highlight(client_id, until_ns) {
   if (highlighted) {
@@ -105,6 +135,8 @@ function highlight(client_id, until_ns) {
 }
 
 function setup_ws() {
+  let clients = [],
+    me
   const sid = session_id()
   conn = new Connection()
   conn.on("helo", () => {
@@ -121,11 +153,16 @@ function setup_ws() {
     highlight(client_id, until_ns)
   })
   conn.on("clients", ({ value }) => {
-    clients = Object.fromEntries(value.clients.map((c) => [c.id, c]))
+    clients = value.clients
     redraw_clients(me, clients)
   })
   conn.on("client", ({ value: { client } }) => {
-    clients[client.id] = client
+    const idx = clients.findIndex((c) => c.id === client.id)
+    if (idx >= 0) {
+      clients[idx] = client
+    } else {
+      clients.push(client)
+    }
     redraw_clients(me, clients)
   })
   conn.on("control", ({ value }) => {