Kart-Turnier im Sommersalon

Ausgangspunkt: Mario-Kart-Abende in der Bar

Im Sommersalon am Spielbudenplatz in Hamburg-St. Pauli gibt es Mario-Kart-Abende. Teams aus zwei Personen fahren gegeneinander, jedes Team vier Spiele, ein Spiel ist ein Cup mit vier Rennen. Die Punkte aller Rennen werden addiert, und bei Gleichstand fahren die Teams noch einmal gegeneinander.

Die Anforderung des Kunden war knapp: Das Personal trägt die Punkte ein, Teams treten über einen Link bei und sehen dort das Leaderboard, und am Ende des Abends wird das Turnier beendet. Dahinter stecken drei Nutzergruppen mit ganz unterschiedlichen Situationen: das Personal hinter der Bar, mit dem Handy in der Hand und wenig Zeit. Gäste, die zwischen zwei Drinks auf ihr Handy schauen. Und ein TV, den man aus ein paar Metern Entfernung lesen muss.

Das Tool gehört zur Website des Sommersalon, läuft aber nicht über die Navigation. Jeder Abend bekommt einen eigenen Link, der als QR-Code an der Bar hängt.

Ein Ergebnis in zehn Sekunden

Hinter der Bar zählt jeder Handgriff. Die Turnier-Steuerung zeigt deshalb ganz oben, was gerade läuft: jedes Match als eigene Karte mit den beiden Teams und einem großen Button „Ergebnis eintragen". Darunter steht schon der Vorschlag für das nächste Match.

Nach dem Speichern bietet das Fenster gleich das nächste Match an. Die Paarung wählt das Tool selbst: Zuerst kommen die Teams mit den wenigsten Spielen und der längsten Wartezeit, dann ein Gegner, gegen den sie noch nicht gefahren sind, möglichst mit ähnlichem Punktestand. Teams melden sich den ganzen Abend über an, ein fester Spielplan wäre deshalb nach dem ersten Match schon veraltet.

Sind alle Spiele gefahren, meldet sich das Tool selbst: ein Banner mit Pokal, Siegerteam und dem Button „Turnier beenden & Sieger ehren". Steht es auf dem Podium unentschieden, kommt vorher der Hinweis auf ein Stechen.

Für die Gäste: anmelden per QR-Code

Wer den QR-Code scannt, gründet mit Teamnamen und eigenem Namen ein Team und schickt den Einladungslink per WhatsApp an die zweite Person. Ein Login gibt es nicht. Das Handy merkt sich das Team, auch über mehrere Turniere am selben Abend.

Die Karte „Euer Team" zeigt Platz, Punkte und die gefahrenen Spiele als Zielflaggen-Segmente. Startet das eigene Match, erscheint auf dem Handy eine Startampel: „Ihr seid dran! Ab zur Konsole." Im Leaderboard rutschen Teams sichtbar nach oben oder unten, mit einem Pfeil für die gewonnenen oder verlorenen Plätze.

Ein Fall kam erst beim Durchspielen auf: Wer den Link zuerst in WhatsApp öffnet und später im Browser, landet in zwei getrennten Speichern. Für die Seite ist das Team dann weg. Deshalb hat jedes Team einen Team-Link, mit dem es sich auf jedes Handy zurückholen lässt, und an der Bar zeigt das Personal dafür einen QR-Code.

Live-Leaderboard auf dem TV

Auf dem TV läuft dieselbe Seite in einer eigenen Ansicht: große Schrift, die ersten Plätze, ein QR-Code zum Mitmachen und die Matches, die gerade auf der Strecke sind. Sobald ein neues Match startet, legt sich eine Startampel über den ganzen Bildschirm, mit Matchnummer und den beiden Teams.

TV-Ansicht

Game Design: die Turnierregeln

Ein großer Teil der Arbeit steckte nicht in Oberflächen, sondern in den Regeln dahinter. Wann ist ein Gleichstand ein Gleichstand? Was passiert mit einem Team, das um Mitternacht erst drei von vier Spielen hat? Die Antworten stehen jetzt im Tool:

• Stechen sind ein einzelnes Rennen. Ihre Punkte zählen nicht zur Summe, sie entscheiden nur über die Reihenfolge, und zwar nur zwischen genau den Teams, die gegeneinander gefahren sind. Ein altes Stechen entscheidet keinen späteren Gleichstand gegen andere Teams.
• Unvollständige Teams landen in der Endwertung hinter allen Teams, die ihre Spiele komplett gefahren haben. Sonst wäre ein Team mit drei starken Spielen gegenüber einem mit vier durchschnittlichen bevorzugt.
• Ungerade Teamzahl: Bleibt ein Team ohne Gegner, fährt es allein gegen die Computer-Fahrer.
• Mehrere Turniere am Abend laufen unter einem Link. Teams lassen sich ins nächste Turnier übernehmen, und die Handys erkennen ihr Team wieder.

Eigene Kart-Animationen mit Lottie

Die Karts, die Startampel, die Zielflagge, der Pokal und eine hüpfende Wunderbox für Leerzustände sind eigene Lottie-Animationen, erzeugt aus dem Design-System der Website. Es gibt darin keine Figuren und keine Logos aus dem Spiel, nur generische Rennkarts in den Farben des Sommersalon. Die Räder drehen sich, die Karosserie federt, Schals wehen im Fahrtwind, und ein gelbes Kart zischt in jedem Loop einmal durch das Feld.

Die Animationen laden erst, wenn sie ins Bild kommen, und pausieren außerhalb. Wer am Handy „Bewegung reduzieren" eingestellt hat, sieht ein Standbild.

Eine Instagram-Story pro Team

Nach dem Turnier erzeugt die Seite für jedes Team ein Bild im Story-Format: Platz im Rennstil, Teamname, Spieler und Punkte, dazu das Logo und der Instagram-Account des Sommersalon. Gezeichnet wird das Bild direkt im Browser, ohne Server. Auf dem Handy geht es über das Teilen-Menü direkt in die Instagram-Story.

Umsetzung mit Nuxt

Das Turnier ist Teil der bestehenden Nuxt-Anwendung des Sommersalon, mit eigenen Tabellen in der SQLite-Datenbank über Prisma. Admin, Gästeseite und TV fragen den Stand alle paar Sekunden ab. Für eine Bar mit einer Handvoll Konsolen reicht das völlig und kommt ohne zusätzliche Infrastruktur aus.

Vor dem ersten Abend lief das Tool durch einen Review auf Fehler und Bedienbarkeit. Dabei fielen unter anderem ein Stechen auf, das einen späteren Gleichstand gegen ein anderes Team entschieden hätte, und ein „Beenden", das ein gerade zur Korrektur geöffnetes Ergebnis gelöscht hätte. Beides ist behoben.

Ergebnis

Am 8. Oktober 2026 lief das erste Turnier im Sommersalon. Die Gäste meldeten sich per QR-Code an, das Personal trug die Ergebnisse am Handy ein, und der TV zeigte den Stand live.