(function(){ /* ============================================================ 1) CONFIG — EDITA ESTAS 3 LÍNEAS ============================================================ */ const SUPABASE_URL = “TU_SUPABASE_URL”; // ej: https://abcd.supabase.co const SUPABASE_ANON = “TU_SUPABASE_ANON_KEY”; // la clave “anon public” const ADMIN_PASS = “cambia-esta-clave”; // clave para que SOLO tú cargues resultados /* ============================================================ */ const root = document.getElementById(‘quiniela-root’); const $ = s => root.querySelector(s); const DEMO = !SUPABASE_URL || SUPABASE_URL.indexOf(‘TU_’)===0; /* —- almacenamiento seguro (no rompe dentro de la vista previa) —- */ const mem = {}; const store = { get(k){ try{ const v=localStorage.getItem(k); return v==null?(k in mem?mem[k]:null):v; }catch(e){ return k in mem?mem[k]:null; } }, set(k,v){ try{ localStorage.setItem(k,v); }catch(e){ mem[k]=v; } } }; /* —- datos: grupos del sorteo oficial (5 dic 2025) —- */ const GRUPOS = { A:[‘México’,’Sudáfrica’,’Corea del Sur’,’Chequia’], B:[‘Canadá’,’Bosnia y Herzegovina’,’Catar’,’Suiza’], C:[‘Brasil’,’Marruecos’,’Haití’,’Escocia’], D:[‘Estados Unidos’,’Paraguay’,’Australia’,’Turquía’], E:[‘Alemania’,’Curazao’,’Costa de Marfil’,’Ecuador’], F:[‘Países Bajos’,’Japón’,’Suecia’,’Túnez’], G:[‘Bélgica’,’Egipto’,’Irán’,’Nueva Zelanda’], H:[‘España’,’Cabo Verde’,’Arabia Saudí’,’Uruguay’], I:[‘Francia’,’Senegal’,’Irak’,’Noruega’], J:[‘Argentina’,’Argelia’,’Austria’,’Jordania’], K:[‘Portugal’,’RD Congo’,’Uzbekistán’,’Colombia’], L:[‘Inglaterra’,’Croacia’,’Ghana’,’Panamá’] }; const FLAG = { ‘México’:’🇲🇽’,’Sudáfrica’:’🇿🇦’,’Corea del Sur’:’🇰🇷’,’Chequia’:’🇨🇿’, ‘Canadá’:’🇨🇦’,’Bosnia y Herzegovina’:’🇧🇦’,’Catar’:’🇶🇦’,’Suiza’:’🇨🇭’, ‘Brasil’:’🇧🇷’,’Marruecos’:’🇲🇦’,’Haití’:’🇭🇹’,’Escocia’:’🏴󠁧󠁢󠁳󠁣󠁴󠁿’, ‘Estados Unidos’:’🇺🇸’,’Paraguay’:’🇵🇾’,’Australia’:’🇦🇺’,’Turquía’:’🇹🇷’, ‘Alemania’:’🇩🇪’,’Curazao’:’🇨🇼’,’Costa de Marfil’:’🇨🇮’,’Ecuador’:’🇪🇨’, ‘Países Bajos’:’🇳🇱’,’Japón’:’🇯🇵’,’Suecia’:’🇸🇪’,’Túnez’:’🇹🇳’, ‘Bélgica’:’🇧🇪’,’Egipto’:’🇪🇬’,’Irán’:’🇮🇷’,’Nueva Zelanda’:’🇳🇿’, ‘España’:’🇪🇸’,’Cabo Verde’:’🇨🇻’,’Arabia Saudí’:’🇸🇦’,’Uruguay’:’🇺🇾’, ‘Francia’:’🇫🇷’,’Senegal’:’🇸🇳’,’Irak’:’🇮🇶’,’Noruega’:’🇳🇴’, ‘Argentina’:’🇦🇷’,’Argelia’:’🇩🇿’,’Austria’:’🇦🇹’,’Jordania’:’🇯🇴’, ‘Portugal’:’🇵🇹’,’RD Congo’:’🇨🇩’,’Uzbekistán’:’🇺🇿’,’Colombia’:’🇨🇴’, ‘Inglaterra’:’🏴󠁧󠁢󠁥󠁮󠁧󠁿’,’Croacia’:’🇭🇷’,’Ghana’:’🇬🇭’,’Panamá’:’🇵🇦’ }; const fl = n => FLAG[n] || ‘⚽’; /* —- generar los 72 partidos de fase de grupos (round-robin) —- */ const PAIRS=[[0,1],[2,3],[0,2],[3,1],[3,0],[1,2]], JOR=[1,1,2,2,3,3]; function buildMatches(){ const out=[]; let gi=0; for(const g in GRUPOS){ const t=GRUPOS[g]; PAIRS.forEach((p,i)=>out.push({ id: gi*6+i+1, grupo:g, jornada:JOR[i], local:t[p[0]], visitante:t[p[1]], goles_local:null, goles_visitante:null, finalizado:false })); gi++; } return out; } /* —- puntaje: marcador exacto = 5, solo ganador/empate = 2, falla = 0 —- */ function puntos(pl,pv,m){ if(m.goles_local==null||m.goles_visitante==null) return null; if(pl===m.goles_local && pv===m.goles_visitante) return 5; if(Math.sign(pl-pv)===Math.sign(m.goles_local-m.goles_visitante)) return 2; return 0; } /* ============================================================ 2) CAPA DE DATOS (Demo = este navegador / Real = Supabase) ============================================================ */ let DB; const LocalDB = { async init(){ if(!store.get(‘q_matches’)) store.set(‘q_matches’, JSON.stringify(buildMatches())); }, async ensureSeed(){ store.set(‘q_matches’, JSON.stringify(buildMatches())); }, async getConfig(){ const v=store.get(‘q_config’); return v?JSON.parse(v):{abiertas:true}; }, async setConfig(ab){ store.set(‘q_config’, JSON.stringify({abiertas:ab})); }, async getMatches(){ const v=store.get(‘q_matches’); return v?JSON.parse(v):buildMatches(); }, async setResult(id,gl,gv){ const ms=await this.getMatches(); const m=ms.find(x=>x.id===id); if(m){ m.goles_local=gl; m.goles_visitante=gv; m.finalizado=true; } store.set(‘q_matches’,JSON.stringify(ms)); }, async registerParticipant(nombre,tel){ const ps=this._parts(); const id=’d’+Date.now(); ps.push({id,nombre,tel}); store.set(‘q_parts’,JSON.stringify(ps)); return {id,nombre}; }, _parts(){ const v=store.get(‘q_parts’); return v?JSON.parse(v):[]; }, async getMyPredictions(pid){ const v=store.get(‘q_pred_’+pid); return v?JSON.parse(v):{}; }, async savePredictions(pid,obj){ store.set(‘q_pred_’+pid, JSON.stringify(obj)); }, async getLeaderboard(){ const ps=this._parts(), ms=await this.getMatches(); const byId={}; ms.forEach(m=>byId[m.id]=m); return ps.map(p=>{ const pr=JSON.parse(store.get(‘q_pred_’+p.id)||'{}’); let pts=0,ex=0; for(const mid in pr){ const m=byId[mid]; if(!m) continue; const s=puntos(pr[mid].pl,pr[mid].pv,m); if(s===5)ex++; if(s) pts+=s; } return {participant_id:p.id, nombre:p.nombre, puntos:pts, exactos:ex}; }).sort((a,b)=> b.puntos-a.puntos || b.exactos-a.exactos); } }; const SupaDB = (sb)=>({ async init(){}, async ensureSeed(){ await sb.from(‘matches’).upsert(buildMatches().map(m=>({ id:m.id,grupo:m.grupo,jornada:m.jornada,local:m.local,visitante:m.visitante })),{onConflict:’id’,ignoreDuplicates:true}); await sb.from(‘config’).upsert({id:1,abiertas:true},{onConflict:’id’,ignoreDuplicates:true}); }, async getConfig(){ const {data}=await sb.from(‘config’).select(‘abiertas’).eq(‘id’,1).maybeSingle(); return {abiertas: data? data.abiertas : true}; }, async setConfig(ab){ await sb.from(‘config’).upsert({id:1,abiertas:ab},{onConflict:’id’}); }, async getMatches(){ const {data}=await sb.from(‘matches’).select(‘*’).order(‘id’); return data||[]; }, async setResult(id,gl,gv){ await sb.from(‘matches’).update({goles_local:gl,goles_visitante:gv,finalizado:true}).eq(‘id’,id); }, async registerParticipant(nombre,tel){ const {data}=await sb.from(‘participants’).insert({nombre,telefono:tel}).select().single(); return data; }, async getMyPredictions(pid){ const {data}=await sb.from(‘predictions’).select(‘match_id,pred_local,pred_visitante’).eq(‘participant_id’,pid); const o={}; (data||[]).forEach(r=>o[r.match_id]={pl:r.pred_local,pv:r.pred_visitante}); return o; }, async savePredictions(pid,obj){ const rows=Object.keys(obj).map(mid=>({participant_id:pid,match_id:+mid,pred_local:obj[mid].pl,pred_visitante:obj[mid].pv})); if(rows.length) await sb.from(‘predictions’).upsert(rows,{onConflict:’participant_id,match_id’}); }, async getLeaderboard(){ const {data}=await sb.from(‘leaderboard’).select(‘*’); return data||[]; } }); function loadSupabaseLib(){ return new Promise((res,rej)=>{ if(window.supabase) return res(); const s=document.createElement(‘script’); s.src=’https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2′; s.onload=res; s.onerror=()=>rej(new Error(‘No se pudo cargar Supabase’)); document.head.appendChild(s); }); } /* ============================================================ 3) ESTADO + ARRANQUE ============================================================ */ const S = { me:null, matches:[], config:{abiertas:true}, myPred:{}, admin:false }; function toast(msg){ const t=$(‘#toast’); t.textContent=msg; t.classList.add(‘show’); setTimeout(()=>t.classList.remove(‘show’),2200); } async function boot(){ if(DEMO){ DB=LocalDB; } else{ try{ await loadSupabaseLib(); const sb=window.supabase.createClient(SUPABASE_URL,SUPABASE_ANON); DB=SupaDB(sb); } catch(e){ DB=LocalDB; } } await DB.init(); S.config = await DB.getConfig(); S.matches = await DB.getMatches(); if(!S.matches.length && DEMO){ await DB.ensureSeed(); S.matches=await DB.getMatches(); } const saved = store.get(‘q_me’); if(saved){ S.me=JSON.parse(saved); await afterLogin(); } else{ $(‘#gate’).classList.remove(‘hidden’); } } async function afterLogin(){ $(‘#gate’).classList.add(‘hidden’); $(‘#app’).classList.remove(‘hidden’); $(‘#me-nm’).textContent = S.me.nombre; $(‘#me-av’).textContent = S.me.nombre.trim().charAt(0).toUpperCase()||’?’; S.myPred = await DB.getMyPredictions(S.me.id); renderPron(); renderTabla(); renderReglas(); refreshMyPoints(); } /* —- registro —- */ $(‘#g-enter’).addEventListener(‘click’, async ()=>{ const nombre = $(‘#g-nombre’).value.trim(); const tel = $(‘#g-tel’).value.trim(); if(nombre.length b.addEventListener(‘click’, ()=>{ root.querySelectorAll(‘.tabs button’).forEach(x=>x.classList.remove(‘on’)); b.classList.add(‘on’); [‘pron’,’tabla’,’reglas’].forEach(t=> $(‘#view-‘+t).classList.toggle(‘hidden’, t!==b.dataset.tab)); if(b.dataset.tab===’tabla’) renderTabla(); })); /* ============================================================ 4) VISTA: PRONÓSTICOS ============================================================ */ function locked(m){ return !S.config.abiertas || m.finalizado; } function renderPron(){ const v=$(‘#view-pron’); v.innerHTML=”; if(DEMO){ v.insertAdjacentHTML(‘beforeend’, ``); } if(!S.config.abiertas){ v.insertAdjacentHTML(‘beforeend’, ``); } else { v.insertAdjacentHTML(‘beforeend’, ``); } for(const g in GRUPOS){ const ms = S.matches.filter(m=>m.grupo===g); const wrap=document.createElement(‘div’); wrap.className=’grp’; wrap.innerHTML=``; let lastJ=0; ms.forEach(m=>{ if(m.jornada!==lastJ){ lastJ=m.jornada; wrap.insertAdjacentHTML(‘beforeend’,``); } const pr = S.myPred[m.id]||{}; const dis = locked(m)?’disabled’:”; const card=document.createElement(‘div’); card.className=’match’+(m.finalizado?’ done’:”); card.innerHTML=` ${m.finalizado?resBlock(m,pr):”}`; wrap.appendChild(card); }); v.appendChild(wrap); } if(S.config.abiertas){ const bar=document.createElement(‘div’); bar.className=’savebar’; bar.innerHTML=`Guardar mis pronósticos`; v.appendChild(bar); $(‘#save-pred’).addEventListener(‘click’, savePred); } } function resBlock(m,pr){ const s = (pr.pl!=null)?puntos(pr.pl,pr.pv,m):0; const cls = s===5?’p5′:s===2?’p2′:’p0′; const txt = s===5?’+5 exacto’:s===2?’+2 ganador’:’+0′; const mine = (pr.pl!=null)?`Pusiste ${pr.pl}–${pr.pv}`:’No pronosticaste’; return ``; } async function savePred(){ const obj={…S.myPred}; root.querySelectorAll(‘#view-pron input[data-m]’).forEach(inp=>{ const id=inp.dataset.m, side=inp.dataset.s, val=inp.value.trim(); if(val===”) return; obj[id]=obj[id]||{}; obj[id][side===’l’?’pl’:’pv’]=Math.max(0,Math.min(20,parseInt(val)||0)); }); // solo guardar partidos con AMBOS marcadores const clean={}; for(const id in obj){ if(obj[id].pl!=null && obj[id].pv!=null) clean[id]=obj[id]; } $(‘#save-pred’).disabled=true; $(‘#save-pred’).textContent=’Guardando…’; try{ await DB.savePredictions(S.me.id, clean); S.myPred=clean; toast(‘¡Pronósticos guardados!’); } catch(e){ toast(‘Error al guardar. Reintenta.’); } $(‘#save-pred’).disabled=false; $(‘#save-pred’).textContent=’Guardar mis pronósticos’; refreshMyPoints(); } async function refreshMyPoints(){ const byId={}; S.matches.forEach(m=>byId[m.id]=m); let pts=0; for(const id in S.myPred){ const m=byId[id]; if(!m) continue; const s=puntos(S.myPred[id].pl,S.myPred[id].pv,m); if(s) pts+=s; } $(‘#me-pts’).textContent=pts; } /* ============================================================ 5) VISTA: TABLA DE POSICIONES ============================================================ */ async function renderTabla(){ const v=$(‘#view-tabla’); v.innerHTML=’‘; let lb=[]; try{ lb=await DB.getLeaderboard(); }catch(e){ lb=[]; } v.innerHTML=”; if(!lb.length){ v.innerHTML=’‘; return; } const top=lb.slice(0,3); if(lb.some(x=>x.puntos>0)){ const order=[1,0,2], cls=[‘g1′,’g2′,’g3’], med=[‘🥇’,’🥈’,’🥉’]; const pod=document.createElement(‘div’); pod.className=’podium’; order.forEach(i=>{ const p=top[i]; if(!p){ pod.appendChild(document.createElement(‘div’)); return; } const d=document.createElement(‘div’); d.className=’pod ‘+cls[i]; d.innerHTML=``; pod.appendChild(d); }); v.appendChild(pod); } lb.forEach((p,i)=>{ const meRow = String(p.participant_id)===String(S.me.id); const row=document.createElement(‘div’); row.className=’lbrow’+(meRow?’ me-row’:”); row.innerHTML=` `; v.appendChild(row); }); } const esc = s => String(s).replace(/[&”]/g,c=>({‘&’:’&’,”:’>’,'”‘:’"’}[c])); /* ============================================================ 6) VISTA: REGLAS ============================================================ */ function renderReglas(){ $(‘#view-reglas’).innerHTML=` `; } /* ============================================================ 7) ADMIN (organizador) — cargar resultados y abrir/cerrar ============================================================ */ $(‘#admin-link’).addEventListener(‘click’, ()=>{ if(!S.admin){ const p=prompt(‘Clave de organizador:’); if(p!==ADMIN_PASS){ if(p!==null) toast(‘Clave incorrecta’); return; } S.admin=true; } openAdmin(); }); async function openAdmin(){ [‘pron’,’tabla’,’reglas’].forEach(t=>$(‘#view-‘+t).classList.add(‘hidden’)); root.querySelectorAll(‘.tabs button’).forEach(x=>x.classList.remove(‘on’)); let host=$(‘#view-admin’); if(!host){ host=document.createElement(‘div’); host.id=’view-admin’; $(‘#view-reglas’).after(host); } host.classList.remove(‘hidden’); S.matches = await DB.getMatches(); S.config = await DB.getConfig(); let html = ``; html += ``; if(DEMO) html += `Reiniciar partidos (demo)`; for(const g in GRUPOS){ html+=``; S.matches.filter(m=>m.grupo===g).forEach(m=>{ html+=``; }); } host.innerHTML=html; $(‘#adm-toggle’).addEventListener(‘click’, async ()=>{ await DB.setConfig(!S.config.abiertas); S.config.abiertas=!S.config.abiertas; toast(S.config.abiertas?’Pronósticos abiertos’:’Pronósticos cerrados’); openAdmin(); }); const seed=$(‘#adm-seed’); if(seed) seed.addEventListener(‘click’, async ()=>{ await DB.ensureSeed(); S.matches=await DB.getMatches(); toast(‘Partidos reiniciados’); openAdmin(); }); host.querySelectorAll(‘button[data-res]’).forEach(b=> b.addEventListener(‘click’, async ()=>{ const id=+b.dataset.res, gl=$(‘#rl-‘+id).value, gv=$(‘#rv-‘+id).value; if(gl===”||gv===”){ toast(‘Pon ambos marcadores’); return; } await DB.setResult(id, Math.max(0,parseInt(gl)), Math.max(0,parseInt(gv))); S.matches=await DB.getMatches(); toast(‘Resultado guardado’); openAdmin(); refreshMyPoints(); })); } boot(); })();