Retro pixel art / 8-bit arcade reskin#29
Conversation
- Replace Google Fonts (Baloo 2, Poppins) with Press Start 2P pixel font - Update color palette to Game Boy-inspired greens (#0f380f, #306230, #9bbc0f, #8bac0f) - Remove all border-radius for blocky/pixelated shapes - Add pixel-style borders and box shadows to cells, keys, modals, alerts - Replace smooth CSS animations with stepped (steps()) timing functions - Use scaleY instead of rotateX for retro cell reveal animations - Add active press effect on keyboard keys and share button - Add retro border accents to header and container - Update page title to WORDLE ARCADE - Fix useEffect dependency array in Keyboard component Co-Authored-By: Matthew Guerra <matthew.guerra@cognition.ai>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
![staging-devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/870844?s=60&v=4){kind=small}
| --color-background: #0f380f; | ||
| --color-cell: #306230; | ||
| --color-key: #306230; | ||
| --color-key-text: #9bbc0f; | ||
| --color-key-secondary: #9bbc0f; | ||
| --color-text-primary: #9bbc0f; | ||
| --color-text-secondary: #8bac0f; | ||
| --color-icon: #9bbc0f; |
There was a problem hiding this comment.
🟡 Dark-mode toggle now leaves the palette unchanged
The default theme variables and the [data-theme='dark'] overrides now use the same values for every theme color, so toggling dark mode no longer changes the computed palette. App still exposes the setting and toggles data-theme='dark' on the body (src/App.jsx:94-96), but with this block the visible dark/light mode feature becomes a no-op.
Prompt for agents
The dark-mode setting is still wired in App.jsx via handleDarkMode and the data-theme attribute, but src/App.module.scss now defines the same palette for the default variables and the [data-theme='dark'] override. Decide whether the app should continue supporting a distinct light/dark mode. If so, restore a distinct set of variables for one of the modes; if the arcade palette is intended to be the only theme, remove or disable the dark-mode setting so users are not offered a toggle that has no effect.
Was this helpful? React with 👍 or 👎 to provide feedback.
Debug
| .fade-exit-active { | ||
| opacity: 0; | ||
| transition: opacity 300ms; | ||
| transition: opacity 150ms steps(3); |
There was a problem hiding this comment.
🟡 Shortened fade transitions leave invisible modal overlays mounted
The fade transition duration was reduced to 150ms, but the CSSTransition components still use timeout={300} (src/components/Modal/Modal.jsx:13 and src/components/Alert/Alert.jsx:17-21). When a modal closes, it reaches opacity: 0 after 150ms but the full-screen .modalContainer remains mounted until the 300ms timeout expires, creating an invisible overlay that can intercept clicks for the extra 150ms on every modal close.
Prompt for agents
The CSS transition durations in src/styles/_transitionStyles.scss were changed from 300ms to 150ms, while the CSSTransition timeout props in src/components/Modal/Modal.jsx and src/components/Alert/Alert.jsx remain 300. Keep these durations in sync. Either update the relevant CSSTransition timeout values to 150ms, or restore the CSS transition durations to 300ms if the longer timeout is intentional.
Was this helpful? React with 👍 or 👎 to provide feedback.
Debug
Test Results — Retro Pixel Art ReskinRan production build locally at Test Results (6/6 passed)
ScreenshotsMain board: Cell reveal after submitting "CRANE": Zoomed cells — square corners, pixel font, status colors: Error alert: Info modal: Settings modal: High Contrast Mode — R cell is orange: |
1 participant
Summary
Complete visual transformation of the Wordle app into a retro pixel art / 8-bit arcade style, replacing the modern design entirely.
Visual changes:
#0f380f,#306230,#9bbc0f,#8bac0f)border-radiusfor blocky, pixelated shapessolidwith--color-border) and retro box shadows to cells, keyboard keys, modals, alerts, buttonssteps()timing functions for choppy retro feelrotateX(3D flip) toscaleY(2D squash) for retro effect:activepress effect on keyboard keys and share button (translate + shadow shift)Bug fix:
useEffectdependency array inKeyboard.jsx([onEnter, onDelete, onKeyDown])Files changed (14):
public/index.html,src/App.module.scss, all component SCSS modules (Cell, Grid, Keyboard, Header, Modal, Alert, Switch, InfoModal, SettingModal, StatsModal),src/styles/_transitionStyles.scss,src/components/Keyboard/Keyboard.jsxReview & Testing Checklist for Human
Notes
data-theme='dark'selector is preserved for compatibility.image-rendering: pixelatedis applied to body and cells for crisp pixel rendering.remvalues compared to Baloo 2.Link to Devin session: https://app.devin.ai/sessions/04e63809ddb94099adc8edd229bd594d
Requested by: @matthewguerra-cog
Devin Review
9a723bb