carlitosbond/ni-quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update quiz templates

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
carlitosbond
2026-06-04 02:13:37 +00:00
co-authored by Claude Sonnet 4.6
parent 3066e1e460
commit ce4209068f
3 changed files with 390 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/host.html
+32 -11
View File
@@ -10,14 +10,14 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box;} *{margin:0;padding:0;box-sizing:border-box;}
:root{ :root{
--bg:#000510;--surface:#0d1117;--surface2:#161b22; --bg:#ffffff;--surface:#f0f4f8;--surface2:#e2e8f0;
--accent:#00c8ff;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff; --accent:#0077cc;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff;
--text:#e8edf5;--muted:#6b7a99;--border:rgba(255,255,255,0.08); --text:#0a0f1e;--muted:#4a5568;--border:rgba(0,0,0,0.12);
--pixel:'Press Start 2P',monospace; --pixel:'Press Start 2P',monospace;
} }
html{font-size:17px;}
html,body{width:100%;height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden;} html,body{width:100%;height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden;}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);pointer-events:none;z-index:9999;} .grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,119,204,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,204,0.06) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,200,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
.screen{display:none;height:100vh;padding:1.5rem 2rem;flex-direction:column;} .screen{display:none;height:100vh;padding:1.5rem 2rem;flex-direction:column;}
.screen.active{display:flex;} .screen.active{display:flex;}
@@ -53,6 +53,8 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
.hbtn-secondary:hover{border-color:var(--muted);color:var(--text);} .hbtn-secondary:hover{border-color:var(--muted);color:var(--text);}
.hbtn-danger{border-color:var(--red);color:var(--red);background:transparent;} .hbtn-danger{border-color:var(--red);color:var(--red);background:transparent;}
.hbtn-danger:hover{background:rgba(255,51,85,.1);} .hbtn-danger:hover{background:rgba(255,51,85,.1);}
.hbtn-warning{border-color:var(--amber);color:var(--amber);background:transparent;}
.hbtn-warning:hover{background:rgba(255,204,0,.1);}
/* ── QUESTION ── */ /* ── QUESTION ── */
#question-screen{justify-content:space-between;} #question-screen{justify-content:space-between;}
@@ -62,8 +64,10 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
.timer-big.urgent{color:var(--red);animation:blink .5s step-end infinite;} .timer-big.urgent{color:var(--red);animation:blink .5s step-end infinite;}
.q-body{display:flex;gap:1.5rem;flex:1;} .q-body{display:flex;gap:1.5rem;flex:1;}
.q-left{flex:1;} .q-left{flex:1;}
.q-text{font-family:var(--pixel);font-size:clamp(.55rem,1.2vw,.75rem);line-height:2;margin-bottom:1.2rem;color:var(--text);} .q-text{margin-bottom:1.2rem;}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;} .q-es{font-family:var(--pixel);font-size:clamp(.55rem,1.1vw,.72rem);line-height:2;color:var(--text);display:block;}
.q-en{font-family:var(--pixel);font-size:clamp(.45rem,.9vw,.6rem);line-height:1.8;color:var(--muted);display:block;margin-top:.25rem;}
.opts-grid{display:flex;flex-direction:column;gap:.6rem;}
.opt-box{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:.8rem 1rem;font-size:.82rem;display:flex;align-items:center;gap:.6rem;} .opt-box{background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:.8rem 1rem;font-size:.82rem;display:flex;align-items:center;gap:.6rem;}
.opt-box.correct{border-color:var(--green);background:rgba(0,255,136,.07);} .opt-box.correct{border-color:var(--green);background:rgba(0,255,136,.07);}
.opt-letter{font-family:var(--pixel);font-size:.55rem;min-width:24px;color:var(--muted);} .opt-letter{font-family:var(--pixel);font-size:.55rem;min-width:24px;color:var(--muted);}
@@ -175,6 +179,7 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
</div> </div>
<div class="start-row"> <div class="start-row">
<button class="hbtn hbtn-primary" id="start-btn" disabled onclick="startGame()">▶ START GAME</button> <button class="hbtn hbtn-primary" id="start-btn" disabled onclick="startGame()">▶ START GAME</button>
<button class="hbtn hbtn-warning" onclick="clearLobby()">🧹 CLEAR LOBBY</button>
<button class="hbtn hbtn-danger" onclick="clearScores()">🗑 CLEAR SCORES</button> <button class="hbtn hbtn-danger" onclick="clearScores()">🗑 CLEAR SCORES</button>
<button class="hbtn hbtn-secondary" onclick="location.href='/scores'">📊 HISTORY</button> <button class="hbtn hbtn-secondary" onclick="location.href='/scores'">📊 HISTORY</button>
</div> </div>
@@ -280,11 +285,22 @@ function handleMessage(msg) {
else if (msg.type === 'question') { else if (msg.type === 'question') {
currentQ = msg.number; currentQ = msg.number;
document.getElementById('q-meta').textContent = `Q ${msg.number} / ${msg.total}`; document.getElementById('q-meta').textContent = `Q ${msg.number} / ${msg.total}`;
document.getElementById('host-q-text').textContent = msg.q; const qParts = msg.q.split('\n\n[EN]');
const qEs = qParts[0].trim();
const qEn = qParts[1] ? qParts[1].trim() : '';
document.getElementById('host-q-text').innerHTML =
`<span class="q-es">${qEs}</span>${qEn ? `<span class="q-en">[EN] ${qEn}</span>` : ''}`;
const letters = ['A','B','C','D']; const letters = ['A','B','C','D'];
document.getElementById('host-opts').innerHTML = msg.options.map((o,i) => const optColors = ['#5b9cf6','#cc44ff','#00ff88','#ffcc00'];
`<div class="opt-box" id="hopt-${i}"><span class="opt-letter">${letters[i]}</span>${o}</div>` document.getElementById('host-opts').innerHTML = msg.options.map((o,i) => {
).join(''); const parts = o.split(' / ');
const oEs = parts[0] || o;
const oEn = parts.slice(1).join(' / ') || '';
return `<div class="opt-box" id="hopt-${i}" style="border-color:${optColors[i]};background:${optColors[i]}18">
<span class="opt-letter" style="color:${optColors[i]}">${letters[i]}</span>
<span><span style="display:block;font-size:.83rem">${oEs}</span>${oEn ? `<span style="display:block;font-size:.7rem;color:var(--muted)">${oEn}</span>` : ''}</span>
</div>`;
}).join('');
document.getElementById('ans-count').textContent = '0'; document.getElementById('ans-count').textContent = '0';
document.getElementById('ans-sub').textContent = `of ${currentTotal} players`; document.getElementById('ans-sub').textContent = `of ${currentTotal} players`;
document.getElementById('ans-bar').style.width = '0%'; document.getElementById('ans-bar').style.width = '0%';
@@ -357,6 +373,11 @@ async function clearScores() {
else alert('Error al borrar scores.'); else alert('Error al borrar scores.');
} }
function clearLobby() {
if (!confirm('¿Remover todos los jugadores del lobby? Los jugadores serán enviados de regreso al join screen.')) return;
ws.send(JSON.stringify({type: 'clear_lobby'}));
}
function buildPodium(lb) { function buildPodium(lb) {
const medals = ['🥇','🥈','🥉']; const medals = ['🥇','🥈','🥉'];
const pbClass = ['pb1','pb2','pb3']; const pbClass = ['pb1','pb2','pb3'];
templates/player.html
+98 -99
View File
@@ -10,7 +10,7 @@
:root{ :root{
--bg:#000510;--surface:#0a0e1a;--surface2:#111827; --bg:#000510;--surface:#0a0e1a;--surface2:#111827;
--accent:#00c8ff;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff; --accent:#00c8ff;--green:#00ff88;--red:#ff3355;--amber:#ffcc00;--purple:#cc44ff;
--text:#e8edf5;--muted:#4a5568;--border:rgba(255,255,255,0.08); --text:#e8edf5;--muted:#8a9bb5;--border:rgba(255,255,255,0.08);
--pixel:'Press Start 2P',monospace; --pixel:'Press Start 2P',monospace;
} }
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden;touch-action:none;} html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden;touch-action:none;}
@@ -39,21 +39,21 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
/* ── JOIN ── */ /* ── JOIN ── */
#join-screen .logo{font-family:var(--pixel);font-size:1rem;color:var(--accent);margin-bottom:.3rem;text-shadow:0 0 20px var(--accent);line-height:1.8;} #join-screen .logo{font-family:var(--pixel);font-size:1rem;color:var(--accent);margin-bottom:.3rem;text-shadow:0 0 20px var(--accent);line-height:1.8;}
#join-screen .sub{font-size:.75rem;color:var(--muted);margin-bottom:2rem;} #join-screen .sub{font-size:.85rem;color:var(--text);margin-bottom:2rem;opacity:.75;}
.field-wrap{width:100%;max-width:320px;margin-bottom:.8rem;text-align:left;} .field-wrap{width:100%;max-width:380px;margin-bottom:1rem;text-align:left;}
.field-wrap label{font-family:var(--pixel);font-size:.45rem;color:var(--muted);letter-spacing:.1em;display:block;margin-bottom:.4rem;} .field-wrap label{font-family:var(--pixel);font-size:.55rem;color:var(--accent);letter-spacing:.12em;display:block;margin-bottom:.5rem;}
.field-wrap input, .field-wrap select{ .field-wrap input, .field-wrap select{
width:100%;padding:.85rem 1rem; width:100%;padding:1rem 1.1rem;
background:var(--surface2);border:1px solid var(--border);border-radius:4px; background:var(--surface2);border:1.5px solid var(--border);border-radius:6px;
color:var(--text);font-size:.9rem;font-family:'DM Sans',sans-serif; color:var(--text);font-size:1.1rem;font-family:'DM Sans',sans-serif;
outline:none; outline:none;
} }
.field-wrap input:focus,.field-wrap select:focus{border-color:var(--accent);} .field-wrap input:focus,.field-wrap select:focus{border-color:var(--accent);}
.field-wrap input::placeholder{color:var(--muted);} .field-wrap input::placeholder{color:#5a6a80;}
.field-wrap select option{background:var(--surface2);} .field-wrap select option{background:var(--surface2);}
#join-btn{ #join-btn{
width:100%;max-width:320px;padding:1rem;margin-top:.5rem; width:100%;max-width:380px;padding:1.1rem;margin-top:.6rem;
background:var(--accent);border:none;border-radius:4px; background:var(--accent);border:none;border-radius:6px;
color:#000;font-family:var(--pixel);font-size:.6rem;letter-spacing:.1em; color:#000;font-family:var(--pixel);font-size:.6rem;letter-spacing:.1em;
cursor:pointer; cursor:pointer;
} }
@@ -96,13 +96,11 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
#score-hud .hud-score{font-family:var(--pixel);font-size:.5rem;color:var(--accent);} #score-hud .hud-score{font-family:var(--pixel);font-size:.5rem;color:var(--accent);}
#score-hud .hud-timer{font-family:var(--pixel);font-size:.75rem;color:var(--amber);} #score-hud .hud-timer{font-family:var(--pixel);font-size:.75rem;color:var(--amber);}
#score-hud .hud-q{font-family:var(--pixel);font-size:.4rem;color:var(--muted);} #score-hud .hud-q{font-family:var(--pixel);font-size:.4rem;color:var(--muted);}
#question-banner{ #projector-hint{
font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500; font-family:var(--pixel);font-size:.42rem;
color:var(--text);line-height:1.5;text-align:center; color:var(--muted);line-height:1.5;text-align:center;
background:rgba(0,5,16,.9);border:1px solid var(--border); letter-spacing:.08em;padding:.3rem 0;
border-radius:6px;padding:.55rem .9rem; animation:blink 2s step-end infinite;
/* clamp so it never grows past ~25% of viewport */
max-height:28vh;overflow:hidden;
} }
/* ── RESULT FLASH ── */ /* ── RESULT FLASH ── */
@@ -156,12 +154,12 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
<!-- STARS BG --> <!-- STARS BG -->
<canvas class="pixel-stars" id="stars-canvas"></canvas> <canvas class="pixel-stars" id="stars-canvas"></canvas>
<!-- LANGUAGE SELECT --> <!-- SPLASH — goes straight to join -->
<div class="screen active" id="lang-screen"> <div class="screen active" id="lang-screen">
<div class="title">🌐 NI QUIZ</div> <div class="title">🌐 NI QUIZ</div>
<div class="subtitle">NETWORK INTELLIGENCE · LCPR</div> <div class="subtitle">NETWORK INTELLIGENCE · LCPR</div>
<button class="lang-btn en" onclick="setLang('en')">🇺🇸 &nbsp; ENGLISH</button>
<button class="lang-btn es" onclick="setLang('es')">🇵🇷 &nbsp; ESPAÑOL</button> <button class="lang-btn es" onclick="goJoin()">▶ &nbsp; JUGAR / PLAY</button>
</div> </div>
<!-- JOIN --> <!-- JOIN -->
@@ -180,13 +178,11 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
<label id="lbl-dept">DEPARTMENT</label> <label id="lbl-dept">DEPARTMENT</label>
<select id="inp-dept"> <select id="inp-dept">
<option value="">-- Select --</option> <option value="">-- Select --</option>
<option>Network Intelligence</option> <option>Finanzas</option>
<option>NOC</option> <option>People</option>
<option>Network Engineering</option> <option>Legal</option>
<option>Field Operations</option> <option>B2B</option>
<option>IT</option> <option>B2C</option>
<option>Planning</option>
<option>Other / Otro</option>
</select> </select>
</div> </div>
<button id="join-btn">▶ ENTER GAME</button> <button id="join-btn">▶ ENTER GAME</button>
@@ -210,7 +206,7 @@ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradie
<span class="hud-timer" id="hud-timer">15</span> <span class="hud-timer" id="hud-timer">15</span>
<span class="hud-q" id="hud-q">Q1/5</span> <span class="hud-q" id="hud-q">Q1/5</span>
</div> </div>
<div id="question-banner"></div> <div id="projector-hint"></div>
</div> </div>
<div id="result-flash"> <div id="result-flash">
<div id="flash-icon"></div> <div id="flash-icon"></div>
@@ -290,16 +286,16 @@ function t(key, vars={}) {
return s; return s;
} }
function setLang(l) { function goJoin() {
lang = l; lang = 'es';
// Update join labels document.getElementById('lbl-fname').textContent = 'NOMBRE / NAME';
document.getElementById('lbl-fname').textContent = t('fname'); document.getElementById('lbl-lname').textContent = 'APELLIDO / LAST NAME';
document.getElementById('lbl-lname').textContent = t('lname'); document.getElementById('lbl-dept').textContent = 'DEPARTAMENTO / DEPARTMENT';
document.getElementById('lbl-dept').textContent = t('dept'); document.getElementById('join-btn').textContent = '▶ ENTRAR / JOIN';
document.getElementById('join-btn').textContent = t('enter'); document.getElementById('inp-dept').options[0].text = '-- Selecciona / Select --';
document.getElementById('inp-dept').options[0].text = t('dept_select');
show('join-screen'); show('join-screen');
} }
function setLang(l) { goJoin(); }
// ── SCREENS ────────────────────────────────────────────────────────────────── // ── SCREENS ──────────────────────────────────────────────────────────────────
function show(id) { function show(id) {
@@ -328,6 +324,10 @@ function handleMessage(msg) {
} }
else if (msg.type === 'phase') { else if (msg.type === 'phase') {
if (msg.phase === 'lobby' && myName) show('lobby-screen'); if (msg.phase === 'lobby' && myName) show('lobby-screen');
else if (msg.phase === 'join') {
myName = ''; myScore = 0; myDept = '';
show('join-screen');
}
} }
else if (msg.type === 'question') { else if (msg.type === 'question') {
startGame(msg); startGame(msg);
@@ -392,62 +392,35 @@ function resizeCanvas() {
window.addEventListener('resize', resizeCanvas); window.addEventListener('resize', resizeCanvas);
resizeCanvas(); resizeCanvas();
const COL_COLORS = ['#00c8ff','#cc44ff','#00ff88','#ffcc00']; const COL_COLORS = ['#5b9cf6','#cc44ff','#00ff88','#ffcc00']; // A=blue B=purple C=green D=yellow
function startGame(msg) { function startGame(msg) {
resizeCanvas(); resizeCanvas();
const W = canvas.width, H = canvas.height; const W = canvas.width, H = canvas.height;
const colW = W / 4; const colW = W / 4;
// Invader block sizing — responsive to screen width // Fixed invader size — no text inside, just letter
// On 375px wide: colW=93, invW≈77, invH≈90 (enough for 4-5 lines at 13px) const invW = Math.min(colW - 16, 90);
const invW = colW - 12; const invH = invW; // square-ish UFO shape
const invPadX = 20; // space for letter badge on left
const textAreaW = invW - invPadX - 10;
const fontSize = Math.max(12, Math.min(14, W * 0.034)); // 12–14px
const lineH = fontSize * 1.4;
// Pre-measure how many lines each option needs, then set uniform height
const measCtx = canvas.getContext('2d');
measCtx.font = `${fontSize}px 'DM Sans', sans-serif`;
function countLines(text, maxW) {
const words = text.split(' ');
let line = '', count = 1;
words.forEach(w => {
const test = line ? line + ' ' + w : w;
if (measCtx.measureText(test).width > maxW && line) { count++; line = w; }
else line = test;
});
return count;
}
const maxLines = Math.max(...msg.options.map(o => countLines(o, textAreaW)));
const badgeH = 20; // letter badge row
const invH = badgeH + maxLines * lineH + 20; // 20px vertical padding
gameState = { gameState = {
ship: {x: W/2, targetX: W/2, y: H - 120, w: 36, h: 28}, ship: {x: W/2, targetX: W/2, y: H - 120, w: 36, h: 28},
bullets: [], bullets: [],
invaders: msg.options.map((text, idx) => ({ invaders: msg.options.map((text, idx) => ({
x: colW * idx + colW/2, x: colW * idx + colW/2,
y: 120, y: 0,
targetY: 120, targetY: 0,
w: invW, w: invW,
h: invH, h: invH,
text,
idx, idx,
hit: false, hit: false,
hitTimer: 0, hitTimer: 0,
correct: idx === msg.correct_idx_hint,
fontSize,
lineH,
textAreaW,
})), })),
particles: [], particles: [],
answered: false, answered: false,
correctIdx: msg.correct_idx_hint ?? -1, correctIdx: msg.correct_idx_hint ?? -1,
timeLeft: msg.time_limit, timeLeft: msg.time_limit,
timerStart: performance.now(), timerStart: performance.now(),
options: msg.options,
correctAnswer: msg.correct_idx_hint, correctAnswer: msg.correct_idx_hint,
W, H, colW, W, H, colW,
totalTime: msg.time_limit, totalTime: msg.time_limit,
@@ -455,18 +428,18 @@ function startGame(msg) {
qTotal: msg.total, qTotal: msg.total,
}; };
document.getElementById('question-banner').textContent = msg.q; document.getElementById('projector-hint').textContent = lang === 'es' ? '👆 MIRA EL PROYECTOR' : '👆 LOOK AT THE SCREEN';
document.getElementById('hud-q').textContent = `${t('q_prefix')}${msg.number}${t('of')}${msg.total}`; document.getElementById('hud-q').textContent = `${t('q_prefix')}${msg.number}${t('of')}${msg.total}`;
document.getElementById('result-flash').classList.remove('active'); document.getElementById('result-flash').classList.remove('active');
// Measure overlay height so invaders don't spawn behind it // Measure overlay height so invaders don't spawn behind it
const overlay = document.getElementById('game-overlay'); const overlay = document.getElementById('game-overlay');
const overlayH = overlay ? overlay.getBoundingClientRect().height : 100; const overlayH = overlay ? overlay.getBoundingClientRect().height : 100;
const spawnY = overlayH + invH / 2 + 20; // first visible position just below overlay const spawnY = overlayH + invH / 2 + 20;
// Invaders start high and slowly descend // Invaders start above screen and descend into position
gameState.invaders.forEach((inv, i) => { gameState.invaders.forEach((inv, i) => {
inv.y = -invH - i * 25; inv.y = -invH - i * 30;
inv.targetY = spawnY; inv.targetY = spawnY;
}); });
@@ -545,38 +518,62 @@ function gameFrame(ts) {
// Slowly descend after appearing // Slowly descend after appearing
if (!gs.answered) { if (!gs.answered) {
inv.y += (inv.targetY - inv.y) * 0.08; inv.y += (inv.targetY - inv.y) * 0.08;
inv.targetY += 0.25; // drift down slowly inv.targetY += 0.25;
} }
const color = COL_COLORS[i]; const color = COL_COLORS[i];
// Box const letters = ['A','B','C','D'];
ctx.fillStyle = `rgba(${hexToRgb(color)},0.10)`; const urgent = timeLeft <= 3 && !gs.answered && i === gs.correctIdx;
// Shake offset when urgent
const shakeX = urgent ? Math.sin(ts * 0.045 + i * 1.3) * 4 : 0;
const shakeY = urgent ? Math.cos(ts * 0.05 + i * 0.9) * 3 : 0;
const cx = inv.x + shakeX, cy = inv.y + shakeY;
const r = inv.w / 2;
// Urgent pulse: glow intensity oscillates fast
const pulse = urgent ? 0.5 + 0.5 * Math.sin(ts * 0.025) : 0;
// UFO dome (top half ellipse)
ctx.fillStyle = `rgba(${hexToRgb(color)},${0.18 + pulse * 0.22})`;
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.lineWidth = 1.5; ctx.lineWidth = urgent ? 2 + pulse * 2 : 2;
roundRect(ctx, inv.x - inv.w/2, inv.y - inv.h/2, inv.w, inv.h, 8); ctx.shadowColor = color;
ctx.shadowBlur = urgent ? 10 + pulse * 24 : 0;
ctx.beginPath();
ctx.ellipse(cx, cy, r, r * 0.55, 0, Math.PI, 0);
ctx.fill(); ctx.stroke(); ctx.fill(); ctx.stroke();
// Letter badge — top-left, full row // UFO saucer body (full ellipse)
const letters = ['A','B','C','D']; ctx.fillStyle = `rgba(${hexToRgb(color)},${0.25 + pulse * 0.2})`;
const badgeSize = 13; ctx.strokeStyle = color;
ctx.fillStyle = color; ctx.lineWidth = urgent ? 2 + pulse * 2 : 2;
ctx.font = `bold ${badgeSize}px 'Press Start 2P', monospace`; ctx.shadowColor = color;
ctx.textAlign = 'left'; ctx.shadowBlur = urgent ? 14 + pulse * 20 : 0;
ctx.textBaseline = 'top'; ctx.beginPath();
ctx.fillText(letters[i], inv.x - inv.w/2 + 8, inv.y - inv.h/2 + 7); ctx.ellipse(cx, cy, r, r * 0.32, 0, 0, Math.PI * 2);
ctx.fill(); ctx.stroke();
ctx.shadowBlur = 0;
// Answer text — wrap inside block, below badge row // Glow under saucer
const fz = inv.fontSize || 12; ctx.shadowColor = color;
const lh = inv.lineH || 17; ctx.shadowBlur = urgent ? 18 + pulse * 28 : 14;
const maxW = inv.textAreaW || (inv.w - 28); ctx.beginPath();
ctx.fillStyle = '#e8edf5'; ctx.ellipse(cx, cy + r * 0.1, r * 0.6, r * 0.12, 0, 0, Math.PI * 2);
ctx.font = `${fz}px 'DM Sans', sans-serif`; ctx.fillStyle = `rgba(${hexToRgb(color)},${0.35 + pulse * 0.35})`;
ctx.fill();
ctx.shadowBlur = 0;
// Big centered letter
const letterSize = Math.max(18, r * 0.85);
ctx.fillStyle = color;
ctx.font = `bold ${letterSize}px 'Press Start 2P', monospace`;
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
// Text block starts after badge (20px) + padding (4px) ctx.shadowColor = color;
const textBlockTop = inv.y - inv.h/2 + 24; ctx.shadowBlur = urgent ? 16 + pulse * 20 : 10;
const textBlockH = inv.h - 28; ctx.fillText(letters[i], cx, cy - r * 0.28);
wrapText(ctx, inv.text, inv.x, textBlockTop + textBlockH/2, maxW, lh); ctx.shadowBlur = 0;
}); });
// ── SHIP ── // ── SHIP ──
@@ -612,12 +609,14 @@ function gameFrame(ts) {
ctx.fillRect(b.x - 2, b.y, 4, 16); ctx.fillRect(b.x - 2, b.y, 4, 16);
ctx.shadowBlur = 0; ctx.shadowBlur = 0;
// Collision check // Collision check — circular hitbox matching UFO saucer radius
if (!gs.answered) { if (!gs.answered) {
gs.invaders.forEach((inv, i) => { gs.invaders.forEach((inv, i) => {
if (inv.hit) return; if (inv.hit) return;
if (b.x > inv.x - inv.w/2 && b.x < inv.x + inv.w/2 && const r = inv.w / 2;
b.y > inv.y - inv.h/2 && b.y < inv.y + inv.h/2) { const dx = b.x - inv.x;
const dy = b.y - inv.y;
if (Math.sqrt(dx*dx + dy*dy) < r) {
b.y = -999; // destroy bullet b.y = -999; // destroy bullet
if (!gs.answered) { if (!gs.answered) {
gs.answered = true; gs.answered = true;
templates/scores.html
+255 -168
View File
@@ -3,169 +3,251 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NI Quiz · Historial de Scores</title> <title>NI Quiz · Historial</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@400;600;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box;} *{margin:0;padding:0;box-sizing:border-box;}
:root{ :root{
--bg:#0a0e1a;--surface:#111827;--surface2:#1a2235; --bg:#ffffff;
--accent:#00c8ff;--green:#10b981;--amber:#f59e0b;--purple:#7c3aed; --surface:#f0f4f8;
--text:#e8edf5;--muted:#6b7a99;--border:rgba(255,255,255,0.08); --surface2:#e2e8f0;
--accent:#0077cc;
--accent2:#cc0033;
--warn:#ffb800;
--text:#0a0f1e;
--muted:#4a5568;
--mono:'Share Tech Mono',monospace;
--sans:'Exo 2',sans-serif;
} }
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,200,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
header{padding:2rem 2rem 1rem;border-bottom:1px solid var(--border);position:relative;z-index:1;} html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--sans);}
header h1{font-family:'Syne',sans-serif;font-size:1.8rem;color:var(--accent);}
header p{font-size:.85rem;color:var(--muted);margin-top:.2rem;}
.nav-links{margin-top:.8rem;display:flex;gap:.8rem;}
.nav-links a{font-size:.8rem;color:var(--muted);text-decoration:none;padding:.25rem .7rem;border:1px solid var(--border);border-radius:6px;}
.nav-links a:hover{color:var(--text);}
main{padding:2rem;max-width:900px;margin:0 auto;position:relative;z-index:1;} body::before{
content:'';position:fixed;inset:0;
background-image:
linear-gradient(rgba(0,119,204,0.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,119,204,0.06) 1px,transparent 1px);
background-size:40px 40px;pointer-events:none;z-index:0;
}
#loading{text-align:center;color:var(--muted);padding:3rem;font-size:.9rem;} header{
#empty{display:none;text-align:center;color:var(--muted);padding:3rem;} position:relative;z-index:1;
#empty .icon{font-size:3rem;margin-bottom:1rem;} padding:1.75rem 2rem 1.25rem;
border-bottom:1px solid rgba(0,119,204,0.12);
display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.header-left h1{
font-family:var(--sans);font-weight:900;font-size:2rem;letter-spacing:-0.03em;
color:var(--accent);text-shadow:0 0 20px rgba(0,119,204,0.4);line-height:1;
}
.header-left h1 span{color:var(--accent2);}
.header-left p{font-family:var(--mono);font-size:.55rem;color:var(--muted);letter-spacing:.12em;margin-top:.3rem;}
.nav-links{display:flex;gap:.5rem;}
.nav-links a{
font-family:var(--mono);font-size:.6rem;color:var(--muted);
text-decoration:none;padding:.35rem .8rem;
border:1px solid rgba(0,119,204,0.15);border-radius:2px;
transition:all .15s;letter-spacing:.08em;
}
.nav-links a:hover{color:var(--accent);border-color:rgba(0,119,204,0.4);}
/* ALL-TIME TOP 5 */ main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem;}
.all-time{margin-bottom:2.5rem;}
.section-title{font-family:'Syne',sans-serif;font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;} /* loading / empty */
.section-title span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} #loading{text-align:center;color:var(--muted);padding:4rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;}
#loading::after{content:'...';animation:dots 1.2s step-end infinite;}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
#empty{display:none;text-align:center;padding:4rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);}
#empty .icon{font-size:3rem;margin-bottom:1rem;display:block;}
#content{display:none;}
/* section */
.section{margin-bottom:2.5rem;}
.section-title{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;}
.section-title h2{font-family:var(--sans);font-weight:900;font-size:1.1rem;letter-spacing:-0.01em;}
.section-title .pill{
font-family:var(--mono);font-size:.45rem;letter-spacing:.15em;
padding:.2rem .5rem;border-radius:2px;
background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);color:var(--accent);
}
/* top cards */
.top-row{display:flex;gap:.75rem;flex-wrap:wrap;} .top-row{display:flex;gap:.75rem;flex-wrap:wrap;}
.top-card{ .top-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px; flex:1;min-width:140px;
padding:.9rem 1.1rem;display:flex;align-items:center;gap:.8rem; background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;
min-width:160px;flex:1; padding:.9rem 1.1rem;display:flex;align-items:center;gap:.75rem;
transition:border-color .2s;
} }
.top-card.gold{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.05);} .top-card:hover{border-color:rgba(0,119,204,0.35);}
.top-card.silver{border-color:rgba(200,200,200,.3);} .top-card.gold{border-color:rgba(255,184,0,.35);background:rgba(255,184,0,.04);}
.top-card.bronze{border-color:rgba(180,120,60,.3);} .top-card.silver{border-color:rgba(180,180,180,.25);}
.top-medal{font-size:1.4rem;} .top-card.bronze{border-color:rgba(160,90,30,.25);}
.top-info{flex:1;} .top-medal{font-size:1.6rem;}
.top-name{font-weight:500;font-size:.9rem;} .top-info .top-name{font-weight:700;font-size:.9rem;margin-bottom:.15rem;}
.top-score{font-family:'Syne',sans-serif;font-size:1.1rem;color:var(--accent);font-weight:700;} .top-info .top-score{font-family:var(--sans);font-weight:900;font-size:1.2rem;letter-spacing:-0.02em;color:var(--accent);line-height:1;}
.top-sessions{font-size:.7rem;color:var(--muted);} .top-info .top-meta{font-family:var(--mono);font-size:.45rem;color:var(--muted);margin-top:.15rem;}
/* SESSIONS */ /* ── TABS ── */
.session-card{ .tabs{display:flex;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap;border-bottom:1px solid rgba(0,119,204,0.12);padding-bottom:1rem;}
background:var(--surface);border:1px solid var(--border);border-radius:14px;
margin-bottom:1rem;overflow:hidden;
}
.session-header{
padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;
cursor:pointer;
}
.session-header:hover{background:var(--surface2);}
.session-meta{display:flex;align-items:center;gap:1rem;}
.session-id{font-size:.7rem;letter-spacing:.1em;color:var(--muted);font-family:'Syne',sans-serif;}
.session-date{font-size:.85rem;font-weight:500;}
.session-badge{
padding:.2rem .6rem;border-radius:100px;font-size:.7rem;
background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);color:var(--accent);
}
.chevron{color:var(--muted);transition:transform .2s;font-size:1rem;}
.session-body{display:none;border-top:1px solid var(--border);}
.session-body.open{display:block;}
.scores-table{width:100%;border-collapse:collapse;}
.scores-table th{
text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);padding:.7rem 1.2rem;border-bottom:1px solid var(--border);
}
.scores-table td{padding:.65rem 1.2rem;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.03);}
.scores-table tr:last-child td{border:none;}
.rank-cell{font-family:'Syne',sans-serif;font-weight:700;color:var(--muted);}
.score-cell{font-family:'Syne',sans-serif;color:var(--accent);font-weight:700;}
.medal-cell{font-size:1.1rem;}
/* TABS */
.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.tab-btn{ .tab-btn{
padding:.4rem 1rem;border-radius:100px;font-size:.78rem;font-weight:500; padding:.45rem 1.1rem;border-radius:2px;font-family:var(--mono);font-size:.62rem;
border:1px solid var(--border);background:transparent;color:var(--muted); letter-spacing:.1em;border:1px solid rgba(0,119,204,0.2);
cursor:pointer;transition:all .15s; background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;
} }
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700;} .tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);} .tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);}
.tab-panel{display:none;}.tab-panel.active{display:block;} .tab-panel{display:none;}
.tab-panel.active{display:block;}
/* DEPT SECTION */ /* ── TABLES ── */
.dept-block{margin-bottom:1.5rem;} .table-wrap{background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
thead th{
text-align:left;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
color:var(--muted);padding:.65rem 1.1rem;
border-bottom:1px solid rgba(0,119,204,0.1);
}
tbody td{padding:.6rem 1.1rem;font-size:.85rem;border-bottom:1px solid rgba(0,0,0,0.04);}
tbody tr:last-child td{border:none;}
tbody tr:hover{background:var(--surface2);}
.td-rank{font-family:var(--mono);font-weight:700;color:var(--muted);font-size:.8rem;}
.td-score{font-family:var(--sans);font-weight:800;color:var(--accent);font-size:.95rem;}
.td-medal{font-size:1rem;min-width:28px;}
.td-dept{font-family:var(--mono);font-size:.7rem;color:var(--muted);}
/* ── DEPT SECTION ── */
.dept-block{margin-bottom:1.25rem;border-radius:4px;overflow:hidden;border:1px solid rgba(0,119,204,0.15);}
.dept-header{ .dept-header{
display:flex;align-items:center;gap:.7rem; display:flex;align-items:center;gap:.7rem;
padding:.6rem .9rem;border-radius:10px 10px 0 0; padding:.7rem 1.1rem;background:var(--surface);
background:var(--surface2);border:1px solid var(--border);border-bottom:none; border-bottom:1px solid rgba(0,119,204,0.1);
} }
.dept-dot{width:10px;height:10px;border-radius:50%;} .dept-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dept-name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;} .dept-name{font-family:var(--sans);font-weight:800;font-size:.95rem;}
.dept-count{font-size:.75rem;color:var(--muted);} .dept-count{font-family:var(--mono);font-size:.5rem;color:var(--muted);margin-left:auto;}
.dept-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:0 0 10px 10px;overflow:hidden;}
.dept-table td{padding:.6rem 1rem;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.03);} /* ── SESSIONS ── */
.dept-table tr:last-child td{border:none;} .session-card{
.dept-rank{font-family:'Syne',sans-serif;font-weight:700;color:var(--muted);width:36px;} background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;
.dept-score{font-family:'Syne',sans-serif;color:var(--accent);font-weight:700;text-align:right;} margin-bottom:.75rem;overflow:hidden;
}
.session-header{
display:flex;align-items:center;justify-content:space-between;
padding:.9rem 1.1rem;cursor:pointer;transition:background .15s;
}
.session-header:hover{background:var(--surface2);}
.session-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.session-id{font-family:var(--mono);font-size:.5rem;color:var(--muted);letter-spacing:.1em;}
.session-date{font-size:.85rem;font-weight:600;}
.session-badge{
font-family:var(--mono);font-size:.5rem;
padding:.2rem .55rem;border-radius:2px;
background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);color:var(--accent);
}
.session-right{display:flex;align-items:center;gap:.75rem;}
.session-players{font-family:var(--mono);font-size:.5rem;color:var(--muted);}
.chevron{color:var(--muted);transition:transform .2s;font-size:.9rem;}
.session-body{display:none;border-top:1px solid rgba(0,119,204,0.1);}
.session-body.open{display:block;}
/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .4s ease both;}
</style> </style>
</head> </head>
<body> <body>
<div class="grid-bg"></div>
<header> <header>
<h1>🌐 NI Quiz · Historial</h1> <div class="header-left">
<p>Network Intelligence · LCPR — Scores guardados por sesión</p> <h1>NI<span>QUIZ</span></h1>
<div class="nav-links"> <p>// HISTORIAL DE SCORES · NETWORK INTELLIGENCE · LCPR</p>
<a href="/host">← Host Panel</a>
<a href="/">Jugar</a>
</div> </div>
<nav class="nav-links">
<a href="/host">← HOST PANEL</a>
<a href="/">JUGAR</a>
</nav>
</header> </header>
<main> <main>
<div id="loading">Cargando historial...</div> <div id="loading">CARGANDO HISTORIAL</div>
<div id="empty"><div class="icon">📭</div><p>Aún no hay sesiones guardadas.<br>Los scores se guardan al terminar el juego.</p></div> <div id="empty"><span class="icon">📡</span>Aún no hay sesiones guardadas.<br>Los scores se guardan al terminar el juego.</div>
<div id="content" style="display:none;"> <div id="content">
<div class="all-time">
<div class="section-title">🏆 <span>Top jugadores — todas las sesiones</span></div> <!-- TOP PLAYERS -->
<div class="section">
<div class="section-title">
<h2>🏆 Top Jugadores</h2>
<span class="pill">MEJOR SCORE</span>
</div>
<div class="top-row" id="top-row"></div> <div class="top-row" id="top-row"></div>
</div> </div>
<!-- TABS --> <!-- TABS -->
<div class="tabs"> <div class="tabs">
<button class="tab-btn active" onclick="switchTab('global')">🌐 Global</button> <button class="tab-btn active" onclick="switchTab('global')">📊 RANKING GLOBAL</button>
<button class="tab-btn" onclick="switchTab('dept')">🏢 Por departamento</button> <button class="tab-btn" onclick="switchTab('dept')">🏢 POR DEPARTAMENTO</button>
<button class="tab-btn" onclick="switchTab('sessions')">📋 Sesiones</button> <button class="tab-btn" onclick="switchTab('sessions')">📋 SESIONES</button>
</div> </div>
<!-- GLOBAL TAB --> <!-- GLOBAL TAB -->
<div class="tab-panel active" id="tab-global"> <div class="tab-panel active" id="tab-global">
<div class="section-title">🥇 <span>Ranking global — mejor score histórico</span></div> <div class="section-title">
<div id="global-list"></div> <h2>📊 Ranking Global</h2>
<span class="pill">TODAS LAS SESIONES · MEJOR SCORE</span>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th></th>
<th>JUGADOR</th>
<th>DEPARTAMENTO</th>
<th>MEJOR SCORE</th>
<th>SESIONES</th>
<th>PROMEDIO</th>
</tr>
</thead>
<tbody id="global-tbody"></tbody>
</table>
</div>
</div> </div>
<!-- DEPT TAB --> <!-- DEPT TAB -->
<div class="tab-panel" id="tab-dept"> <div class="tab-panel" id="tab-dept">
<div class="section-title">🏢 <span>Ranking por departamento</span></div> <div class="section-title">
<h2>🏢 Rankings por Departamento</h2>
<span class="pill">MEJOR SCORE POR JUGADOR</span>
</div>
<div id="dept-list"></div> <div id="dept-list"></div>
</div> </div>
<!-- SESSIONS TAB --> <!-- SESSIONS TAB -->
<div class="tab-panel" id="tab-sessions"> <div class="tab-panel" id="tab-sessions">
<div class="section-title">📋 <span>Sesiones recientes</span></div> <div class="section-title">
<h2>📋 Historial de Sesiones</h2>
<span class="pill" id="session-count-pill">0 JUEGOS</span>
</div>
<div id="sessions-list"></div> <div id="sessions-list"></div>
</div> </div>
</div> </div>
</main> </main>
<script> <script>
const medals = ['🥇','🥈','🥉']; const medals = ['🥇','🥈','🥉'];
const rankClasses = ['gold','silver','bronze']; const rankClass = ['gold','silver','bronze'];
const DEPT_COLORS = [ const DEPT_COLORS = [
'#00c8ff','#cc44ff','#00ff88','#ffcc00','#ff6b35','#5b9cf6','#f472b6','#34d399' '#0077cc','#cc0033','#ffb800','#cc44ff','#00994d','#ff6b00','#5b9cf6','#f472b6'
]; ];
function switchTab(name) { function switchTab(name) {
const names = ['global','dept','sessions'];
document.querySelectorAll('.tab-btn').forEach((b,i) => { document.querySelectorAll('.tab-btn').forEach((b,i) => {
b.classList.toggle('active', ['global','dept','sessions'][i] === name); b.classList.toggle('active', names[i] === name);
}); });
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active')); document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
document.getElementById('tab-' + name).classList.add('active'); document.getElementById('tab-' + name).classList.add('active');
@@ -176,134 +258,139 @@ async function load() {
const data = await res.json(); const data = await res.json();
document.getElementById('loading').style.display = 'none'; document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block';
document.getElementById('session-count-pill').textContent =
data.length ? `${data.length} JUEGO${data.length>1?'S':''}` : '0 JUEGOS';
if (!data.length) { if (!data.length) {
document.getElementById('empty').style.display = 'block'; document.getElementById('top-row').innerHTML =
`<p style="font-family:var(--mono);font-size:.65rem;color:var(--muted);padding:.5rem 0">Sin sesiones todavía — los scores se guardan al terminar el juego.</p>`;
document.getElementById('global-tbody').innerHTML =
`<tr><td colspan="6" style="font-family:var(--mono);font-size:.65rem;color:var(--muted);text-align:center;padding:2rem">Sin datos</td></tr>`;
return; return;
} }
document.getElementById('content').style.display = 'block'; // ── BUILD PLAYER MAP ──────────────────────────────────────────────────────
const playerMap = {};
// ── BUILD PLAYER MAP ──
// allScores[name] = { best, sessions, dept }
const allScores = {};
data.forEach(s => { data.forEach(s => {
s.players.forEach(p => { s.players.forEach(p => {
const key = p.player; const key = p.player;
if (!allScores[key]) { if (!playerMap[key]) {
allScores[key] = { best: p.score, sessions: 1, dept: p.dept || 'Sin departamento' }; playerMap[key] = { best: p.score, total: p.score, sessions: 1, dept: p.dept || '—' };
} else { } else {
if (p.score > allScores[key].best) allScores[key].best = p.score; if (p.score > playerMap[key].best) playerMap[key].best = p.score;
allScores[key].sessions++; playerMap[key].total += p.score;
if (p.dept) allScores[key].dept = p.dept; // keep most recent dept playerMap[key].sessions++;
if (p.dept) playerMap[key].dept = p.dept;
} }
}); });
}); });
const sorted = Object.entries(allScores).sort((a,b) => b[1].best - a[1].best); const sorted = Object.entries(playerMap).sort((a,b) => b[1].best - a[1].best);
// ── TOP 5 CARDS ── // ── TOP 5 CARDS ───────────────────────────────────────────────────────────
const topRow = document.getElementById('top-row'); const topRow = document.getElementById('top-row');
sorted.slice(0, 5).forEach(([name, info], i) => { sorted.slice(0, 5).forEach(([name, info], i) => {
const card = document.createElement('div'); const card = document.createElement('div');
card.className = `top-card ${rankClasses[i] || ''}`; card.className = `top-card ${rankClass[i]||''} fade-up`;
card.style.animationDelay = `${i*.06}s`;
card.innerHTML = ` card.innerHTML = `
<div class="top-medal">${i < 3 ? medals[i] : `#${i+1}`}</div> <div class="top-medal">${i<3?medals[i]:`#${i+1}`}</div>
<div class="top-info"> <div class="top-info">
<div class="top-name">${name}</div> <div class="top-name">${name}</div>
<div class="top-score">${info.best.toLocaleString()} pts</div> <div class="top-score">${info.best.toLocaleString()}</div>
<div class="top-sessions">${info.dept || '—'} · ${info.sessions} sesión${info.sessions > 1 ? 'es' : ''}</div> <div class="top-meta">${info.dept} · ${info.sessions} SESIÓN${info.sessions>1?'ES':''}</div>
</div>`; </div>`;
topRow.appendChild(card); topRow.appendChild(card);
}); });
// ── GLOBAL RANKING TABLE ── // ── GLOBAL TABLE ──────────────────────────────────────────────────────────
const globalList = document.getElementById('global-list'); const tbody = document.getElementById('global-tbody');
const globalTable = document.createElement('table'); sorted.forEach(([name, info], i) => {
globalTable.className = 'scores-table'; const avg = Math.round(info.total / info.sessions);
globalTable.style.cssText = 'background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;'; const tr = document.createElement('tr');
globalTable.innerHTML = ` tr.innerHTML = `
<thead><tr> <td class="td-medal">${i<3?medals[i]:`<span class="td-rank">#${i+1}</span>`}</td>
<th></th><th>Jugador</th><th>Departamento</th><th>Mejor score</th><th>Sesiones</th> <td style="font-weight:600">${name}</td>
</tr></thead> <td class="td-dept">${info.dept}</td>
<tbody>${sorted.map(([ name, info], i) => ` <td class="td-score">${info.best.toLocaleString()}</td>
<tr> <td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${info.sessions}</td>
<td class="medal-cell">${i < 3 ? medals[i] : `<span style="font-family:'Syne',sans-serif;color:var(--muted)">#${i+1}</span>`}</td> <td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${avg.toLocaleString()}</td>`;
<td style="font-weight:500">${name}</td> tbody.appendChild(tr);
<td style="font-size:.78rem;color:var(--muted)">${info.dept || '—'}</td> });
<td class="score-cell">${info.best.toLocaleString()}</td>
<td style="font-size:.78rem;color:var(--muted)">${info.sessions}</td>
</tr>`).join('')}
</tbody>`;
globalList.appendChild(globalTable);
// ── DEPT RANKING ── // ── DEPT RANKINGS ─────────────────────────────────────────────────────────
// Group players by dept, pick best score per player, sum for dept total
const depts = {}; const depts = {};
sorted.forEach(([name, info]) => { sorted.forEach(([name, info]) => {
const d = info.dept || 'Sin departamento'; const d = info.dept || '—';
if (!depts[d]) depts[d] = []; if (!depts[d]) depts[d] = [];
depts[d].push({ name, best: info.best, sessions: info.sessions }); depts[d].push({ name, best: info.best, sessions: info.sessions });
}); });
// Sort depts by their top player's score const deptsSorted = Object.entries(depts).sort((a,b) => b[1][0].best - a[1][0].best);
const deptsSorted = Object.entries(depts).sort((a, b) => b[1][0].best - a[1][0].best);
const deptList = document.getElementById('dept-list'); const deptList = document.getElementById('dept-list');
deptsSorted.forEach(([dept, players], di) => { deptsSorted.forEach(([dept, players], di) => {
const color = DEPT_COLORS[di % DEPT_COLORS.length]; const color = DEPT_COLORS[di % DEPT_COLORS.length];
const block = document.createElement('div'); const block = document.createElement('div');
block.className = 'dept-block'; block.className = 'dept-block fade-up';
block.style.animationDelay = `${di*.05}s`;
block.innerHTML = ` block.innerHTML = `
<div class="dept-header"> <div class="dept-header">
<div class="dept-dot" style="background:${color}"></div> <div class="dept-dot" style="background:${color}"></div>
<div class="dept-name">${dept}</div> <div class="dept-name">${dept}</div>
<div class="dept-count">${players.length} jugador${players.length > 1 ? 'es' : ''}</div> <div class="dept-count">${players.length} JUGADOR${players.length>1?'ES':''}</div>
</div> </div>
<table class="dept-table"> <div class="table-wrap" style="border:none;border-radius:0;">
<tbody>${players.map((p, i) => ` <table>
<thead><tr><th></th><th>JUGADOR</th><th>MEJOR SCORE</th><th>SESIONES</th></tr></thead>
<tbody>
${players.map((p, i) => `
<tr> <tr>
<td class="dept-rank">${i < 3 ? medals[i] : '#' + (i+1)}</td> <td class="td-medal">${i<3?medals[i]:`<span class="td-rank">#${i+1}</span>`}</td>
<td style="font-weight:500">${p.name}</td> <td style="font-weight:600">${p.name}</td>
<td class="dept-score">${p.best.toLocaleString()} pts</td> <td class="td-score">${p.best.toLocaleString()}</td>
<td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${p.sessions}</td>
</tr>`).join('')} </tr>`).join('')}
</tbody> </tbody>
</table>`; </table>
</div>`;
deptList.appendChild(block); deptList.appendChild(block);
}); });
// ── SESSIONS ── // ── SESSIONS ──────────────────────────────────────────────────────────────
const list = document.getElementById('sessions-list'); const list = document.getElementById('sessions-list');
data.forEach(session => { data.forEach(session => {
const date = new Date(session.started_at + 'Z').toLocaleString('es-PR', { const date = new Date(session.started_at + 'Z').toLocaleString('es-PR', {
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'
}); });
const winner = session.players[0]; const winner = session.players[0];
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'session-card'; card.className = 'session-card fade-up';
card.innerHTML = ` card.innerHTML = `
<div class="session-header" onclick="toggle(this)"> <div class="session-header" onclick="toggle(this)">
<div class="session-meta"> <div class="session-meta">
<span class="session-id">SESIÓN #${session.id}</span> <span class="session-id">SESIÓN #${session.id}</span>
<span class="session-date">${date}</span> <span class="session-date">${date}</span>
${winner ? `<span class="session-badge">🥇 ${winner.player} · ${winner.score.toLocaleString()} pts</span>` : ''} ${winner ? `<span class="session-badge">🥇 ${winner.player} · ${winner.score.toLocaleString()} PTS</span>` : ''}
</div> </div>
<div style="display:flex;align-items:center;gap:.8rem;"> <div class="session-right">
<span style="font-size:.75rem;color:var(--muted);">${session.total_players} jugadores</span> <span class="session-players">${session.total_players} JUGADOR${session.total_players!==1?'ES':''}</span>
<span class="chevron">▼</span> <span class="chevron">▼</span>
</div> </div>
</div> </div>
<div class="session-body"> <div class="session-body">
<table class="scores-table"> <table>
<thead><tr> <thead><tr><th></th><th>JUGADOR</th><th>DEPARTAMENTO</th><th>SCORE</th><th>RANK</th></tr></thead>
<th></th><th>Jugador</th><th>Departamento</th><th>Puntaje</th> <tbody>
</tr></thead> ${session.players.map((p,i) => `
<tbody>${session.players.map((p,i) => `
<tr> <tr>
<td class="medal-cell">${i < 3 ? medals[i] : ''}</td> <td class="td-medal">${i<3?medals[i]:''}</td>
<td>${p.player}</td> <td style="font-weight:600">${p.player}</td>
<td style="font-size:.78rem;color:var(--muted)">${p.dept || '—'}</td> <td class="td-dept">${p.dept || '—'}</td>
<td class="score-cell">${p.score.toLocaleString()}</td> <td class="td-score">${p.score.toLocaleString()}</td>
<td style="font-family:var(--mono);font-size:.7rem;color:var(--muted)">#${p.rank}</td>
</tr>`).join('')} </tr>`).join('')}
</tbody> </tbody>
</table> </table>