Stop It! - Multi-Device Reaction Game

A real-time multiplayer reaction game that runs across multiple devices using WebRTC. One device acts as the "master" controller, while other devices serve as displays and input devices.

Features

• Multi-Device Gameplay: Connect multiple phones/tablets to play together
• WebRTC Communication: Peer-to-peer connections for low-latency gameplay
• Room-Based System: Simple 6-character room codes for easy joining
• Configurable Games: Set number of players (2-10) and game duration (10-300 seconds)
• Screen Wake Lock: Keeps screens active during gameplay
• Real-time Scoring: Track points for each player with live updates
• Beautiful UI: Gradient backgrounds, smooth animations, and responsive design

How to Play

1. Master Device: One player opens the app and clicks "Create Game"

   • A unique room code is displayed
   • Configure the number of players and game duration
   • Wait for other devices to connect
   • Click "Start Game" when ready

2. Display Devices: Other players click "Join Game"

   • Enter the 6-character room code shown on the master device
   • Wait for the master to start the game

3. During the Game:

   • Random player colors appear on random device screens
   • Tap the screen as quickly as possible when your color appears!
   • Each successful tap scores 1 point
   • Colors disappear if not tapped within 2 seconds
   • Game continues for the configured duration

4. Results: After the game ends, scores are displayed on all devices

   • The master device can restart the game or quit

Technology Stack

• Frontend: SvelteKit + Svelte 5 (with runes)
• Backend: Node.js + Socket.io for signaling
• WebRTC: simple-peer for peer-to-peer connections
• Build Tool: Vite 7
• Language: TypeScript

Installation

1. Clone the repository:

   git clone <repository-url>
   cd stop-it
   

2. Install dependencies:

   npm install
   

Running the Game

Start both the signaling server and the SvelteKit dev server:

npm run dev

This will start:

• SvelteKit dev server on http://localhost:5173
• Signaling server on http://localhost:3001

Open http://localhost:5173 in multiple browsers/devices to play!

Development Scripts

• npm run dev - Start both servers concurrently
• npm run dev:vite - Start only the SvelteKit dev server
• npm run dev:server - Start only the signaling server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Run type checking

Project Structure

stop-it/
├── server.js                 # WebSocket signaling server
├── src/
│   ├── routes/
│   │   ├── +page.svelte     # Home page (game selection)
│   │   ├── master/
│   │   │   └── +page.svelte # Master device page
│   │   └── join/
│   │       └── +page.svelte # Display device join page
│   ├── lib/
│   │   ├── types.ts         # TypeScript type definitions
│   │   ├── webrtc.ts        # WebRTC connection management
│   │   └── components/
│   │       ├── GameScreen.svelte    # Shared game display
│   │       └── ResultsScreen.svelte # Results display
│   └── app.d.ts             # Global type declarations
├── package.json
└── README.md

How It Works

Architecture

1. Signaling Server (server.js):

   • Manages rooms and room codes
   • Facilitates WebRTC connection setup between devices
   • Routes signaling messages (offers, answers, ICE candidates)

2. Master Device:

   • Creates a room and generates a unique code
   • Establishes WebRTC connections to all display devices
   • Controls game flow and timing
   • Sends color display commands to specific devices
   • Tracks scores and announces results

3. Display Devices:

   • Join a room using a code
   • Connect to the master via WebRTC
   • Display colors when commanded
   • Send tap events back to the master
   • Receive and display final scores

WebRTC Flow

1. Display device joins a room via Socket.io
2. Signaling server notifies the master
3. Master initiates WebRTC connection (sends offer)
4. Display receives offer and sends answer
5. ICE candidates are exchanged via signaling server
6. Direct P2P connection is established
7. Game commands and data flow through WebRTC data channels

Network Requirements

• All devices must be able to reach the signaling server
• For devices on different networks, you may need TURN servers (currently using STUN only)
• Default STUN servers:
  • stun:stun.l.google.com:19302
  • stun:global.stun.twilio.com:3478

Browser Compatibility

Works best on modern browsers with WebRTC support:

• Chrome/Edge (Desktop & Mobile)
• Firefox (Desktop & Mobile)
• Safari (Desktop & Mobile - iOS 11+)

Note: Screen Wake Lock API may not be supported on all browsers.

Deployment

Production Build

1. Build the SvelteKit app:

   npm run build
   

2. Run the production server and signaling server together

Environment Variables

You can configure the signaling server port:

PORT=3001 node server.js

Update the socket.io connection URLs in:

• src/routes/master/+page.svelte
• src/routes/join/+page.svelte

Future Enhancements

• Add sound effects for taps and game events
• Implement player names instead of just numbers
• Add different game modes (speed round, elimination, etc.)
• Persistent leaderboards
• Custom color themes
• Replay functionality
• Add TURN server support for better NAT traversal
• Add animations for color transitions
• Support for larger player counts

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.