From 709322373a91c8174d21052d184fa84dd8bda326 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 30 Oct 2025 04:39:00 -0500
Subject: [PATCH] fix(rithmomachia): adjust roster notice position to not
 overlap nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move notice from top: 80px to top: 180px
- Use Z_INDEX.GAME.OVERLAY instead of hardcoded value
- Ensures game nav and player list remain visible

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/.claude/settings.local.json          |  7 +-
 .../components/RithmomachiaGame.tsx           |  4 +-
 .../src/components/nav/ActivePlayersList.tsx  |  9 ++-
 .../web/src/components/nav/GameContextNav.tsx | 28 +++----
 .../components/nav/NetworkPlayerIndicator.tsx | 76 ++++++++++---------
 apps/web/src/components/nav/types.ts          |  1 -
 6 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/apps/web/.claude/settings.local.json b/apps/web/.claude/settings.local.json
index 999e2b58..a92abdcc 100644
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -111,13 +111,12 @@
       "mcp__sqlite__list_tables",
       "mcp__sqlite__describe_table",
       "mcp__sqlite__read_query",
-      "Bash(git rebase:*)"
+      "Bash(git rebase:*)",
+      "Bash(gh run watch:*)"
     ],
     "deny": [],
     "ask": []
   },
   "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "sqlite"
-  ]
+  "enabledMcpjsonServers": ["sqlite"]
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
index c11f2872..843cd702 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
@@ -340,7 +340,7 @@ function RosterStatusNotice({ phase }: { phase: 'setup' | 'playing' }) {
     <div
       className={css({
         position: 'fixed',
-        top: '80px',
+        top: '180px',
         left: '50%',
         transform: 'translateX(-50%)',
         width: '90%',
@@ -352,7 +352,7 @@ function RosterStatusNotice({ phase }: { phase: 'setup' | 'playing' }) {
         p: '4',
         borderRadius: 'md',
         boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-        zIndex: 1000,
+        zIndex: Z_INDEX.GAME.OVERLAY,
       })}
     >
       <div>
diff --git a/apps/web/src/components/nav/ActivePlayersList.tsx b/apps/web/src/components/nav/ActivePlayersList.tsx
index ae326430..586ec92d 100644
--- a/apps/web/src/components/nav/ActivePlayersList.tsx
+++ b/apps/web/src/components/nav/ActivePlayersList.tsx
@@ -174,7 +174,9 @@ export function ActivePlayersList({
                       boxShadow: badge.shadowColor
                         ? `0 4px 12px ${badge.shadowColor}`
                         : '0 4px 12px rgba(15, 23, 42, 0.25)',
-                      border: badge.borderColor ? `2px solid ${badge.borderColor}` : '2px solid rgba(255,255,255,0.4)',
+                      border: badge.borderColor
+                        ? `2px solid ${badge.borderColor}`
+                        : '2px solid rgba(255,255,255,0.4)',
                       backdropFilter: 'blur(4px)',
                       marginTop: '6px',
                       whiteSpace: 'nowrap',
@@ -183,7 +185,10 @@ export function ActivePlayersList({
                     {badge.icon && (
                       <span
                         aria-hidden
-                        style={{ fontSize: '14px', filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))' }}
+                        style={{
+                          fontSize: '14px',
+                          filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))',
+                        }}
                       >
                         {badge.icon}
                       </span>
diff --git a/apps/web/src/components/nav/GameContextNav.tsx b/apps/web/src/components/nav/GameContextNav.tsx
index ff88f1d0..0ba3ad66 100644
--- a/apps/web/src/components/nav/GameContextNav.tsx
+++ b/apps/web/src/components/nav/GameContextNav.tsx
@@ -284,20 +284,20 @@ export function GameContextNav({
                   margin: '0 4px',
                 }}
               />
-          {networkPlayers.map((player) => (
-            <NetworkPlayerIndicator
-              key={player.id}
-              player={player}
-              shouldEmphasize={shouldEmphasize}
-              currentPlayerId={currentPlayerId}
-              playerScores={playerScores}
-              playerStreaks={playerStreaks}
-              playerBadges={playerBadges}
-              roomId={roomInfo?.roomId}
-              currentUserId={currentUserId ?? undefined}
-              isCurrentUserHost={isCurrentUserHost}
-            />
-          ))}
+              {networkPlayers.map((player) => (
+                <NetworkPlayerIndicator
+                  key={player.id}
+                  player={player}
+                  shouldEmphasize={shouldEmphasize}
+                  currentPlayerId={currentPlayerId}
+                  playerScores={playerScores}
+                  playerStreaks={playerStreaks}
+                  playerBadges={playerBadges}
+                  roomId={roomInfo?.roomId}
+                  currentUserId={currentUserId ?? undefined}
+                  isCurrentUserHost={isCurrentUserHost}
+                />
+              ))}
             </>
           )}
         </div>
diff --git a/apps/web/src/components/nav/NetworkPlayerIndicator.tsx b/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
index 8e9ed509..926ee092 100644
--- a/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
+++ b/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
@@ -256,45 +256,47 @@ export function NetworkPlayerIndicator({
           `,
               }}
             />
+          </div>
+
+          {badge && (
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '6px',
+                padding: '4px 10px',
+                borderRadius: '999px',
+                background: badge.background ?? 'rgba(148, 163, 184, 0.25)',
+                color: badge.color ?? '#0f172a',
+                fontSize: '11px',
+                fontWeight: 700,
+                letterSpacing: '0.04em',
+                textTransform: 'uppercase',
+                boxShadow: badge.shadowColor
+                  ? `0 4px 12px ${badge.shadowColor}`
+                  : '0 4px 12px rgba(15, 23, 42, 0.25)',
+                border: badge.borderColor
+                  ? `2px solid ${badge.borderColor}`
+                  : '2px solid rgba(255,255,255,0.4)',
+                backdropFilter: 'blur(4px)',
+                marginTop: '6px',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {badge.icon && (
+                <span
+                  aria-hidden
+                  style={{ fontSize: '14px', filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))' }}
+                >
+                  {badge.icon}
+                </span>
+              )}
+              <span>{badge.label}</span>
             </div>
+          )}
 
-            {badge && (
-              <div
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '6px',
-                  padding: '4px 10px',
-                  borderRadius: '999px',
-                  background: badge.background ?? 'rgba(148, 163, 184, 0.25)',
-                  color: badge.color ?? '#0f172a',
-                  fontSize: '11px',
-                  fontWeight: 700,
-                  letterSpacing: '0.04em',
-                  textTransform: 'uppercase',
-                  boxShadow: badge.shadowColor
-                    ? `0 4px 12px ${badge.shadowColor}`
-                    : '0 4px 12px rgba(15, 23, 42, 0.25)',
-                  border: badge.borderColor ? `2px solid ${badge.borderColor}` : '2px solid rgba(255,255,255,0.4)',
-                  backdropFilter: 'blur(4px)',
-                  marginTop: '6px',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {badge.icon && (
-                  <span
-                    aria-hidden
-                    style={{ fontSize: '14px', filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))' }}
-                  >
-                    {badge.icon}
-                  </span>
-                )}
-                <span>{badge.label}</span>
-              </div>
-            )}
-
-            {/* Turn label */}
-            {isCurrentPlayer && hasGameState && (
+          {/* Turn label */}
+          {isCurrentPlayer && hasGameState && (
             <div
               style={{
                 fontSize: '12px',
diff --git a/apps/web/src/components/nav/types.ts b/apps/web/src/components/nav/types.ts
index 4b4dd2b5..7b1ab4c0 100644
--- a/apps/web/src/components/nav/types.ts
+++ b/apps/web/src/components/nav/types.ts
@@ -6,4 +6,3 @@ export interface PlayerBadge {
   borderColor?: string
   shadowColor?: string
 }
-