feat: game live indicator

src/games/plugins/update-clients.ts

@@ -11,6 +11,8 @@ import { LogsLink } from '../views/html/logs-link'
 import { PlayerConnectionStatusIndicator } from '../views/html/player-connection-status-indicator'
 import { GameEventList } from '../views/html/game-event-list'
 import { GameSlot } from '../views/html/game-slot'
+import { whenGameEnds } from '../when-game-ends'
+import { GamesLink } from '../../html/components/games-link'
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export default fp(async app => {
@@ -44,6 +46,18 @@ export default fp(async app => {
     }
   })
 
+  events.on('game:created', async () => {
+    const cmp = await GamesLink()
+    app.gateway.broadcast(() => cmp)
+  })
+
+  events.on('game:updated', d =>
+    whenGameEnds(d, async () => {
+      const cmp = await GamesLink()
+      app.gateway.broadcast(() => cmp)
+    }),
+  )
+
   events.on('match/player:connected', async ({ steamId }) => {
     const player = await collections.players.findOne({ steamId })
     if (!player) {

src/games/when-game-ends.ts

@@ -0,0 +1,19 @@
+import { GameState } from '../database/models/game.model'
+import type { Events } from '../events'
+
+type EventProps = Events['game:updated']
+
+export async function whenGameEnds(
+  { before, after }: EventProps,
+  fn: (props: EventProps) => Promise<void> | void,
+) {
+  if (
+    before.state !== after.state &&
+    [GameState.created, GameState.configuring, GameState.launching, GameState.started].includes(
+      before.state,
+    ) &&
+    [GameState.ended, GameState.interrupted].includes(after.state)
+  ) {
+    await fn({ before, after })
+  }
+}

src/html/components/games-link.tsx

@@ -0,0 +1,17 @@
+import { collections } from '../../database/collections'
+import { GameState } from '../../database/models/game.model'
+import { GameLiveIndicator } from './game-live-indicator'
+
+export async function GamesLink() {
+  const gamesLiveCount = await collections.games.countDocuments({
+    state: {
+      $in: [GameState.created, GameState.configuring, GameState.launching, GameState.started],
+    },
+  })
+  return (
+    <a href="/games" class={['menu-item', gamesLiveCount > 0 && 'accent']} id="navbar-games-link">
+      {gamesLiveCount > 0 ? <GameLiveIndicator /> : <></>}
+      Games
+    </a>
+  )
+}

src/html/components/navigation-bar.tsx

@@ -1,4 +1,5 @@
 import type { User } from '../../auth/types/user'
+import { GamesLink } from './games-link'
 import { IconBrandDiscord, IconChartPie, IconCrown, IconHeart } from './icons'
 import { IconBrandSteam } from './icons/icon-brand-steam'
 import { Profile } from './profile'
@@ -29,7 +30,7 @@ function Menu(props: Html.PropsWithChildren<{ user?: User | undefined }>) {
 
   return (
     <div class="flex flex-col gap-[10px] px-4 lg:flex-row lg:items-center lg:px-0">
-      <MenuItem href="/games">Games</MenuItem>
+      <GamesLink />
       <MenuItem href="/players">Players</MenuItem>
       <MenuItem href="/rules">Rules</MenuItem>
 

src/main.css

@@ -152,6 +152,10 @@ dialog::backdrop {
   &.active {
     background-color: theme(colors.abru.dark.20);
   }
+
+  &.accent {
+    color: theme(colors.accent.DEFAULT);
+  }
 }
 
 .profile-menu-item {