/* ITA: Inserire qui l'integrazione con una API live tennis quando disponibile. La funzione base qui sotto mostra dove normalizzare i dati in un formato stabile per l'interfaccia: playerA, playerB, setScore, setDetail, gameScore, tournament, status, round, date e source. ENG: Add the live tennis API integration here when a provider is available. The basic function below shows where to normalize incoming data into a stable UI format: playerA, playerB, setScore, setDetail, gameScore, tournament, status, round, date and source. */ /* async function loadLiveMatchFromApi() { // Example shape only: // const response = await fetch("/your-live-endpoint"); // const payload = await response.json(); // return { // id: "live-match-id", // playerA: "J. Sinner", // playerB: "C. Alcaraz", // setScore: "1 - 1", // setDetail: "6-4 | 3-6 | 2-1", // gameScore: "30-15", // tournament: "ATP Masters 1000 Monte Carlo", // status: "In corso", // round: "Final", // date: "2026-04-22", // source: "api" // }; } */ const SCOREBOARD_SWAP_MS = 120; const DEMO_MATCH_ID = "demo-sinner-alcaraz-live"; const DEMO_SEQUENCE = [ { setScore: "1 - 0", setDetail: "6-4 | 2-2", gameScore: "15-15", status: "In corso da 32 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 9000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-2", gameScore: "15-30", status: "In corso da 32 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 6500 }, { setScore: "1 - 0", setDetail: "6-4 | 2-2", gameScore: "30-30", status: "In corso da 33 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 14000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-2", gameScore: "30-40", status: "In corso da 33 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 12000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-3", gameScore: "Game Alcaraz", status: "In corso da 34 min", pointLabel: "2o set", server: "Sinner", delayMs: 8000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-3", gameScore: "0-15", status: "In corso da 34 min", pointLabel: "2o set", server: "Sinner", delayMs: 5000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-3", gameScore: "15-15", status: "In corso da 35 min", pointLabel: "2o set", server: "Sinner", delayMs: 11000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-3", gameScore: "30-15", status: "In corso da 35 min", pointLabel: "2o set", server: "Sinner", delayMs: 7000 }, { setScore: "1 - 0", setDetail: "6-4 | 2-3", gameScore: "40-15", status: "In corso da 36 min", pointLabel: "2o set", server: "Sinner", delayMs: 6000 }, { setScore: "1 - 0", setDetail: "6-4 | 3-3", gameScore: "Game Sinner", status: "In corso da 36 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 9000 }, { setScore: "1 - 0", setDetail: "6-4 | 3-3", gameScore: "15-0", status: "In corso da 37 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 4500 }, { setScore: "1 - 0", setDetail: "6-4 | 3-3", gameScore: "15-15", status: "In corso da 37 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 8000 }, { setScore: "1 - 0", setDetail: "6-4 | 3-3", gameScore: "30-15", status: "In corso da 38 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 6200 }, { setScore: "1 - 0", setDetail: "6-4 | 3-4", gameScore: "Game Alcaraz", status: "In corso da 38 min", pointLabel: "2o set", server: "Sinner", delayMs: 9000 }, { setScore: "1 - 0", setDetail: "6-4 | 3-4", gameScore: "15-0", status: "In corso da 39 min", pointLabel: "2o set", server: "Sinner", delayMs: 5200 }, { setScore: "1 - 0", setDetail: "6-4 | 3-4", gameScore: "15-15", status: "In corso da 39 min", pointLabel: "2o set", server: "Sinner", delayMs: 9800 }, { setScore: "1 - 0", setDetail: "6-4 | 3-4", gameScore: "30-15", status: "In corso da 40 min", pointLabel: "2o set", server: "Sinner", delayMs: 6100 }, { setScore: "1 - 0", setDetail: "6-4 | 3-4", gameScore: "40-15", status: "In corso da 40 min", pointLabel: "2o set", server: "Sinner", delayMs: 5600 }, { setScore: "1 - 0", setDetail: "6-4 | 4-4", gameScore: "Game Sinner", status: "In corso da 41 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 8600 }, { setScore: "1 - 0", setDetail: "6-4 | 4-4", gameScore: "0-15", status: "In corso da 41 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 4700 }, { setScore: "1 - 0", setDetail: "6-4 | 4-4", gameScore: "15-15", status: "In corso da 42 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 8900 }, { setScore: "1 - 0", setDetail: "6-4 | 4-4", gameScore: "30-15", status: "In corso da 42 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 5300 }, { setScore: "1 - 0", setDetail: "6-4 | 4-4", gameScore: "40-15", status: "In corso da 43 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 4800 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "Game Alcaraz", status: "In corso da 43 min", pointLabel: "2o set", server: "Sinner", delayMs: 9200 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "15-0", status: "In corso da 44 min", pointLabel: "2o set", server: "Sinner", delayMs: 4600 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "15-15", status: "In corso da 44 min", pointLabel: "2o set", server: "Sinner", delayMs: 7200 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "30-15", status: "In corso da 45 min", pointLabel: "2o set", server: "Sinner", delayMs: 5300 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "30-30", status: "In corso da 45 min", pointLabel: "Momento chiave", server: "Sinner", delayMs: 12200 }, { setScore: "1 - 0", setDetail: "6-4 | 4-5", gameScore: "40-30", status: "In corso da 46 min", pointLabel: "Palla game", server: "Sinner", delayMs: 7000 }, { setScore: "1 - 0", setDetail: "6-4 | 5-5", gameScore: "Game Sinner", status: "In corso da 46 min", pointLabel: "2o set", server: "Alcaraz", delayMs: 9000 } ]; const state = { matches: [], selectedId: DEMO_MATCH_ID, sourceMode: "demo", animationEnabled: !window.matchMedia("(prefers-reduced-motion: reduce)").matches, simulationIndex: 0, simulationTimerId: null }; const presetSelect = document.getElementById("presetSelect"); const matchesList = document.getElementById("matchesList"); const scoreboard = document.getElementById("scoreboard"); const scene = document.getElementById("scene"); const dataBadge = document.getElementById("dataBadge"); const liveSearchInput = document.getElementById("liveSearchInput"); const liveSearchButton = document.getElementById("liveSearchButton"); const teamAName = document.getElementById("teamAName"); const teamBName = document.getElementById("teamBName"); const setScore = document.getElementById("setScore"); const setDetail = document.getElementById("setDetail"); const gameScore = document.getElementById("gameScore"); const tournamentMeta = document.getElementById("tournamentMeta"); const statusMeta = document.getElementById("statusMeta"); const ball = document.getElementById("ball"); const trail = document.getElementById("trail"); const shadow = document.getElementById("shadow"); const impactLeft = document.getElementById("impactLeft"); const impactRight = document.getElementById("impactRight"); const racketLeft = document.getElementById("racketLeft"); const racketRight = document.getElementById("racketRight"); const surfaceButtons = [...document.querySelectorAll(".surface-btn")]; function escapeHtml(value = "") { return String(value) .replaceAll("&", "&") .replaceAll("<", "<") .replaceAll(">", ">") .replaceAll('"', """) .replaceAll("'", "'"); } function formatDate(dateValue) { if (!dateValue) return ""; const date = new Date(dateValue); if (Number.isNaN(date.getTime())) return dateValue; return new Intl.DateTimeFormat("it-IT", { day: "2-digit", month: "short", year: "numeric" }).format(date); } function buildDemoMatch(frame) { return { id: DEMO_MATCH_ID, playerA: "J. Sinner", playerB: "C. Alcaraz", setScore: frame.setScore, setDetail: frame.setDetail, gameScore: frame.gameScore, tournament: "ATP Masters 1000 Monte Carlo", status: frame.status, round: "Final", pointLabel: frame.pointLabel, server: frame.server, date: "2026-04-22", source: "demo" }; } function currentDemoMatch() { return buildDemoMatch(DEMO_SEQUENCE[state.simulationIndex]); } function clearBoard() { teamAName.textContent = "-"; teamBName.textContent = "-"; setScore.textContent = "-"; setDetail.textContent = "-"; gameScore.textContent = "-"; tournamentMeta.textContent = "-"; statusMeta.textContent = "-"; } function setSourceState(mode) { state.sourceMode = mode; dataBadge.textContent = mode === "demo" ? "Live Demo" : "Live"; } function renderLoading() { matchesList.innerHTML = `

Caricamento match...

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

Nessun match disponibile.

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

${escapeHtml(match.playerA)}

${escapeHtml(match.playerB)}

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

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

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

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

${escapeHtml(match.setDetail || "-")}

Demo

${escapeHtml(metaInfo || "-")}

`; }) .join(""); matchesList.querySelectorAll(".match-card").forEach((card) => { card.addEventListener("click", () => { state.selectedId = card.dataset.id; renderMatches(); renderBoard(state.matches.find((match) => match.id === state.selectedId)); }); }); renderBoard(state.matches.find((match) => match.id === state.selectedId)); } function loadDemoMatch() { renderLoading(); state.matches = [currentDemoMatch()]; state.selectedId = DEMO_MATCH_ID; setSourceState("demo"); renderMatches(); } function advanceDemo() { state.simulationIndex = (state.simulationIndex + 1) % DEMO_SEQUENCE.length; state.matches = [currentDemoMatch()]; renderMatches(); scheduleNextDemoStep(); } function scheduleNextDemoStep() { if (state.simulationTimerId) { window.clearTimeout(state.simulationTimerId); } const frame = DEMO_SEQUENCE[state.simulationIndex]; const delayMs = Math.max(2800, Number(frame?.delayMs) || 6000); state.simulationTimerId = window.setTimeout(() => { advanceDemo(); }, delayMs); } function runLiveSearch() { const query = String(liveSearchInput?.value || "").trim().toLowerCase(); if (!query) { loadDemoMatch(); return; } const searchableText = "sinner alcaraz monte carlo final live demo"; if (searchableText.includes(query)) { loadDemoMatch(); return; } state.matches = []; state.selectedId = null; renderMatches(); } function setSurface(surface) { scene.dataset.surface = surface; surfaceButtons.forEach((button) => { button.classList.toggle("is-active", button.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 progress; let x; let y; let rot; if (t < 0.5) { progress = easeInOut(t / 0.5); x = lerp(16, 73, progress); y = lerp(67, 37, progress) - Math.sin(progress * Math.PI) * 12; rot = lerp(0, 220, progress); } else { progress = easeInOut((t - 0.5) / 0.5); x = lerp(73, 16, progress); y = lerp(37, 67, progress) - Math.sin(progress * Math.PI) * 12; rot = lerp(220, 430, progress); } return { x, y, rot }; } function updateImpact(element, x, y, visible) { element.style.left = `${x}%`; element.style.top = `${y}%`; element.style.opacity = visible ? "1" : "0"; element.style.transform = visible ? "translate(-50%, -50%) scale(0.58)" : "translate(-50%, -50%) scale(0.08)"; } function animateFrame(now) { if (!state.animationEnabled) return; const loopDurationMs = 3200; const t = (now % loopDurationMs) / loopDurationMs; const ballState = getBallState(t); const isNearNet = ballState.y < 45; const scale = isNearNet ? 1.1 : 0.93; const goingRight = t < 0.5; const leftHit = t > 0.965 || t < 0.03; const rightHit = t > 0.465 && t < 0.53; ball.style.left = `${ballState.x}%`; ball.style.top = `${ballState.y}%`; ball.style.transform = `translate(-50%, -50%) scale(${scale}) rotate(${ballState.rot}deg)`; shadow.style.left = `${ballState.x}%`; shadow.style.top = `${Math.min(79, ballState.y + 18)}%`; shadow.style.transform = `translate(-50%, -50%) scale(${isNearNet ? 0.9 : 0.72})`; shadow.style.opacity = isNearNet ? "0.82" : "0.58"; trail.style.left = `${goingRight ? ballState.x - 8 : ballState.x - 3}%`; trail.style.top = `${ballState.y + 1.2}%`; trail.style.transform = `translate(-50%, -50%) rotate(${goingRight ? -20 : 20}deg)`; trail.style.opacity = isNearNet ? "0.84" : "0.64"; updateImpact(impactLeft, 15.2, 64.2, leftHit); updateImpact(impactRight, 73.2, 39.2, rightHit); if (racketLeft) { racketLeft.style.left = leftHit ? "11.4%" : "8.8%"; racketLeft.style.top = leftHit ? "47.2%" : "53.5%"; racketLeft.style.transform = leftHit ? "rotate(34deg) scale(1.01) scaleX(-1)" : "rotate(-18deg) scale(0.84) scaleX(-1)"; } if (racketRight) { racketRight.style.left = rightHit ? "70.1%" : "75.8%"; racketRight.style.top = rightHit ? "29.2%" : "36.5%"; racketRight.style.transform = rightHit ? "rotate(-38deg) scale(0.99)" : "rotate(15deg) scale(0.8)"; } window.requestAnimationFrame(animateFrame); } presetSelect.innerHTML = ``; presetSelect.addEventListener("change", () => { loadDemoMatch(); }); surfaceButtons.forEach((button) => { button.addEventListener("click", () => { setSurface(button.dataset.surface); }); }); liveSearchButton?.addEventListener("click", () => { runLiveSearch(); }); liveSearchInput?.addEventListener("keydown", (event) => { if (event.key === "Enter") { event.preventDefault(); runLiveSearch(); } }); setSurface("clay"); loadDemoMatch(); scheduleNextDemoStep(); if (state.animationEnabled) { window.requestAnimationFrame(animateFrame); }