# TITAN Gather – Roadmap
TITAN Gather wird schrittweise zu einem vollständigen Gather-System ausgebaut.
## Basis
* Registrierung
* Login
* Benutzer
* Rollen
* Spiele
## Gather-System
* Gathers erstellen
* Gathers anzeigen
* Beitreten
* Spielerlimit
* Gather verlassen
## Match-System
* Teams
* Matchstart
* Server
* Ergebnisse
* Matchabschluss
## Verwaltung
* Spiele verwalten
* Spielmodi
* Maps
* Server
* Gathers
* Benutzer
* Moderation
## Weitere Entwicklung
Zusätzliche Funktionen wie Statistiken, Historie, verbesserte Teamverwaltung und weitere Community-Funktionen können später ergänzt werden.
Die Roadmap wird mit dem Entwicklungsfortschritt aktualisiert.
# 📋 To-Do: Live-Match-Ansicht optimieren – Connect-Buttons & IP-Copy
**Bereich:** TITAN Gather
**Priorität:** 🟠 Hoch
**Status:** ⬜ Offen
**Kategorie:** UI / UX / Match-Verwaltung
## 🎯 Ziel
Die **Live-Match-Ansicht** soll für Spieler und Host übersichtlicher und komfortabler werden.
Sobald ein Match läuft, sollen die Spieler mit möglichst wenigen Klicks direkt dem **Gameserver** und dem **Voice-Server** beitreten können.
Gleichzeitig soll der Host während des laufenden Matches weiterhin die notwendigen Verwaltungsfunktionen besitzen, während normale Spieler keine Aktionen mehr durchführen können, die den laufenden Match-Zustand verändern.
---
## 1. 🔴 Live-Match-Status
Sobald das Match gestartet wurde, soll der bisherige Status eindeutig als laufendes Match dargestellt werden.
### Aktueller Zustand
```text
Wartend
```
### Neuer Zustand
```text
🔴 Live-Match
```
oder alternativ:
```text
⚔ Match läuft
```
Der Status soll visuell deutlich erkennbar sein und sich klar von einer wartenden Lobby unterscheiden.
---
# 2. 🎮 Kommandozentrale – „Deine Aktionen“
Im Bereich **„Deine Aktionen“** soll während des laufenden Matches eine zentrale Aktionsleiste angezeigt werden.
Beispiel:
```text
┌──────────────────────────────────────┐
│ Deine Aktionen │
├──────────────────────────────────────┤
│ │
│ 🎮 Server beitreten │
│ 🎙️ Teamspeak beitreten │
│ 📋 Server-IP kopieren │
│ │
└──────────────────────────────────────┘
```
---
## 2.1 🎮 Server beitreten
Einen deutlich sichtbaren **„Server beitreten“**-Button integrieren.
Der Button soll nach Möglichkeit das Spiel direkt über das entsprechende Steam-Protokoll starten.
Beispiel:
```text
steam://connect/[IP]:[PORT]
```
Der Connect-Link soll dynamisch aus den hinterlegten Serverdaten erzeugt werden.
### Anforderungen
* ⬜ Server-IP aus Match/Gameserver verwenden
* ⬜ Server-Port aus Match/Gameserver verwenden
* ⬜ Steam-Connect-Link generieren
* ⬜ Button nur anzeigen, wenn gültige Serverdaten vorhanden sind
* ⬜ Funktion auf Desktop-Browsern testen
* ⬜ Fallback anzeigen, falls kein Steam-Protokoll verfügbar ist
---
# 3. 🎙️ Teamspeak beitreten
Zusätzlich soll ein direkter **„Teamspeak beitreten“**-Button vorhanden sein.
Beispiel:
```text
ts3server://[IP]?port=[PORT]
```
Der Link soll automatisch aus den hinterlegten Voice-Server-Daten erstellt werden.
### Anforderungen
* ⬜ Voice-IP aus Matchdaten verwenden
* ⬜ Voice-Port aus Matchdaten verwenden
* ⬜ TS3-Connect-Link generieren
* ⬜ Button nur bei vorhandenem Voice-Server anzeigen
* ⬜ Verbindung über Teamspeak-Protokoll testen
---
# 4. 📋 IP kopieren
Neben der angezeigten Server-IP soll eine einfache Kopierfunktion integriert werden.
Beispiel:
```text
Server:
123.123.123.123:27015 📋
```
oder:
```text
[ 📋 IP kopieren ]
```
Beim Klick soll die vollständige Kombination aus **IP + Port** in die Zwischenablage kopiert werden.
Technik:
```javascript
navigator.clipboard.writeText(...)
```
### Beispiel
```text
123.123.123.123:27015
```
wird kopiert.
---
# 5. ✅ Visuelles Feedback beim Kopieren
Der Spieler soll nach erfolgreichem Kopieren sofort erkennen, dass die Aktion funktioniert hat.
Beispielsweise:
```text
📋 IP kopieren
```
wird nach dem Klick kurz zu:
```text
✅ Kopiert!
```
und nach ungefähr 2 Sekunden wieder zurückgesetzt.
Optional:
```text
✅ Kopiert! Check
```
Das Feedback soll ohne Seitenreload funktionieren.
---
# 6. 👑 Host-Verwaltung & Berechtigungen
Die Matchverwaltung muss serverseitig abgesichert werden.
Die Funktion:
```text
Match beenden & Ergebnis eintragen
```
darf ausschließlich für folgende Benutzer verfügbar sein:
```text
Host / Ersteller des Gathers
Administrator
```
### Wichtig
Die Berechtigung darf **nicht ausschließlich über die Sichtbarkeit des Buttons** abgesichert werden.
Auch der eigentliche Backend-Endpunkt muss prüfen:
```text
Ist der Benutzer der Host?
↓
JA → Aktion erlauben
NEIN
↓
Ist der Benutzer Administrator?
↓
JA → Aktion erlauben
NEIN → Zugriff verweigern
```
Damit kann ein normaler Spieler die Aktion nicht einfach über einen direkten Request ausführen.
---
# 7. 🔒 Aktionen während des Live-Matches sperren
Sobald der Matchstatus auf:
```text
LIVE
```
steht, sollen normale Spieler keine Lobby-Aktionen mehr durchführen können, die den Matchzustand verändern.
### Für normale Spieler deaktivieren/ausblenden
* ⬜ Team wechseln
* ⬜ Lobby verlassen
* ⬜ Ready zurücknehmen
* ⬜ weitere Lobbyänderungen
* ⬜ sonstige Aktionen, die den laufenden Matchzustand verändern
### Erlaubt bleiben
```text
🎮 Server beitreten
🎙️ Teamspeak beitreten
📋 IP kopieren
👀 Matchinformationen ansehen
```
Der Host erhält zusätzlich:
```text
🛑 Match beenden
📝 Ergebnis eintragen
```
---
# 8. 📱 Responsive Darstellung
Die neue Aktionszentrale muss auch auf kleineren Displays funktionieren.
Insbesondere:
* ⬜ Mobile Ansicht
* ⬜ Tablet
* ⬜ kleinere Desktop-Auflösungen
* ⬜ Buttons untereinander umbrechen lassen
* ⬜ ausreichende Button-Größe
* ⬜ ausreichend Abstand zwischen den Aktionen
* ⬜ keine abgeschnittenen Texte
* ⬜ IPs dürfen das Layout nicht sprengen
Beispiel Mobile:
```text
┌───────────────────────┐
│ Deine Aktionen │
├───────────────────────┤
│ 🎮 Server beitreten │
├───────────────────────┤
│ 🎙️ Teamspeak │
│ beitreten │
├───────────────────────┤
│ 📋 IP kopieren │
└───────────────────────┘
```
---
# 9. 🧪 Testfälle
Nach der Umsetzung müssen mindestens folgende Fälle getestet werden:
### Spieler
* ⬜ Live-Match wird korrekt angezeigt
* ⬜ Server-Connect funktioniert
* ⬜ Teamspeak-Connect funktioniert
* ⬜ IP + Port können kopiert werden
* ⬜ Kopier-Feedback wird angezeigt
* ⬜ Teamwechsel ist während Live gesperrt
* ⬜ Lobby verlassen ist während Live gesperrt
* ⬜ Ready zurücknehmen ist während Live gesperrt
* ⬜ Host-Funktionen sind für normale Spieler nicht erreichbar
### Host
* ⬜ Host kann Match beenden
* ⬜ Host kann Ergebnis eintragen
* ⬜ Host kann weiterhin benötigte Matchinformationen sehen
### Administrator
* ⬜ Administrator kann Match beenden
* ⬜ Administrator kann Ergebnis eintragen
* ⬜ Berechtigungen funktionieren auch bei direktem Backend-Aufruf
### Responsive
* ⬜ Desktop
* ⬜ Tablet
* ⬜ Smartphone
* ⬜ schnelle Navigation / Alt+Tab
* ⬜ lange IP-/Serverinformationen
---
# ✅ Zielbild
Die Live-Ansicht soll sich nach der Umsetzung ungefähr so anfühlen:
```text
┌─────────────────────────────────────────┐
│ ⚔ MATCH LÄUFT │
│ │
│ Team A 8 : 6 Team B │
│ │
├─────────────────────────────────────────┤
│ 🎮 Gameserver │
│ 123.123.123.123:27015 📋 │
│ │
│ 🎙️ Teamspeak │
│ 123.123.123.123:9987 📋 │
│ │
├─────────────────────────────────────────┤
│ DEINE AKTIONEN │
│ │
│ [ 🎮 Server beitreten ] │
│ [ 🎙️ Teamspeak beitreten ] │
│ [ 📋 IP kopieren ] │
│ │
├─────────────────────────────────────────┤
│ HOST │
│ [ 🛑 Match beenden & Ergebnis eintragen ]│
└─────────────────────────────────────────┘
```
## 🚀 Ergebnis
Nach Abschluss dieses To-dos soll die Live-Match-Ansicht von TITAN Gather eine **echte Match-Kommandozentrale** darstellen:
**Match starten → Server beitreten → Teamspeak beitreten → Match spielen → Host trägt Ergebnis ein.**
Die wichtigsten Aktionen sollen dabei mit **einem Klick** erreichbar sein und der laufende Matchstatus soll für alle Beteiligten eindeutig erkennbar sein.