feat(rithmomachia): add 80% opacity to guide modal when not hovered

Guide modal now displays at 80% opacity on desktop to allow seeing the game
board behind it. Opacity increases to 100% when hovering over the modal.

Behavior:
- Desktop (≥768px): 80% opacity when not hovered, 100% when hovered
- Mobile (<768px): Always 100% opacity
- Standalone window: Always 100% opacity
- Smooth 0.2s transition between states

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-11-02 07:17:33 -06:00
parent ee8d2aba82
commit 4a78485d2e

View File

@@ -300,6 +300,9 @@ export function PlayingGuideModal({ isOpen, onClose, standalone = false }: Playi
height: `${size.height}px`,
zIndex: Z_INDEX.MODAL,
}),
// 80% opacity on desktop when not hovered, full opacity otherwise
opacity: !standalone && window.innerWidth >= 768 && !isHovered ? 0.8 : 1,
transition: 'opacity 0.2s ease',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}