🎰 Elsa Gambling — Docs
Materiale di ricerca per costruire una web app (HTML + JS vanilla) che assegna ~20 persone a un insieme di stanze, e rivela l'assegnazione come uno show di scommesse/slot machine: il risultato lo decide un algoritmo, ma l'esperienza è pura suspense da casinò.
Tutti i documenti sono ricerche fatte sul web (fonti reali con URL in fondo a ogni file).
Indice
| # | Documento | A cosa serve |
|---|---|---|
| 01 | Stile visivo gambling | Palette neon/oro, font LED/7-segment, motivi slot/chip/jackpot, tecniche CSS glow copiabili |
| 02 | Meccaniche suspense & reveal | Psicologia dello spin&reveal, easing dei rulli, come far sembrare "random" un risultato già deciso |
| 03 | Interattività & coinvolgimento | Gamification, scommesse/quote, sound design (SFX free), coriandoli, modalità schermo condiviso |
| 04 | Implementazione vanilla JS | Codice concreto: rulli, ruota, canvas-confetti, audio, font Google, setup single-file |
Idea in una riga
L'algoritmo calcola l'assegnazione persona → stanza. La UI non la mostra: la fa girare. Rulli che rallentano, near-miss, drumroll, poi il nome della stanza si ferma con un ding e partono i coriandoli. Persona dopo persona, in crescendo, con la VIP room come jackpot finale.
Punti chiave emersi dalla ricerca
- L'attesa vale più del premio: la dopamina è nell'anticipazione, non nel risultato → investire sull'animazione di build-up più che sul reveal secco (doc 02, 03).
- Predeterminato ≠ noioso: si accumulano giri interi casuali e si atterra sull'indice/angolo target
con un
cubic-beziereaseOut/easeOutBack. Sembra random, ma finisce dove vuoi tu (doc 02, 04). - Solo
transformeopacityper animare fluido a 60fps; rispettareprefers-reduced-motion(doc 01, 04). - Zero backend per partire: modalità single-screen/proiettore. Upgrade opzionale con QR code stile Jackbox/Kahoot o realtime (doc 03).
- Stack leggero via CDN:
canvas-confettiper le celebrazioni,Howler.jsper l'audio; tutto il resto CSS/JS vanilla (doc 03, 04).
Prossimo passo
Definire l'algoritmo di matching (vincoli: capienza stanze, preferenze, coppie/gruppi, eventuali "quote" per il gioco delle scommesse). Poi lo attacchiamo al livello di reveal descritto nel doc 02/04.
Note
- Le palette hex nel doc 01 sono coerenti e pronte all'uso, ma non sono brand ufficiali (dichiarato nel file).
DSEG(font 7-segment) va self-hostato: non è su Google Fonts. Fallback solo-Google: Share Tech Mono / DotGothic16 (doc 04).