hiimjako/shalom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ci paice

Browse Source
This commit is contained in:
Alberto Moretti
2026-07-02 13:26:28 +02:00
parent 706306d8b6
commit e0f9dd8da3
5 changed files with 1489 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
README.md Normal file
View File

@@ -0,0 +1,61 @@
# 🎰 ELSA GAMBLING
Web app (HTML + CSS + JS vanilla) che assegna le persone alle stanze con un
**algoritmo di matching** e rivela il risultato come uno **show di scommesse /
slot machine**: rulli che rallentano, near-miss, drumroll, coriandoli, jackpot
sulle stanze con jacuzzi.
## Come avviare
Basta aprire **`index.html`** in un browser (doppio click) — serve connessione a
internet perché three.js (sfondo monete) e canvas-confetti sono caricati da CDN.
In alternativa, con un mini server locale:
```bash
python3 -m http.server 8080
# poi apri http://localhost:8080
```
## Come si gioca
- **START / SPINNA!** — rivela la persona successiva con un giro di slot.
- **AUTO ▶** — rivela tutti in sequenza da solo (modalità proiettore).
- **RE-ROLL 🎲** — rifà il sorteggio (nuova assegnazione).
- **🔊** — on/off dei suoni (sintetizzati, nessun file audio).
- **Scommesse** — prima di ogni giro clicca una stanza nel pannello a destra per
puntare 10 gettoni; se indovini vinci in base alla quota. Contro di te giocano
3 scommettitori simulati (leaderboard live).
I posti con **jacuzzi** (Argo, Eolo, "Quanto te la rischi") sono i jackpot e
vengono rivelati per ultimi, con celebrazione extra.
## Regole del matching
- Ogni stanza è **mono-genere** (M con M, F con F).
- L'algoritmo partiziona le stanze tra i due generi rispettando le capienze, poi
distribuisce le persone a caso senza lasciare stanze vuote.
- Verificato su 5000 run: 0 violazioni del vincolo, nessuna stanza vuota.
## File
| File | Ruolo |
|------|-------|
| `index.html` | Struttura + link CDN/font |
| `styles.css` | Tema neon/casino |
| `data.js` | Stanze e partecipanti (sorgente dati) |
| `matching.js` | Algoritmo di assegnazione (testabile in Node) |
| `app.js` | Motore reveal: rulli, audio, three.js, coriandoli, scommesse |
| `docs/` | Ricerca su stile gambling, suspense, interattività, implementazione |
## Dati attuali
16 persone (6 F / 10 M) · 8 stanze / 18 posti. Modifica `data.js` per cambiare
nomi, generi o stanze — l'app si adatta da sola.
## Idee non ancora fatte (possibili evoluzioni)
- **Scommesse multi-persona reali** dai telefoni (ora: singolo operatore + bot
simulati). Servirebbe `BroadcastChannel` o un piccolo backend.
- **SFX reali** al posto dei suoni sintetizzati.
- **Gran finale** dedicato all'ultimo jackpot (ora tutti i jackpot sono uguali).

635
app.js Normal file
View File

@@ -0,0 +1,635 @@
/* ===== ELSA GAMBLING — motore del reveal ===== */
(function () {
"use strict";
const $ = (sel) => document.querySelector(sel);
const roomById = Object.fromEntries(ROOMS.map((r) => [r.id, r]));
const genderOf = Object.fromEntries(PARTICIPANTS.map((p) => [p.nome, p.genere]));
/* ---------- Audio sintetizzato (nessun file esterno) ---------- */
const Audio = {
ctx: null,
master: null,
on: true,
init() {
if (this.ctx) return;
const AC = window.AudioContext || window.webkitAudioContext;
this.ctx = new AC();
this.master = this.ctx.createGain();
this.master.gain.value = 0.5;
this.master.connect(this.ctx.destination);
},
resume() {
if (this.ctx && this.ctx.state === "suspended") this.ctx.resume();
},
blip(freq, dur = 0.05, type = "square", vol = 0.3, glideTo) {
if (!this.on || !this.ctx) return;
const t = this.ctx.currentTime;
const o = this.ctx.createOscillator();
const g = this.ctx.createGain();
o.type = type;
o.frequency.setValueAtTime(freq, t);
if (glideTo) o.frequency.exponentialRampToValueAtTime(glideTo, t + dur);
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
o.connect(g).connect(this.master);
o.start(t);
o.stop(t + dur + 0.02);
},
tick() {
this.blip(1300, 0.03, "square", 0.12);
},
ding() {
this.blip(1318, 0.5, "sine", 0.3); // E6
this.blip(1568, 0.55, "sine", 0.25); // G6
},
coin() {
this.blip(1760, 0.06, "square", 0.2);
setTimeout(() => this.blip(2637, 0.12, "square", 0.2), 60);
},
buzz() {
this.blip(140, 0.45, "sawtooth", 0.3, 70);
},
jackpot() {
const notes = [523, 659, 784, 1046, 1318, 1568];
notes.forEach((f, i) =>
setTimeout(() => this.blip(f, 0.35, "square", 0.28), i * 90)
);
// scintillio
for (let i = 0; i < 10; i++)
setTimeout(() => this.blip(1800 + Math.random() * 1400, 0.08, "sine", 0.12), 600 + i * 70);
},
// riser di tensione: ritorna una funzione stop()
riser(duration) {
if (!this.on || !this.ctx) return () => {};
const t = this.ctx.currentTime;
const o = this.ctx.createOscillator();
const g = this.ctx.createGain();
o.type = "sawtooth";
o.frequency.setValueAtTime(180, t);
o.frequency.exponentialRampToValueAtTime(900, t + duration);
g.gain.setValueAtTime(0.0001, t);
g.gain.exponentialRampToValueAtTime(0.12, t + duration * 0.7);
g.gain.exponentialRampToValueAtTime(0.0001, t + duration + 0.1);
const lp = this.ctx.createBiquadFilter();
lp.type = "lowpass";
lp.frequency.value = 1200;
o.connect(g).connect(lp).connect(this.master);
o.start(t);
o.stop(t + duration + 0.2);
return () => {
try {
g.gain.cancelScheduledValues(this.ctx.currentTime);
g.gain.setTargetAtTime(0.0001, this.ctx.currentTime, 0.03);
} catch (e) {}
};
},
};
/* ---------- Coriandoli ---------- */
const myConfetti =
typeof confetti !== "undefined"
? confetti.create($("#confetti"), { resize: true, useWorker: true })
: () => {};
function celebrate(kind) {
if (kind === "jackpot") {
const end = Date.now() + 1400;
const colors = ["#ffd23f", "#ff9e00", "#ff2e88", "#00e5ff", "#ffffff"];
(function frame() {
myConfetti({ particleCount: 6, angle: 60, spread: 70, origin: { x: 0 }, colors });
myConfetti({ particleCount: 6, angle: 120, spread: 70, origin: { x: 1 }, colors });
myConfetti({ particleCount: 4, spread: 120, startVelocity: 55, origin: { y: 0.3 }, colors });
if (Date.now() < end) requestAnimationFrame(frame);
})();
} else {
myConfetti({
particleCount: 90,
spread: 80,
origin: { y: 0.55 },
colors: ["#ffd23f", "#00e5ff", "#ff2e88", "#ffffff"],
});
}
}
function screenShake() {
const app = $("#app");
app.classList.remove("shake");
void app.offsetWidth;
app.classList.add("shake");
}
function screenFlash() {
let f = $(".flash");
if (!f) {
f = document.createElement("div");
f.className = "flash";
document.body.appendChild(f);
}
f.classList.remove("go");
void f.offsetWidth;
f.classList.add("go");
}
/* ---------- Sfondo three.js: pioggia di monete ---------- */
function initBackground() {
if (typeof THREE === "undefined") return;
const canvas = $("#bg3d");
let renderer;
try {
renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
} catch (e) {
return; // WebGL non disponibile: l'app funziona lo stesso senza sfondo 3D
}
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, 1, 0.1, 100);
camera.position.z = 30;
// texture moneta disegnata su canvas
const tex = (() => {
const c = document.createElement("canvas");
c.width = c.height = 64;
const g = c.getContext("2d");
const grad = g.createRadialGradient(24, 20, 4, 32, 32, 30);
grad.addColorStop(0, "#fff6cf");
grad.addColorStop(0.4, "#ffd23f");
grad.addColorStop(1, "#b36b00");
g.fillStyle = grad;
g.beginPath();
g.arc(32, 32, 28, 0, Math.PI * 2);
g.fill();
g.fillStyle = "rgba(179,107,0,0.9)";
g.font = "bold 30px Georgia";
g.textAlign = "center";
g.textBaseline = "middle";
g.fillText("€", 32, 34);
return new THREE.CanvasTexture(c);
})();
const N = 520;
const geo = new THREE.BufferGeometry();
const pos = new Float32Array(N * 3);
const speed = new Float32Array(N);
for (let i = 0; i < N; i++) {
pos[i * 3] = (Math.random() - 0.5) * 80;
pos[i * 3 + 1] = (Math.random() - 0.5) * 80;
pos[i * 3 + 2] = (Math.random() - 0.5) * 40;
speed[i] = 6 + Math.random() * 12;
}
geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
const mat = new THREE.PointsMaterial({
size: 1.7,
map: tex,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
});
const points = new THREE.Points(geo, mat);
scene.add(points);
function resize() {
const w = innerWidth,
h = innerHeight;
renderer.setSize(w, h, false);
camera.aspect = w / h;
camera.updateProjectionMatrix();
}
addEventListener("resize", resize);
resize();
let last = performance.now();
let boost = 0;
window.__coinBoost = () => (boost = 1.6);
(function loop(now) {
const dt = Math.min((now - last) / 1000, 0.05);
last = now;
const arr = geo.attributes.position.array;
const mul = 1 + boost;
for (let i = 0; i < N; i++) {
arr[i * 3 + 1] -= speed[i] * dt * mul;
if (arr[i * 3 + 1] < -40) arr[i * 3 + 1] = 40;
}
geo.attributes.position.needsUpdate = true;
points.rotation.y += 0.02 * dt;
boost *= 0.94;
renderer.render(scene, camera);
requestAnimationFrame(loop);
})(last);
}
/* ---------- Rullo slot ---------- */
const ITEM_H = 88;
const reelEl = $("#reel");
function reelItemHTML(room) {
const jz = room.jacuzzi ? " jz" : "";
const icon = room.jacuzzi ? "🛁" : "🏠";
return `<div class="reel-item${jz}"><span>${icon}</span><span>${room.nome}</span></div>`;
}
// Costruisce una striscia lunga che termina sulla stanza target (centrata
// nella riga di mezzo della finestra a 3 righe) e ritorna l'indice target.
function buildStrip(targetId) {
// azzera le animazioni del giro precedente (evita accumulo + fill forwards)
reelEl.getAnimations().forEach((a) => a.cancel());
const loops = 14;
const seq = [];
for (let l = 0; l < loops; l++)
for (const r of ROOMS) seq.push(r);
// offset iniziale casuale per non ripartire sempre uguale
const start = Math.floor(Math.random() * ROOMS.length);
const rotated = seq.slice(start).concat(seq.slice(0, start));
const targetIndex = rotated.length; // la target va in coda
rotated.push(roomById[targetId]);
// aggiungo 2 righe sotto per riempire la finestra
rotated.push(ROOMS[0], ROOMS[1]);
reelEl.innerHTML = rotated.map(reelItemHTML).join("");
reelEl.style.transform = "translateY(0)";
return targetIndex;
}
function currentReelIndex() {
const t = getComputedStyle(reelEl).transform;
if (!t || t === "none") return 0;
const y = parseFloat(t.split(",")[5]); // matrix(a,b,c,d,e,f) -> f = translateY
return Math.round(-y / ITEM_H);
}
function spinReel(targetId) {
return new Promise((resolve) => {
const targetIndex = buildStrip(targetId);
// centro la target nella riga di mezzo (finestra 3 righe)
const finalY = -(targetIndex - 1) * ITEM_H;
const duration = 4200;
// tick sincronizzati al passaggio dei simboli
let lastIdx = 0;
let ticking = true;
(function tickLoop() {
if (!ticking) return;
const idx = currentReelIndex();
if (idx !== lastIdx) {
Audio.tick();
lastIdx = idx;
}
requestAnimationFrame(tickLoop);
})();
const stopRiser = Audio.riser(duration / 1000);
const anim = reelEl.animate(
[{ transform: "translateY(0)" }, { transform: `translateY(${finalY}px)` }],
{ duration, easing: "cubic-bezier(0.12, 0.85, 0.18, 1)", fill: "forwards" }
);
anim.onfinish = () => {
ticking = false;
stopRiser();
// micro-bounce di assestamento (near-miss / lock-in)
reelEl.animate(
[
{ transform: `translateY(${finalY}px)` },
{ transform: `translateY(${finalY + 14}px)` },
{ transform: `translateY(${finalY}px)` },
],
{ duration: 260, easing: "ease-out" }
);
resolve();
};
});
}
/* ---------- Stato di gioco ---------- */
let assignment = null; // {byPerson, roomGender, fRooms, mRooms}
let revealQueue = []; // nomi in ordine di reveal
let occupants = {}; // roomId -> [nomi] (svelati finora)
let cursor = 0;
let auto = false;
let busy = false;
// scommettitori (TU + banco simulato)
let players = [];
let currentBet = null; // {roomId}
function prestige(roomId) {
const r = roomById[roomId];
return (r.jacuzzi ? 2 : 0) + (r.posti === 1 ? 1 : 0);
}
function buildRevealOrder() {
// svelati per prestigio crescente: le stanze con jacuzzi (jackpot) per ultime
const people = PARTICIPANTS.map((p) => p.nome);
return Matching.shuffle(people, Math.random).sort(
(a, b) => prestige(assignment.byPerson[a]) - prestige(assignment.byPerson[b])
);
}
function newGame(keepChips) {
assignment = Matching.assign(ROOMS, PARTICIPANTS);
revealQueue = buildRevealOrder();
occupants = {};
ROOMS.forEach((r) => (occupants[r.id] = []));
cursor = 0;
currentBet = null;
if (!keepChips) {
players = [
{ name: "TU", chips: 100, you: true },
{ name: "Il Banco", chips: 100 },
{ name: "Madama Fortuna", chips: 100 },
{ name: "Jinx", chips: 100 },
];
}
renderRooms();
renderLeaderboard();
setProgress();
$("#player-name").textContent = "—";
$("#odds").innerHTML = "";
mc("Si parte! Premi START 🎰");
$("#btn-primary").textContent = "START 🎰";
$("#btn-primary").disabled = false;
}
/* ---------- Rendering ---------- */
function renderRooms() {
const board = $("#rooms-board");
board.innerHTML = ROOMS.map((r) => {
const g = assignment.roomGender[r.id];
const occ = occupants[r.id];
const chips = occ.map((n) => `<span class="occ-chip">${n}</span>`).join("");
const emptyCount = r.posti - occ.length;
const empties = Array.from({ length: emptyCount })
.map(() => `<span class="occ-slot-empty"></span>`)
.join("");
return `
<div class="room-card gender-${g} ${r.jacuzzi ? "jacuzzi" : ""}" data-room="${r.id}">
<div class="room-head">
<span class="room-name">${r.jacuzzi ? "🛁 " : ""}${r.nome}</span>
<span class="room-cap">${occ.length}/${r.posti} · ${g}</span>
</div>
<div class="room-occupants">${chips}${empties}</div>
</div>`;
}).join("");
}
function renderLeaderboard() {
const sorted = players.slice().sort((a, b) => b.chips - a.chips);
$("#leaderboard").innerHTML = sorted
.map(
(p) =>
`<div class="lb-row ${p.you ? "you" : ""}"><span>${p.you ? "⭐ " : ""}${p.name}</span><span class="lb-chips">${p.chips}</span></div>`
)
.join("");
$("#balance").textContent = players.find((p) => p.you).chips;
}
function setProgress() {
$("#progress").textContent = `${cursor} / ${revealQueue.length}`;
}
function mc(text) {
$("#mc").textContent = text;
}
function log(text, cls) {
const e = document.createElement("div");
e.className = "log-entry " + (cls || "");
e.textContent = text;
$("#log").prepend(e);
}
/* ---------- Scommesse ---------- */
// Quote cosmetiche: più letti liberi in una stanza => più probabile => quota bassa.
function computeOdds(person) {
const g = genderOf[person];
const rooms = ROOMS.filter(
(r) => assignment.roomGender[r.id] === g && occupants[r.id].length < r.posti
);
const freeTotal = rooms.reduce((s, r) => s + (r.posti - occupants[r.id].length), 0);
return rooms.map((r) => {
const free = r.posti - occupants[r.id].length;
let mult = freeTotal / free;
mult = Math.max(1.3, Math.round(mult * 10) / 10);
return { room: r, mult };
});
}
function renderOdds(person, odds) {
const hint = currentBet
? `Hai puntato 10 gettoni su <b>${roomById[currentBet.roomId].nome}</b>`
: "Clicca una stanza per puntare 10 gettoni (o SPINNA)";
$("#odds").innerHTML =
`<div class="bet-hint">${hint}</div>` +
odds
.map(
(o) =>
`<div class="odd-row ${currentBet && currentBet.roomId === o.room.id ? "picked" : ""}" data-bet="${o.room.id}">
<span class="odd-name">${o.room.jacuzzi ? "🛁 " : ""}${o.room.nome}</span>
<span class="odd-mult">x${o.mult.toFixed(1)}</span>
</div>`
)
.join("");
$("#odds")
.querySelectorAll(".odd-row")
.forEach((row) =>
row.addEventListener("click", () => {
if (busy) return;
const rid = row.getAttribute("data-bet");
currentBet = { roomId: rid };
Audio.coin();
renderOdds(person, odds);
})
);
}
// I bot puntano sul favorito (quota più bassa) o a caso.
function botsPlace(odds) {
players
.filter((p) => !p.you)
.forEach((p) => {
if (p.chips < 10) {
p._bet = null;
return;
}
const pick =
Math.random() < 0.6
? odds.slice().sort((a, b) => a.mult - b.mult)[0]
: odds[Math.floor(Math.random() * odds.length)];
p._bet = pick ? { roomId: pick.room.id, mult: pick.mult } : null;
});
}
function resolveBets(person, landedRoomId, oddsMap) {
// TU
const you = players.find((p) => p.you);
if (currentBet) {
const o = oddsMap[currentBet.roomId];
if (currentBet.roomId === landedRoomId) {
const win = Math.round(10 * o);
you.chips += win - 10;
log(`Hai vinto ${win} gettoni! (${roomById[landedRoomId].nome})`, "win");
} else {
you.chips -= 10;
log(`Hai perso la puntata su ${roomById[currentBet.roomId].nome}.`);
}
}
// bot
players
.filter((p) => !p.you && p._bet)
.forEach((p) => {
if (p._bet.roomId === landedRoomId) p.chips += Math.round(10 * p._bet.mult) - 10;
else p.chips -= 10;
});
}
/* ---------- Turno di reveal ---------- */
async function nextTurn() {
if (busy) return;
if (cursor >= revealQueue.length) {
endGame();
return;
}
busy = true;
Audio.init();
Audio.resume();
const person = revealQueue[cursor];
const roomId = assignment.byPerson[person];
const room = roomById[roomId];
$("#player-name").textContent = person;
highlightRoom(null);
// fase scommesse
const odds = computeOdds(person);
const oddsMap = Object.fromEntries(odds.map((o) => [o.room.id, o.mult]));
renderOdds(person, odds);
botsPlace(odds);
mc(`Tocca a ${person}! Dove finirà? 🎲`);
// leva + spin
$("#lever").classList.add("pull");
setTimeout(() => $("#lever").classList.remove("pull"), 300);
if (window.__coinBoost) window.__coinBoost();
$("#btn-primary").disabled = true;
await spinReel(roomId);
// atterraggio
occupants[roomId].push(person);
highlightRoom(roomId);
renderRooms();
highlightRoom(roomId);
resolveBets(person, roomId, oddsMap);
currentBet = null;
const isJackpot = room.jacuzzi;
if (isJackpot) {
Audio.jackpot();
celebrate("jackpot");
screenShake();
screenFlash();
mc(`🎉 JACKPOT! ${person} conquista ${room.nome} con IDROMASSAGGIO! 🛁`);
log(`JACKPOT: ${person} → ${room.nome} 🛁`, "jackpot");
} else {
Audio.ding();
celebrate("normal");
mc(`${person} va in ${room.nome}!`);
log(`${person} → ${room.nome}`);
}
Audio.coin();
cursor++;
setProgress();
renderLeaderboard();
busy = false;
if (cursor >= revealQueue.length) {
$("#btn-primary").textContent = "FINE 🏁";
$("#btn-primary").disabled = false;
setTimeout(endGame, 900);
} else {
$("#btn-primary").textContent = "SPINNA! 🎰";
$("#btn-primary").disabled = false;
if (auto) setTimeout(nextTurn, 1400);
}
}
function highlightRoom(roomId) {
document.querySelectorAll(".room-card").forEach((c) => c.classList.remove("hot"));
if (roomId) {
const el = document.querySelector(`.room-card[data-room="${roomId}"]`);
if (el) el.classList.add("hot");
}
}
function endGame() {
const winner = players.slice().sort((a, b) => b.chips - a.chips)[0];
const you = players.find((p) => p.you);
mc(`🏁 Tutti sistemati! Vincitore scommesse: ${winner.name} (${winner.chips} gettoni).`);
log(`Fine. I tuoi gettoni: ${you.chips}. Miglior scommettitore: ${winner.name}.`, "win");
celebrate("jackpot");
$("#btn-primary").textContent = "RIGIOCA 🔁";
$("#btn-primary").disabled = false;
$("#btn-primary").onclick = () => {
newGame(false);
$("#btn-primary").onclick = onPrimary;
};
}
/* ---------- Marquee ---------- */
function initMarquee() {
const m = $("#marquee");
m.innerHTML = Array.from({ length: 16 })
.map((_, i) => `<span class="bulb" style="animation-delay:${(i % 8) * 0.12}s"></span>`)
.join("");
}
/* ---------- Controlli ---------- */
function onPrimary() {
if (busy) return;
if (cursor >= revealQueue.length) {
endGame();
return;
}
nextTurn();
}
function bindControls() {
$("#btn-primary").onclick = onPrimary;
$("#btn-auto").onclick = (e) => {
auto = !auto;
e.currentTarget.classList.toggle("active", auto);
if (auto && !busy && cursor < revealQueue.length) nextTurn();
};
$("#btn-reroll").onclick = () => {
if (busy) return;
Audio.init();
Audio.resume();
newGame(true);
mc("Nuovo sorteggio pronto! 🎲 Premi START.");
};
$("#btn-sound").onclick = (e) => {
Audio.on = !Audio.on;
e.currentTarget.textContent = Audio.on ? "🔊" : "🔇";
};
// prima interazione: sblocca audio
document.addEventListener(
"pointerdown",
() => {
Audio.init();
Audio.resume();
},
{ once: true }
);
}
/* ---------- Avvio ---------- */
try {
initBackground();
} catch (e) {
console.warn("Sfondo 3D disattivato:", e);
}
initMarquee();
bindControls();
newGame(false);
})();

106
index.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🎰 ELSA GAMBLING — Assegnazione Stanze</title>
<!-- Font: Orbitron (LED/tech), Anton & Bebas (display) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Orbitron:wght@500;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Sfondo 3D: pioggia di monete (three.js) -->
<canvas id="bg3d"></canvas>
<!-- Coriandoli (canvas-confetti) sopra a tutto -->
<canvas id="confetti"></canvas>
<div id="app">
<header class="topbar">
<div class="brand">
<span class="brand-emoji">🎰</span>
<span class="brand-text neon-pink">ELSA</span>
<span class="brand-text neon-gold">GAMBLING</span>
<span class="brand-emoji">🎰</span>
</div>
<div class="hud">
<div class="hud-box">
<span class="hud-label">GIRO</span>
<span id="progress" class="hud-value">0 / 0</span>
</div>
<div class="hud-box">
<span class="hud-label">I TUOI GETTONI</span>
<span id="balance" class="hud-value led">100</span>
</div>
</div>
</header>
<main class="stage">
<!-- Colonna sinistra: tabellone stanze -->
<aside class="panel rooms-panel">
<h2 class="panel-title">🏠 STANZE</h2>
<div id="rooms-board" class="rooms-board"></div>
</aside>
<!-- Centro: slot machine -->
<section class="machine">
<div class="marquee" id="marquee"></div>
<div class="now-playing">
<span class="np-label">SUL PALCO</span>
<span id="player-name" class="np-name">—</span>
</div>
<div class="slot">
<div class="slot-side left"></div>
<div class="reel-window">
<div class="payline"></div>
<div id="reel" class="reel-strip"></div>
<div class="reel-fade top"></div>
<div class="reel-fade bottom"></div>
</div>
<div class="slot-side right">
<div class="lever" id="lever"><div class="lever-knob"></div></div>
</div>
</div>
<div id="mc" class="mc-line">Benvenuti alla lotteria delle stanze 🎲</div>
<div class="controls">
<button id="btn-primary" class="btn btn-gold">START 🎰</button>
<button id="btn-auto" class="btn btn-ghost">AUTO ▶</button>
<button id="btn-reroll" class="btn btn-ghost">RE-ROLL 🎲</button>
<button id="btn-sound" class="btn btn-ghost">🔊</button>
</div>
</section>
<!-- Colonna destra: scommesse + leaderboard + log -->
<aside class="panel bet-panel">
<h2 class="panel-title">💰 SCOMMESSE</h2>
<div id="odds" class="odds"></div>
<h2 class="panel-title">🏆 CLASSIFICA</h2>
<div id="leaderboard" class="leaderboard"></div>
<h2 class="panel-title">📢 CRONACA</h2>
<div id="log" class="log"></div>
</aside>
</main>
</div>
<!-- Librerie via CDN (funzionano anche aprendo il file in locale, serve rete) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>
<!-- Codice app -->
<script src="data.js"></script>
<script src="matching.js"></script>
<script src="app.js"></script>
</body>
</html>

103
matching.js Normal file
View File

@@ -0,0 +1,103 @@
// Algoritmo di assegnazione persone -> stanze.
// Vincolo: ogni stanza è mono-genere (M con M, F con F).
// Strategia: 1) partiziona le stanze tra i due generi in modo che ciascun
// genere ci stia (capienza sufficiente); 2) distribuisce casualmente le
// persone nelle stanze del proprio genere, cercando di non lasciare stanze
// completamente vuote.
(function (global) {
function shuffle(arr, rng) {
const a = arr.slice();
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(rng() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
// Sceglie quali stanze vanno alle femmine e quali ai maschi.
// Preferisce partizioni in cui la capienza femminile combacia esattamente
// col numero di femmine (zero letti sprecati da quel lato => niente stanze
// vuote lato femmine). Fallback: qualsiasi partizione valida.
function chooseGenderPartition(rooms, nF, nM, rng) {
const n = rooms.length;
const total = rooms.reduce((s, r) => s + r.posti, 0);
const valid = [];
const exact = [];
// esclude mask 0 e mask "tutte" così ogni genere ha almeno una stanza
for (let mask = 1; mask < (1 << n) - 1; mask++) {
let capF = 0;
for (let i = 0; i < n; i++) if (mask & (1 << i)) capF += rooms[i].posti;
const capM = total - capF;
if (capF >= nF && capM >= nM) {
valid.push(mask);
if (capF === nF) exact.push(mask);
}
}
const pool = exact.length ? exact : valid;
if (!pool.length) {
throw new Error(
"Nessuna partizione valida: capienza insufficiente per il vincolo di genere."
);
}
return pool[Math.floor(rng() * pool.length)];
}
// Distribuisce le persone nelle stanze del proprio genere.
// Prima assegna 1 persona a stanza (copertura => niente stanze vuote se
// le persone sono >= delle stanze), poi riempie i letti restanti a caso.
function fillRooms(roomsG, peopleG, rng) {
const rooms = shuffle(roomsG, rng);
const people = shuffle(peopleG, rng);
const assign = {};
rooms.forEach((r) => (assign[r.id] = []));
let idx = 0;
if (people.length >= rooms.length) {
for (const r of rooms) assign[r.id].push(people[idx++]);
}
const slots = [];
for (const r of rooms) {
const free = r.posti - assign[r.id].length;
for (let k = 0; k < free; k++) slots.push(r.id);
}
const freeSlots = shuffle(slots, rng);
while (idx < people.length) {
const roomId = freeSlots.shift();
assign[roomId].push(people[idx++]);
}
return assign;
}
function assign(rooms, participants, rng) {
rng = rng || Math.random;
const females = participants.filter((p) => p.genere === "F");
const males = participants.filter((p) => p.genere === "M");
const mask = chooseGenderPartition(rooms, females.length, males.length, rng);
const fRooms = rooms.filter((r, i) => mask & (1 << i));
const mRooms = rooms.filter((r, i) => !(mask & (1 << i)));
const fAssign = fillRooms(fRooms, females.map((p) => p.nome), rng);
const mAssign = fillRooms(mRooms, males.map((p) => p.nome), rng);
const byPerson = {};
const roomGender = {};
fRooms.forEach((r) => (roomGender[r.id] = "F"));
mRooms.forEach((r) => (roomGender[r.id] = "M"));
for (const rid in fAssign) fAssign[rid].forEach((nome) => (byPerson[nome] = rid));
for (const rid in mAssign) mAssign[rid].forEach((nome) => (byPerson[nome] = rid));
return {
byPerson, // nome -> roomId
roomGender, // roomId -> "F" | "M"
fRooms,
mRooms,
};
}
const Matching = { assign, shuffle };
if (typeof module !== "undefined" && module.exports) module.exports = Matching;
global.Matching = Matching;
})(typeof window !== "undefined" ? window : globalThis);

584
styles.css Normal file
View File

@@ -0,0 +1,584 @@
/* ===== ELSA GAMBLING — stile neon/casino ===== */
:root {
--bg: #0a0512;
--bg2: #140a26;
--panel: rgba(24, 12, 46, 0.72);
--gold: #ffd23f;
--gold-2: #ff9e00;
--pink: #ff2e88;
--cyan: #00e5ff;
--green: #29e08a;
--red: #ff3b5c;
--text: #f3e9ff;
--muted: #9c86b8;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
background: radial-gradient(1200px 700px at 50% -10%, #2a1150 0%, var(--bg) 60%),
var(--bg);
color: var(--text);
font-family: "Bebas Neue", system-ui, sans-serif;
overflow: hidden;
}
#bg3d {
position: fixed;
inset: 0;
z-index: 0;
display: block;
}
#confetti {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none;
}
#app {
position: relative;
z-index: 10;
height: 100vh;
display: flex;
flex-direction: column;
padding: 14px 18px 18px;
gap: 12px;
}
/* ===== Topbar ===== */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-family: "Anton", sans-serif;
font-size: clamp(26px, 4vw, 52px);
letter-spacing: 2px;
}
.brand-emoji {
font-size: 0.8em;
filter: drop-shadow(0 0 10px var(--gold));
}
.neon-gold {
color: var(--gold);
text-shadow: 0 0 6px var(--gold), 0 0 22px var(--gold-2), 0 0 40px var(--gold-2);
}
.neon-pink {
color: var(--pink);
text-shadow: 0 0 6px var(--pink), 0 0 22px var(--pink), 0 0 42px #ff007b;
}
.hud {
display: flex;
gap: 12px;
}
.hud-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
background: var(--panel);
border: 1px solid rgba(255, 210, 63, 0.35);
border-radius: 12px;
box-shadow: inset 0 0 18px rgba(255, 46, 136, 0.12);
}
.hud-label {
font-size: 13px;
letter-spacing: 3px;
color: var(--muted);
}
.hud-value {
font-family: "Orbitron", monospace;
font-weight: 900;
font-size: 26px;
color: var(--cyan);
text-shadow: 0 0 10px var(--cyan);
}
.hud-value.led {
color: var(--gold);
text-shadow: 0 0 12px var(--gold-2);
}
/* ===== Stage layout ===== */
.stage {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1.35fr 1fr;
gap: 16px;
}
.panel {
background: var(--panel);
border: 1px solid rgba(0, 229, 255, 0.22);
border-radius: 16px;
padding: 12px 14px;
backdrop-filter: blur(6px);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.panel-title {
font-family: "Anton", sans-serif;
font-weight: 400;
letter-spacing: 2px;
font-size: 20px;
margin: 4px 0 10px;
color: var(--gold);
text-shadow: 0 0 10px var(--gold-2);
}
.bet-panel .panel-title {
margin-top: 12px;
}
/* ===== Rooms board ===== */
.rooms-board {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 4px;
}
.room-card {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 8px 10px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.room-card.gender-F {
border-left: 4px solid var(--pink);
}
.room-card.gender-M {
border-left: 4px solid var(--cyan);
}
.room-card.jacuzzi {
box-shadow: 0 0 14px rgba(255, 210, 63, 0.25);
}
.room-card.hot {
border-color: var(--gold);
box-shadow: 0 0 22px var(--gold-2);
transform: scale(1.02);
}
.room-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.room-name {
font-family: "Anton", sans-serif;
font-size: 18px;
letter-spacing: 1px;
}
.room-cap {
font-family: "Orbitron", monospace;
font-size: 13px;
color: var(--muted);
}
.room-occupants {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
min-height: 6px;
}
.occ-chip {
font-family: "Bebas Neue", sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
padding: 1px 8px;
border-radius: 999px;
background: rgba(0, 229, 255, 0.16);
border: 1px solid rgba(0, 229, 255, 0.4);
animation: pop 0.5s ease;
}
.gender-F .occ-chip {
background: rgba(255, 46, 136, 0.16);
border-color: rgba(255, 46, 136, 0.45);
}
.occ-slot-empty {
width: 42px;
height: 20px;
border-radius: 999px;
border: 1px dashed rgba(255, 255, 255, 0.18);
}
@keyframes pop {
0% {
transform: scale(0.4);
opacity: 0;
}
70% {
transform: scale(1.15);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* ===== Slot machine ===== */
.machine {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-height: 0;
}
.marquee {
display: flex;
gap: 10px;
padding: 6px;
}
.marquee .bulb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 10px var(--gold-2), 0 0 18px var(--gold-2);
animation: chase 1s infinite;
}
@keyframes chase {
0%,
100% {
opacity: 0.25;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.now-playing {
text-align: center;
}
.np-label {
display: block;
font-size: 14px;
letter-spacing: 5px;
color: var(--muted);
}
.np-name {
font-family: "Anton", sans-serif;
font-size: clamp(28px, 4vw, 48px);
color: var(--text);
text-shadow: 0 0 16px var(--pink);
}
.slot {
display: flex;
align-items: stretch;
gap: 0;
padding: 16px;
border-radius: 22px;
background: linear-gradient(180deg, #2a0e4e, #150725);
border: 3px solid var(--gold);
box-shadow: 0 0 30px rgba(255, 158, 0, 0.5),
inset 0 0 40px rgba(0, 0, 0, 0.6);
}
.slot-side {
width: 46px;
display: flex;
align-items: center;
justify-content: center;
}
.reel-window {
position: relative;
width: min(46vw, 460px);
height: 264px;
overflow: hidden;
border-radius: 12px;
background: #05020a;
border: 2px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9);
}
.reel-strip {
will-change: transform;
}
.reel-item {
height: 88px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: "Anton", sans-serif;
font-size: 34px;
letter-spacing: 1px;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.reel-item.jz {
color: var(--gold);
text-shadow: 0 0 14px var(--gold-2);
}
.payline {
position: absolute;
left: 0;
right: 0;
top: 88px;
height: 88px;
border-top: 2px solid rgba(255, 210, 63, 0.7);
border-bottom: 2px solid rgba(255, 210, 63, 0.7);
box-shadow: 0 0 26px rgba(255, 210, 63, 0.4);
pointer-events: none;
z-index: 3;
}
.reel-fade {
position: absolute;
left: 0;
right: 0;
height: 88px;
z-index: 2;
pointer-events: none;
}
.reel-fade.top {
top: 0;
background: linear-gradient(180deg, #05020a, transparent);
}
.reel-fade.bottom {
bottom: 0;
background: linear-gradient(0deg, #05020a, transparent);
}
/* leva */
.lever {
width: 14px;
height: 130px;
background: linear-gradient(90deg, #7a7a85, #d7d7e0, #7a7a85);
border-radius: 8px;
position: relative;
transform-origin: bottom center;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lever.pull {
transform: rotate(28deg);
}
.lever-knob {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff8ab0, var(--red) 60%, #8b0022);
box-shadow: 0 0 16px var(--red);
}
.mc-line {
min-height: 26px;
text-align: center;
font-size: 20px;
letter-spacing: 1px;
color: var(--cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
/* ===== Controlli ===== */
.controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
font-family: "Anton", sans-serif;
letter-spacing: 2px;
font-size: 20px;
padding: 10px 22px;
border-radius: 12px;
border: none;
cursor: pointer;
color: #1a0a2e;
transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
.btn:active {
transform: translateY(2px) scale(0.98);
}
.btn:disabled {
filter: grayscale(0.7) brightness(0.6);
cursor: not-allowed;
}
.btn-gold {
background: linear-gradient(180deg, #ffe98a, var(--gold) 45%, var(--gold-2));
box-shadow: 0 6px 0 #b36b00, 0 0 24px rgba(255, 158, 0, 0.6);
}
.btn-gold:active {
box-shadow: 0 2px 0 #b36b00, 0 0 24px rgba(255, 158, 0, 0.6);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.08);
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: none;
}
.btn-ghost.active {
border-color: var(--green);
color: var(--green);
box-shadow: 0 0 14px rgba(41, 224, 138, 0.5);
}
/* ===== Scommesse ===== */
.odds {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 32%;
overflow-y: auto;
}
.odd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.odd-row:hover {
border-color: var(--gold);
}
.odd-row.picked {
border-color: var(--green);
box-shadow: 0 0 14px rgba(41, 224, 138, 0.45);
}
.odd-row.disabled {
opacity: 0.4;
pointer-events: none;
}
.odd-name {
font-size: 17px;
letter-spacing: 0.5px;
}
.odd-mult {
font-family: "Orbitron", monospace;
font-weight: 700;
color: var(--gold);
}
.bet-hint {
font-size: 14px;
color: var(--muted);
letter-spacing: 1px;
margin: 2px 0 4px;
}
/* ===== Leaderboard ===== */
.leaderboard {
display: flex;
flex-direction: column;
gap: 4px;
}
.lb-row {
display: flex;
justify-content: space-between;
padding: 3px 10px;
border-radius: 8px;
font-size: 17px;
transition: background 0.3s;
}
.lb-row.you {
background: rgba(255, 210, 63, 0.14);
color: var(--gold);
}
.lb-chips {
font-family: "Orbitron", monospace;
font-weight: 700;
}
/* ===== Log ===== */
.log {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column-reverse;
gap: 3px;
font-size: 15px;
letter-spacing: 0.4px;
color: var(--text);
}
.log-entry {
padding: 2px 6px;
border-left: 2px solid rgba(255, 255, 255, 0.15);
opacity: 0.9;
}
.log-entry.win {
border-color: var(--green);
}
.log-entry.jackpot {
border-color: var(--gold);
color: var(--gold);
}
/* ===== FX ===== */
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%,
100% {
transform: translate(0, 0);
}
20% {
transform: translate(-8px, 4px);
}
40% {
transform: translate(8px, -6px);
}
60% {
transform: translate(-6px, 6px);
}
80% {
transform: translate(6px, -4px);
}
}
.flash {
position: fixed;
inset: 0;
z-index: 55;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 210, 63, 0.55), transparent 60%);
opacity: 0;
}
.flash.go {
animation: flash 0.6s ease;
}
@keyframes flash {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media (max-width: 980px) {
.stage {
grid-template-columns: 1fr;
grid-auto-rows: min-content;
overflow-y: auto;
}
body {
overflow: auto;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
}
}