All projects Aale Spiele · Write-up

A slot machine one row tallEin Spielautomat, eine Zeile hoch

Aale Spiele lists the browser games our afternoon meeting plays and picks one when nobody wants to. The pick is a slot-machine reel made of one row and a transform, and each game gets a tile drawn in the style of the ewolution app icons.Aale Spiele listet die Browser-Spiele aus unserem Nachmittags-Meeting und sucht eins aus, wenn niemand will. Die Auswahl ist eine Walze wie am Spielautomaten, gebaut aus einer Zeile und einer Transformation, und jedes Spiel bekommt eine Kachel im Stil der App-Icons von ewolution.

Eric Wohlgethan · 3 min read3 Min. Lesezeit

aale-spiele.ewolution.cloud Source

Type
Web appWeb-App
Stack
Svelte 5 · Node · Web Animations
Year
2026
Code
Public on GitHubÖffentlich auf GitHub

Eleven games and nobody deciding

In our afternoon meeting we often play a game, and it’s usually one of the same ten: skribbl.io, Gartic Phone, Codenames, Travle, Impromptu, Songlio, Guess the Price, GeoGuessr, CurveCrash and HaxBall. Aale Spiele puts the ten on one page, in the order the team listed them, and Schätzle, our own take on Guess the Price, right beside it. Each comes with a sentence on how the game plays, what kind it is, and whether it’s every player for themselves, two teams, or everyone together. GeoGuessr is the one that needs an account, and its card says so.

Above the list sits one button, “Was spielen wir?”. It draws a game. A filter narrows both the list and the draw to creative, guessing, geo or action games, and it starts at all eleven on every visit, since a filter left on from yesterday would hide most of the overview.

A slot machine one row tall

The draw is a reel: a window exactly one row high. When it starts, the window is filled with a strip of about twenty games that begins with whatever it shows now and ends on the winner, and the strip slides up under it. Only a transform moves, so the spin runs on the compositor however busy the page is. It runs for 2.1 seconds, fast at first and slowing down, overshoots the winner by 14 pixels and settles back onto it, the way a mechanical reel does. Then the strip is swapped for the winner’s single row in the same frame, so nothing jumps.

  1. Pick. A random game from the ones the filter shows, never the one drawn last: “Again” always lands somewhere new.
  2. Strip. Random games in between, never the same one twice in a row, or the reel would look stuck.
  3. Spin. The Web Animations API slides the strip; with reduced motion the winner simply appears.

Both the pick and the strip are pure functions that take their random numbers as an argument, so the tests can feed them fixed sequences: no repeat of the previous game for any value, every other game reachable, and every strip ending on its target without stalling.

2.1 sOne spin, including the overshoot and the settle.
30 KBThe page, its script and its styles, compressed. The fonts come on top.
0Requests to any game, or to any API. The list ships with the page.

Tiles in the family’s style

Each game gets a small tile drawn like the ewolution app icons: the game’s colour as the ground, one mark, one stroke weight and exactly one dot. skribbl.io is a pencil whose point is the dot, Codenames four cards with the agent found, GeoGuessr a pin, HaxBall the pitch with the ball, and a question mark stands in before the first draw. They’re drawings in that style, not the games’ own logos, so the page loads nothing from the games’ sites.

The winner’s “Let’s go” button takes its game’s colour, which made the label hard to read on the lighter ones: white on the light end of Travle’s green was 1.7:1. The button now starts from the deep end of the tile’s colour and darkens it in small steps until the label reaches 4.5:1. A game drawn in dark ink, like Guess the Price on yellow, keeps its light end. The tests check the result for all eleven.

A ring through the dots

Behind the page is the dot grid of Atrium, the apps’ hub: the dots near the mouse swell and take the colour of the game card underneath. When a draw lands, a ring in the winner’s colours runs out from the reel through the grid at 950 pixels a second, swelling and nudging the dots it passes, and fades within 1.3 seconds. The grid is only drawn while the mouse moves or a ring runs, so an idle page draws no frames at all, and it ignores touch, since on a phone that’s scrolling.

Nothing to fetch

There’s no API and no state. The server is a Node process without dependencies that serves the built page with a strict Content Security Policy, and forwards the visit counter, Census, without cookies. The games are part of the page, so once it has been opened, the offline worker brings it up without a connection too, and an installed copy opens like an app.

Elf Spiele und niemand entscheidet

In unserem Nachmittags-Meeting spielen wir oft ein Spiel, und meistens eins von denselben zehn: skribbl.io, Gartic Phone, Codenames, Travle, Impromptu, Songlio, Guess the Price, GeoGuessr, CurveCrash und HaxBall. Aale Spiele stellt die zehn auf eine Seite, in der Reihenfolge, in der das Team sie aufgezählt hat, und Schätzle, unsere eigene Version von Guess the Price, direkt daneben. Jedes kommt mit einem Satz dazu, wie es läuft, welche Art es ist und ob jeder gegen jeden, zwei Teams oder alle zusammen spielen. GeoGuessr braucht als einziges ein Konto, und seine Karte sagt das.

Über der Liste sitzt ein Knopf, „Was spielen wir?“. Er lost ein Spiel aus. Ein Filter beschränkt Liste und Auslosung auf kreative, Rate-, Geo- oder Action-Spiele, und er steht bei jedem Besuch wieder auf allen elf, denn ein Filter von gestern würde den größten Teil der Übersicht verstecken.

Ein Spielautomat, eine Zeile hoch

Die Auslosung ist eine Walze: ein Fenster, genau eine Zeile hoch. Beim Start wird es mit einem Streifen aus etwa zwanzig Spielen gefüllt, der mit dem beginnt, was es gerade zeigt, und mit dem Gewinner endet, und der Streifen gleitet darunter nach oben. Bewegt wird nur eine Transformation, also läuft die Drehung auf dem Compositor, egal wie beschäftigt die Seite ist. Sie dauert 2,1 Sekunden, erst schnell und dann langsamer, schießt 14 Pixel über den Gewinner hinaus und rastet auf ihm ein, wie eine mechanische Walze. Dann wird der Streifen im selben Frame gegen die eine Zeile des Gewinners getauscht, sodass nichts springt.

  1. Ziehen. Ein zufälliges Spiel aus denen, die der Filter zeigt, nie das zuletzt gezogene: „Nochmal“ landet immer woanders.
  2. Streifen. Zufällige Spiele dazwischen, nie zweimal dasselbe hintereinander, sonst sähe die Walze aus, als hinge sie.
  3. Drehen. Die Web Animations API schiebt den Streifen; bei reduzierter Bewegung erscheint der Gewinner einfach.

Ziehen und Streifen sind reine Funktionen, die ihre Zufallszahlen als Argument bekommen, also können die Tests ihnen feste Folgen geben: keine Wiederholung des letzten Spiels für keinen Wert, jedes andere Spiel erreichbar, und jeder Streifen endet auf seinem Ziel, ohne zu hängen.

2,1 sEine Drehung, mit Überschwingen und Einrasten.
30 KBDie Seite, ihr Skript und ihre Styles, komprimiert. Dazu kommen die Schriften.
0Anfragen an ein Spiel oder an eine API. Die Liste kommt mit der Seite.

Kacheln im Stil der Familie

Jedes Spiel bekommt eine kleine Kachel, gezeichnet wie die App-Icons von ewolution: die Farbe des Spiels als Grund, ein Zeichen, eine Strichstärke und genau ein Punkt. skribbl.io ist ein Stift, dessen Spitze der Punkt ist, Codenames vier Karten mit dem gefundenen Agenten, GeoGuessr eine Stecknadel, HaxBall das Spielfeld mit dem Ball, und vor der ersten Auslosung steht ein Fragezeichen. Es sind Zeichnungen in diesem Stil, nicht die Logos der Spiele, also lädt die Seite nichts von deren Seiten.

Der „Los geht’s“-Knopf des Gewinners nimmt die Farbe seines Spiels, und auf den helleren war die Beschriftung schwer zu lesen: Weiß auf dem hellen Ende von Travles Grün lag bei 1,7:1. Jetzt beginnt der Knopf beim dunklen Ende der Kachelfarbe und dunkelt sie in kleinen Schritten ab, bis die Beschriftung 4,5:1 erreicht. Ein Spiel mit dunkler Zeichnung, wie Guess the Price auf Gelb, behält sein helles Ende. Die Tests prüfen das Ergebnis für alle elf.

Ein Ring durch die Punkte

Hinter der Seite liegt das Punktraster aus Atrium, dem Hub der Apps: Die Punkte nahe der Maus wachsen und nehmen die Farbe der Spielkarte darunter an. Wenn eine Auslosung landet, läuft ein Ring in den Farben des Gewinners von der Walze aus mit 950 Pixeln pro Sekunde durch das Raster, lässt die Punkte, die er passiert, wachsen und schiebt sie ein Stück, und ist nach 1,3 Sekunden verblasst. Gezeichnet wird das Raster nur, solange sich die Maus bewegt oder ein Ring läuft, also zeichnet eine ruhende Seite gar keine Frames, und Touch ignoriert es, denn auf dem Handy heißt das Scrollen.

Nichts zu holen

Es gibt keine API und keinen Zustand. Der Server ist ein Node-Prozess ohne Abhängigkeiten, der die gebaute Seite mit einer strengen Content Security Policy ausliefert und den Besuchszähler Census ohne Cookies weiterreicht. Die Spiele sind Teil der Seite, also bringt der Offline-Worker sie nach dem ersten Besuch auch ohne Verbindung hoch, und eine installierte Kopie öffnet sich wie eine App.