rayquizz — Era-Aware Pokémon Guessing Game
Overview
rayquizz is a Pokémon guessing game in the Pokédle / Squirdle family: the player narrows down a hidden Pokémon through successive guesses, each one answered with a grid of colour-coded attribute feedback. It ships three modes — a date-seeded Daily that is the same for everyone and locks after one play, an endless Unlimited mode with generation filters and pass-and-play multiplayer, and a Silhouette "Who's That Pokémon?" progressive reveal. The whole thing is an installable, offline-first static SPA with no backend at all.
The Era-Aware Type System
The mechanical differentiator is that a Pokémon's types are judged against a player-selected generation rather than treated as fixed. Clefairy, for example, is evaluated as Normal in Generations 1–5 and as Fairy from Generation 6 onward. This era resolution lives in a single pure module that returns a Pokémon's original types when the chosen era predates its type change and its current types otherwise. The roughly twenty Pokémon whose typing shifted across generations are maintained in a small, human-editable overlay that is merged into the dataset at build time.
Offline-First, No-Backend Architecture
There are zero build-time and zero runtime API calls. A one-time, idempotent seed script downloads official artwork, resizes it to compact WebP, and writes a single canonical JSON dataset; that dataset and the artwork are committed to the repository as the source of truth. The app is prerendered to a fully static bundle and shipped as a PWA whose service worker precaches the app shell, the dataset, and every image — so the game installs to a home screen and plays completely offline after the first visit.
The Console Wardrobe Theming System
A single data-skin attribute on the document root re-dresses the entire interface as one of seven handheld eras — Game Boy, Game Boy Color, GBA, NDS, 3DS, Switch, and Switch 2 — without changing a line of markup. Each era is a complete outfit with its own accent colour, typeface, corner radius, screen texture, elevation language, and motion personality, all driven through CSS source tokens rather than hard-coded values. A strict discipline holds it together: red is reserved exclusively for the feedback grid in every skin, so identity accents are deliberately blue, purple, teal, or cyan and can never be mistaken for a higher/lower signal.
Game Modes and Accessibility
Daily is seeded from the date so everyone faces the same Pokémon, with replay locking and shareable results; Unlimited adds generation filters and solo, group, and team pass-and-play on a shared screen; Silhouette reveals a CSS-filtered shape progressively. Accessibility is built into the feedback itself: every cell pairs a colour with both an icon and an aria-label — check, dashed circle, X, or directional arrow — so no state depends on hue alone, which matters for colour-blind players and screen readers. Reduced-motion preferences degrade all reveal and celebration animation to instant or fade.
Data Pipeline and Tested Game Logic
The pure guess-evaluation engine — era resolution and attribute comparison — is isolated from the UI and is the project's only unit-tested module, covered with Vitest, because it is the part where correctness actually matters. The seed pipeline caches its API responses and source images so reruns are cheap and produce byte-identical output. Continuous integration runs lint and type-checking on every push, and the production target is a prerendered static bundle deployed to Cloudflare Pages.