Füge README.md hinzu, um die Funktionsweise und Struktur der Finger Chooser App zu dokumentieren
This commit is contained in:
49
README.md
Normal file
49
README.md
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
# 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.
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
## Lokaler Entwicklungsserver
|
||||||
|
|
||||||
|
Voraussetzung: Node.js installiert
|
||||||
|
|
||||||
|
```bash
|
||||||
|
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`
|
||||||
|
|
||||||
|
## Projektstruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
ChooserApp/
|
||||||
|
├── index.html # Einstiegspunkt
|
||||||
|
├── css/
|
||||||
|
│ └── style.css # Styles & Animationen
|
||||||
|
├── js/
|
||||||
|
│ └── app.js # Touch-Logik
|
||||||
|
└── package.json # npm start Script
|
||||||
|
```
|
||||||
|
|
||||||
|
## Technologie
|
||||||
|
|
||||||
|
Reines HTML/CSS/JavaScript — kein Framework, kein Build-Schritt.
|
||||||
Reference in New Issue
Block a user