Elmar Kresse
17faca1f46
All checks were successful
Build and Push Docker Image / docker (push) Successful in 10s
116 lines
3.7 KiB
Markdown
116 lines
3.7 KiB
Markdown
# Hitstar – lokale Web-App (Prototyp)
|
||
|
||
## Docker
|
||
|
||
Run the app in a container while using your local `data/` music folder:
|
||
|
||
1. Build the image
|
||
|
||
```powershell
|
||
docker compose build
|
||
```
|
||
|
||
2. Start the service
|
||
|
||
```powershell
|
||
docker compose up -d
|
||
```
|
||
|
||
3. Open http://localhost:5173
|
||
|
||
Notes:
|
||
|
||
- Your local `data/` is mounted read/write at `/app/data` inside the container, so you can manage tracks on the host.
|
||
- To rebuild after changes: `docker compose build --no-cache && docker compose up -d`.
|
||
|
||
Lokales Multiplayer-Webspiel inspiriert von HITSTER. Nutzt eure MP3-Dateien im Ordner `data/`, eine Lobby mit Raum-Code sowie WebSockets für den Mehrspieler-Modus.
|
||
|
||
## Features
|
||
|
||
- Lobby mit Raum-Erstellung und -Beitritt (Code)
|
||
- Mehrere Spieler pro Raum, Host startet das Spiel
|
||
- Lokale MP3-Wiedergabe via Browser-Audio (`/audio/<dateiname>`) – keine externen Dienste
|
||
- Einfache Rundenlogik: DJ scannt Lied, Spieler raten vor/nach (vereinfachte Chronologie)
|
||
- Token-Zähler (Basis); Gewinnbedingung: 10 korrekt platzierte Karten
|
||
|
||
Hinweis: Regeln sind vereinfacht; „HITSTER!“-Challenges und exakter Zwischenplatzierungsmodus sind als Ausbaustufe geplant.
|
||
|
||
## Setup
|
||
|
||
1. MP3-Dateien in `data/` legen (Dateiname wird als Fallback-Titel genutzt; falls Tags vorhanden, werden Titel/Künstler/Jahr ausgelesen).
|
||
2. Abhängigkeiten installieren und Server starten.
|
||
|
||
### PowerShell-Befehle
|
||
|
||
```powershell
|
||
# In den Projektordner wechseln
|
||
Set-Location e:\git\hitstar
|
||
|
||
# Abhängigkeiten installieren
|
||
npm install
|
||
|
||
# Server starten
|
||
npm start
|
||
```
|
||
|
||
Dann im Browser öffnen: http://localhost:5173
|
||
|
||
## Nutzung
|
||
|
||
- Namen eingeben (speichert automatisch), Raum erstellen oder mit Code beitreten (Code wird angezeigt).
|
||
- Host klickt „Spiel starten“.
|
||
- DJ klickt „Lied scannen“; der Track spielt bei allen.
|
||
- Aktiver Spieler wählt „Vor“ oder „Nach“. Bei Erfolg wandert das Lied in seine Zeitleiste.
|
||
|
||
## Ordnerstruktur
|
||
|
||
- `public/` – Client (HTML/CSS/JS)
|
||
- `src/server/` – Express + WebSocket Server, Game-State
|
||
- `data/` – eure Audio-Dateien und Playlists
|
||
|
||
### Playlist-Unterstützung
|
||
|
||
Die App unterstützt jetzt mehrere Playlists! Du kannst verschiedene Playlists für verschiedene Spielsessions erstellen:
|
||
|
||
**Ordnerstruktur für Playlists:**
|
||
|
||
```
|
||
data/
|
||
├── (Audio-Dateien hier = "Default" Playlist)
|
||
├── 80s-Hits/
|
||
│ ├── Song1.opus
|
||
│ ├── Song2.opus
|
||
│ └── ...
|
||
├── Rock-Classics/
|
||
│ ├── Song1.opus
|
||
│ └── ...
|
||
└── Party-Mix/
|
||
├── Song1.opus
|
||
└── ...
|
||
```
|
||
|
||
**So funktioniert's:**
|
||
|
||
1. **Standard-Playlist**: Audio-Dateien direkt im `data/`-Ordner werden als "Default"-Playlist erkannt
|
||
2. **Eigene Playlists**: Erstelle Unterordner im `data/`-Verzeichnis, z.B. `data/80s-Hits/`
|
||
3. **Playlist-Auswahl**: Als Raum-Host kannst du in der Lobby die gewünschte Playlist auswählen, bevor das Spiel startet
|
||
4. **Unterstützte Formate**: .mp3, .wav, .m4a, .ogg, .opus
|
||
|
||
**Empfehlung**: Nutze das `.opus`-Format für optimale Streaming-Performance und geringeren Speicherverbrauch. Das Konvertierungsskript `npm run audio:convert` wandelt automatisch alle Audio-Dateien in Opus um.
|
||
|
||
## Git & Audio-Dateien
|
||
|
||
- In `.gitignore` sind alle gängigen Audio-Dateitypen ausgeschlossen (z. B. .mp3, .wav, .flac, .m4a, .ogg, …).
|
||
- Legt eure Musik lokal in `data/`. Diese Dateien werden nicht ins Git-Repo eingecheckt und bleiben nur auf eurem Rechner.
|
||
|
||
## Nächste Schritte (optional)
|
||
|
||
- „HITSTER!“-Challenges per Token mit Positionsauswahl (zwischen zwei Karten)
|
||
- Team-Modus, Pro-/Expert-Regeln, exaktes Jahr
|
||
- Persistenz (Räume/Spielstände), Reconnect
|
||
- Drag & Drop-Zeitleiste, visuelle Platzierung
|
||
|
||
## Hinweis
|
||
|
||
Nur für privaten Gebrauch. Musikdateien bleiben lokal bei euch.
|