Repository navigation
Add shared modern-game design, apply to modern games, and update tests - #56
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 76d5f4653f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .modern-game h1,.modern-game h2,.modern-game .score strong,.modern-game .stats strong{font-family:inherit;font-weight:950}.modern-game h1{letter-spacing:-.065em}.modern-game .intro>div:first-child{position:relative}.modern-game .intro>div:first-child::after{position:absolute;top:2px;right:-54px;color:var(--game-pop);content:"✦";font-size:42px;transform:rotate(14deg)} | ||
| .modern-game .scoreboard,.modern-game .stats,.modern-game .game-card,.modern-game .controls>:where(.online-panel,.power-guide),.modern-game .modal-card{background:var(--panel-surface);border:3px solid var(--ink);border-radius:22px;box-shadow:7px 7px 0 var(--ink),0 22px 60px var(--game-shadow);backdrop-filter:blur(14px)}.modern-game .stats{padding:18px 22px} | ||
| .modern-game .arena-wrap,.modern-game .board-wrap,.modern-game .board:not(.arena-wrap .board){border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink),0 22px 55px var(--game-shadow)} | ||
| .modern-game :where(.primary-button,.secondary-button,.tool,.number,.flag-toggle,.icon-button,select,.mode-switch,.player-color,.touch-controls button){border-radius:12px}.modern-game .primary-button{color:#fff;background:var(--accent);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:900}.modern-game .primary-button:hover{background:var(--game-pop);box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.modern-game .secondary-button,.modern-game .tool,.modern-game .flag-toggle,.modern-game select{border:2px solid var(--ink);background:var(--card);font-weight:800}.modern-game .mode-switch{padding:5px;border:2px solid var(--ink)}.modern-game .mode-switch button[aria-pressed="true"]{color:#251500;background:var(--game-spark);box-shadow:2px 2px 0 var(--ink)}.modern-game :where(button,a,select):focus-visible{outline:4px solid var(--game-sky);outline-offset:3px} |
There was a problem hiding this comment.
When a completed Pong or Battle Tanks match reveals the .arena-share.primary-button, this more-specific hover rule replaces the button's entire translate(-50%,-2px) transform with translate(2px,2px). Because the button is positioned at left:50%, hovering it makes it jump roughly half its width to the right; retain the horizontal -50% translation for arena share buttons.
Useful? React with 👍 / 👎.
| .modern-game .eyebrow{display:inline-block;margin-bottom:14px;padding:7px 12px;color:#251500;background:var(--game-spark);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:900} | ||
| .modern-game h1,.modern-game h2,.modern-game .score strong,.modern-game .stats strong{font-family:inherit;font-weight:950}.modern-game h1{letter-spacing:-.065em}.modern-game .intro>div:first-child{position:relative}.modern-game .intro>div:first-child::after{position:absolute;top:2px;right:-54px;color:var(--game-pop);content:"✦";font-size:42px;transform:rotate(14deg)} | ||
| .modern-game .scoreboard,.modern-game .stats,.modern-game .game-card,.modern-game .controls>:where(.online-panel,.power-guide),.modern-game .modal-card{background:var(--panel-surface);border:3px solid var(--ink);border-radius:22px;box-shadow:7px 7px 0 var(--ink),0 22px 60px var(--game-shadow);backdrop-filter:blur(14px)}.modern-game .stats{padding:18px 22px} | ||
| .modern-game .arena-wrap,.modern-game .board-wrap,.modern-game .board:not(.arena-wrap .board){border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink),0 22px 55px var(--game-shadow)} |
There was a problem hiding this comment.
When Pong or Battle Tanks enters native :fullscreen or the .is-fullscreen fallback, this rule is loaded after styles/game.css and has equal specificity to the rules that set border:0 and border-radius:0. It therefore restores a 3px border, rounded corners, and a shadow on the viewport-sized arena, leaving the full-screen game framed and its corners clipped; exclude both full-screen states from this shared arena decoration.
Useful? React with 👍 / 👎.
Motivation
modern-gameclass to simplify maintenance.Description
styles/modern-game.cssthat contains shared tokens, layout, and component rules for the modern game shell.pong,tictactoe,battle-tanks,Sudoku,Minesweeper) to load../styles/modern-game.cssand addclass="modern-game game-<name>"to the<body>element.index.htmlto declare--brand-startand--brand-endcolor variables and use them in the.brand-markgradient.@importlines from per-game CSS files and tweak shared game CSS tokens; update tests to validate design inclusion and brand contrast (tests/homepage-theme.test.jsandtests/shared-game-assets.test.js).Testing
tests/homepage-theme.test.jsandtests/shared-game-assets.test.js.--brand-start/--brand-end, the gradient usage, contrast ratio expectations for the brand stops, and that each modern game loadsstyles/modern-game.cssand sets themodern-gamebody class.Codex Task