Local Multiplayer Mission Game

A real-time multiplayer mission game built with Flask-SocketIO and React. Players join on the same WiFi network to complete missions, draw event cards, and compete in a shared lobby managed by an admin who also participates as a player.

🪟 Windows Users - Quick Start!

Download the project and double-click start.bat - that's it!

For detailed Windows instructions, see WINDOWS_SETUP.md

✨ Features

• Local Multiplayer: Up to 6 players can join on the same WiFi network
• Admin Player System: First player becomes admin with full player capabilities plus game management controls
• Mission System: Each player draws 4 unique missions from a shared deck
• Event Cards: Admin can draw and expire event cards visible to all players
• Real-time Sync: All game actions synchronized via WebSockets
• Mobile-Optimized UI: Large buttons and text, perfect for smartphone gameplay

🚀 Quick Start

Windows (Easiest!)

1. Install Prerequisites (one-time):

   • Python 3.11+ - Check "Add Python to PATH"
   • Node.js 20+ - LTS version

2. Run the Game:

   • Double-click start.bat
   • Open browser to: http://localhost:5000

See WINDOWS_SETUP.md for detailed Windows instructions!

Mac/Linux

1. Install Dependencies:

pip install -r requirements.txt
cd frontend
npm install
cd ..

2. Run the Game:

cd frontend && npm run build && cd .. && python main.py

Then open: http://localhost:5000

📱 WiFi Multiplayer

To play with friends on the same WiFi:

On Your Host Computer:

1. Start the server (use methods above)
2. Find your IP address:
   • Windows: Run ipconfig in Command Prompt
   • Mac: Run ifconfig in Terminal
   • Linux: Run ip addr in Terminal
3. Look for your local IP (e.g., 192.168.1.100)

On Other Devices:

1. Connect to the same WiFi network
2. Open browser to: http://YOUR_IP:5000
   • Example: http://192.168.1.100:5000

Everyone must be on the same WiFi network!

🎮 How to Play

Joining the Game

1. Open the game URL in your browser
2. Enter your name to join the lobby
3. First player to join becomes the Admin (but also plays normally)
4. Wait for all players to join (max 6 players)
5. Admin (player named "Stephan") clicks "Spiel Starten" to begin

Playing Missions

1. Each player automatically draws 4 unique missions when the game starts
2. View your current mission (only you can see it)
3. When you complete a mission:
   • Click "Mission Erfüllt" to reveal it to all players
   • Admin reviews and either Approves or Rejects
   • If approved, you move to your next mission
   • If rejected, you try the same mission again

Event Cards

• Admin can draw event cards that affect gameplay
• Events are visible to all players
• Events add fun challenges and rule changes
• Admin can manually expire events when done

Admin Controls

The admin player (must be named "Stephan") has additional controls:

• Spiel Starten: Begin the mission game
• Genehmigen/Ablehnen: Approve or reject completed missions
• Event ziehen: Draw new event cards
• Beenden: Remove active events
• Reset: Start a new game

Winning

• Complete all 4 of your missions
• Player with most completed missions wins!

📁 Project Structure

project/
├── start.bat              # 🪟 Windows quick start (double-click this!)
├── start.ps1              # 🪟 PowerShell alternative
├── WINDOWS_SETUP.md       # 🪟 Detailed Windows guide
├── requirements.txt       # Python dependencies
├── main.py                # Main server entry point
├── app.py                 # Flask application & game logic
├── cards/                 # Game data
│   ├── missions.json      # Mission cards
│   └── events.json        # Event cards
└── frontend/              # React application
    ├── src/               # Source code
    ├── dist/              # Built files (auto-generated)
    └── package.json       # Frontend dependencies

🛠️ Tech Stack

• Backend: Python 3.11, Flask, Flask-SocketIO, Eventlet
• Frontend: React, Vite, TailwindCSS, Socket.IO Client
• Data: JSON files for missions and events
• Storage: In-memory (resets on server restart)

🎨 Mobile Design

The app is optimized for smartphone use:

• Large, easy-to-tap buttons (minimum 56px height)
• Big, readable text (20-32px base size)
• Generous spacing between elements
• Touch-friendly interactions
• Beautiful gradient designs

🔧 Customization

Adding Missions

Edit cards/missions.json:

{
  "id": 25,
  "Kategorie": "Hauptmann",
  "Zeitpunkt": "Jederzeit",
  "Name": "Your Mission Title",
  "Beschreibung": "What players need to do"
}

Adding Events

Edit cards/events.json:

{
  "id": 11,
  "Name": "Your Event Title",
  "Beschreibung": "Event rules or effects"
}

❗ Troubleshooting

Windows: "Python is not recognized"

• Python not installed or not in PATH
• Reinstall Python and check "Add Python to PATH"

Windows: "Node is not recognized"

• Node.js not installed
• Install from https://nodejs.org/

"Verbindung zum Server..." (Can't Connect)

• Server is not running - start it first!
• Use the correct URL: http://localhost:5000 for local
• Check firewall isn't blocking port 5000

WiFi Multiplayer Not Working

• Everyone on same WiFi network?
• Use actual IP address (not localhost) when sharing
• Check firewall/router settings
• Disable "AP Isolation" if enabled on router

Port 5000 Already in Use

• Close other programs using port 5000
• Or edit main.py to use different port

📚 Documentation

• WINDOWS_SETUP.md - Complete Windows guide
• cards/missions.json - Mission card data
• cards/events.json - Event card data

🐛 Development

Running in Dev Mode

Backend (Terminal 1):

python main.py

Frontend (Terminal 2):

cd frontend
npm run dev

Frontend dev server runs on port 5173. Update socket connection if needed.

Building for Production

cd frontend
npm run build
cd ..
python main.py

📝 License

This project is open source and available for personal and educational use.

---

Need help? Check WINDOWS_SETUP.md for Windows-specific instructions!