Hockey wie Schach: ein Taktikbrett für Kinder

Kinderhockey ist schnell. Wer sieben Jahre alt ist und mitten im Spiel steht, sieht den Ball, aber selten den freien Mitspieler. Beim Training erklärt man viel, und auf dem Spielfeld ist es wieder weg. Ich wollte etwas, mit dem man Spielzüge in Ruhe anschauen kann: Zug um Zug, wie beim Schach.

Daraus ist ein Taktikbrett im Browser geworden. Man stellt zwei Teams auf, plant einen Zug (wer läuft wohin, wer passt oder schießt) und sieht dann, was passiert.

Du willst es ausprobieren: hockey.ping.lu

Ein neues Spiel nach den belgischen U7/U8-Regeln: drei gegen drei, vier kleine Tore, die Schusszone gestrichelt.

Was es kann

• Spielen Zug um Zug: Spieler ziehen, Pässe und Schüsse mit Richtung und Kraft zielen, eine Vorschau zeigt, wo der Ball landet. Tackles, abgefangene Pässe, freie Bälle, Tore und Wiederanstöße laufen nach den Regeln der Altersklasse.
• Echte Regeln je Altersklasse: Hockey Belgium von U7/U8 bis zu den Erwachsenen und die Kinderregeln des Deutschen Hockey-Bunds in der bayerischen Fassung. Feldgröße, Tore, Schusszone, Abstände bei Freischlägen, Torwart, kurze Ecke: alles stammt aus den Regelwerken, mit Quelle.
• Zurückspulen und ausprobieren: Jeder Zug lässt sich zurücknehmen; wer etwas anderes probiert, bekommt einen neuen Zweig, der alte bleibt erhalten. Wiederholung in mehreren Geschwindigkeiten.
• Ein Computergegner, offen (er zeigt seinen Plan zuerst) oder verdeckt.
• Trainingsrätsel wie Schachaufgaben: „Hier ist die Situation, hier bist du. Was tust du? Was sollte das Team tun?“ Mal tippt man eine von drei gezeichneten Möglichkeiten an, mal plant man den Zug selbst auf dem Feld. Jede Aufgabe hat eine Erklärung.
• Regel-Karteikarten für Spieler und Trainer: ein gezeichnetes Bild (eine Szene auf dem Feld, ein Piktogramm oder das Zeichen des Schiedsrichters), eine Frage, Antworten zum Antippen, darunter die Regel im Original-Wortlaut mit Quelle. Für Trainer gibt es einen Vorführmodus: groß auf dem iPad vor der Mannschaft.
• Vier Sprachen (Deutsch, Englisch, Französisch, Niederländisch), am Handy hochkant und quer, auf dem Tablet, und als App auf den Startbildschirm legbar.

Trainingsrätsel „Raus aus dem Schatten“: Du ziehst dich selbst so, dass dich ein gerader Pass erreicht.

Karteikarte für Kinder: das Zeichen des Schiedsrichters, die Antwort und darunter die Regel im Original mit Quelle.

Vorführmodus für Trainer: groß auf dem iPad, die Antwort erst auf Knopfdruck.

Wie es technisch funktioniert

• Nur statische Dateien. Kein Server, kein Konto, keine Datenbank. Die Spiele liegen im Browser (höchstens 50) und lassen sich als Datei exportieren und wieder importieren.
• Regeln sind Daten, nicht Code. Jede Altersklasse ist eine JSON-Datei mit Feldmaßen, Toren, Zonen, Abständen und Wiederanstößen. Eine neue Altersklasse ist eine neue Datei, geprüft von einem strengen Validator.
• Eine reine Spiel-Engine: Ein Zug ist eine Funktion von „Stellung + Plan“ zu „neue Stellung“, ohne Oberfläche und ohne Zufall von außen. Wo der Zufall mitspielt (gelingt das Tackle?), wird der Würfelwurf im Zug gespeichert, damit eine Wiederholung genau gleich abläuft.
• Das Spiel ist ein Baum, kein Verlauf: Jede Abzweigung bleibt erhalten.
• Rund tausend automatische Tests und ein Browsertest, der das Spiel auf vier Bildschirmgrößen durchklickt.
• React und TypeScript, gebaut mit Vite; sonst keine Bibliotheken.

Programmiert hat das ein KI-Agent (Claude geplant, Codex programmiert; wie das abläuft, steht hier). Ich habe beschrieben, was ich will, Fragen beantwortet, gespielt und Feedback gegeben, und die Regeln samt Quellen recherchieren lassen. Die Spec ist inzwischen über 2000 Zeilen lang, und sie ist der eigentliche Wert: Sie hält fest, was entschieden ist und warum.

Wo hosten?

• Kein Server? Cloudflare Pages. Für eine statische App wie diese kostenlos, mit HTTPS und eigener Domain. GitHub-Repository verbinden, und jede Änderung ist ein paar Minuten später online.
• Mehrere Projekte, weniger Technik? eigava.de. Dort baut der eigene KI-Assistent die App, und eigava kümmert sich um Betrieb, Updates und Backups, gehostet in Deutschland.

Beispiel: Anleitung für einen KI-Agenten

Als ANLEITUNG.md in einen leeren Ordner legen und dem Agenten sagen: „Lies ANLEITUNG.md und setz das um.“ Platzhalter in <…> vorher ausfüllen.

# Auftrag: Taktikbrett für <Sportart> im Browser

Baue ein Taktikbrett, auf dem man ein <Hockey>-Spiel Zug um Zug durchspielt, um Kindern
von <6 bis 12 Jahren> und ihren Trainern Spielzüge zu erklären.

## Rahmen

- Läuft komplett im Browser als statische Dateien: kein Server, kein Konto, keine
  Datenbank. Gespeichert wird im Browser; Export und Import als Datei.
- Handy (hoch und quer), Tablet und Computer. Bedienung mit dem Finger: Spieler ziehen,
  Ball zielen.
- Sprachen: <Deutsch, Englisch>.
- TypeScript, React, Vite. Keine weiteren Bibliotheken ohne meine Zustimmung.

## Regeln

- Recherchiere die Regeln der Altersklassen <Verband, Altersklassen> aus den offiziellen
  Dokumenten. Jede Zahl (Feldmaße, Tore, Zonen, Abstände, Spielerzahl) bekommt eine Quelle.
  Was du nicht findest, markierst du als offen; nichts erfinden.
- Jede Altersklasse ist eine JSON-Datei. Ein strenger Validator lehnt unbekannte Felder
  und unmögliche Werte ab. Eine neue Altersklasse darf nur eine neue Datei brauchen.

## Spiel

- Ein Zug: Jedes Team plant Laufwege, dann einen Pass oder Schuss mit Richtung und Kraft.
  Die Engine berechnet das Ergebnis: Ballweg, Abfangen, Tackle, freier Ball, Tor, Aus.
- Die Engine ist rein (keine Oberfläche, kein versteckter Zufall). Zufallsentscheidungen
  werden im Zug gespeichert, damit Wiederholungen gleich ablaufen.
- Das Spiel ist ein Baum: Zurücknehmen und neu probieren legt einen Zweig an.
- Fouls entscheidet der Mensch über ein Schiedsrichter-Menü, die App erkennt sie nicht.

## Vorgehen

1. Schreib zuerst eine Spezifikation (docs/spec.md) mit allen Regeln, Entscheidungen
   und offenen Fragen. Zeig sie mir, bevor du programmierst.
2. Baue in kleinen Schritten, jeder Schritt mit Tests (Engine, Regeldateien, Speichern).
3. Spiel jede neue Funktion in einem echten Browser durch, auch im Handy-Format, und
   schick mir Screenshots.
4. Halte Entscheidungen in docs/spec.md fest, nicht nur im Chat.

## Später (nicht im ersten Schritt)

Computergegner, Trainingsrätsel („Was tust du hier?“), Regel-Karteikarten.

## Veröffentlichen

Cloudflare Pages mit Git-Anbindung, Build-Befehl npm run build, Ausgabeordner dist.
Sicherheits-Header (Content-Security-Policy) setzen, keine externen Skripte oder Schriften.