From 4a78485d2e20f2cbf36cc898a1beafa8eb48bfbf Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Sun, 2 Nov 2025 07:17:33 -0600 Subject: [PATCH] feat(rithmomachia): add 80% opacity to guide modal when not hovered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../arcade-games/rithmomachia/components/PlayingGuideModal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx index a7cac0b7..609b3642 100644 --- a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx +++ b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx @@ -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)}