# 🎰 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](./01-stile-visivo-gambling.md) | Palette neon/oro, font LED/7-segment, motivi slot/chip/jackpot, tecniche CSS glow copiabili | | 02 | [Meccaniche suspense & reveal](./02-meccaniche-suspense-reveal.md) | Psicologia dello spin&reveal, easing dei rulli, **come far sembrare "random" un risultato già deciso** | | 03 | [Interattività & coinvolgimento](./03-interattivita-coinvolgimento.md) | Gamification, scommesse/quote, sound design (SFX free), coriandoli, modalità schermo condiviso | | 04 | [Implementazione vanilla JS](./04-implementazione-vanilla-js.md) | 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-bezier` easeOut/easeOutBack. Sembra random, ma finisce dove vuoi tu (doc 02, 04). - **Solo `transform` e `opacity`** per animare fluido a 60fps; rispettare `prefers-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-confetti` per le celebrazioni, `Howler.js` per 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).