EscapeFromTeacher/cmd/client/web/README.md

Escape From Teacher - WASM Web Version

🎮 Starten

# Im web-Verzeichnis einen HTTP-Server starten
cd cmd/client/web
python3 -m http.server 8000

Dann im Browser öffnen: http://localhost:8000

✨ Features

Modernes HTML/CSS Menü

• Custom Font: Nutzt front.ttf aus dem assets-Ordner
• Responsive Design: Funktioniert auf Desktop, Tablet und Smartphone
• Glassmorphism: Moderner durchsichtiger Look mit Blur-Effekt
• Smooth Animations: Fade-in, Slide-up, Pulse-Effekte

Menü-Optionen

1. Solo spielen: Einzelspieler-Modus
2. Co-op spielen: Multiplayer mit Raum-Code
3. Leaderboard: Top 10 Spieler anzeigen
4. Einstellungen: Musik & SFX Lautstärke einstellen

Mobile-Optimiert

• Touch-freundliche Buttons
• Responsive Layout für kleine Bildschirme
• Viewport-Anpassung für Smartphones

🎨 Design-Features

• Gradient Background: Lila-Blauer Farbverlauf
• Button Hover-Effekte: Ripple-Animationen
• Custom Scrollbars: Für Leaderboard
• Loading Screen: Spinner während WASM lädt
• Emoji-Icons: 🏃 👥 🏆 ⚙️

📁 Dateien

• index.html: HTML-Struktur
• style.css: Alle Styles mit Custom Font
• game.js: JavaScript-Bridge zwischen HTML und WASM
• wasm_exec.js: Go WASM Runtime (von Go kopiert)
• main.wasm: Kompiliertes Spiel

🔧 Entwicklung

WASM neu kompilieren

GOOS=js GOARCH=wasm go build -o cmd/client/web/main.wasm ./cmd/client

Font ändern

Ersetze cmd/client/assets/front.ttf und aktualisiere den Pfad in style.css:

@font-face {
    font-family: 'GameFont';
    src: url('../assets/front.ttf') format('truetype');
}

🎯 Keyboard Shortcuts

• ESC: Zurück zum Menü (während des Spiels)

📱 Mobile Testing

Für lokales Mobile Testing:

python3 -m http.server 8000
# Öffne auf Smartphone: http://[DEINE-IP]:8000

🚀 Production Deployment

Für Production alle Dateien hochladen:

• index.html
• style.css
• game.js
• wasm_exec.js
• main.wasm
• assets/ (Font-Ordner)

Server muss WASM mit korrektem MIME-Type ausliefern:

Content-Type: application/wasm