From ea23f0b73a2c1f00e938fe490c150320f1980541 Mon Sep 17 00:00:00 2001 From: Simon Oberzier Date: Tue, 10 Feb 2026 12:50:53 +0100 Subject: [PATCH] History navigation --- public/index.html | 214 +++++++++++++++++++++++++++++----------------- 1 file changed, 134 insertions(+), 80 deletions(-) diff --git a/public/index.html b/public/index.html index 1a4f083..ef147fb 100644 --- a/public/index.html +++ b/public/index.html @@ -383,7 +383,12 @@ const params = new URLSearchParams(window.location.search); let roomId = params.get("room"); let isLocal = params.get("mode") === "local"; - let ws, myRole, state, selected = null; + + // --- STATE & HISTORY --- + let ws, myRole, selected = null; + let state = null; // Authoritative latest state + let history = []; // Array of state snapshots + let historyIndex = -1; // Current view index const pos = { 0: [80, 210], 1: [180, 110], 2: [180, 210], 3: [180, 310], 4: [280, 110], 5: [280, 210], 6: [280, 310], 7: [380, 110], 8: [380, 210], 9: [380, 310], 10: [480, 210] }; const edges = [[0, 1], [0, 2], [0, 3], [1, 2], [2, 3], [1, 4], [2, 5], [3, 6], [4, 5], [5, 6], [4, 7], [5, 8], [6, 9], [7, 8], [8, 9], [5, 1], [5, 3], [5, 7], [5, 9], [7, 10], [8, 10], [9, 10]]; @@ -391,12 +396,25 @@ const bSheep = { 0: [1, 2, 3], 1: [2, 4, 5], 2: [1, 3, 5], 3: [2, 5, 6], 4: [5, 7], 5: [4, 6, 7, 8, 9], 6: [5, 9], 7: [8, 10], 8: [7, 9, 10], 9: [8, 10], 10: [] }; function initLocalState() { - state = { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null, lastMove: null }; + const startState = { wolf: 5, sheep: [0, 1, 3], turn: "sheep", moveCount: 0, winner: null, lastMove: null }; + history = []; + updateHistory(startState); document.getElementById("lobby").classList.add("hidden"); document.getElementById("game").classList.remove("hidden"); document.getElementById("roomInfo").style.visibility = "hidden"; document.getElementById("copyBtn").disabled = true; document.getElementById("copyBtn").style.opacity = "0.5"; + } + + function updateHistory(newState) { + // If it's a reset (moveCount 0) or a new move, add to history + if (newState.moveCount === 0) { + history = [JSON.parse(JSON.stringify(newState))]; + } else if (!state || newState.moveCount > state.moveCount) { + history.push(JSON.parse(JSON.stringify(newState))); + } + state = newState; + historyIndex = history.length - 1; // Snap to newest render(); } @@ -417,21 +435,40 @@ document.getElementById("game").classList.remove("hidden"); } if (msg.type === "state") { - state = msg.game; myRole = msg.yourRole; + myRole = msg.yourRole; document.getElementById("overlay").className = msg.onlineCount < 2 ? "" : "hidden"; - render(); + updateHistory(msg.game); } }; } + // Keyboard controls for back/forward + window.addEventListener("keydown", (e) => { + if (e.key === "ArrowLeft" && historyIndex > 0) { + historyIndex--; + render(); + } else if (e.key === "ArrowRight" && historyIndex < history.length - 1) { + historyIndex++; + render(); + } + }); + function handleLocalMove(from, to) { - const allowed = (state.turn === "wolf") ? bWolf[from] : bSheep[from]; - if (!allowed?.includes(to) || state.sheep.includes(to) || state.wolf === to) return; - if (state.turn === "wolf") { state.wolf = to; state.turn = "sheep"; } - else { state.sheep[state.sheep.indexOf(from)] = to; state.turn = "wolf"; } - state.moveCount++; - state.winner = checkWinConditions(state); - render(); + // If moving while viewing history, we branch off + const baseState = history[historyIndex]; + const allowed = (baseState.turn === "wolf") ? bWolf[from] : bSheep[from]; + if (!allowed?.includes(to) || baseState.sheep.includes(to) || baseState.wolf === to) return; + + const nextState = JSON.parse(JSON.stringify(baseState)); + if (nextState.turn === "wolf") { nextState.wolf = to; nextState.turn = "sheep"; } + else { nextState.sheep[nextState.sheep.indexOf(from)] = to; nextState.turn = "wolf"; } + + nextState.moveCount++; + nextState.winner = checkWinConditions(nextState); + + // Truncate history if we were looking at the past + history = history.slice(0, historyIndex + 1); + updateHistory(nextState); } function checkWinConditions(g) { @@ -442,6 +479,86 @@ return null; } + function render() { + const viewState = history[historyIndex]; + if (!viewState) return; + + const isViewingHistory = historyIndex < history.length - 1; + const svg = document.querySelector("svg"); + svg.innerHTML = ""; + + edges.forEach(([a, b]) => { + const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); + l.setAttribute("x1", pos[a][0]); l.setAttribute("y1", pos[a][1]); + l.setAttribute("x2", pos[b][0]); l.setAttribute("y2", pos[b][1]); + l.setAttribute("class", "edge"); svg.appendChild(l); + }); + + const effectiveRole = isLocal ? viewState.turn : myRole; + const badge = document.getElementById("idBadge"); + badge.innerText = effectiveRole === "wolf" ? "WOLF" : "SCHAFE"; + badge.className = `id-box is-${effectiveRole}`; + + const statusEl = document.getElementById("status"); + const banner = document.getElementById("victory-banner"); + const restartBtn = document.getElementById("restartBtn"); + + if (viewState.winner) { + banner.classList.remove("hidden"); + const winMsg = viewState.winner === "wolf" ? "WOLF GEWINNT!" : "SCHAFE GEWINNEN!"; + document.getElementById("winner-text").innerText = winMsg; + document.getElementById("winner-text").style.color = viewState.winner === "wolf" ? "var(--wolf)" : "var(--sheep)"; + statusEl.innerHTML = "ENDE"; + restartBtn.classList.add("restart-pulse"); + } else { + banner.classList.add("hidden"); + restartBtn.classList.remove("restart-pulse"); + let label = (isLocal || viewState.turn === myRole) ? 'DEIN ZUG' : 'WARTEN...'; + if (isViewingHistory) label = "HISTORIE"; + statusEl.innerHTML = `${label}
ZUG ${viewState.moveCount}/40`; + } + + for (let i = 0; i <= 10; i++) { + const [x, y] = pos[i]; + const isWolf = viewState.wolf === i; + const isSheep = viewState.sheep.includes(i); + const type = isWolf ? "wolf" : (isSheep ? "sheep" : "empty"); + const isWinnerPiece = (viewState.winner === "wolf" && isWolf) || (viewState.winner === "sheep" && isSheep); + + // Logic for possible moves + const canInteract = isLocal || (!isViewingHistory && state.turn === myRole); + const isPossible = canInteract && selected !== null && (viewState.turn === "wolf" ? bWolf[selected] : bSheep[selected]).includes(i) && !isWolf && !isSheep; + + const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); + g.onclick = () => { + if (viewState.winner || (!isLocal && isViewingHistory)) return; + if (!isLocal && state.turn !== myRole) return; + + const isMine = (viewState.turn === "wolf" && isWolf) || (viewState.turn === "sheep" && isSheep); + if (isMine) selected = i; + else if (isPossible) { + if (isLocal) handleLocalMove(selected, i); + else ws.send(JSON.stringify({ from: selected, to: i })); + selected = null; + } else selected = null; + render(); + }; + + const c = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 25); + c.setAttribute("class", `node-circle ${type} ${selected === i ? 'selected' : ''} ${isPossible ? 'possible' : ''} ${isWinnerPiece ? 'winner-glow' : ''}`); + if (isViewingHistory) c.style.strokeDasharray = "4"; + g.appendChild(c); + + const t = document.createElementNS("http://www.w3.org/2000/svg", "text"); + t.setAttribute("x", x); t.setAttribute("y", y + 6); t.setAttribute("text-anchor", "middle"); + t.setAttribute("style", "pointer-events:none; font-weight:900; font-family:sans-serif; font-size: 18px;"); + t.setAttribute("fill", (type === "empty") ? "#000" : "#fff"); + t.textContent = i; g.appendChild(t); + svg.appendChild(g); + } + } + function updateRoomList(rooms) { const list = document.getElementById("roomList"); if (!list) return; @@ -463,79 +580,16 @@ else ws.send(JSON.stringify({ type: 'restart' })); }; - function render() { - const svg = document.querySelector("svg"); - svg.innerHTML = ""; - edges.forEach(([a, b]) => { - const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); - l.setAttribute("x1", pos[a][0]); l.setAttribute("y1", pos[a][1]); - l.setAttribute("x2", pos[b][0]); l.setAttribute("y2", pos[b][1]); - l.setAttribute("class", "edge"); svg.appendChild(l); - }); - - const effectiveRole = isLocal ? state.turn : myRole; - const badge = document.getElementById("idBadge"); - badge.innerText = effectiveRole === "wolf" ? "WOLF" : "SCHAFE"; - badge.className = `id-box is-${effectiveRole}`; - - const statusEl = document.getElementById("status"); - const banner = document.getElementById("victory-banner"); - const restartBtn = document.getElementById("restartBtn"); - - if (state.winner) { - banner.classList.remove("hidden"); - const winMsg = state.winner === "wolf" ? "WOLF GEWINNT!" : "SCHAFE GEWINNEN!"; - document.getElementById("winner-text").innerText = winMsg; - document.getElementById("winner-text").style.color = state.winner === "wolf" ? "var(--wolf)" : "var(--sheep)"; - statusEl.innerHTML = "ENDE"; - restartBtn.classList.add("restart-pulse"); - } else { - banner.classList.add("hidden"); - restartBtn.classList.remove("restart-pulse"); - statusEl.innerHTML = `${(isLocal || state.turn === myRole) ? 'DEIN ZUG' : 'WARTEN...'}
ZUG ${state.moveCount}/40`; - } - - for (let i = 0; i <= 10; i++) { - const [x, y] = pos[i]; - const isWolf = state.wolf === i; - const isSheep = state.sheep.includes(i); - const type = isWolf ? "wolf" : (isSheep ? "sheep" : "empty"); - const isWinnerPiece = (state.winner === "wolf" && isWolf) || (state.winner === "sheep" && isSheep); - const isPossible = selected !== null && (effectiveRole === "wolf" ? bWolf[selected] : bSheep[selected]).includes(i) && !isWolf && !isSheep; - - const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); - g.onclick = () => { - if (!isLocal && (state.turn !== myRole || state.winner)) return; - if (isLocal && state.winner) return; - const isMine = (effectiveRole === "wolf" && isWolf) || (effectiveRole === "sheep" && isSheep); - if (isMine) selected = i; - else if (isPossible) { - if (isLocal) handleLocalMove(selected, i); - else ws.send(JSON.stringify({ from: selected, to: i })); - selected = null; - } else selected = null; - render(); - }; - - const c = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - c.setAttribute("cx", x); c.setAttribute("cy", y); c.setAttribute("r", 25); - c.setAttribute("class", `node-circle ${type} ${selected === i ? 'selected' : ''} ${isPossible ? 'possible' : ''} ${isWinnerPiece ? 'winner-glow' : ''}`); - g.appendChild(c); - - const t = document.createElementNS("http://www.w3.org/2000/svg", "text"); - t.setAttribute("x", x); t.setAttribute("y", y + 6); t.setAttribute("text-anchor", "middle"); - t.setAttribute("style", "pointer-events:none; font-weight:900; font-family:sans-serif; font-size: 18px;"); - t.setAttribute("fill", (type === "empty") ? "#000" : "#fff"); - t.textContent = i; g.appendChild(t); - svg.appendChild(g); - } - } - document.getElementById("copyBtn").onclick = async () => { const url = window.location.origin + window.location.pathname + `?room=${roomId}`; try { await navigator.clipboard.writeText(url); showToast(); } catch (err) { } }; - function showToast() { const t = document.getElementById("toast"); t.className = "show"; setTimeout(() => { t.className = ""; }, 3000); } + + function showToast() { + const t = document.getElementById("toast"); + t.className = "show"; + setTimeout(() => { t.className = ""; }, 3000); + } connect();