Monghon - Hangman Variation

Überblick

Ursprünglich habe ich einen einfachen Anwendungsfall für einen Ngrx Store gesucht und fand das Spiel Hangman dafür gut geeignet. Im Zuge der Entwicklung haben sich weitere Richtungen zum Experimentieren ergeben.

Auf folgende Punkte wird in diesem Artikel näher eingegangen:

• Einsatz von Ngrx Store
• UX und Styling
• Alternative Illustrationen des Spielstandes
• Barrierefreiheit und Erzählen des Spielstandes

Der Artikel schließt mit einer Liste von TODOs und möglichen nächsten Schritten.

Das Spiel kann auf Monghon gespielt werden, der Source Code ist aur GitHub verfügbar

Ngrx Store, Ngrx Effects

Der Zustand und die Zustandsübergänge im Spiel konnten mit einem Ngrx Store gut modeliert werden (siehe game.state.ts). Zum Ansprechen eines API für ein zufällig generiertes Wort, wurde Ngrx Effects verwendet (siehe game.effects.ts).

Ich finde, die Menge an Boilerplate hat sich bei Ngrx (im Vergleich zu früher) auf ein Minimum reduziert.

UX und Styling

Wheel für Buchstaben

Bei der User Experience war mir wichtig, dass des Spiel mobil angenehm zu bedienen ist. Eine Texteingabe für den Buchstaben wollte ich vermeiden, weil dabei die Tastatur eingeblendet wird. Aus einem ähnlichen Grund sollte ein natives Select vermieden werden, weil sich dabei ebenfalls ein UI Element über das Game UI legt.

Ich stellte mir einen horizontalen Wheel vor, mit dem Buchstaben ausgewählt werden können. Der Wheel sollte in beide Richtungen endlos scrollbar sein, d.h. nach dem letzten Buchstaben Z sollte es wieder mit A weitergehen, so wie bei einem Wheel eben.

Zusätzlich soll der Wheel auch auf Tastatur Eingaben reagieren können, indem er zu dem eingegebenen Buchstaben scrollt.

Mit KI Unterstützung (Jetbrains AI Assistant) konnte ich die wheel-picker.component.ts erstellen. Zu analysieren, wie diese Component im Detail funktioniert, ist ein nächster Schritt.

Papierartiger Look

Mir schwebte ein Style vor, der das skizzenhafte Feel vom Hangman Spiel beibehält. Und ich war positiv überrascht, was mit SVG und CSS in diese Richtung alles möglich ist.

Wie ein solcher Style mit dem SVG filter Element umgesetzt werden kann, habe ich durch die KI Unterstützung (Jetbrains AI Assistant) kennengelernt. Mein Prompt war etwa in der Art wie, “Papierartiger Look mit Illustrationen, die wie Bleistift/Buntstift Zeichnungen aussehen”.

Siehe dazu im illustration.html:

<filter id="pencilTexture" x="-50" y="-50" width="300" height="350" filterUnits="userSpaceOnUse">
  <!-- Creates fine-grained noise -->
  <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="3" result="noise" />
  <!-- Displaces lines based on the noise -->
  <feDisplacementMap
    in="SourceGraphic"
    in2="noise"
    scale="2"
    xChannelSelector="R"
    yChannelSelector="G"
  />
</filter>

Alternative Illustrationen

Die klassische Hangman Illustration ist wohlbekannt, nehme ich an.

Aber zu der zugrunde liegenden Dynamik in diesem Spiel sind auch andere Szenarios bzw. Illustrationen denkbar.

Mit Dynamik meine ich folgendes (siehe auch model.ts):

• Es gibt eine Gefahr (Bedrohung, Erosion, Verfall, …) - ein “Bad”, das sich in cntBad Schritten einem maxBad annähert.
• Und es gibt eine Verteidigung (Gegenwehr, Heilung, …) - ein “Good”, das sich in cntGood Schritten einem maxGood annähert.

Entweder ist am Ende das Spiel gewonnen (cntGood === maxGood) oder verloren (cntBad === maxBad). Beides gemeinsam ist nicht möglich.

Eine KI ist gut geeignet zu einer solchen Dynamik verschiedene Geschichten bzw. Szenarios vorzuschlagen. Jedenfalls sind die aktuell eingebauten alternativen Illustrationen im Dialog mit der KI Gemini entstanden.

Es gibt derzeit Illustrationen zu folgenden Szenarios:

• Hangman (Klassisch), Galgen, der sich bei jedem Fehlversuch weiter aufbaut
• Blume, die bei jedem Fehlversuch einen Teil (Blütenblatt, Blatt, …) verliert
• Bombe, die bei jedem Fehlversuch der Explosion näher kommt
• Haare, auf einem Kopf, und bei jedem Fehlversuch geht ein Haar aus

Aktuell fließen in diese Illustrationen nur cntBad und maxBad ein. Das cntGood und maxGood wird nicht in den Illustrationen, sondern nur im Rate Wort selber dargestellt. Ich kann mir aber durchaus Szenarios vorstellen, wo auch diese “Good” Faktoren in der Illustration dargestellt werden. Solche Szenarios zu entwerfen ist ein möglicher nächster Schritt.

Erzählen des Spielstandes

Ich wollte ausprobieren, inwieweit es sinnvoll oder machbar ist, den Spielstand nicht nur visuell darzustellen, sondern ihn auch zu erzählen, abhängig vom eingestellten Szenario und der Dynamik des Spielstandes.

Dafür wurde der LiveAnnouncer aus Angular Material genutzt, um damit ein Narrator Service zu implementieren.

TODOs, nächste Schritte

• Analysieren von KI generiertem Code
  • Wheel Picker
  • Pencil Filter
  • Tab Traversal Logik - zu komplex?
• Beheben von UX Problemen
  • Im Wheel Picker beim Übergang von A zu Z
  • Verbesserung der Barrierefreiheit
• Überlegen weiterer Szenarios und Illustrationen