PIXELDASH ARCADE

A retro arcade website built with Next.js 14, TypeScript, Tailwind CSS, and Drizzle ORM (SQLite). Includes a T-Rex Runner (Chrome Dino-style) mini-game and leaderboards.

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS (retro theme: dark bg, neon green/orange)
• Drizzle ORM + SQLite (@libsql/client — pure JS, no native build)
• Lucide React (icons)
• Press Start 2P (Google Fonts) for pixel-style typography

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Install & Run

If you previously had better-sqlite3 installed (or get native compile errors):

1. Remove better-sqlite3 and @types/better-sqlite3 from package.json if they’re still there. This project uses @libsql/client only.
2. Delete node_modules and package-lock.json (or run the script below) so npm doesn’t try to reinstall/recompile the old native package.
3. Run a fresh install:

npm run clean-install

Otherwise:

npm install
npm run dev

Open http://localhost:3000.

First-Time Setup

• The app auto-creates the SQLite database and tables on first run (in ./data/pixeldash.db).
• It auto-seeds the T-Rex Runner game if no games exist.
• No manual migration or seed step is required for local development.

Optional: Manual DB Commands

# Generate Drizzle migrations (if you change schema)
npm run db:generate

# Push schema to DB (alternative to auto-migrate)
npm run db:push

# Seed T-Rex game (if you cleared the DB)
npm run db:seed

# Open Drizzle Studio to inspect data
npm run db:studio

Project Structure

src/
├── app/              # App Router pages and API
├── components/       # Header, footer, game cards, leaderboard, name prompt, T-Rex UI
├── db/               # Drizzle schema, connection, seed
├── games/trex-runner/# T-Rex Runner game logic (canvas, obstacles, collision)
├── hooks/            # usePlayerName (sessionStorage)
├── lib/              # utils, constants
└── types/            # Shared TypeScript types

Features

• Homepage: Grid of games with thumbnails and links to /games/[slug].
• Game page: Canvas area, leaderboard (top 10), score submit, "Back to Arcade".
• Name prompt: Shown once per browser session (sessionStorage). New tab = new prompt.
• T-Rex Runner: Jump (Space or tap), avoid obstacles, submit score on game over.
• Leaderboard: Top 10 per game, relative time; refreshes after new score.

Deploying (e.g. Vercel)

• SQLite on Vercel: The app uses @libsql/client (pure JavaScript), so it works on Vercel without native build tools. The DB path is /tmp/pixeldash.db in serverless. For production at scale, you can point the client at Turso or use Vercel Postgres.
• Ensure environment is set (e.g. VERCEL=1 is set automatically on Vercel).

License

MIT