Tags

React 19TypeScriptVite 7Tailwind CSS 4Zustand 5SupabaseFramer MotionVercelgamereacttypescriptpwasupabase

ScalarGame is a collection of three daily puzzle games — Scalar, Continuum, and Whenabouts — sharing a single React 19 + Vite monorepo, a unified design system, and a common backend. Each game is independently playable, but they're designed as a daily trio: three different cognitive challenges, fifteen to fifty minutes of total engagement, one leaderboard.

The Games

Scalar — A deductive guessing game where a hidden entity (country, element, US state, or city) is revealed through structured attribute feedback. Seven logic types — exact match, higher/lower, geographic distance, set intersection, category proximity — narrow the target. Difficulty modes range from Novice (hints free, suggestions shown) to Prodigy (no suggestions, hidden fields). Lower total moves wins.

Continuum — A daily ranking calibration game. Three anchor cards are pre-placed on a sorted timeline; incoming cards appear one at a time with only a name visible. Drag each into the correct position. Three wrong placements ends the game. The card-dealing algorithm uses fuzzy bisection to ensure each new placement is a genuine challenge.

Whenabouts — A historical timeline puzzle. Five events appear one at a time with a title, description, and image. Scrub a horizontal year carousel to lock in your guess. Scoring uses exponential decay calibrated to each event's popularity tier — famous events are graded strictly, obscure ones are forgiving.

Shared Infrastructure

All three games run under a single authenticated session with optional sign-in via Supabase Auth. Signed-in players sync daily scores to global leaderboards without any extra steps. Players who prefer to stay anonymous play locally with no data sent.

FeatureDetails
AuthEmail/password via Supabase. Fully optional — all games work without an account.
LeaderboardsGlobal standings at `/leaderboard`, per-game top-10 in game-over modals, and a landing-page snippet showing today's top 5.
AccountsDisplay name, leaderboard visibility toggle, account deletion.
Daily syncScores backfill automatically on first sign-in, so streaks and stats survive account creation after the fact.
PWAInstallable on iOS and Android. Full offline play after first load via Workbox precache.
AnalyticsVercel Web Analytics, Speed Insights, and PostHog for product metrics.

Design System

The entire platform uses a "Thermal E-Paper / Scientific Journal" aesthetic — paper-white canvas (`#FAFAF9`), charcoal ink (`#18181B`), 1px borders, zero border radius, monospaced data typography. Thermal feedback colors (green → orange → amber → white) communicate accuracy across all three games without re-learning. Light-only — no dark mode.

Fonts: Fraunces Variable (headings), Geist Mono (body/data), IBM Plex Mono (Whenabouts numerics).

Architecture

All three games live in `src/` as sibling directories. Shared components — auth store, leaderboard queries, tutorial overlays, settings modal, free-play header, PWA toasts — live in `src/components/` and `src/utils/`. React Router v7 handles SPA routing; Vercel serves the static dist with SPA fallback rewrites and tiered cache headers (1-year immutable for assets, 1-day + 30-day stale-while-revalidate for puzzle JSON).

Daily puzzles for Scalar and Continuum use a Mulberry32 PRNG seeded by date so every player worldwide sees the same target without a database round-trip. Whenabouts puzzles are pre-authored, sharded into per-month JSON files at build time, and precached by the service worker.