Lineup

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; color: #fff; background: #fff; } #lineup-app { max-width: 1000px; margin: -55px auto 20px auto; padding: 0 12px; display: flex; gap: 16px; align-items: flex-start; } #canvas-col { flex: 0 0 70%; max-width: 70%; } #pitchCanvas { display: block; width: 100%; cursor: pointer; border-radius: 4px; } #sidebar { display: none; flex: 0 0 calc(35% - 16px); min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 60px; } @media (max-width: 600px) { #lineup-app { flex-direction: column; } #canvas-col { flex: none; max-width: 100%; width: 100%; } #sidebar { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 8px; } #sidebar > div { flex: 1 1 100%; min-width: 0; } #btnDownload { flex: 1 1 100%; margin-top: 0; } } #sidebar label { font-size: 14px; color: #555; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px; display: block; } #sidebar input, #sidebar select { width: 100%; padding: 7px 10px; font-size: 13px; background: #fff; color: #111; border: 1px solid #ddd; border-radius: 6px; outline: none; box-sizing: border-box; } #sidebar input:focus, #sidebar select:focus { border-color: #999; } #sidebar select { cursor: pointer; appearance: none; -webkit-appearance: none; } #btnDownload { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; background: #e92e1b; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; } #btnDownload:hover { background: #c42515; } #btnDownload:disabled { background: #666; cursor: default; } #btnShare { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; background: #1a73e8; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; } #btnShare:hover { background: #1558b0; } #btnShare.hidden { display: none; } #btnReset { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; background: transparent; color: #999; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; } #btnReset:hover { color: #e92e1b; border-color: #e92e1b; } /* ── MODAL ── */ #modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 100; align-items: center; justify-content: center; } #modal-overlay.open { display: flex; } #modal { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; width: 380px; max-width: 92vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } #modal-scroll { padding: 20px 20px 0; overflow-y: auto; flex: 1; } #modal-footer { padding: 12px 20px 16px; background: #1e1e1e; border-top: 1px solid #2a2a2a; flex-shrink: 0; } #modal h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; margin-bottom: 14px; } #modal-players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .modal-player { background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 8px; padding: 8px 4px; text-align: center; cursor: pointer; font-size: 11px; transition: border-color 0.15s, background 0.15s; } .modal-player:hover { background: #333; border-color: #e92e1b; } .modal-player img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 5px; } .modal-player p { color: #eee; line-height: 1.3; margin-bottom: 0; } /* ── PLAYER DETAILS SECTION ── */ #player-details { display: none; background: #252525; border: 1px solid #3a3a3a; border-radius: 8px; padding: 14px; margin-bottom: 14px; } #player-details.active { display: block; } #player-details h4 { font-size: 12px; font-weight: 600; color: #e92e1b; margin-bottom: 10px; text-transform: uppercase; } .detail-section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #3a3a3a; } .detail-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .detail-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .detail-row label { flex: 0 0 50px; font-size: 11px; color: #999; text-transform: uppercase; } .detail-row input { flex: 1; padding: 6px 8px; font-size: 12px; background: #1e1e1e; color: #fff; border: 1px solid #3a3a3a; border-radius: 4px; outline: none; } .detail-row input:focus { border-color: #e92e1b; box-shadow: 0 0 0 2px rgba(233, 46, 27, 0.1); } .detail-row button { padding: 6px 12px; background: #e92e1b; color: #fff; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: 600; } .detail-row button:hover { background: #c42515; } .events-list { background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px; padding: 8px; margin-top: 8px; font-size: 11px; max-height: 120px; overflow-y: auto; } .event-item { display: flex; justify-content: space-between; align-items: center; padding: 6px; background: #2a2a2a; border-radius: 3px; margin-bottom: 4px; color: #ccc; } .event-item:last-child { margin-bottom: 0; } .event-item button { background: transparent; border: none; color: #e92e1b; cursor: pointer; font-size: 12px; padding: 0 4px; } .event-item button:hover { color: #ff6347; } .event-item.yellow { border-left: 3px solid #ffff00; } .event-item.red { border-left: 3px solid #ff3333; } .event-item.goal { border-left: 3px solid #ffd700; } .event-item.sub { border-left: 3px solid #1a73e8; } .sub-header { font-size: 10px; color: #1a73e8; font-weight: bold; margin-top: 8px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #3a3a3a; } .modal-empty { color: #666; font-size: 12px; text-align: center; padding: 16px 0; grid-column: 1 / -1; } /* Loader */ #pitch-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.85); z-index: 10; border-radius: 4px; } #pitch-loader.hidden { display: none; } .loader-spinner { width: 40px; height: 40px; border: 4px solid #eee; border-top-color: #e92e1b; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (min-width: 992px) { .row:has(.sidebar-col-hidden) .content-col, .row .content-col.col-lg-8, .col-lg-8.content-col { flex: 0 0 calc(100% - 240px) !important; max-width: calc(100% - 240px) !important; width: calc(100% - 240px) !important; } } .sidebar-col { display: none !important; } Título Formación 4-4-24-3-34-5-15-3-23-5-2 ⬇ Descargar imagen↗ Compartir imagen✕ Resetear alineación Elige un jugador Suplente Nombre: Añadir Quitar jugadorAceptarCancelar const players = [ { id: 1, name: "Oblak", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/oblak.png" }, { id: 2, name: "Musso", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/musso.png" }, { id: 3, name: "Giménez", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/gimenez.png" }, { id: 4, name: "Ruggeri", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/ruggeri.png" }, { id: 5, name: "Hancko", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/hancko.png" }, { id: 6, name: "Pubill", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/pubill.png" }, { id: 7, name: "Le Normand", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/le_normand.png" }, { id: 8, name: "Molina", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/molina.png" }, { id: 9, name: "Lenglet", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/lenglet.png" }, { id: 10, name: "Cardoso", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/johnny.png" }, { id: 11, name: "Koke", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/koke.png" }, { id: 12, name: "Barrios", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/barrios.png" }, { id: 13, name: "Baena", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/baena.png" }, { id: 14, name: "Llorente", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/llorente.png" }, { id: 15, name: "Giuliano", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/giuliano.png" }, { id: 16, name: "Vargas", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/vargas.png" }, { id: 17, name: "Nico", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/nico.png" }, { id: 18, name: "Griezmann", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/griezmann.png" }, { id: 19, name: "Sorloth", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/sorloth.png" }, { id: 20, name: "Almada", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/almada.png" }, { id: 21, name: "J. Alvarez", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/julian_alvarez.png" }, { id: 22, name: "Lookman", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/lookman.png" }, { id: 23, name: "Mendoza", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/mendoza.png" }, { id: 24, name: "Boñar", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/bonar.png" }, { id: 25, name: "J. Díaz", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/julio-diaz.png" }, { id: 26, name: "Taufik", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/taufik.png" }, { id: 27, name: "Morcillo", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/morcillo.png" }, { id: 28, name: "Rayane", img: "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/rayane.png" }, ]; const formations = { "4-4-2": [ { id: "POR", x: 50, y: 85 }, { id: "LI", x: 20, y: 63 }, { id: "CI", x: 40, y: 67 }, { id: "CD", x: 60, y: 67 }, { id: "LD", x: 80, y: 63 }, { id: "MI", x: 23, y: 40 }, { id: "MC1", x: 41, y: 45 }, { id: "MC2", x: 60, y: 45 }, { id: "MD", x: 78, y: 40 }, { id: "DEL1", x: 40, y: 21 }, { id: "DEL2", x: 60, y: 21 } ], "4-3-3": [ { id: "POR", x: 50, y: 85 }, { id: "LI", x: 20, y: 63 }, { id: "CI", x: 40, y: 67 }, { id: "CD", x: 60, y: 67 }, { id: "LD", x: 80, y: 63 }, { id: "MC1", x: 28, y: 44 }, { id: "MC", x: 50, y: 42 }, { id: "MC2", x: 72, y: 44 }, { id: "EXI", x: 27, y: 22 }, { id: "DEL", x: 50, y: 20 }, { id: "EXD", x: 73, y: 22 } ], "4-5-1": [ { id: "POR", x: 50, y: 85 }, { id: "LI", x: 22, y: 64 }, { id: "CI", x: 40, y: 67 }, { id: "CD", x: 60, y: 67 }, { id: "LD", x: 78, y: 64 }, { id: "MI", x: 25, y: 34 }, { id: "MC1", x: 34, y: 49 }, { id: "MC", x: 50, y: 40 }, { id: "MC2", x: 66, y: 49 }, { id: "MD", x: 75, y: 34 }, { id: "DEL", x: 50, y: 20 } ], "5-3-2": [ { id: "POR", x: 50, y: 85 }, { id: "LI", x: 19, y: 58 }, { id: "CI", x: 33, y: 68 }, { id: "LIB", x: 50, y: 68 }, { id: "CD", x: 67, y: 68 }, { id: "LD", x: 81, y: 58 }, { id: "MC1", x: 30, y: 41 }, { id: "MC", x: 50, y: 49 }, { id: "MC2", x: 70, y: 41 }, { id: "DEL1", x: 40, y: 20 }, { id: "DEL2", x: 60, y: 20 } ], "3-5-2": [ { id: "POR", x: 50, y: 85 }, { id: "CI", x: 30, y: 68 }, { id: "LIB", x: 50, y: 68 }, { id: "CD", x: 70, y: 68 }, { id: "LI", x: 22, y: 52 }, { id: "MC1", x: 35, y: 41 }, { id: "MC", x: 50, y: 50 }, { id: "MC2", x: 65, y: 41 }, { id: "LD", x: 78, y: 52 }, { id: "DEL1", x: 40, y: 20 }, { id: "DEL2", x: 60, y: 20 } ] }; let currentFormation = "4-4-2"; let lineup = {}; // playerStats: { playerId: { substitutes: [{name}] } } let playerStats = {}; let activePositionId = null; const imgCache = {}; const objectURLCache = {}; let customPlayers = []; const DEFAULT_IMG = "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/default.png"; function getCustomId() { return "custom_" + Date.now() + "_" + Math.random().toString(36).slice(2, 6); } const LS_KEY = "atleti_lineup_v2"; function saveState() { try { localStorage.setItem(LS_KEY, JSON.stringify({ formation: currentFormation, lineup, customPlayers, playerStats })); } catch(e) {} } function loadState() { try { const saved = localStorage.getItem(LS_KEY); if (!saved) return; const { formation, lineup: savedLineup, customPlayers: savedCustom, playerStats: savedStats } = JSON.parse(saved); if (formations[formation]) currentFormation = formation; lineup = savedLineup || {}; customPlayers = savedCustom || []; playerStats = savedStats || {}; document.getElementById("formationSelect").value = currentFormation; } catch(e) {} } function allPlayers() { return [...players, ...customPlayers]; } function loadImage(url) { return new Promise(resolve => { if (imgCache[url]) { resolve(imgCache[url]); return; } fetch(url, { mode: "cors" }) .then(r => r.blob()) .then(blob => { objectURLCache[url] = URL.createObjectURL(blob); return createImageBitmap(blob); }) .then(bitmap => { imgCache[url] = bitmap; resolve(bitmap); }) .catch(() => resolve(null)); }); } function preloadPlayers() { return Promise.all(players.map(p => loadImage(p.img))); } let logoImg = null; (function() { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = () => { logoImg = img; draw(); }; img.onerror = () => { logoImg = null; }; img.src = "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/logo-esto-es-atleti.webp"; })(); let pitchBg = null; (function() { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = () => { pitchBg = img; draw(); }; img.onerror = () => { pitchBg = null; }; img.src = "https://atleti-lineup-assets.s3.eu-west-1.amazonaws.com/pitch-background.webp"; })(); const canvas = document.getElementById("pitchCanvas"); const ctx = canvas.getContext("2d"); const DPR = window.devicePixelRatio || 1; const CANVAS_W = 460; const TITLE_H = 52; const PITCH_H = Math.round(CANVAS_W * (5 / 4)); const CANVAS_H = PITCH_H + TITLE_H; const PLAYER_R = 40; canvas.width = CANVAS_W * DPR; canvas.height = CANVAS_H * DPR; canvas.style.width = "100%"; canvas.style.height = "auto"; ctx.scale(DPR, DPR); function px(xPct) { return (xPct / 100) * CANVAS_W; } function py(yPct) { return TITLE_H + (yPct / 100) * PITCH_H; } function getInitials(name) { return name.split(" ").map(w => w[0]).join("").substring(0, 2).toUpperCase(); } const PLAYER_COLORS = [ "#c0392b","#e74c3c","#e67e22","#f39c12","#27ae60", "#16a085","#2980b9","#8e44ad","#2c3e50","#7f8c8d" ]; function getPlayerDisplayName(player) { return player.name; } function getSubstituteDisplayName(sub) { return sub.name; } function drawFooter(c) { const BOTTOM_MARGIN = 40; const pill = "ESTOESATLETI.ES"; c.font = "bold 12px Arial"; const pillPad = 12; const pillW = c.measureText(pill).width + pillPad * 2; const pillH = 24; const pillX = 18; const pillY = TITLE_H + PITCH_H - BOTTOM_MARGIN - pillH; const r = pillH / 2; c.beginPath(); c.moveTo(pillX + r, pillY); c.lineTo(pillX + pillW - r, pillY); c.arcTo(pillX + pillW, pillY, pillX + pillW, pillY + r, r); c.lineTo(pillX + pillW, pillY + pillH - r); c.arcTo(pillX + pillW, pillY + pillH, pillX + pillW - r, pillY + pillH, r); c.lineTo(pillX + r, pillY + pillH); c.arcTo(pillX, pillY + pillH, pillX, pillY + pillH - r, r); c.lineTo(pillX, pillY + r); c.arcTo(pillX, pillY, pillX + r, pillY, r); c.closePath(); c.fillStyle = "rgba(233,46,27,0.92)"; c.fill(); c.fillStyle = "#fff"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(pill, pillX + pillW / 2, pillY + pillH / 2); c.textBaseline = "alphabetic"; if (logoImg) { const imgH = 90; const imgW = imgH * (logoImg.width / logoImg.height); const imgX = CANVAS_W - imgW - 32; const imgY = TITLE_H + PITCH_H - (BOTTOM_MARGIN - 10) - imgH; c.drawImage(logoImg, imgX, imgY, imgW, imgH); } } function drawPitch(c) { if (pitchBg) { c.drawImage(pitchBg, 0, TITLE_H, CANVAS_W, PITCH_H); } else { c.fillStyle = "#1f8f3a"; c.fillRect(0, TITLE_H, CANVAS_W, PITCH_H); const stripeW = 40; for (let x = 0; x < CANVAS_W; x += stripeW * 2) { c.fillStyle = "#167a2f"; c.fillRect(x + stripeW, TITLE_H, stripeW, PITCH_H); } c.strokeStyle = "rgba(255,255,255,0.9)"; c.lineWidth = 2; c.strokeRect(1, TITLE_H + 1, CANVAS_W - 2, PITCH_H - 2); c.beginPath(); c.moveTo(0, TITLE_H + PITCH_H / 2); c.lineTo(CANVAS_W, TITLE_H + PITCH_H / 2); c.strokeStyle = "rgba(255,255,255,0.8)"; c.lineWidth = 2; c.stroke(); c.beginPath(); c.arc(CANVAS_W / 2, TITLE_H + PITCH_H / 2, CANVAS_W * 0.15, 0, Math.PI * 2); c.strokeStyle = "rgba(255,255,255,0.7)"; c.lineWidth = 2; c.stroke(); const aLW = CANVAS_W * 0.40, aLH = PITCH_H * 0.15; const aSW = CANVAS_W * 0.25, aSH = PITCH_H * 0.08; c.strokeStyle = "rgba(255,255,255,0.7)"; c.strokeRect((CANVAS_W - aLW) / 2, TITLE_H, aLW, aLH); c.strokeRect((CANVAS_W - aSW) / 2, TITLE_H, aSW, aSH); c.strokeRect((CANVAS_W - aLW) / 2, TITLE_H + PITCH_H - aLH, aLW, aLH); c.strokeRect((CANVAS_W - aSW) / 2, TITLE_H + PITCH_H - aSH, aSW, aSH); } } function drawTitle(c) { const title = document.getElementById("titleInput").value || "Este es mi once del Atleti"; const pillW = CANVAS_W - 40, pillH = TITLE_H; const pillX = 20, pillY = 28, r = pillH / 2; c.beginPath(); c.moveTo(pillX + r, pillY); c.lineTo(pillX + pillW - r, pillY); c.arcTo(pillX + pillW, pillY, pillX + pillW, pillY + r, r); c.lineTo(pillX + pillW, pillY + pillH - r); c.arcTo(pillX + pillW, pillY + pillH, pillX + pillW - r, pillY + pillH, r); c.lineTo(pillX + r, pillY + pillH); c.arcTo(pillX, pillY + pillH, pillX, pillY + pillH - r, r); c.lineTo(pillX, pillY + r); c.arcTo(pillX, pillY, pillX + r, pillY, r); c.closePath(); c.fillStyle = "rgba(233,46,27,1)"; c.fill(); c.strokeStyle = "rgba(0,0,0,1)"; c.lineWidth = 2; c.stroke(); c.fillStyle = "#fff"; c.textAlign = "center"; c.font = "bold 16px Arial"; c.fillText(title.toUpperCase(), CANVAS_W / 2, pillY + 25); c.font = "15px Arial"; c.globalAlpha = 1; c.fillText(currentFormation, CANVAS_W / 2, pillY + 41); c.globalAlpha = 1; } function drawPlayerCircle(c, x, y, player, playerId, highlight) { const colorIdx = typeof player.id === "number" ? (player.id - 1) : parseInt(player.id.replace(/D/g, "").slice(-4) || "0"); const color = PLAYER_COLORS[colorIdx % PLAYER_COLORS.length]; const img = imgCache[player.img]; if (!img) loadImage(player.img).then(() => draw()); c.save(); c.beginPath(); c.arc(x, y, PLAYER_R, 0, Math.PI * 2); c.clip(); if (img) { c.drawImage(img, x - PLAYER_R, y - PLAYER_R, PLAYER_R * 2, PLAYER_R * 2); } else { c.fillStyle = color; c.fill(); c.fillStyle = "#fff"; c.font = `bold ${Math.round(PLAYER_R * 0.72)}px Arial`; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(getInitials(player.name), x, y); c.textBaseline = "alphabetic"; } c.restore(); c.beginPath(); c.arc(x, y, PLAYER_R, 0, Math.PI * 2); c.strokeStyle = highlight ? "#fff" : "rgba(255,255,255,0)"; c.lineWidth = highlight ? 3 : 2; c.stroke(); c.save(); c.textAlign = "center"; c.shadowColor = "rgba(0,0,0,0.9)"; c.shadowBlur = 5; c.fillStyle = "#fff"; ensurePlayerStatsExist(playerId); const stats = playerStats[playerId]; const displayName = getPlayerDisplayName(player); c.font = "bold 9px Arial"; c.fillText(displayName, x, y + PLAYER_R + 10); if (stats.substitutes.length > 0) { const sub = stats.substitutes[0]; const subDisplay = getSubstituteDisplayName(sub); c.font = "8px Arial"; c.fillStyle = "#fff"; c.fillText(subDisplay, x, y + PLAYER_R + 20); } c.shadowBlur = 0; c.restore(); } function drawEmptyPosition(c, x, y, label, highlight) { c.beginPath(); c.arc(x, y, PLAYER_R, 0, Math.PI * 2); c.fillStyle = highlight ? "rgba(233,46,27,0.25)" : "rgba(80,80,80,0.6)"; c.fill(); c.setLineDash([4, 3]); c.strokeStyle = highlight ? "#e92e1b" : "rgba(255,255,255,0.5)"; c.lineWidth = 2; c.stroke(); c.setLineDash([]); c.fillStyle = "rgba(255,255,255,0.7)"; c.font = `bold ${Math.round(PLAYER_R * 1.1)}px Arial`; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText("+", x, y); c.textBaseline = "alphabetic"; } function drawAll(c) { c.clearRect(0, 0, CANVAS_W, CANVAS_H); c.fillStyle = "#ffffff"; c.fillRect(0, 0, CANVAS_W, CANVAS_H); drawPitch(c); drawTitle(c); drawFooter(c); formations[currentFormation].forEach(pos => { const x = px(pos.x); const y = py(pos.y); const playerId = lineup[pos.id]; const highlight = pos.id === activePositionId; if (playerId) { const player = allPlayers().find(p => p.id === playerId); drawPlayerCircle(c, x, y, player, playerId, highlight); } else { drawEmptyPosition(c, x, y, pos.id, highlight); } }); } function draw() { drawAll(ctx); } function getPosAt(cx, cy) { return formations[currentFormation].find(pos => { const dx = cx - px(pos.x); const dy = cy - py(pos.y); return Math.sqrt(dx * dx + dy * dy) 0) { stats.substitutes.forEach((sub, idx) => { const el = document.createElement("div"); el.className = "event-item sub"; el.innerHTML = `${sub.name}✕`; subsList.appendChild(el); }); } else { subsList.innerHTML = 'Sin suplentes'; } } function openModal(posId) { activePositionId = posId; draw(); const used = Object.values(lineup).filter(Boolean); const available = allPlayers().filter(p => !used.includes(p.id) || lineup[posId] === p.id); const posLabel = formations[currentFormation].find(p => p.id === posId)?.id || posId; document.getElementById("modal-title").textContent = `Posición: ${posLabel}`; const container = document.getElementById("modal-players"); container.innerHTML = ""; if (available.length === 0) { container.innerHTML = 'No hay jugadores disponibles'; } else { available.forEach(player => { const el = document.createElement("div"); el.className = "modal-player"; el.style.position = "relative"; if (lineup[posId] === player.id) el.style.borderColor = "#e92e1b"; const modalSrc = objectURLCache[player.img] || player.img; el.innerHTML = `${player.name}`; if (player.custom) { const del = document.createElement("button"); del.textContent = "✕"; del.style.cssText = "position:absolute;top:3px;right:3px;background:#e92e1b;border:none;color:#fff;border-radius:50%;width:16px;height:16px;font-size:9px;cursor:pointer;padding:0;line-height:16px;"; del.onclick = e => { e.stopPropagation(); deleteCustomPlayer(player.id, posId); }; el.appendChild(del); } el.onclick = () => selectPlayer(posId, player.id); container.appendChild(el); }); } const addEl = document.createElement("div"); addEl.className = "modal-player"; addEl.style.borderStyle = "dashed"; addEl.innerHTML = `+ Añadir`; addEl.onclick = () => addCustomPlayer(posId); container.appendChild(addEl); // Mostrar detalles si ya hay jugador seleccionado const currentPlayerId = lineup[posId]; const detailsDiv = document.getElementById("player-details"); if (currentPlayerId) { detailsDiv.classList.add("active"); renderPlayerDetails(currentPlayerId); } else { detailsDiv.classList.remove("active"); } document.getElementById("modal-remove").style.display = lineup[posId] ? "block" : "none"; document.getElementById("modal-overlay").classList.add("open"); } function addCustomPlayer(posId) { const name = prompt("Nombre del jugador:"); if (!name || !name.trim()) return; const custom = { id: getCustomId(), name: name.trim().substring(0, 20), img: DEFAULT_IMG, custom: true }; customPlayers.push(custom); loadImage(DEFAULT_IMG).then(() => { selectPlayer(posId, custom.id); openModal(posId); }); } function deleteCustomPlayer(playerId, posId) { customPlayers = customPlayers.filter(p => p.id !== playerId); Object.keys(lineup).forEach(p => { if (lineup[p] === playerId) lineup[p] = null; }); delete playerStats[playerId]; saveState(); draw(); openModal(posId); } function closeModal() { document.getElementById("modal-overlay").classList.remove("open"); activePositionId = null; draw(); } function selectPlayer(posId, playerId) { Object.keys(lineup).forEach(p => { if (lineup[p] === playerId) lineup[p] = null; }); lineup[posId] = playerId; ensurePlayerStatsExist(playerId); saveState(); // Actualizar detalles del jugador en la modal const detailsDiv = document.getElementById("player-details"); detailsDiv.classList.add("active"); renderPlayerDetails(playerId); setTimeout(() => detailsDiv.scrollIntoView({ behavior: "smooth", block: "nearest" }), 50); document.getElementById("modal-scroll").scrollTo({ top: document.getElementById("modal-scroll").scrollHeight, behavior: "smooth" }); } // Functions para gestionar estadísticas window.removeSubstitute = function(playerId, idx) { playerStats[playerId].substitutes.splice(idx, 1); saveState(); draw(); renderPlayerDetails(playerId); }; // Event listeners para los botones de añadir document.getElementById("addSubstituteBtn").onclick = function() { const name = document.getElementById("substituteName").value; if (!name || !name.trim()) { alert("Introduce el nombre del suplente"); return; } const playerId = lineup[activePositionId]; ensurePlayerStatsExist(playerId); playerStats[playerId].substitutes.push({ name: name.trim() }); document.getElementById("substituteName").value = ""; saveState(); draw(); renderPlayerDetails(playerId); }; document.getElementById("modal-remove").onclick = () => { if (activePositionId) { lineup[activePositionId] = null; saveState(); } closeModal(); }; document.getElementById("modal-accept").onclick = closeModal; document.getElementById("modal-cancel").onclick = closeModal; document.getElementById("modal-overlay").onclick = e => { if (e.target === document.getElementById("modal-overlay")) closeModal(); }; canvas.addEventListener("click", e => { const { x, y } = canvasCoords(e); const pos = getPosAt(x, y); if (pos) openModal(pos.id); }); document.getElementById("titleInput").oninput = () => draw(); document.getElementById("btnReset").onclick = () => { if (!confirm("¿Resetear la alineación?")) return; lineup = {}; playerStats = {}; saveState(); draw(); }; document.getElementById("formationSelect").onchange = e => { currentFormation = e.target.value; lineup = {}; saveState(); draw(); }; // Genera canvas de exportación con fondo blanco y resolución fija independiente del DPR function generateExportCanvas() { const EXPORT_SCALE = 2; const exportCanvas = document.createElement("canvas"); exportCanvas.width = CANVAS_W * EXPORT_SCALE; exportCanvas.height = CANVAS_H * EXPORT_SCALE; const exportCtx = exportCanvas.getContext("2d"); exportCtx.fillStyle = "#ffffff"; exportCtx.fillRect(0, 0, exportCanvas.width, exportCanvas.height); exportCtx.scale(EXPORT_SCALE, EXPORT_SCALE); drawAll(exportCtx); return exportCanvas; } document.getElementById("btnDownload").onclick = () => { const btn = document.getElementById("btnDownload"); btn.disabled = true; btn.textContent = "Generando..."; setTimeout(() => { const exportCanvas = generateExportCanvas(); const link = document.createElement("a"); link.download = "mi-once-atleti.jpg"; link.href = exportCanvas.toDataURL("image/jpeg", 0.85); link.click(); btn.disabled = false; btn.textContent = "⬇ Descargar imagen"; }, 100); }; if (!navigator.share || !navigator.canShare) { document.getElementById("btnShare").classList.add("hidden"); } document.getElementById("btnShare").onclick = () => { const btn = document.getElementById("btnShare"); btn.disabled = true; btn.textContent = "Generando..."; setTimeout(() => { const exportCanvas = generateExportCanvas(); exportCanvas.toBlob(blob => { const file = new File([blob], "mi-once-atleti.jpg", { type: "image/jpeg" }); const shareData = { title: "Mi once del Atleti", text: "¡Este es mi once del Atleti! Si quieres hacer el tuyo 👉 https://www.estoesatleti.es/estaticas/prueba.html", files: [file] }; if (navigator.canShare && navigator.canShare(shareData)) { navigator.share(shareData).catch(() => {}); } else if (navigator.canShare && navigator.canShare({ files: [file] })) { navigator.share({ title: "Mi once del Atleti", files: [file] }).catch(() => {}); } btn.disabled = false; btn.textContent = "↗ Compartir imagen"; }, "image/jpeg", 0.85); }, 100); }; function initWhenReady() { const rect = canvas.getBoundingClientRect(); if (rect.width > 0) { loadState(); draw(); preloadPlayers().then(() => { document.getElementById("pitch-loader").classList.add("hidden"); draw(); }); } else { requestAnimationFrame(initWhenReady); } } if (document.readyState === "complete") { initWhenReady(); } else { window.addEventListener("load", initWhenReady); }

Lineup

El Atlético de Madrid roza el pleno en los octavos de final del Mundial 2026: solo un eliminado

Telemadrid: el Atlético de Madrid pregunta por un descarte de José Mourinho

El desafío de Obed Vargas: terminar con la sequía de México en un Mundial desde 1986

La imagen del Cholo Simeone y Leo Messi tras la clasificación de Argentina

LaLiga seduce a una de las grandes promesas del Atlético de Madrid

Gasperini quiere sabotear el fichaje de un joven goleador al Atlético de Madrid