From afef7dd73511ee41f224838884b629e58c984209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Garapich?= <michal@garapich.pl>
Date: Fri, 13 Dec 2024 11:44:30 +0100
Subject: [PATCH] fix: append game events

---
 src/games/plugins/sync-clients.ts        |  6 +++++-
 src/games/views/html/game-event-list.tsx | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/games/plugins/sync-clients.ts b/src/games/plugins/sync-clients.ts
index 618739ca..e9a05c59 100644
--- a/src/games/plugins/sync-clients.ts
+++ b/src/games/plugins/sync-clients.ts
@@ -41,7 +41,11 @@ export default fp(async app => {
     }
 
     if (before.events.length < after.events.length) {
-      app.gateway.broadcast(async () => await GameEventList({ game: after }))
+      const n = before.events.length - after.events.length
+      const newEvents = after.events.slice(n)
+      for (const event of newEvents) {
+        app.gateway.broadcast(async () => await GameEventList.append({ game: after, event }))
+      }
     }
 
     await Promise.all(
diff --git a/src/games/views/html/game-event-list.tsx b/src/games/views/html/game-event-list.tsx
index 8504312e..d965942b 100644
--- a/src/games/views/html/game-event-list.tsx
+++ b/src/games/views/html/game-event-list.tsx
@@ -24,9 +24,7 @@ const renderedEvents = [
 ]
 
 export async function GameEventList(props: { game: GameModel }) {
-  const events = props.game.events
-    .filter(({ event }) => renderedEvents.includes(event))
-    .toSorted((a, b) => b.at.getTime() - a.at.getTime())
+  const events = props.game.events.toSorted((a, b) => b.at.getTime() - a.at.getTime())
 
   return (
     <div
@@ -42,7 +40,19 @@ export async function GameEventList(props: { game: GameModel }) {
   )
 }
 
+GameEventList.append = function (props: { game: GameModel; event: GameEventModel }) {
+  return (
+    <div id={`game-${props.game.number}-event-list`} hx-swap-oob="afterbegin">
+      <GameEvent {...props} />
+    </div>
+  )
+}
+
 function GameEvent(props: { event: GameEventModel; game: GameModel }) {
+  if (!renderedEvents.includes(props.event.event)) {
+    return <></>
+  }
+
   return (
     <div
       class={[