Die Zählerapp für Frantic
Du hast mal wieder kein Blatt Papier und einen Stift dabei? Du bist zu faul, zu wütend oder zu betrunken, um deine Karten zu zählen? Die Zählerapp für Frantic übernimmt dir die Plagen des Kopfrechnens 😉
Wie funktioniert das Ganze?
Am Anfang erfasst du alle deine Mitspieler:innen und wählst aus, wie lange ihr spielen wollt. Nach jeder Runde werden die Punkte im Herzstück der App, dem Calculator, erfasst. Die Punkte musst du dir nicht selbst zusammenrechnen, du kannst einfach deine Handkarten auswählen und die App kümmert sich um den Rest. Die Punkte und Rangliste werden automatisch aktualisiert. Das Beste an dem Ganzen ist, dass es gratis ist und du dich nirgends registrieren musst. Sämtliche Spieldaten werden nur auf deinem Gerät gespeichert.
Aktuell wird nur die Basisversion von Frantic unterstützt.
Disclaimer
Das Kartenspiel Frantic und alle dazugehörigen Logos und grafischen Materialien stehen unter dem Copyright der Entwickler. Die Nutzung der Assets wurde von Rulefactory erlaubt.
Image by rawpixel.com on Freepik
Als Erstes möchte ich mich bei Nick Schneeberger für seinen unermüdlichen Support während der gesamten Projektarbeit bedanken! Ohne ihn wäre die App nie in dieser Qualität (oder überhaupt) zustande gekommen. Ebenfalls möchte ich Rulefactory für ihre Unterstützung und grosszügige Bereitstellung ihrer Assets danken.
Idee
Ich hatte die Idee für die App an einem bierseligen Spieleabend. Aus unerklärlichen Gründen gestaltete sich das Kopfrechnen von Runde zu Runde schwieriger.
Am nächsten Tag habe ich meinen inneren Bünzli kanalisiert und die Regeln sowie die Ereignisse genau studiert. Sämtliche Regeln und Ereignisse, welche einen Einfluss auf die Punkte haben ich notiert. Damit ich einen Überblick über diese Ereignisse sowie die generellen Anforderungen an die App habe, habe ich dies in einem Flussdiagram festgehalten.
Prototyp Design
Basierend auf dem Flussdiagram habe ich diverse Scribbles angefertigt. Diese waren bewusst sehr simpel gehalten, um schnell verschiedene Ideen auszuprobieren.
Um eine Diskussionsgrundlage zu schaffen, habe ich einen ersten Low-Fidelity-Prototyp in Adobe XD erstellt. Zu diesem Stand war noch sehr vieles unklar. Deshalb habe ich in einem ersten Coaching mit Nick die Machbarkeit besprochen.
Vue.js – Prototyp
Ich habe so schnell wie möglich angefangen zu coden, um zu sehen, ob mein aktueller Wissensstand für meine Ideen ausreicht und ich mir im Design nicht unmögliche Tasks einbrocke. Die App habe ich mit dem Framework Vue.js umgesetzt.
Hier habe ich enorm viel Zeit investiert und diverse Sachen ausprobiert. Der Fokus lag nur auf der Funktionalität, nicht auf dem CSS. Ebenfalls habe ich mich noch in den Vuex Store eingelesen und eingearbeitet.
Um die Daten lokal und persistent zu speichern, wird alles über den localStorage umgesetzt. Ich investierte schon viel Zeit und Gedanken in die Reusability meines Codes durch Komponenten.
Finales Design
Als ich mit der Funktionalität des Prototyps zufrieden war, habe ich mit der Ausarbeitung des High-Fidelity-Prototypen in Adobe XD begonnen. Ich habe in einem ersten Schritt einfach wild darauf los gestaltet und viele verschiedene Gestaltungsoptionen ausprobiert. Die fehlende Methodik und Konsistenz haben mich jedoch genervt.
Deshalb habe ich mich in den Ansatz des «Atomic Designs» nach Brad Frost und das 8pt Grid intensiv eingelesen. Da die App vorwiegend auf dem Handy genutzt wird, habe ich Mobile-first (und only) gestaltet. Beim 8pt Grid ist die Idee, dass jeder Wert (Padding, Line-height etc.) durch acht teilbar ist und so Harmonie durch Konsistenz geschaffen wird. Während der Umsetzung erschien mir das 8pt Grid etwas zu limitiert, weshalb auf ein 4pt Softgrid umstellte. Der Verwaltungsaufwand ist dadurch höher, aber ich finde die höhere Flexibilität ist es wert. Für die Konsistenz ist jedoch jede Art von Grid unverzichtbar.
Die praktische Umsetzung des «Atomic Designs» gestaltete sich zu Beginn etwas kompliziert und mühselig in Adobe XD. Die ständige Verschachtelung von Komponenten ist zu Beginn gewöhnungsbedürftig und kann teilweise zu komischen Bugs führen. Meine Vorbereitung für das «Atomic Design» war nicht optimal, weshalb ich der Methode nicht zu 100% folgen konnte. Trotzdem hat es sich auch für die Konsistenz gelohnt. Und das Denken in Komponenten hat für die praktische Umsetzung in Vue sehr geholfen.
Vue.js – Finale Umsetzung
In der finalen Umsetzung habe ich viel Zeit in das Refactoring des bestehenden Codes investiert. Alles, was ich in Komponenten oder json Files auslagern konnte, habe ich ausgelagert. Ebenfalls ist das ganze CSS custom geschrieben. Die Umsetzung mit den Komponenten hat sich sehr gelohnt, jedoch die Komplexität erhöht.
Damit ich eine Versionierung habe und bei Bedarf zurückgehen kann, habe ich bei der finalen Umsetzung mit Github gearbeitet.
«User-Testings»
Während der gesamten Projektdauer habe ich immer wieder kleine User-Testings gemacht, um meine Ideen zu überprüfen und anzupassen. Ich hätte dies gerne in strukturierten Tests gemacht, doch dazu reichte die Zeit leider nicht.
Reflektion
Es ist immer wieder erstaunlich, wie selbst eine vermeintlich simple App komplex werden kann. Leider habe ich im ersten Prototyp zu viel ausprobiert und im Designteil durch die neuen Methoden ebenfalls viel Zeit verloren. Während des Gestaltens habe ich gemerkt, dass mir die Zeit davonrennt, weshalb ich mich nur auf die kritischen Inhalte fokussieren konnte. Ich hätte das Design lieber zuerst komplett fertiggestellt, aber ich musste es so lassen, da ich ansonsten die Umsetzung nicht fertiggebracht hätte.
Ich hätte gerne noch ein Logo erstellt und sämtliche Regeln und Ereignisse in die App eingebunden. Ebenfalls wollte ich ursprünglich sämtliche Event Icons in After Effects animieren und diese mit Lottie.js in die App einbinden. Das CSS ist leider ebenfalls sehr chaotisch, dies muss ich in einem weiteren Schritt überarbeiten.
Mein Zeitmanagement war sicher nicht optimal und ich hätte mir von Anfang an kleinere Ziele stecken sollen und diese Step by Step abarbeiten. Aber ich bin sehr zufrieden mit der App und das Projekt an sich hat wirklich Spass gemacht. Ich konnte enorm viel mitnehmen aus der Zeit.
Wenn die App Anklang findet, würde ich sie gerne weiter ausbauen. Aktuell wird nur das Basisspiel unterstützt, ich würde in einem nächsten Schritt noch die Erweiterungen miteinbeziehen. Ebenfalls will die App noch als Progressive Web App umsetzen.