Mobile Tag

GPS-basiertes Outdoor-Lasertag für jedes Smartphone als Progressive Web App (PWA).

Was ist das?

Ein Spiel, das überall im Freien gespielt werden kann. Jeder Spieler nutzt sein eigenes Smartphone:

• GPS für Position und Spielgebiet
• Kamera mit Fadenkreuz als Visier
• TensorFlow.js MoveNet erkennt Körperteile (Kopf, Brust, Arm, Bein)
• Kompass für die Blickrichtung
• Node.js + Socket.io als Multiplayer-Server

Projektstruktur

Mobil_Tag/
├── client/     # React + Vite + TypeScript PWA
├── server/     # Node.js + Socket.io Game Server
└── PLAN.md     # Ausführlicher Projektplan

Voraussetzungen

• Node.js ≥ 18
• npm (wird mit Node.js installiert)

Schnellstart

# 1. Abhängigkeiten installieren
npm run install:all

# 2. Server und Client gleichzeitig starten
npm run dev

Danach ist die App unter http://localhost:5173 erreichbar und der Server unter http://localhost:3001.

Entwicklung einzeln starten

# Nur Server
cd server
npm run dev

# Nur Client (in einem neuen Terminal)
cd client
npm run dev

Wichtige Hinweise für das Testen

• HTTPS erforderlich: Kamera, GPS und Orientierung erfordern in vielen Browsern HTTPS. Für lokale Tests (localhost) machen die Browser meist eine Ausnahme.
• Mobilgerät empfohlen: Die App ist für Smartphones ausgelegt. Auf dem Desktop funktioniert sie eingeschränkt (keine GPS/Orientierungs-Sensoren).
• Kompass kalibrieren: Vor Spielbeginn das Handy in einer 8-förmigen Bewegung bewegen, damit der Kompass korrekt arbeitet.
• Power-Saving: Der Bildschirm dimmt sich nach 10 Sekunden Inaktivität und geht nach 30 Sekunden in den Tiefschlaf. Ein Tippen reaktiviert sofort.

Schadensmodell

Körperteil	Schaden
Kopf	100 (Instant-Kill)
Brust	40
Bein	25
Arm	15

Treffer-Benachrichtigungen

Alle Spieler sehen sofort, wenn jemand getroffen wird („Spieler A traf Spieler B · KOPF · 100“). Bei eigenen Treffern oder Treffern gegen sich selbst vibriert das Handy kurz.

Backend-Hosting

Das Backend benötigt Node.js, da PHP keine Echtzeit-WebSocket-Verbindungen für Multiplayer-Spiele halten kann.

Falls du bereits einen PHP-Webserver hast, hast du zwei Möglichkeiten:

1. Node.js neben PHP installieren – siehe UBUNTU_SETUP.md für die Schritt-für-Schritt-Anleitung.
2. Backend in der Cloud hosten – empfohlen für den einfachsten Start. Kostenlose Optionen: Render, Railway, Fly.io.

Deployment

Frontend (PWA)

Auf Vercel oder Netlify deployen. Die PWA-Dateien werden mit npm run build:client erzeugt.

Backend

Auf Render, Railway oder Fly.io deployen. Der Server startet mit npm run build:server && npm start.

Umgebungsvariablen

Im Client kann die Server-URL über .env angepasst werden:

# client/.env
VITE_SERVER_URL=http://localhost:3001

Nächste Schritte / MVP-Status

• Projektplan
• Scaffolding (Client + Server)
• Geo-/Orientierungs-Module testen
• Kamera + MoveNet-Performance optimieren (Power-Saving)
• Spielgebiet-Konfiguration in der Lobby
• Radar/Minimap integrieren
• PWA-Icons und Install-Prompt
• Akku-/Performance-Optimierung (Power-Saving)

Lizenz

MIT