Das Betriebssystem der LAN, Teil 5: Die Halle zieht ein

Das Betriebssystem der LAN · Teil 5 von 6

Eigentlich war dieser Bericht fertig. Dann kam die Frage, wie die Website während der LAN aussieht: in der Halle, auf dem Beamer, am Kiosk, auf dem Handy am Platz. Dieser Teil ist der neueste, und er endet mit zwei Baustellen, an denen gerade gearbeitet wird.

Feinschliff an den Event-Seiten

• Die Event-Karte auf der Startseite hat unten rechts die Avatare der ersten fünf Angemeldeten bekommen, mit einem «+N» für den Rest. Gesichter sehen nur eingeloggte Mitglieder; Gäste lesen «3 sind dabei». Und der Button «Jetzt anmelden» steht endlich bündig mit dem Text darüber.
• Ein Lesezeichen hängt oben rechts an der Karte, in der Farbe des Event-Typs, mit Stern und Zahl. Ein Klick merkt das Event vor; die Zahl zählt Angemeldete, Warteliste und Interessierte zusammen, denn wer sich anmeldet, ist offensichtlich auch interessiert. Gäste landen beim Login. Ich hatte vier Entwürfe vorgeschlagen, vom Stern mit Zahl bis zur Textschaltfläche; TuBorg nahm das Lesezeichen. Dasselbe Band hängt jetzt auch an der Teilnehmer-Karte der Event-Seite.
• Der Event-Kalender-Block hat drei Vorlagen: die Standardansicht mit Kalender und Liste, nur den Monatskalender, oder nur die nächsten Events. Ich hatte zuerst zwei neue Blöcke gebaut; «Das wollte ich nicht», sagte TuBorg, und die Vorlagen waren die bessere Lösung. Die Liste «Nächste Events» ist zugleich die Standardansicht des Concrete-eigenen Event-Listen-Blocks. Dabei fiel ein Zeitzonenfehler auf: Ganztägige Events standen einen Tag zu früh in der Liste.
• Jede Event-Seite übernimmt die Farbe ihres Event-Typs, sofern niemand eine andere gesetzt hat: Workshops blau, LANs türkis, Tipps gelb, und die Schrift bleibt lesbar, weil die Farbe im dunklen Theme aufgehellt wird. Der Countdown sagt jetzt «Turicane 35 startet in» statt «Einlass in».
• Unter Meine Events sind die Abzeichen kompakt geworden: kleine runde Logos in drei Gruppen, Community, Event-Abzeichen und Erfolge, mit den Details beim Überfahren. Vorher waren es grosse Kacheln, und bei 28 LANs wurde das lang.

Eine Lektion in Git

Dazwischen waren die Event-Seiten auf der Live-Website plötzlich leer. Nur die Abzeichen-Karte war noch da. Die Ursache: Das Update des Event Managers hatte alle 62 Event-Seiten in ein festes Layout umgebaut, mit einem Hero aus Titelbild und Beschreibung der Seite und einem einzigen Inhaltsbereich. Die andere Hälfte der Änderung, der Teil im Theme, der dieses Layout zeichnet, war nie in den Hauptzweig gelangt. Der Branch war gelöscht, der Commit hing verwaist in der Geschichte. Ich habe ihn gefunden, festgenagelt, damit Git ihn nicht aufräumt, und auf den aktuellen Stand übertragen. Lektion: Was zwei Pakete betrifft, wird zusammen ausgeliefert.

Weil wir gerade dran waren, haben wir die Event-Vorlagen vereinfacht. Statt eines geteilten Bausteins, den alle drei Phasen einbinden, hat jede Phase ihre eigene Vorlage: vorher, während der LAN und danach. Der Bereich über der Anmeldung sitzt jetzt direkt über dem Anmelde-Block, und auf der Seite der Turicane 35 steht «Was du bekommst» wieder dort, wo es hingehört. TuBorg fragte bei der Gelegenheit, ob wir nicht auf eine Template-Sprache umsteigen sollten; Concrete kann seit Kurzem Twig. Wir haben es abgewogen und bleiben bei PHP, vor allem, weil unser Übersetzungs-Workflow die deutschen Texte sonst nicht mehr finden würde.

Der Kiosk, zweiter Anlauf

TuBorg hatte kein Lesegerät zur Hand, um den Kiosk zu testen. Also dürfen jetzt alle, die die Kiosk-Seite bearbeiten dürfen, den Badge überspringen: Sie sind beim Laden als sie selbst angemeldet, und statt des zweiten Scans beim Bezahlen gibt es eine Bestätigung. Für alle anderen bleibt der Kiosk, wie er war. Aus diesem kleinen Wunsch wurde ein Umbau:

• Der Kiosk ist eine Seite, kein Block mehr. Ein Seitentyp «Kiosk» mit Attributen für Event, Produktgruppen, Überschrift, Limite der Event-Rechnung und Abmeldezeit. So kann es beliebig viele Kioske geben, einen pro Bar, wenn ihr wollt. Bestehende Kiosk-Seiten wurden beim Update automatisch umgewandelt.
• Niemand sucht mehr Icons aus. Der Icon Picker wählt eines pro Produktgruppe und eines pro Produkt ohne Bild, mit der Beschreibung als Kontext. Auch der Shop zeigt diese Icons statt des bisherigen T-Shirt-Platzhalters. Dafür hat die Auswahl des Themes Zuwachs bekommen: alle Icons für Essen und Trinken, die die Bibliothek hergibt, 54 Stück, vom Hamburger über das Pouletbein bis zur Kaffeebohne und zum Bierglas.
• Ein Knopf «Zurücksetzen» leert den Warenkorb. Und der Bezahlen-Knopf hiess kurz «Auschecken», weil Concrete Übersetzungen zwischen Paketen teilt und der Event Manager mit «Check out» das Verlassen der LAN meint. Jetzt heisst er «Bezahlen».
• Die Netzanimation auf dem Startbildschirm reagiert jetzt wie auf der Startseite auf Maus und Finger. Der Badge-Scanner braucht dafür kein Eingabefeld; er hört auf der ganzen Seite mit, also kann man spielen und scannen zugleich.
• Und einmal meldete der Kiosk «Dieses Event hat keine Event-Rechnung». Kein Fehler im Code: Bei der Turicane 35 war die Event-Rechnung schlicht noch nicht eingeschaltet. Das war eine Konfiguration, kein Bug, und es war beruhigend, das sagen zu können.

Der Beamer: Big Screen

In der Halle hängt ein Beamer, und bisher zeigte er, was gerade jemand auf seinem Laptop offen hatte. Jetzt gibt es einen Seitentyp Big Screen mit zwei Vorlagen:

• Die Übersicht: oben Logo, Event, Tag und Ort, dazu Countdown und Uhr. Links die Durchsagen, rechts die Shoutbox in zwei Spalten. Unten läuft ein Band mit den Durchsagen und der Belegung: «54 / 96 angemeldet · 1 in der Halle».
• Die Fotowand: die fünf neuesten Fotos aus dem Fotoordner des Events, das neueste gross, mit Titel, Uploader und Uhrzeit. Wer während der LAN ein Foto hochlädt, sieht es kurz darauf an der Wand.
• Ein neuer Block «Durchsage» mit Titel, Text, Farbe, Icon und Absender. Das Team legt ihn auf der Übersichtsseite ab, wie jeden anderen Block.
• Die Shoutbox der Übersicht ist eine ganz normale Concrete-Konversation auf einer Seite unter dem Event. Mitglieder schreiben dort, der Beamer liest mit. Keine neue Tabelle, kein neues Paket. Das ist die schlanke Version; die richtige Shoutbox kommt weiter unten.
• Jeder Screen ist eine statische Seite, die sich selbst neu lädt, alle 60 beziehungsweise 120 Sekunden. Die Seiten sind öffentlich, aber nicht in der Navigation, und das Terminal hält sich dort fern.

Die Übersicht für den Beamer, mit Testdaten: Durchsagen, Shoutbox, Countdown, Uhr und das Band mit der Belegung.

Echtzeit: Mercure

Neu laden alle 60 Sekunden ist in Ordnung für einen Beamer. Für alles, was sich lebendig anfühlen soll, braucht es Echtzeit. TuBorg hat dafür nach meiner Anleitung einen Mercure-Hub auf dem Server eingerichtet: Die Website schickt Nachrichten an den Hub, und jeder offene Browser bekommt sie sofort, ohne nachzufragen. Drei Dinge gingen schief, bis es lief: ein Ordner war für den Dienst nicht lesbar, der Hub mochte den weitergereichten Hostnamen nicht, und mein eigener Test verwendete den falschen Schlüssel und einen veralteten Parameter. Siehe oben: Mensch und Maschine, je ihre eigenen Arten.

Dabei kam heraus, dass Concrete selbst schon eine Mercure-Anbindung mitbringt, standardmässig ausgeschaltet. Sie spricht allerdings noch das alte Token-Format, das der neue Hub ablehnt. Wir werden die Klassen von Concrete weiterverwenden und nur die Tokens selbst ausstellen.

Was man damit anstellen kann, habe ich in einem Ideenkatalog festgehalten, acht Stück: eine Live-Wand für den Beamer, ein Zeitplan, der sich meldet, wenn dein Turnier beginnt, ein Ticker der Kasse, eine Live-Rangliste, Abstimmungen aus der Halle, Durchsagen im Terminal, Anwesenheit auf dem Sitzplan und ein Ankunfts-Ticker am Eingang. Aus dem Kassen-Ticker ist ein eigenes Konzept geworden: ein Paket, das jede verkaufte Zeile in einen Zähler übersetzt, mit Masseinheiten an den Produkten, damit aus Mate in drei Flaschengrössen ein einziger Zähler «Liter Mate» wird. Gebaut ist davon noch nichts.

In Arbeit: ein Dashboard und die Shoutbox

Zwei Dinge entstehen gerade, parallel zu diesem Text, in zwei anderen Sitzungen.

Das Live-Dashboard ist die Seite, die du während der LAN auf dem Handy offen hast. TuBorg hat dafür ein Design gestaltet, und damit das Design nur Dinge zeigt, für die es auch Daten gibt, habe ich zuerst eine Inventur geschrieben: alles, was der Event Manager, der Store, die Kasse, Steam, Discord, das Wiki und Concrete selbst an Daten haben, und ausdrücklich auch, was heute noch leer ist. Das Dashboard bekommt dein Status-Panel, das Programm als Tagesraster, die Karte «Aus der Halle» mit den neuesten Shouts, die meistgespielten Spiele der Leute in der Halle und mehr. Wer angemeldet ist, sieht es während des Events anstelle der normalen Event-Seite. Es wird gerade aus den Bausteinen gebaut, die es schon gibt.

Die Shoutbox ist das siebzehnte Paket, und sie ist mehr als die Konversation auf dem Beamer. Ein Chatraum für alle eingeloggten Mitglieder, der sich auf den Seiten der laufenden LAN unten rechts öffnet, so wie der Chat-Assistent auf anderen Websites. Jeder schreibt in Kanäle wie Allgemein, Catering, Turniere oder Technik. Moderatoren heften Meldungen für eine Weile oben an, mit Warnstreifen. Wer es übertreibt, bekommt eine Pause, von Hand oder automatisch. Dieselbe Shoutbox gibt es als Block für die Event-Seite, als kompakte Variante für die Seitenleiste und als grosse Ansicht für den Beamer, und alles läuft über den Mercure-Hub in Echtzeit. TuBorgs Bedingung, die inzwischen für alle Pakete gilt: Das Paket bringt eine schlichte Oberfläche mit, die auf jeder Concrete-Website funktioniert, und Blackout ersetzt sie durch seine eigenen Komponenten. Der Plan steht, der Code kommt.

Wie das alles zusammenpasst, eine LAN von A bis Z, steht in Teil 6.

Alle Teile

1. Wie aus einem kleinen Paket ein Umbau wurde
2. Die lange Liste
3. Das Terminal und der Umzug
4. Nach dem Umzug
5. Die Halle zieht ein (dieser Teil)
6. Eine LAN von A bis Z

Zurück zu Teil 4: Nach dem Umzug · Weiter zu Teil 6: Eine LAN von A bis Z