Eldoria

Ein Fantasy-Quartett im Browser mit taktischem Kniff – gegen den Computer (Leicht/Normal/Schwer) oder zu zweit online an zwei Geräten.

Starten

Keine Installation nötig – index.html im Browser öffnen, oder:

python3 -m http.server 8765   # dann http://localhost:8765

Als App und offline: Über HTTPS (z. B. GitHub Pages) lässt sich das Spiel auf den Homescreen legen (Android/Chrome: „App installieren“, iPhone: Teilen → „Zum Home-Bildschirm“). Nach dem ersten Besuch hält ein Service Worker (sw.js) alle Dateien bereit – das Spiel startet dann sofort und läuft auch ohne Netz, nur der Online-Modus braucht natürlich eine Verbindung. Die Cache-Version aus index.html gilt auch für den Service Worker: Hochzählen genügt, dann lädt er beim nächsten Besuch alles neu. Auf localhost ist er nur mit ?sw in der Adresse aktiv, damit beim Entwickeln keine alten Dateien aus dem Cache kommen.

Online spielen

Direkt von Browser zu Browser (WebRTC), ohne eigenen Server. Wer „Spiel eröffnen“ wählt, bekommt einen Einladungslink, einen QR-Code und einen kurzen Raumcode (z. B. K7M-Q2P). Der Mitspieler tippt auf den Link, scannt den QR-Code mit der Handykamera oder gibt den Code unter „Beitreten“ ein – fertig.

Zusammengeführt werden die beiden über öffentliche Nostr-Relays (Bibliothek Trystero, lokal in js/vendor/). Die Relays sehen nur verschlüsselte Verbindungsdaten, das Spiel selbst läuft direkt zwischen den Geräten; ein öffentlicher STUN-Server hilft beim Finden der Adressen. Die Seite muss über HTTPS oder localhost laufen (z. B. GitHub Pages). In sehr strengen Netzen (manche Mobilfunkanbieter) kommt keine Direktverbindung zustande – dann hilft ein WLAN.

Notlösung ohne Relays: „Klappt nicht? Ohne Vermittlung verbinden“ – dann tauschen die Spieler zwei lange Codes von Hand aus.

Beide Geräte rechnen dieselbe Partie mit demselben Startwert (der Gast spiegelverkehrt), übers Netz gehen nur die Züge. Beide müssen dieselbe Spielversion geladen haben (geprüft wird die Cache-Version aus index.html); nach jedem Duell vergleichen beide eine Prüfsumme des Spielstands, damit Abweichungen sofort auffallen. Reißt die Verbindung mitten in der Partie ab (Handy gesperrt, kurz kein Netz), warten beide eine Minute und suchen sich über den Raum neu; die verpassten Züge werden dann nachgeschickt. Bei den Codes von Hand geht das nicht. Gedacht ist der Online-Modus für Partien unter Freunden: Beide Geräte kennen den ganzen Spielstand, ein veränderter Browser könnte also die gegnerische Hand auslesen. Lässt der Gegner länger als 30 Sekunden auf seinen Zug warten, zeigt ein Zähler das an; nach zwei Minuten kann man die Partie dort direkt verlassen. Gezogen wird nie für ihn.

Spielprinzip

• 32 Karten: 8 Völker × 4 Karten (1A–8D), Werte ⚔️ Stärke, 🛡️ Rüstung, ✨ Magie, 💨 Tempo.
• Jeder hat 16 Karten: 3 auf der Hand, der Rest liegt als eigener Nachziehstapel neben dem Spielfeld. Nach jeder Runde wird auf 3 aufgefüllt; eroberte Karten kommen unter den Stapel des Siegers (gezogen wird von oben).
• Jede Runde bestimmt ein Schlachtfeld, welcher Wert zählt (teils mit Völkerbonus, im Nebelsumpf gewinnt der niedrigste Wert, an der Kreuzung und im Kriegsrat entscheidet ein Münzwurf, wer die Eigenschaft wählt).
• Beide wählen verdeckt eine Karte; der Sieger erobert beide. Gleichstand → Kriegsbeute für den nächsten Rundensieger.
• Alle 4 Karten eines Volkes = Quartett (wird abgelegt und ist sicher). 3 Quartette gewinnen (nach 40 Runden zählen Quartette, danach Karten).
• Extras: 📯 Schlachtruf: vor der Wahl alle Handkarten in den eigenen Stapel mischen und neu ziehen. Lädt sich in 2 Runden wieder auf, in denen man zurückliegt – das hilft bei der Aufholjagd. Die Drachenkönigin (6A) ist die stärkste Karte – aber mit schwacher Fähigkeit.
• Fähigkeiten: Jede Karte hat eine von 11 Fähigkeiten, die beim Aufdecken wirken – z. B. Umlenken (andere Eigenschaft zählt), Verrat (niedrigster Wert gewinnt), Rückzug (Karte geht bei Niederlage nicht verloren), Plündern, Spion, Schwächen. Starke Karten haben eher schwache Fähigkeiten und umgekehrt – die höchste Karte ist also nicht automatisch richtig. Beschreibung: Maus über die Karte oder Rechtsklick für Großansicht.
• Tastatur: 1–3 Karte wählen, H Schlachtruf, Enter ausspielen/weiter, Z Karte groß zeigen, Esc Fenster schließen; mit Tab lassen sich die Handkarten ansteuern, Leertaste wählt.
• Nach dem Duell geht es nach ein paar Sekunden von selbst weiter (Balken im „Weiter“-Knopf); Maus auf dem Schlachtfeld hält ihn an, ein Klick oder Tippen irgendwohin schaltet ihn für diese Runde ab.
• Rechtsklick (Handy: lange drücken) zeigt eine Karte groß; im Menü gibt es eine Kartengalerie.

Aufbau

Datei	Inhalt
sw.js, manifest.webmanifest	Service Worker (offline, schneller Start) und App-Beschreibung zum Installieren; Icons in art/icons/ (aus dem Wappen der Kartenrückseite)
js/cards.js	Völker, Karten und Schlachtfelder (hier lässt sich alles balancen)
js/engine.js	Regeln und Spielzustand, ohne DOM (läuft auch in Node)
js/net.js	Online-Verbindung: Raum über Nostr-Relays (Link, QR, Raumcode) oder Codes von Hand, WebRTC-Datenkanal
js/vendor/	Trystero und QR-Code-Generator (MIT, siehe LIZENZ.md), werden erst in der Online-Lobby geladen
js/ai.js	Computergegner: Siegchance × Wert der Beute gegen Verlustrisiko; „Schwer“ zählt Karten und rechnet mit der wahrscheinlichen Gegnerkarte
js/audio.js	Soundeffekte und Hintergrundmusik, live mit der Web-Audio-API erzeugt (keine Audiodateien)
js/ui.js	Menü, Rundenablauf, Karten, Animationen, Fenster; ruckelt es, schaltet watchFrames die Bildeffekte stufenweise ab. Teilt sich mit den folgenden Dateien das Objekt CG.UI (dort UI.s = aktueller Spielstand)
js/ui-duel.js	Duell zum Mitverfolgen: Schritte, hochzählende Werte, automatisches „Weiter“
js/ui-input.js	Maus, Tastatur und Touch im Spiel, Spielmenü
js/ui-online.js	Online-Partie: Züge, Prüfsummen, Abrisse, Revanche, Lobby
js/art-fx.js	ART_FX legt die bewegten Bildeffekte je Karte fest (Glut, Funken, Leuchten, Nebel …)
art/src/**/*.svg	Handgezeichnete SVG-Illustrationen (32 Helden, 14 Schlachtfelder, Kartenrückseite) – die Quellen
art/src/textures/*.webp	Graue Strukturkarten (Stein, Metall, Stoff, Holz, Haar, Schuppen …, CC0), die beim Bauen über die Illustrationen gelegt werden. In einem SVG markiert man Flächen mit data-tx="stone" am Verlauf oder filter="url(#tx-metal)" an Form/Gruppe (Varianten -soft, -fine) – Details in