+ 
+
Loading teams...
"; + return; + } + + const options = state.teams + .map((team) => ``) + .join(""); + + const fields = []; + for (let i = 0; i < required; i++) { + fields.push(` + + `); + } + + wrap.innerHTML = fields.join(""); +} + +function getCreatePayload() { + const mode = $("modeSelect").value; + const autoFill = $("autoFill").checked; + const required = getModeTeamCount(mode); + + if (autoFill) { + return { mode, auto_fill: true }; + } + + const picks = [...$("teamSelectWrap").querySelectorAll("select")].map((s) => s.value); + const uniqueCount = new Set(picks).size; + if (picks.length !== required || uniqueCount !== picks.length) { + throw new Error("Please select unique teams for this mode"); + } + + return { mode, auto_fill: false, teams: picks }; +} + +function cardActions(sim) { + const common = ` + + + + `; + + if (sim.status === "pending") { + return ` + + ${common} + `; + } + + if (sim.status === "completed") { + return ` + + ${common} + `; + } + + return common; +} + +function createCardElement(sim) { + const article = document.createElement("article"); + article.className = "card"; + article.dataset.id = String(sim.id); + article.innerHTML = ` +Progress:
+ +Outcome:
+ + `; + return article; +} + +function setTextIfChanged(element, nextValue) { + if (!element) return; + if (element.textContent !== nextValue) { + element.textContent = nextValue; + } +} + +function updateCardElement(card, sim) { + setTextIfChanged(card.querySelector('[data-role="title"]'), sim.title); + setTextIfChanged(card.querySelector('[data-role="idline"]'), `sim-${sim.id} | ${sim.mode} | seed=${sim.seed}`); + setTextIfChanged(card.querySelector('[data-role="progress"]'), sim.progress); + setTextIfChanged(card.querySelector('[data-role="scoreboard"]'), sim.scoreboard); + setTextIfChanged(card.querySelector('[data-role="outcome"]'), sim.outcome); + + const pill = card.querySelector('[data-role="pill"]'); + const nextPillClass = `pill ${sim.status}`; + if (pill.className !== nextPillClass) { + pill.className = nextPillClass; + } + setTextIfChanged(pill, sim.status); + + if (card.dataset.status !== sim.status) { + card.dataset.status = sim.status; + card.querySelector('[data-role="actions"]').innerHTML = cardActions(sim); + } +} + +function renderDashboard() { + const root = $("dashboard"); + if (!root) return; + + if (state.simulations.length === 0) { + for (const card of root.querySelectorAll("article.card")) { + card.remove(); + } + if (!$("dashboardEmpty")) { + root.innerHTML = `Cloudified Soccer Simulation Environment
-
+ Rust Backend
+A modern web frontend backed by the same Rust simulation engine used in CLI and TUI modes.
+