Initial commit: Mobil_Tag project setup

2026-08-05 20:29:18 +02:00
commit 9db3812cf8
46 changed files with 3888 additions and 0 deletions
@@ -0,0 +1,114 @@
+# 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