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

1. Zwei oder mehr Finger auf das Display legen
2. Nach 700 ms startet automatisch die Auswahl-Animation
3. Die Kreise leuchten nacheinander auf (Roulette), bis ein Gewinner feststeht
4. Alle Finger anheben um neu zu starten
5. 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:

1. PC und Gerät im selben WLAN
2. IP-Adresse des PCs herausfinden: ipconfig (Windows) → IPv4-Adresse
3. 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