This project is made with the help of Claude (1M context).

Playground — six libraries, three games

A single-page arcade demonstrating six zero-dependency JavaScript libraries working together. Three playable games, one HTML file, no build step.

The arcade

Visit the lobby and pick a game. Routing between games uses HistoryJS — the URL changes, browser back/forward works, no full reload.

Game	Libraries used	What it shows
ORBIT (/orbit)	AuraJS · KeyBoardJS · CollideJS · MousePadJS	Twin-stick shooter with predictive collision (TTC), command palette, particle effects, sequences & chords
REWIND (/rewind)	HistoryJS · KeyBoardJS · AuraJS	Sokoban puzzle where every move is a router.push() — browser back is undo, the URL is your save file
TABTRIVIA (/tabtrivia)	TabJS · KeyBoardJS · AuraJS · MousePadJS	First-to-buzz quiz across tabs. TabJS lock() arbitrates the buzz race, shared state syncs the question + scores, leader auto-advances

Showcased libraries

All six are published on npm under @buildwithdarsh/*:

• AuraJS — Everything framework: router, state, hooks, events, i18n, IndexedDB, PWA
• KeyBoardJS — Hotkeys, sequences, chords, stackable scopes, cross-platform mod alias
• CollideJS — Proximity, AABB, circle/shape collision, time-to-collision metrics
• MousePadJS — Gestures, cursor effects, magnet + tilt, trackpad detection
• TabJS — Cross-tab messaging, shared state, presence, leader election, locks
• HistoryJS — Typed History API wrapper with guards, query helpers, link interception

Files

index.html       # shell — lobby, routing, command palette, library loads
games/orbit.js     # twin-stick shooter
games/rewind.js    # Sokoban + browser-history undo/redo
games/tabtrivia.js # cross-tab first-to-buzz quiz

Each game module registers itself on window.GAMES with { title, blurb, libs, controls, cover, mount, unmount }. The shell calls mount(host, ctx) on route entry and unmount() on exit.

Tech stack

• Vanilla JavaScript, HTML5 Canvas, CSS3
• Six libraries from cdn.jsdelivr.net/npm/@buildwithdarsh/*
• Deploy: Vercel (cleanUrls, all paths rewrite to index.html for SPA routing)

Run locally

The arcade is a single-page app — every game lives at index.html and JavaScript routes between them. For refresh and direct-link to work locally, use a server that falls back unknown paths to index.html:

# Recommended — Vercel dev mode applies vercel.json rewrites
vercel dev

# Or any SPA-aware server
npx serve --single

The plain python3 -m http.server works for the lobby but returns 404 on refresh inside a game (/orbit, /rewind, /tabtrivia) because it has no rewrite layer. In production this is handled by the catch-all rewrite in vercel.json.

Opening index.html directly (file://) won't work — the shell loads game modules with relative <script src="games/orbit.js"> and the libraries from a CDN, both of which need a real HTTP origin.

Controls

Shared (anywhere)

• ⌘K / Ctrl+K — Command palette
• B — Back to lobby

ORBIT

• W A S D — Thrust
• Mouse — Aim
• Space / Click — Fire
• Shift — Boost
• P — Pause
• j+k (chord) — Emergency bomb
• g g (sequence) — Restart

REWIND

• ↑ ↓ ← → or W A S D — Move
• Z — Undo (browser back)
• Y — Redo (browser forward)
• R — Reset level
• N — Next level

TABTRIVIA

• Space — Buzz in (first tab to grab the lock answers)
• 1 2 3 4 — Pick A/B/C/D after buzzing
• N — Skip to next question (any tab)
• R — Reset scores
• Open in multiple tabs to race friends; solo mode skips the buzz