Finger Chooser

Eine browserbasierte Multi-Touch-App zum zufälligen Auswählen eines Fingers. Alle Teilnehmer legen einen Finger auf das Display — die App wählt per animierter Roulette-Animation einen Finger als Gewinner aus.

🌐 Live: choose.leuschner.dev

Funktionsweise

Zwei oder mehr Finger auf das Display legen
Nach 700 ms startet automatisch die Auswahl-Animation
Die Kreise leuchten nacheinander auf (Roulette), bis ein Gewinner feststeht
Alle Finger anheben um neu zu starten
Wird während der Wartezeit ein weiterer Finger aufgelegt, beginnt der Timer von vorne

Besonderheiten

Kein Fingerlimit auf Android, iPad und Desktop (bis zu 20 Touches)
5-Finger-Limit auf iPhone (iOS Safari Hardware-Grenze)
Zusätzliche Finger über dem Limit werden still ignoriert — kein Reset
Neuer Finger während der Animation → Auswahl bricht ab und startet neu
PWA-fähig: auf iOS/Android zum Home-Bildschirm hinzufügbar (Vollbild)
Safe-Area-Unterstützung für Geräte mit Notch / Dynamic Island

Deployment

Der Deployment-Workflow läuft via Gitea Actions und überträgt alle Dateien per FTPS auf den Webserver. Impressum und Datenschutz werden dabei nicht überschrieben — die echten Versionen liegen nur auf dem Server (geschützt via git update-index --skip-worktree).

Lokaler Entwicklungsserver

Voraussetzung: Node.js installiert

npm start

Der Server läuft auf Port 8080 und ist im lokalen Netzwerk erreichbar.

Handy verbinden:

PC und Gerät im selben WLAN
IP-Adresse des PCs herausfinden: ipconfig (Windows) → IPv4-Adresse
Im Browser des Geräts aufrufen: http://<IP>:8080

Icons generieren

Nach Änderungen an icons/icon.svg:

node scripts/generate-icons.js

Generiert apple-touch-icon.png, icon-192.png, icon-512.png und favicon-32.png.

Projektstruktur

ChooserApp/
├── index.html            # Einstiegspunkt
├── impressum.html        # Blanko-Template (echte Version nur auf Server)
├── datenschutz.html      # Blanko-Template (echte Version nur auf Server)
├── manifest.json         # PWA-Manifest
├── robots.txt            # Crawler-Regeln
├── sitemap.xml           # Sitemap für Suchmaschinen
├── css/
│   └── style.css         # Styles & Animationen
├── js/
│   └── app.js            # Touch-Logik & Umami-Events
├── icons/
│   ├── icon.svg          # Quell-Logo
│   ├── apple-touch-icon.png
│   ├── icon-192.png
│   ├── icon-512.png
│   └── favicon-32.png
├── scripts/
│   └── generate-icons.js # Icon-Generator (sharp)
└── package.json          # npm start + devDependencies

Technologie

Reines HTML/CSS/JavaScript — kein Framework, kein Build-Schritt. Analytics: Umami (self-hosted, cookiefrei).

Repository

git.leuschner.dev/Tobias/ChooserApp

3.0 KiB Raw Blame History