ChromaDaily

One color. One day. Infinite streaks

Comment

Inspiration

We live in a world saturated with digital interfaces, yet very few developers or designers truly understand color mechanics—such as the relationships of light, saturation bounds, and composite color systems. Wordle revolutionized daily micro-habits, but we wanted to build something highly interactive that gamified the actual science of typography, art, and graphic design rules. We asked ourselves: Can we create an immersive daily ritual that calibrates a digital artist's eye using raw spatial coordinates and real-time RGB mechanics? Thus, ChromaDaily was born.

What it does

ChromaDaily is a high-octane, daily color calibration ritual where players match a procedurally generated target RGB color value across 5 increasingly complex levels of color theory: Level 1 — Hue Match: Learn to identify pure spectral angles (primary & secondary hues). Level 2 — Saturation Match: Coordinate both hue angles and desaturation radii. Level 3 — Complementary Match: Identify opposite complementary nodes across the color spectrum. Level 4 — Analogous Match: Align neighbor coordinates on the color wheel. Level 5 — Triadic Match: Synthesize three corner color alignments synchronously.

Game Mechanics & Global Leaderboards:

Precision and Speed: Each level allows up to 3 strategic guesses. Players are automatically timed using an active running background stopwatch. Global Ranking Hierarchy: Players are ranked on the global daily dashboard by their average alignment accuracy, total time elapsed, and total guesses. This adds an intense competitive speedrunner angle! Acoustic & Particle Feedback: Features immersive sound effects and responsive canvas particle explosions on high-accuracy matching.

How we built it

We combined the reactive capabilities of React with the raw drawing power of Phaser 3. Phaser React Bridge: We built an active coordinate mapping bridge in Phaser that listens to mouse drag coordinates on standard canvas circles, translates the angles into HSV, transforms them into target RGB vectors, and relays the state back to React in real time. Server-Authoritative Score Management: Rather than letting clients manage scores, we built an Express backend that stores the daily target color securely. The scoreboard aggregates average accuracy and elapsed stopwatch time, ranking users lexicographically (higher accuracy first, lower time second). State-of-the-Art Typography & Spacing: Styled with professional dark mode glassmorphism panels using tailwind utilities, paired with Space Grotesk and JetBrains Mono font layers to mimic telemetry HUD consoles.

Challenges we ran into

Phaser and React State Synchronization: Keeping Phaser’s internal game state perfectly in sync with React’s modular state transitions was exceptionally tricky. We solved this by using a persistent propsRef pointer updating Phaser in real-time within its update scenes rather than rebuilding the canvas instance. The Sandboxed WebSocket Ingress Bug: During the live development loop in isolated security sandboxes, browser Vite HMR would throw sudden unhandled rejections like Error: WebSocket closed without opened. We resolved this cleanly by writing a global runtime interception harness in our main.tsx entry file. It intercepts and silences harmless development hot-reload rejections from disrupting the main game scene. Time Tracking Sync: Ensuring the stopwatch didn't drift during level progression or component shifts. We structured an active timer lifecycle using high-precision React hooks that freeze and synchronize scores immediately upon Level 5's completion.

Accomplishments that we're proud of

Absolute Fluidity: The color handles feel extremely satisfying to drag, and the accuracy sensor’s animated slide meter gives immediate, game-like satisfying feedback. Complete Anti-Slop Integrity: The application looks and feels like a professional consumer game. There are no distracting placeholders, and the leaderboards immediately reflect genuine player rankings with elegant bronze, silver, and gold badges. Compelling Dual-Drivable High Scores: We successfully implemented a ranking algorithm that awards perfect scoreholders who took the least amount of time to solve the sequences, encouraging highly replayable speedrun strategies.

What we learned

We mastered state handshakes between traditional React context scopes and hardware-accelerated canvas contexts. We learned how valuable micro-feedback—such as a simple glowing progress bar, satisfying sound cues, and active statistics breakdown grids—is to maintaining deep player engagement. We designed elegant strategies to suppress local development-server websocket logs, refining our skills in writing robust error-handling code.

What's next for ChromaDaily

Social Share Mechanics: Generating dynamic procedural SVG images of the user's solved grid so they can display their speed stats and color wheel trajectories on Reddit (r/ColorDaily) or Twitter. Pro Mode - CMYK & RYB: Adding legacy painter modes (RYB) or printing simulation models (CMYK) to expand the game for painters and physical media artists. Dynamic Versus Match: Letting players challenge a friend synchronously in "split-screen" speed matching!

Built With

Share this project:

Updates