$piggieBank
Was ist $piggieBank? Einfach zusammengefasst, ist es ein Tool, mit welchem man Spielgeld virtuell verwalten kann.
Für wen ist $piggieBank?
PiggieBank ist für alle gedacht, die eine Währung in einem Spiel benötigen und diese nicht in Form von Spielgeldnoten herumtragen wollen. In erster Linie sind damit Vereine wie Cevi, Pfadi, Jubla im Zielpublikum, da in diesen Vereinen oft Spiele gespielt werden, die eine Form von Spielwährung benötigen.
Wie funktioniert $piggieBank?
Eine für das Spiel verantwortliche Person muss sich als erstes einen Account als Gamemaster erstellen. Sobald dieser Account erstellt ist, kann der Gamemaster ein Game erstellen und dieses mit einem Passwort versehen. Ist das Game erstellt, kann der Gamemaster alle Teilnehmer als Players hinzufügen und ihnen ihr Startkapital zuweisen. Sind alle Player erstellt, kann der Gamemaster ein Playersheet erstellen lassen, auf welchem alle im Spiel mitmachenden Spieler aufgelistet und einem QR-Code zugewiesen sind. Dieses Playersheet kann nun ausgedruckt, ausgeschnitten und an die einzelnen Spieler:innen verteilt werden.
Die restlichen Spielleiter können sich unter dem Menü-Punkt Home mit dem Namen und dem dazugehörigen Passwort in das Game einloggen. Wenn ein Teilnehmer bei ihnen ist und Geld auf oder weg von seinem Konto haben muss, kann ein:e Spielleiter:in den QR-Code scannen und so auf das Konto des Spielers oder der Spielerin zugreifen.
Um den Einstieg zu erleichtern, habe ich ein kleines Tutorial-Video zusammengestellt, welches zeigt wie $piggieBank funktioniert:
(mou)
Idee
Die Idee für dieses Projekt kam mir im diesjährigen Herbstlager, der Cevi Derendingen, in welcher ich seit vielen Jahren als Mitglied und Leiter tätig bin. An einem Tag hatten wir ein grosses Spiel, welches sich über den ganzen Tag erstreckte und an verschiedenen Orten stattfand. Das Spielübergreifende Element war die Spielwährung, welche die Kinder erspielen konnten. Grundsätzlich ging es darum, wer am Ende des Tages am meisten Spielgeld besass. Meine Aufgabe war es am Ende des Tages das Geld aller über 20 Teilnehmer entgegen zu nehmen und zu summieren, um die Gewinnerin/den Gewinner festzustellen. Zwischen verzählen, Kindern welche verspätet noch einmal Spielgeld brachten, weil sie noch in einer Hosentasche ein paar Noten fanden und anderen Kindern die sich beschwerten, ihnen sei Spielgeld gestohlen worden kam mir der Gedanke, wie viel einfacher es doch wäre, wenn man dieses Spielgeld einfach virtuell verwalten könnte. Mit diesem Gedanken war der Grundstein für mein Projekt $piggieBank gelegt.
Umsetzung
Die Funktionalität der Webseite ist Grundsätzlich in zwei Teile geteilt:
Der eine Teil ist der Teil für die Spielleiter:innen oder Admins ,wie ich sie in ersten Projektskizzen nannte. Dieser Teil wird während der Benutzung der Webapp am meisten genutzt. Die grundsätzliche Funktionalität, dass man sich in ein Game einloggen konnte, in diesem Game die ID einer Spielers eingeben und die Balance dieses Spielers verändern konnte, war nicht besonders schwierig. Die grosse Herausforderung dieses Teils war allerdings die Einbettung eines funktionierenden Qr-Code Readers. Einen eigenen Qr-Code Reader von Grund auf zu programmieren, macht nicht nur keinen Sinn, sondern übersteigt auch meine aktuellen Programmierkenntnisse masslos. Deshalb habe ich mich nach einer Javascript-Library umgesehen, welche dies für mich erledigen kann. Da der Qr-Code Reader eigentlich nur einen Qr-Code einliest, welcher die passende ID zu einem Spieler enthält, dachte ich es wäre einfach, dies am Schluss noch obendrauf zu setzen. Darin habe ich mich allerdings getäuscht. Ich benötigte mehr Zeit als gedacht, mich in die Dokumentation einzulesen und den Qr-Reader so zum funktionieren zu bringen, wie ich ihn benötigte.
Der zweite Teil der Webapp ist das Gamemaster-Panel. Dies ist der eigentlich komplexere Teil der Webapp. Das Gamemasterpanel muss viel können: neue Gamemaster registrieren, bestehende Gamemasters einloggen, neue Games hinzufügen, bestehende Games bearbeiten oder löschen, neue Spieler zu Games hinzufügen, die Spieler in den Games bearbeiten und zu guter Letzt noch eine druckerfreundliche Seite generieren, welche alle Spieler:innen eines bestimmten Games, mit ihrem zugehörigen Qr-Code enthält. Auch hier habe ich nur für die Qr-Codes auf eine externe Ressource zugegriffen: Die Qr-Codes werden mit Hilfe einer API generiert.
Design
Da mir bald einmal bewusst wurde, dass ich die technische Komplexität meiner Webapp zu Beginn unterschätzt hatte. Somit würde ich nur für die Umsetzung der Funktionalität viel mehr Zeit benötigen würde, als gedacht. Deshalb entschied ich mich gegen ein aufwändiges Design und verwendete eine simple CSS-Library. Die verwendete Library heisst Materialize.css und orientiert sich am Google-Material-Design. Gerne hätte ich mehr Zeit in das Design der Webseite investiert, allerdings hätte dies den zeitlichen Rahmen neben meinen anderen Digezz-Projekten gesprengt.
Fazit
Mir ist bewusst, dass meine Webapp nur eine sehr nischenartige Verwendung findet. Allerdings habe ich persönlich im Laufe dieses Projekts sehr viel über PHP und SQL lernen können und gleichzeitig mein Javascript-Wissen vertiefen und festigen.
Was ich in einem nächsten Projekt anders machen würde ist vor allem die Planung: Zu Beginn des Projekts habe ich mir nur einen rudimentären Plan aufgestellt, wie ich zur fertigen Webapp komme. Dies hat sich mehrfach als nachteilig bewiesen, weil ich oft «backtracken» musste und Funktionen, welche ich zuvor geschrieben hatte wieder verändern oder sogar mehr oder weniger neu schreiben musste, weil sie nicht mehr so funktionierten, wie ich dies benötigte.
In Zukunft möchte ich das Projekt erneut aufgreifen und ein grosses visuelles Upgrade vollziehen, vielleicht sogar noch einige neue Funktionen hinzufügen.