Wizard Spielezettel App
Fullstack Design und Entwicklungs Projekt
Inhaltsverzeichnis
Eine Open-Source Score-Counter-Webapp für das Kartenspiel Wizard. Die App hilft beim Verfolgen, Berechnen, Analysieren und Teilen von Spielständen.
Wizard Projekt-Statistiken
Über das Kartenspiel
Wizard ist ein Kartenspiel für drei bis sechs Personen von Amigo Spiele. Das Hauptspiel funktioniert so: Alle erhalten eine bestimmte Anzahl an Karten und müssen vorhersagen, wie viele Stiche damit gewonnen werden. Die Anzahl der Karten erhöht sich in jeder Runde um eine. Bei einer richtigen Vorhersage gibt es Punkte; andernfalls werden Punkte abgezogen. Wer am Ende des Spiels die meisten Punkte hat, gewinnt das Spiel. Die App unterstützt auch Erweiterungen und spezielle Community-Regeln.
Wizard Score App öffnenEindrücke
Einrichtung

Starte schnell ein neues Spiel! Gib die Namen der aller die mitspielen ein, aktiviere Sonderregeln und es kann schon losgehen. Die App ist responsiv umgesetzt und sowohl auf Mobilgeräten als auch auf dem Desktop optimal nutzbar.
Schneller Überblick über das laufende Spiel
Ein schneller Überblick über das aktuelle Spiel zeigt sofort, wer gerade führt. Angezeigt werden die aktuelle Runde, die aktuell kartengebende Person (blau hervorgehoben) und die aktuellen Punktestände der Spielenden.
Coole Diagramme
Die App bietet eine umfassende Analyse des Spiels mit Diagrammen, Tabellen, Ranglisten und tiefgreifenden Insights.
Detaillierte Einblicke
Die App bietet detaillierte Spielanalysen. Unter anderem berechnet sie die Vorhersagegenauigkeit und die Wahrscheinlichkeit, wie richtig getippt wird.
Und eine Menge Konfetti
Wizard Score App öffnen Tiefe Einblicke

Alle Spiele sind an einem Ort gebündelt und können jederzeit aufgerufen werden. Die App verfügt über eine Synchronisierungsfunktion, damit der Verlauf auf verschiedenen Geräten erhalten bleibt. Spiele können auch ganz einfach mit Freunden oder Familie geteilt werden, indem ein Link versendet wird.

Nach einigen Spielen stellt sich oft die Frage: Wer spielt am besten? Wer hat die meisten Punkte geholt? Wer hat die beste Vorhersagequote? Die App bietet eine detaillierte Analyse von allen, mit denen je gespielt wurde.

Und nicht zuletzt kann auch die Art der absolvierten Spiele analysiert werden. Was ist der beliebteste Spieltag? Wie lange dauern die Spiele normalerweise? Mit wie vielen Spielenden wird im Schnitt gespielt? Wie genau sind alle Tipps und mit welchen Regeln wird meistens gespielt? Die App liefert tiefe Einblicke in den eigenen Spielstil und persönliche Vorlieben.
Wizard Score App öffnenUnd viele weitere Features
Quality of Life
Die App erleichtert die Dateneingabe, indem sie die Spieler automatisch in die richtige Reihenfolge bringt (diese ändert sich nach jeder Runde) und den aktuellen Geber hervorhebt. Darüber hinaus überwacht die App vom Nutzer festgelegte Sonderregeln und Ausnahmen.
Spielhistorie
Die App speichert die Spiele, die Sie gespielt haben. Sie können leicht auf Ihre gespielten Partien zugreifen und eine detaillierte Analyse jedes Spiels ansehen. So bleiben Sie über Ihre Fortschritte auf dem Laufenden und sehen, wie Sie sich im Laufe der Zeit entwickelt haben.
Spiele teilen
Sie können ein Spiel bequem mit anderen teilen, indem Sie ihnen einen eindeutigen Link schicken. Andere Personen können diesen Link öffnen, eine Vorschau des Spiels ansehen und entscheiden, ob sie es ihrem lokalen Spielverlauf hinzufügen möchten.
Fehlerkorrektur
Menschliche Fehler können passieren. Die App bietet eine einfache Möglichkeit zur Korrektur. Sie können Vorhersagen, Stiche, Spielernamen, den aktuellen Geber, Punktestände und vieles mehr nachträglich anpassen.
Responsives Design
Die App ist responsiv konzipiert und funktioniert sowohl auf Mobilgeräten als auch auf Desktop-Computern. Sie passt sich den unterschiedlichen Bildschirmgrößen und -ausrichtungen an und bietet über verschiedene Geräte hinweg ein flüssiges Nutzererlebnis durch entsprechende Skalierung.
Optimierte Leistung
Die App wurde darauf ausgelegt, schnell und effizient zu sein. Sie nutzt moderne Technologien für ein flinkes Nutzungserlebnis. Das Hauptspiel läuft nach dem ersten Laden der Seite vollkommen ohne Reloads oder weitere Serververbindungen. Astro minimiert dabei alle Dateien für zusätzliche Performance.
Vermeidung von Datenverlust
Das oberste Ziel ist Null Datenverlust. In der Hitze des Gefechts kann es passieren, dass das Smartphone in den Standby-Modus geht, der Tab geschlossen wird oder die Internetverbindung abreißt. Um einen Datenverlust zu verhindern, speichert die App den aktuellen Spielstand fortwährend lokal im Browser und verschlüsselt in der Cloud ab. So kann das laufende Spiel immer wiederhergestellt werden (selbst wenn das Smartphone explodiert 😅).
Wizard Score App öffnenZentrale Lernerfahrungen
Dieses Projekt ist meine erste komplett ausgereift wirkende Webanwendung. Ich habe sie parallel zu meinen Informatik-Vorlesungen entwickelt, mit neuem Wissen herumexperimentiert und sowohl das Backend als auch das Frontend aufgebaut. Dabei habe ich viel über effizientes Arbeiten und das Automatisieren repetitiver Aufgaben gelernt. Ich habe beispielsweise GitHub Actions konfiguriert, um nach einem Push in den Main-Branch automatisch den Build- und Deployment-Prozess der App anzustoßen.
Webentwicklung Darüber hinaus habe ich eine Menge über die Basis der Webentwicklung gelernt – das Arbeiten mit purem HTML, CSS und JavaScript –, da die App größtenteils mit dem nativen Web-Stack gebaut wurde und nur ein paar Extras nutzt, die die Webentwicklung extrem erleichtern. Darunter TypeScript oder Astro, die Typen für JS, automatische Minimierung, Komponenten-Support und viele weitere Quality-of-Life-Features mitbringen.
Backend Ich habe mir auch viel Wissen im Backendbereich angeeignet. Ich entschied mich für den Einsatz von PHP und MariaDB, da mir PHP und SQL ohnehin schon vertraut sind. So lernte ich tiefgehend, wie ein Backend strukturiert sein sollte, wie man mit Datenbanken interagiert und natürlich Dinge zur Web-Security.
UI Design Wie immer gilt auch hier: Die Einfachheit ist entscheidend. Ich habe gelernt, wie man ein sehr aufgeräumtes, simples und vor allem intuitives UI aufbaut. Mithilfe von Designregeln aus meinen Vorlesungen gelang es mir, ein Interface zu entwerfen, das sich von anderen Nutzern in Tests als sehr leicht verständlich erwiesen hat, sofern man das Kartenspiel an sich beherrscht.
Wizard Score App öffnen
Wizard Score App
Design and development of a score counter and analysis webapp for the card game Wizard

RehApp
Gestaltung einer Anwendung, die den Rehabilitationsprozess für Amateurathleten durch einen nutzerorientierten Designprozess erleichtert