Little Papers

A real-time multiplayer guessing game built with Next.js where teams compete to guess character names within a time limit.

Features

• Real-time multiplayer gameplay
• Automatic team balancing
• Admin-controlled game flow
• Mobile-friendly interface
• Server-Sent Events for live updates
• Lightweight SQLite database

Quick Start

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser: Navigate to http://localhost:3000

How to Play

For the Admin (Game Creator):

1. Click "Create New Game" on the home page
2. Enter your name and configure:
   • Number of characters per player (3-10)
   • Turn duration in seconds (30-120)
3. Share the generated join code with other players
4. Wait for players to join and submit their characters
5. Click "Start Game" when everyone is ready
6. Control the game flow on your device:
   • Read Character → Start → Tap screen to guess → Next Turn

For Players:

1. Click "Join Game" and enter the join code
2. Enter your display name
3. Submit your character names (famous people, fictional characters, etc.)
4. Wait for all players to submit
5. Watch the game unfold on your device!

Game Rules

• Players are randomly divided into two teams
• Teams take turns guessing characters
• During each turn:
  • A character name is revealed
  • The active player has a set time to make their team guess it
  • Each correct guess awards 1 point
  • Tap the screen to move to the next character
• The round ends when all characters have been played
• The team with the most points wins!

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Database: SQLite (via @libsql/client)
• Real-time: Server-Sent Events (SSE)

Project Structure

littlepapers/
├── app/                    # Next.js app directory
│   ├── admin/create/      # Game creation page
│   ├── join/[joinCode]/   # Player join page
│   ├── lobby/[gameId]/    # Lobby & character submission
│   ├── game/[gameId]/     # Main gameplay screen
│   ├── results/[gameId]/  # Final scores
│   └── api/               # API routes
├── lib/                   # Utilities and helpers
│   ├── db.ts             # Database setup
│   ├── types.ts          # TypeScript types
│   ├── game-helpers.ts   # Game logic
│   └── event-emitter.ts  # SSE events
└── claude.md             # Detailed documentation

Documentation

For detailed architecture and specifications, see claude.md

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

Environment Variables

Create a .env.local file:

# Database URL (defaults to local SQLite file)
DATABASE_URL=file:local.db

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

Database

The application uses SQLite by default with a local local.db file. For production, you can use Turso by setting the DATABASE_URL environment variable.

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project to Vercel
3. Set up environment variables
4. Deploy!

Note: For production, consider using Turso for the database instead of local SQLite.

Testing Locally

1. Open multiple browser windows or devices on the same network
2. Create a game in one window (admin)
3. Join from other windows using the join code
4. Play the game!

Contributing

This project was created as a demonstration. Feel free to fork and modify for your own use!

License

MIT License - Feel free to use this project for educational or personal purposes.

Support

For detailed documentation and architecture information, refer to claude.md.