All work // Case study · 02

Treble Quest

Football draft game

Draft a manager and an eleven from real club seasons, pick a formation, then watch a season play out as you chase the league, the FA Cup and the Champions League. Built and launched on my own in 2026.

Play Treble Quest
Role
Everything. Game logic, data, frontend, API, deploy, SEO
Timeline
2026
Stack
SvelteKit, Svelte 5, TypeScript, Fastify, SQLite, WebSockets
Game modes
3
Languages
9
Trophies to chase
3
Scores replayed
100%
TQ-01 · The draft LIVE
Every pick is a sticker in its club colours. Legends come in gold foil.

Every pick is a sticker in its club colours. Legends come in gold foil.

01The game

Each pick starts with a spin: a club and a season, and a choice of managers or players from it. Fill every slot and the season plays out match by match, with a treble score at the end weighted towards the league, then the Champions League, then the FA Cup.

Classic Mode is English football. Global Mode mixes legendary sides from every league, and Legacy Draft builds an all-time eleven from one club. There was a World Cup mode for the 2026 tournament, retired once it finished.

02Designed like a sticker album

The look is a football sticker album. Each pick is a sticker in its club's kit colours with an album number on it, legends shimmer in gold foil, the draft happens inside a sticker packet and the squad fills in on a printed pitch. The stickers, foil and pitch are drawn with CSS and SVG, and the whole thing works in all nine languages, Arabic included.

03A leaderboard you can't fake

The simulation is deterministic: the same squad and the same seed always give the same season. That made the leaderboard straightforward to protect. The API never accepts a score. It accepts the run (seed, mode and picks) and replays it with the exact simulation code the browser used, which CI copies into the server at build time. Whatever the browser claims, the server's own result is what gets stored.

04Head to head

Multiplayer lobbies run over WebSockets on the same Fastify service. The host creates a room and picks the mode and formation, friends join with the code, everyone drafts their own side and the room updates live as people finish and compare scores.

05Nine languages, one static site

The site is a static SvelteKit build, prerendered for every route in nine languages, including Arabic laid out right to left. Every page ships as plain HTML, which keeps it fast and lets each language show up in search on its own.

Results can be shared as an image or a link. Shared links open pages the API renders itself, so each one gets its own preview card in chats and on social media.

06Running it

The static files and the API sit behind the same nginx and Cloudflare setup as Vexara, deployed by GitHub Actions on every push, and the leaderboard database is backed up off-site every night.