Caricamento…

`; } function renderEmpty() { matchesList.innerHTML = `

Nessun match

`; } function renderBoard(match) { if (!match) { clearBoard(); return; } scoreboard.classList.add("is-swapping"); setTimeout(() => { teamAName.textContent = match.playerA || "—"; teamBName.textContent = match.playerB || "—"; setScore.textContent = match.setScore || "—"; gameScore.textContent = match.gameScore || "—"; tournamentMeta.textContent = match.round ? `${match.tournament} · ${match.round}` : (match.tournament || "—"); statusMeta.textContent = [match.status, match.date].filter(Boolean).join(" · ") || "—"; scoreboard.classList.remove("is-swapping"); }, 130); } function renderMatches() { if (!state.matches.length) { renderEmpty(); clearBoard(); return; } matchesList.innerHTML = state.matches .map((match) => { const active = match.id === state.selectedId ? "is-active" : ""; return `

${escapeHtml(match.playerA)}

${escapeHtml(match.playerB)}

${escapeHtml(match.round || "Match")}

${escapeHtml(match.setScore || "—")}

${escapeHtml(match.gameScore || "—")}

${escapeHtml(match.tournament || "—")}

`; }) .join(""); matchesList.querySelectorAll(".match-card").forEach((card) => { card.addEventListener("click", () => { state.selectedId = card.dataset.id; renderMatches(); renderBoard(state.matches.find((m) => m.id === state.selectedId)); }); }); renderBoard(state.matches.find((m) => m.id === state.selectedId)); } async function fetchEventById(id) { const res = await fetch(`${API_BASE}/lookupevent.php?id=${id}`); if (!res.ok) throw new Error(`HTTP ${res.status}`); const data = await res.json(); const event = Array.isArray(data.events) ? data.events[0] : null; return event; } async function loadPreset(key) { renderLoading(); const ids = PRESET_IDS[key] || []; const fallback = FALLBACK_PRESETS[key] || []; try { const raw = await Promise.all(ids.map(fetchEventById)); const fromApi = raw.filter(Boolean).map(normalizeEvent); state.matches = fallback.map((fallbackMatch) => { const apiMatch = fromApi.find((m) => String(m.id) === String(fallbackMatch.id)); return mergeWithFallback(apiMatch, fallbackMatch); }); } catch (error) { console.error(error); state.matches = fallback; } state.selectedId = state.matches[0]?.id || null; renderMatches(); } function setSurface(surface) { scene.dataset.surface = surface; surfaceButtons.forEach((btn) => { btn.classList.toggle("is-active", btn.dataset.surface === surface); }); } function lerp(a, b, t) { return a + (b - a) * t; } function easeInOut(t) { return 0.5 - Math.cos(Math.PI * t) / 2; } function getBallState(t) { let p, x, y, rot; if (t < 0.5) { p = easeInOut(t / 0.5); x = lerp(16, 73, p); y = lerp(67, 37, p) - Math.sin(p * Math.PI) * 13; rot = lerp(0, 220, p); } else { p = easeInOut((t - 0.5) / 0.5); x = lerp(73, 16, p); y = lerp(37, 67, p) - Math.sin(p * Math.PI) * 13; rot = lerp(220, 430, p); } return { x, y, rot }; } function updateImpact(el, x, y, visible) { el.style.left = `${x}%`; el.style.top = `${y}%`; el.style.opacity = visible ? "1" : "0"; el.style.transform = visible ? "translate(-50%, -50%) scale(0.62)" : "translate(-50%, -50%) scale(0.08)"; } function animate(now) { const t = ((now * 0.001) % 3.2) / 3.2; const b = getBallState(t); const scale = b.y < 45 ? 1.12 : 0.92; ball.style.left = `${b.x}%`; ball.style.top = `${b.y}%`; ball.style.transform = `translate(-50%, -50%) scale(${scale}) rotate(${b.rot}deg)`; shadow.style.left = `${b.x}%`; shadow.style.top = `${Math.min(79, b.y + 18)}%`; shadow.style.transform = `translate(-50%, -50%) scale(${b.y < 45 ? 0.95 : 0.72})`; const goingRight = t < 0.5; trail.style.left = `${goingRight ? b.x - 10 : b.x - 2}%`; trail.style.top = `${b.y + 1.4}%`; trail.style.transform = `translate(-50%, -50%) rotate(${goingRight ? -22 : 22}deg)`; const leftHit = t > 0.965 || t < 0.03; const rightHit = t > 0.465 && t < 0.53; updateImpact(impactLeft, 15.2, 64.2, leftHit); updateImpact(impactRight, 73.2, 39.2, rightHit); if (leftHit) { racketLeft.style.left = "11.8%"; racketLeft.style.top = "46.5%"; racketLeft.style.transform = "rotate(38deg) scale(1.04) scaleX(-1)"; } else { racketLeft.style.left = "8.8%"; racketLeft.style.top = "53.5%"; racketLeft.style.transform = "rotate(-18deg) scale(0.84) scaleX(-1)"; } if (rightHit) { racketRight.style.left = "69.4%"; racketRight.style.top = "28.5%"; racketRight.style.transform = "rotate(-42deg) scale(1.03)"; } else { racketRight.style.left = "75.8%"; racketRight.style.top = "36.5%"; racketRight.style.transform = "rotate(15deg) scale(0.8)"; } requestAnimationFrame(animate); } presetSelect.addEventListener("change", () => { loadPreset(presetSelect.value); }); surfaceButtons.forEach((btn) => { btn.addEventListener("click", () => { setSurface(btn.dataset.surface); }); }); setSurface("clay"); loadPreset("sinner"); requestAnimationFrame(animate);