fix: append game events (#108)

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(

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={[