45 lines
2.7 KiB
Markdown
45 lines
2.7 KiB
Markdown
# 🎰 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).
|