Roadle - Test your car spotting skills
A static, browser-only car guessing game powered by GitHub-hosted puzzle data.
TL;DR
Roadle is a Wordle-inspired game for car people. Each round starts with a tight crop of a vehicle photo, then reveals more of the car after every wrong guess. Players have five attempts to identify the make, model, and year.
The app is intentionally simple to host: a fully static Vite + React + TypeScript frontend, with puzzles and images loaded from a public GitHub manifest at runtime.
Gameplay
Each puzzle gives the player five guesses. A guess can earn credit independently for make, model, and year, so a partially correct answer still moves the round forward. Correct fields lock into the form, which means the player only has to revise the parts they missed.
5
Attempts
3
Fields
+/-2
Year Window
Scoring rewards early certainty: points = correct_fields x remaining_attempts_when_solved. A perfect first-try solve earns 15 points, while later solves count down with the multiplier.
Frontend Architecture
Roadle runs without accounts, a backend, or an external state library. The React app owns the selected puzzle, current guesses, total score, completed games, and theme state with useState, useEffect, and a small set of pure game functions.
- 1 Load data. On mount, the app fetches
puzzles.jsonandmodels.json. - 2 Pick a puzzle. The first uncompleted puzzle becomes the default, while a dropdown exposes the full manifest library.
- 3 Submit guesses. The game reducer evaluates make, model, and year, updates locked fields, advances the reveal image, and persists state to
localStorage.
Feature Highlights
Multi-game Library
Players can choose any puzzle in the manifest, with completed games marked in the picker.
Filtered Search
Make and model comboboxes support keyboard navigation, and the model list filters from the selected make.
Win Effects
Regular wins trigger accent confetti; perfect wins add a waving checkered flag and racing-themed colors.
Responsive Layout
Desktop gets a two-column game board; mobile compresses stats and expands the guess grid as the round progresses.
Puzzle Data
The Roadle app loads its content from a separate roadle_gamefiles repository. That repo acts like a tiny content CDN: one manifest file plus image folders for each game.
{
"id": "chevrolet-bolt-ev-2017",
"date": "2026-05-22",
"answer": { "make": "Chevrolet", "model": "Bolt EV", "year": 2017 },
"reveals": [
"https://.../reveal-1.webp",
"https://.../reveal-2.webp",
"https://.../reveal-3.webp",
"https://.../reveal-4.webp",
"https://.../reveal-5.webp"
],
"fullImage": "https://.../full.webp"
}Adding a new puzzle is a content update, not an app deploy: upload five reveal images and one full image, append a manifest entry, and the next page load can pick it up.
Image Creator Utility
I also built a small desktop tool to prepare puzzle image sets from a single source photo. The utility uses Python, Tkinter, and Pillow to produce the exact six-file Roadle structure: reveal-1.webp through reveal-5.webp, plus full.webp.
- ›Every crop is forced to the 4:3 Roadle frame.
- ›Global blur regions mask logos, plates, badges, or other giveaway details across reveal images.
- ›Per-reveal blur regions allow extra masking for specific clue stages.
- ›The final full image exports unblurred, so the answer reveal is clean.
- ›Exports are 1600x1200 WebP files at quality 82.
Tech Stack
The game app uses CSS variables for light and dark themes, with theme state persisted in localStorage and initialized from the OS preference on first load. The image utility stays separate so puzzle production does not complicate the player-facing app.
AI Tools used: Claude Design, GPT 5.5 through Codex, and Opus 4.7 through Claude Code.