// Turnering-detalj — full side for én turnering. // Brukes via onNav("turnering", { tournamentId: "t3" }) // ─── Hjelpe-funksjoner ─────────────────────────────────────────────────────── const formatTrnDate = (s) => { if (!s) return null; const d = new Date(s); const days = ["SØN","MAN","TIR","ONS","TOR","FRE","LØR"]; const day = days[d.getDay()]; const date = String(d.getDate()).padStart(2,"0") + "." + String(d.getMonth()+1).padStart(2,"0"); const time = String(d.getHours()).padStart(2,"0") + ":" + String(d.getMinutes()).padStart(2,"0"); return { day, date, time }; }; // Aggreger verified submissions → per-lag leaderboard-rader const buildLeaderboard = (submissions, teams) => { const map = {}; // Seed fra teams (teams || []).forEach(t => { const key = t.id || t.team_name; map[key] = { id: t.id, tag: t.team_tag || t.tag || "—", name: t.team_name || t.name || "—", kills: 0, points: 0, games: 0, perGame: [], }; }); submissions.forEach(s => { const key = s.team_id || s.submitted_by_tag; if (!key) return; if (!map[key]) { map[key] = { id: key, tag: s.submitted_by_tag || "—", name: s.submitted_by_tag || "—", kills: 0, points: 0, games: 0, perGame: [], }; } map[key].kills += (s.kills || 0); map[key].points += (s.points || 0); map[key].games += 1; map[key].perGame.push({ game: s.game || map[key].games, kills: s.kills || 0, points: s.points || 0, placement: s.placement || null }); }); return Object.values(map).sort((a, b) => b.points - a.points || b.kills - a.kills); }; // ─── Live Leaderboard ──────────────────────────────────────────────────────── const LiveLeaderboard = ({ tournamentId, teams, accent, isLive }) => { const [subs, setSubs] = React.useState([]); const [loading, setLoading] = React.useState(true); const [lastUpdated, setLastUpdated] = React.useState(null); const reload = React.useCallback(() => { WZN_Store.getVerifiedSubmissions(tournamentId).then(data => { setSubs(data || []); setLoading(false); setLastUpdated(new Date()); }); }, [tournamentId]); React.useEffect(() => { reload(); if (!isLive) return; // Realtime-oppdatering const unsub = WZN_Store.subscribeTournamentSubmissions(tournamentId, () => reload()); return unsub; }, [tournamentId, isLive, reload]); const rows = React.useMemo(() => buildLeaderboard(subs, teams), [subs, teams]); if (loading) return (
LASTER LEADERBOARD…
); if (rows.length === 0) return (
INGEN GODKJENTE INNSENDINGER ENNÅ
{isLive && (
Kapteiner sender inn score etter hvert game — da vises de her.
)}
); const maxGames = Math.max(...rows.map(r => r.perGame.length), 0); return (
{/* Podium top-3 */} {rows.length >= 3 && (
{[rows[1], rows[0], rows[2]].map((r, i) => { const place = i === 0 ? 2 : i === 1 ? 1 : 3; const isFirst = place === 1; return (
{isFirst &&
}
{place === 1 ? "1ST" : place === 2 ? "2ND" : "3RD"}
{r.tag}
{r.name}
{r.points}
POENG
{r.kills} KILLS · {r.games}G
); })}
)} {/* Tabell */}
{["#", "TAG", "LAG", "KILLS", "POENG", "GAMES", ...Array.from({ length: maxGames }, (_, i) => `G${i+1}`), ].map((h, i) => ( ))} {rows.map((r, i) => ( {Array.from({ length: maxGames }, (_, gi) => { const g = r.perGame[gi]; return ( ); })} ))}
{h}
{String(i+1).padStart(2,"0")} {r.tag} {r.name} {r.kills} {r.points} {r.games} {g ? {g.kills}k : —}
{lastUpdated && isLive && (
SIST OPPDATERT {lastUpdated.toLocaleTimeString("no-NO", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
)}
); }; // ─── Admin: Match Result Modal ─────────────────────────────────────────────── const MatchResultModal = ({ m, teams, accent, onClose, onSave }) => { const findTeam = (id) => (teams || []).find(t => t.id === id); const t1 = findTeam(m.team1_id); const t2 = findTeam(m.team2_id); const [saving, setSaving] = React.useState(null); // team-id som lagres const pickWinner = async (winnerId, loserId) => { setSaving(winnerId); const { error } = await WZN_Store.recordMatchResult(m.id, winnerId, loserId, {}); if (error) { alert("Feil: " + (error.message || error)); setSaving(null); return; } onSave(); // refresh bracket onClose(); }; const resetMatch = async () => { if (!confirm("Nullstille denne kampen? Vinner fjernes.")) return; setSaving("reset"); await window.db.from("bracket_matches").update({ winner_id: null, status: "pending", played_at: null, }).eq("id", m.id); onSave(); onClose(); }; const TeamBtn = ({ team, teamId, isOpponent }) => { if (!team && !teamId) return null; const name = team?.team_name || team?.name || "TBD"; const tag = team?.team_tag || team?.tag || "—"; const oppId = isOpponent ? m.team1_id : m.team2_id; return ( ); }; return (
e.stopPropagation()}> {/* Header */}
ADMIN · REGISTRER RESULTAT
{m.side === "grand_final" ? "GRAND FINAL" : `${(m.side||"WB").toUpperCase().replace("WINNERS","WINNERS BRACKET").replace("LOSERS","LOSERS BRACKET")} — RUNDE ${m.round}`}
{/* Team buttons */}
VS
{/* Footer */}
{m.status === "completed" ? ( ) :
}
); }; // ─── Live Bracket ──────────────────────────────────────────────────────────── const MatchCard = ({ m, teams, accent, isAdmin, onAdminClick }) => { const findTeam = (id) => (teams || []).find(t => t.id === id); const t1 = findTeam(m.team1_id); const t2 = findTeam(m.team2_id); const winner = m.winner_id; const isLive = m.status === "live"; const isDone = m.status === "completed"; const isBye = m.status === "bye"; const canEdit = isAdmin && !isBye; const TeamSlot = ({ team, teamId, isWin }) => { if (!team && !teamId) return (
TBD
); const name = team?.team_name || team?.name || "—"; const tag = team?.team_tag || team?.tag || "—"; return (
{tag} {name} {isWin && ✓}
); }; return (
onAdminClick(m) : undefined} style={{ border: `1px solid ${isLive ? accent : isDone ? "var(--line-2)" : "var(--line)"}`, background: "var(--bg-0)", marginBottom: 8, minWidth: 200, maxWidth: 260, position: "relative", overflow: "hidden", cursor: canEdit ? "pointer" : "default", transition: "border-color 0.12s", }} onMouseEnter={e => { if (canEdit) e.currentTarget.style.borderColor = accent; }} onMouseLeave={e => { if (canEdit) e.currentTarget.style.borderColor = isLive ? accent : isDone ? "var(--line-2)" : "var(--line)"; }} > {isLive &&
}
{m.side === "grand_final" ? "GRAND FINAL" : `${(m.side||"wb").toUpperCase().replace("WINNERS","WB").replace("LOSERS","LB")} R${m.round}`}
{isLive && ● LIVE} {isDone && ✓} {isBye && BYE} {canEdit && ✎}
{isBye ? (
{t1 ? (t1.team_name || t1.team_tag) : "—"} · BYE
) : ( <>
)}
); }; const LiveBracket = ({ tournamentId, teams, accent, isLive, isAdmin }) => { const [matches, setMatches] = React.useState([]); const [loading, setLoading] = React.useState(true); const [editMatch, setEditMatch] = React.useState(null); const reload = React.useCallback(() => { WZN_Store.getBracketMatches(tournamentId).then(data => { setMatches(data || []); setLoading(false); }); }, [tournamentId]); React.useEffect(() => { reload(); const unsub = WZN_Store.subscribeBracketMatches(tournamentId, () => reload()); return unsub; }, [tournamentId, reload]); if (loading) return (
LASTER BRACKET…
); if (matches.length === 0) return (
⊞
BRACKET IKKE GENERERT ENNÅ
Admin genererer bracketen når alle lag er godkjent.
); const wb = matches.filter(m => m.side === "winners").sort((a,b) => a.round - b.round || (a.match_number||0) - (b.match_number||0)); const lb = matches.filter(m => m.side === "losers").sort((a,b) => a.round - b.round || (a.match_number||0) - (b.match_number||0)); const gf = matches.filter(m => m.side === "grand_final"); const groupByRound = (arr) => { const rounds = {}; arr.forEach(m => { (rounds[m.round] = rounds[m.round] || []).push(m); }); return Object.entries(rounds).sort((a,b) => Number(a[0]) - Number(b[0])); }; const wbRounds = groupByRound(wb); const lbRounds = groupByRound(lb); const completed = matches.filter(m => m.status === "completed").length; const bracketSize = Math.pow(2, Math.ceil(Math.log2(Math.max(teams.length, 2)))); const SectionLabel = ({ tag, title, sub, color }) => (
{tag}
{title}
{sub}
); return (
{/* Admin-banner */} {isAdmin && matches.length > 0 && (
✎ ADMIN-MODUS: Klikk på et match-kort for å registrere vinner
)} {/* Modal */} {editMatch && ( setEditMatch(null)} onSave={reload} /> )} {/* Winners Bracket */}
{wbRounds.map(([round, roundMatches]) => (
WB RUNDE {round}
{roundMatches.map(m => )}
))} {gf.length > 0 && (
GRAND FINAL
{gf.map(m => )}
)}
{/* Losers Bracket */} {lbRounds.length > 0 && (
{lbRounds.map(([round, roundMatches]) => (
LB RUNDE {round}
{roundMatches.map(m => )}
))}
)} {/* Footer stats */}
{[ { l: "BRACKET STR.", v: `${bracketSize} LAG` }, { l: "PÅMELDTE", v: teams.length }, { l: "BYE-PLASSER", v: bracketSize - teams.length }, { l: "MATCHER SPILT", v: `${completed}/${matches.length}` }, { l: "FORMAT", v: "DOUBLE ELIM" }, ].map((s, i, arr) => (
{s.l}
{s.v}
))}
); }; // ─── How-it-works per turnerings-type ──────────────────────────────────────── const HOW_IT_WORKS = { switcharoo: { title: "2V2 SWITCHAROO", ruleTab: "switcharoo", steps: [ "Meld deg på solo — ingen partner nødvendig.", "Admin spinner hjulet og parer deg tilfeldig med en annen deltaker.", "Dere spiller 2v2 BR Kill Race i 3 games (BO3).", "Respinn er tilgjengelig — ta kontakt med admin via Discord.", "Mest kills totalt vinner og deler premiepotten.", ], info: [ "Logg inn med Discord for å melde deg på.", "Du trenger ingen partner — hjulet parer deg.", "Første seeding er gratis. Respinn koster fra 100 kr.", "Betal respinn via Discord til admin, som bekrefter og registrerer.", "Påmelding stenger ved turnerings-start.", ], }, bracket: { title: "DOUBLE ELIMINATION BRACKET", ruleTab: "liga-bigmap", steps: [ "Meld på laget ditt og vent på admin-godkjenning.", "Admin genererer double elimination bracket.", "Vinn kampen → gå videre i Winners Bracket.", "Tap én gang → andre sjanse i Losers Bracket.", "Tap i Losers Bracket = ute av turneringen.", ], info: [ "Logg inn med Discord for å melde på laget.", "Screenshot av scoreboard kreves etter hvert game.", "AI hjelper med avlesning — admin verifiserer.", "Påmelding stenger 1 time før start eller ved full liste.", ], }, "2v2": { title: "2V2 BRACKET (CMG)", ruleTab: "switcharoo", steps: [ "Meld på ditt 2v2-lag.", "Double elimination bracket genereres av admin.", "CMG-scoring: mest kills vinner — damage som tiebreaker.", "BO3 Winners / BO2 Losers / BO5 Grand Final.", "Vinnerlaget tar hjem premiepotten.", ], info: [ "Logg inn med Discord for å melde på laget.", "Begge spillere sender inn scorecard etter hvert game.", "AI leser scores — admin verifiserer.", "Kontakt admin via Discord ved spørsmål.", ], }, killrace: { title: "KILLRACE", ruleTab: "killrace", steps: [ "Meld deg på og vent på turnerings-start.", "Spill Warzone-games i tidsvinduet.", "Send inn screenshot av scoreboard etter hvert game.", "AI leser resultater — admin verifiserer.", "Flest kills totalt vinner. Tiebreaker: høyeste single-game killcount.", ], info: [ "Solo / duo / trio / quads avhengig av format.", "Alle games i tidsvinduet teller.", "Send screenshots raskt — forsinkede innsendinger kan avvises.", "Kontakt admin via Discord ved tekniske problemer.", ], }, }; // ─── Respin-tracker (Switcharoo) ───────────────────────────────────────────── const RespinTracker = ({ t, accent, isAdmin, onReload }) => { const respinCount = t?.respin_count || 0; const [adding, setAdding] = React.useState(false); const nextCost = Math.round(100 * Math.pow(2, respinCount)); const totalRev = respinCount > 0 ? Math.round(100 * (Math.pow(2, respinCount) - 1)) : 0; const history = Array.from({ length: respinCount }, (_, i) => ({ n: i + 1, cost: Math.round(100 * Math.pow(2, i)) })); const addRespin = async () => { if (!confirm(`Registrer betalt respinn (${nextCost} kr)?`)) return; setAdding(true); await window.db.from("tournaments").update({ respin_count: respinCount + 1 }).eq("id", t.id); setAdding(false); onReload(); }; return (
RESPIN-TRACKER
0 ? accent : "var(--text-faint)", letterSpacing: "0.12em" }}> {totalRev > 0 ? `+${totalRev.toLocaleString()} KR FRA RESPINS` : "INGEN RESPINS ENNÅ"}
{history.length > 0 && (
{history.map(s => (
RESPIN #{s.n} · {s.cost} KR
))}
)}
NESTE RESPIN KOSTER
{nextCost.toLocaleString()} KR
BETALING
KONTAKT ADMIN PÅ DISCORD
{isAdmin && ( )}
); }; // ─── Hoved-komponent ───────────────────────────────────────────────────────── const TurneringDetailPage = ({ accent, tournamentId, onNav, userRole }) => { const isAdmin = userRole && ["admin", "superadmin", "mod"].includes(userRole); const [t, setT] = React.useState(null); const [teams, setTeams] = React.useState([]); const [soloPlayers, setSoloPlayers] = React.useState([]); const [loadingT, setLoadingT] = React.useState(true); const [tab, setTab] = React.useState("oversikt"); const [reloadKey, setReloadKey] = React.useState(0); const loadTournament = React.useCallback(() => { setLoadingT(true); window.db.from("tournaments").select("*").eq("id", tournamentId).single() .then(({ data }) => { setT(data || null); setLoadingT(false); }); }, [tournamentId]); React.useEffect(() => { loadTournament(); }, [loadTournament, reloadKey]); React.useEffect(() => { if (!t) return; WZN_Store.getTournamentTeams(tournamentId).then(data => setTeams(data || [])); if (t.type === "switcharoo") { window.db.from("player_registrations") .select("id, display_name, discord_name, gamertag, status, created_at") .eq("tournament_id", tournamentId) .order("created_at") .then(({ data }) => setSoloPlayers(data || [])); } }, [t, tournamentId]); // Compute tabs here (before early returns) to satisfy Rules of Hooks const tabs = React.useMemo(() => { if (!t) return []; const type_ = t.type || ""; const isBracket_ = type_ === "bracket" || type_ === "2v2" || type_ === "switcharoo"; const isSwitch_ = type_ === "switcharoo"; const isLive_ = t.status === "live"; const isPast_ = t.status === "completed"; const list = [ { id: "oversikt", label: "OVERSIKT" }, { id: "deltakere", label: "DELTAKERE" }, { id: "premie", label: "PREMIE" }, ]; if (isBracket_) list.push({ id: "bracket", label: "BRACKET", dot: isLive_ }); if (isLive_ || isPast_) list.push({ id: "leaderboard", label: "LEADERBOARD", dot: isLive_ && !isBracket_ }); if (isSwitch_) list.push({ id: "hjul", label: "HJUL" }); return list; }, [t]); if (loadingT) { return (
LASTER…
); } if (!t) { return (
ERROR / 404

TURNERING IKKE FUNNET

); } const isPast = t.status === "completed"; const isLive = t.status === "live"; const isOpen = !isPast && !isLive; const isSwitcharoo = t.type === "switcharoo"; const isBracket = t.type === "bracket" || t.type === "2v2" || isSwitcharoo; const dt = t.start_date ? formatTrnDate(t.start_date) : null; const registered = t.registered || 0; const maxSlots = t.max_teams || 1; const pct = !isPast ? (registered / maxSlots) * 100 : 100; // Live prize pool const entryFee = t.entry_fee || 0; const cashInj = t.cash_injection || 0; const respinCount = t.respin_count || 0; const respinRev = respinCount > 0 ? Math.round(100 * (Math.pow(2, respinCount) - 1)) : 0; const livePrizePool = entryFee * registered + cashInj + (isSwitcharoo ? respinRev : 0); // Prize split: array of 6 percentages, or fallback const prizeSplit = Array.isArray(t.prize_split) ? t.prize_split : [50, 25, 10, 5, 5, 5]; const splitLabels = ["1. PLASS", "2. PLASS", "3. PLASS", "4. PLASS", "5. PLASS", "6. PLASS"]; const howIt = HOW_IT_WORKS[t.type] || HOW_IT_WORKS["bracket"]; return ( <> {/* Breadcrumb */}
/ {(t.name || "").toUpperCase()}
{/* Hero */}
{isLive ? "LIVE" : isPast ? "DONE" : (t.type || "bracket").toUpperCase()}
{isLive && } {isLive ? "LIVE NÅ · " : isPast ? "AVSLUTTET · " : "PÅMELDING ÅPEN · "} {(t.type || "bracket").toUpperCase()}

{(t.name || "").toUpperCase()}

{(t.team_size || "solos").toUpperCase()} {t.games && ` · ${t.games} GAMES`} {t.maps && t.maps.length ? ` · ${t.maps.join(" · ").toUpperCase()}` : ""}
{/* Stat strip */}
{[ { n: dt ? dt.date : "—", l: dt ? dt.day.toUpperCase() : "DATO" }, { n: dt ? dt.time : "—", l: "STARTER" }, { n: `${registered}/${maxSlots}`, l: isSwitcharoo ? "SPILLERE" : "LAG" }, { n: livePrizePool >= 1000 ? `${(livePrizePool/1000).toFixed(1)}K kr` : `${livePrizePool} kr`, l: "PREMIEPOTT", accent: true }, ].map((s, i) => (
{s.n}
{s.l}
))}
{/* Action card */}
{isPast ? "RESULTAT" : isLive ? "FØLG LIVE" : "PÅMELDING"}
{!isPast && (
{registered}/{maxSlots} {isSwitcharoo ? "SPILLERE" : "LAG"} {maxSlots - registered} LEDIGE
)} {isPast && t.winner && (
VINNER
{t.winner.tag || "—"} {t.winner.name || "—"}
)} {isOpen && ( )} {isLive && ( FØLG LIVE PÅ TWITCH▶ )}
{/* ── Tab-bar ──────────────────────────────────────── */}
{isLive && (
LIVE NÅ
)} {tabs.map(t_ => ( ))}
{/* ── Tab-innhold ──────────────────────────────────── */}
{/* OVERSIKT */} {tab === "oversikt" && (
HVORDAN FUNGERER DET

{howIt.title}

    {howIt.steps.map((step, i) => (
  1. 0{i+1} {step}
    2. ))}
VIKTIG Å VITE
    {howIt.info.map((line, i) => (
  • ▸ {line}
    • ))}
FORMAT
{[ { k: "GAMEMODE", v: t.type === "killrace" ? "KILLRACE" : "BR " + (t.team_size || "solos").toUpperCase() }, { k: "GAMES", v: `${t.games || 3}` }, { k: "MAPS", v: t.maps && t.maps.length ? t.maps.join(", ") : "TBD" }, { k: "STARTER", v: dt ? `${dt.day} ${dt.date} · ${dt.time}` : (t.date || "—") }, ].map(r => (
{r.k}
{r.v}
))}
)} {/* DELTAKERE */} {tab === "deltakere" && ( <>
{isSwitcharoo ? "SOLO-DELTAKERE" : "PÅMELDTE LAG"}

{isSwitcharoo ? `${soloPlayers.length} SPILLERE PÅMELDT` : `${teams.length} LAG PÅMELDT`}

{isSwitcharoo ? ( soloPlayers.length === 0 ? (
INGEN PÅMELDT ENNÅ
) : (
{soloPlayers.map((p, i) => (
#{String(i+1).padStart(2,"0")}
{p.display_name || p.discord_name || "—"}
{p.gamertag &&
{p.gamertag}
}
{p.status === "in_team" && ( PARET )}
))}
) ) : ( teams.length === 0 ? (
INGEN LAG REGISTRERT
) : (
{teams.map((team, i) => (
#{String(i+1).padStart(2,"0")} {team.team_tag || "—"} {team.team_name || "—"}
))}
) )} )} {/* PREMIE */} {tab === "premie" && (
PREMIEPOTT

{livePrizePool >= 1000 ? `${(livePrizePool/1000).toFixed(1)}K` : livePrizePool} KR

TOTAL POTT (OPPDATERES AUTOMATISK)
{[ { l: "PÅMELDINGSAVGIFT", v: `${registered} × ${entryFee} kr = ${registered * entryFee} kr` }, cashInj > 0 && { l: "CASH INJECTION", v: `+${cashInj} kr` }, isSwitcharoo && respinRev > 0 && { l: "RESPINN-INNTEKT", v: `+${respinRev} kr (${respinCount} respinn)` }, ].filter(Boolean).map(r => (
{r.l}
{r.v}
))}
FORDELING
{prizeSplit.map((pct_, i) => { if (pct_ === 0) return null; const kr = Math.round(livePrizePool * pct_ / 100); return (
{splitLabels[i]}
{kr} kr ({pct_}%)
); })}
{isSwitcharoo && ( setReloadKey(k => k + 1)} /> )}
)} {/* BRACKET */} {tab === "bracket" && ( <>
{isLive ? "● LIVE" : "ARKIV"} / BRACKET

{isLive ? "LIVE BRACKET" : "BRACKET-RESULTAT"}

)} {/* LEADERBOARD */} {tab === "leaderboard" && ( <>
{isLive ? "● LIVE" : "RESULTATER"} / LEADERBOARD

{isLive ? "LIVE LEADERBOARD" : "SLUTTRESULTAT"}

)} {/* HJUL */} {tab === "hjul" && ( <>
SWITCHAROO / HJUL

SPIN THE WHEEL

{isAdmin ? ( typeof SwitcharooWheel !== "undefined" ? ( ) : (
LASTER HJUL-KOMPONENT…
) ) : (
SEEDING
Admin spinner hjulet og parer spillere tilfeldig. Du vil se hvem som er partneren din her etter seeding er kjørt.
Ønsker du et nytt par? Kontakt admin via Discord. Respinn koster fra 100 kr.
)} )}
); }; Object.assign(window, { TurneringDetailPage });