Zurück
Tobias Hinderling
7. November 2022

Das Spiel zum Fest!

Was da nicht alles so rumsteht bei Puzzle. Bei einem Apéro stosse ich auf unseren Digitalen Bierzapfhahnen. Ursprünglich wurde dieser Zapfhahn entwickelt um per Lightning Bier mit Bitcoin bezahlen zu können.

Schnell kommt die Idee auf, diesen Zapfhahnen für unsere Jubiläumsparty umzufunktionieren.

Ein Spiel soll es werden! Schnell ist auch klar, dass unsere We are Cube-Avatare eine Hauptrolle spielen sollen.

Mal wieder entwickeln…

Vor rund 4 Jahren habe ich meine Entwicklerkarriere an den Nagel gehängt, doch es brennt mir unter den Fingern, mir wieder Mal die Finger “schmutzig” zu machen.

Die Wahl fiel auf ein “Run and Jump”-Game, wie es zum Beispiel aus der SBB-App bekannt ist.

SBB Game
Schnell ist ein erster Proof-of-Concept erstellt, es kann losgehen:

Ein erster Proof-of-Concept zum Spiel

Der Prototyp

Als nächstes steht ein Click-Prototyp an, welcher die einzelnen Schritte des Spiels erklärt.

Dieser Prototyp habe ich dann auch intern getestet und entsprechend der Erkentnisse angepasst.

Erster Prototyp

Schön machen

Damit das ganze auch wirklich gut aussieht, lassen wir Mayra machen, was sie am besten kann, nämlich Sachen schön machen!

Merci Mayre nochmals an dieser Stelle

das hässliche Entlein wird zum schönen Schwan

Entwickeln

Endlich kanns losgehen. Vom ersten Proof of Concept bis zum fertigen Spiel sind einige Stunden vergangen.

Am Ende schauten 2014 Zeilen Code heraus:

Technologisch basiert das ganze auf HTML, CSS und JavaScript. Alles “Vanilla”, was soviel bedeutet, dass keine zusätzliche Libraries benutzt wurden.. Somit konnte gewährleistet werden, dass es auch auf einem leistungsschwachen Raspberry Pi absolut flüssig läuft.

Neu lernen durfte ich für dieses Projekt Web-Components, welche ich sehr schätzen gelernt habe.

Web-Components im Schnelldurchlauf (für Techies)

Web-Components ermöglichen es mir, wiederkehrenden HTML-Code nur einmal schreiben zu können.

Als Beispiel nehme ich die Darstellung der Highscores. Die einzelnene Highscore-Elemente sind als Web-Components abgebildet und somit beliebig häufig verwendbar.

Highscores als Webcomponent

Die Quelle für diese Darstellung ist dabei ein JSON in der folgenden Form:

let highscoresObject = [
    {
      avatar: "berti",
      score: "1250"
    },
    {
        avatar: "tobi",
        score: "1000"
      }
  ];

Die dazugehörige Web-Component sieht folgendermassen aus:

class HighscoreElement extends HTMLElement {

   /**
   * @param {{ avatar: any; score: any; }} highscore
   */
    set highscore(highscore){
      this.innerHTML = `
        <div class="highscore">
        <div class="avatar-small ${highscore.avatar}"></div>
        <div class="name">${highscore.avatar}</div>
        <div class="score">${highscore.score}</button>
      </div>
      `;
    }
  
  }
  
customElements.define( 'highscore-element', HighscoreElement );

Also gar nicht so kompliziert, oder?

Wer jetzt auf den Geschmack gekommen ist, sich näher mit Web-Components auseinanderzusetzen, dem möchte ich die folgenden Ressourcen empfehlen:

Kinsta.com - A Complete Introduction to Web Components in 2022

Youtube.com - Build an app with WebComponents in 9 minutes

Hallway Test

Nachdem die erste spielbare Version fertig war, konnt nun endlich auf dem Bierzapfhahn getestet werden.

Dabei kamen unerwartete Probleme ans Tageslicht, welche am PC nicht erkannt wurden.

Erkenntnisse:

Aus diesen Erkenntnissen wurden noch die folgenden letzten Anpassungen vorgenommen.

Massnahmen:

Highscores als Webcomponent Highscores als Webcomponent

Action

Nach den letzten Anpassungen war es dann soweit, unsere “We are Ten”-Jubiparty konnte endlich starten. Eine letzte Installation vor Ort, und schon konnten die Besucher ihre ersten Biere erspielen.

letzte schliffe und installation des Bierzapfhahns vor Ort let the beer flowals Video sieht dies folgendermassen aus

Aufräumen

Nach dem Fest kommt das Aufräumen. Mit dem Lastenvelo von Simu konnten wir den Zapfhahn auch nach ein paar getrunkenen Bieren sicher zurück ins Büro befördern.

Beer-Bike

Selber spielen

Du möchtest das Spiel selber ausprobieren?

Wir haben das Spiel adaptiert, damit es auch aim Browser läuft!

Beer as a Service

Du willst für deine nächste Party einen individuellen Bierzapfhahn?