# 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](https://nodejs.org/) ≥ 18
- npm (wird mit Node.js installiert)

## Schnellstart

```bash
# 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

```bash
# 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`](./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](https://vercel.com/) oder [Netlify](https://www.netlify.com/) deployen. Die PWA-Dateien werden mit `npm run build:client` erzeugt.

### Backend

Auf [Render](https://render.com/), [Railway](https://railway.app/) oder [Fly.io](https://fly.io/) deployen. Der Server startet mit `npm run build:server && npm start`.

### Umgebungsvariablen

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

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

## Nächste Schritte / MVP-Status

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

## Lizenz

MIT