antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rithmomachia): adjust roster notice position to not overlap nav 

- 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>
This commit is contained in:
Thomas Hallock 2025-10-30 04:39:00 -05:00
parent cfffaace1e
commit 709322373a
6 changed files with 65 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/.claude/settings.local.json
View File

@ -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"]
}

4
apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
View File

@ -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>

9
apps/web/src/components/nav/ActivePlayersList.tsx
View File

@ -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>

28
apps/web/src/components/nav/GameContextNav.tsx
View File

@ -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>

76
apps/web/src/components/nav/NetworkPlayerIndicator.tsx
View File

@ -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',

1
apps/web/src/components/nav/types.ts
View File

@ -6,4 +6,3 @@ export interface PlayerBadge {
borderColor?: string
shadowColor?: string
}