ScriptSorcerer/acht-damen-tuerme-problem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '12-fortschritt-abspeichern' into dev

Browse Source
This commit is contained in:
ScriptSorcerer20
2026-04-04 11:25:27 +02:00
parent 48e00fb2b0 02cb1d0a64
commit 21fe673ab4
11 changed files with 691 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/dashboard.css
+135 -1
View File
@@ -94,6 +94,12 @@ body {
text-align: center;
}
#statusMessage {
min-height: 24px;
margin: 0 0 8px;
font-weight: bold;
}
.board {
overflow-x: auto;
padding-bottom: 8px;
@@ -141,6 +147,21 @@ body {
transform: scale(1.05);
}
.cell.solver-place {
box-shadow: inset 0 0 0 4px #22c55e;
animation: solverPulse 0.35s ease;
}
.cell.solver-remove {
box-shadow: inset 0 0 0 4px #f59e0b;
animation: solverPulse 0.35s ease;
}
.cell.solver-solution {
box-shadow: inset 0 0 0 4px #2563eb;
animation: solverPulse 0.35s ease;
}
.white {
background: #e2e8f0;
}
@@ -157,6 +178,10 @@ body {
/* 🎛️ Buttons */
.controls {
margin-top: 15px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.btn {
@@ -173,6 +198,12 @@ body {
background: #2563eb;
}
.btn:disabled,
.btn:disabled:hover {
background: #94a3b8;
cursor: not-allowed;
}
.btn.secondary {
background: #64748b;
}
@@ -213,6 +244,79 @@ body {
background: #22c55e;
}
.solver-panel {
margin-top: 12px;
padding: 16px;
border-radius: 12px;
border: 1px solid #dbe4ee;
background: #f8fafc;
text-align: left;
}
.solver-panel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.solver-panel h3 {
margin: 0 0 6px;
color: #1e293b;
}
.solver-message {
margin: 0;
color: #475569;
}
.solver-step-info {
margin: 0;
padding: 6px 10px;
border-radius: 999px;
background: #dbeafe;
color: #1d4ed8;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.solver-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.solver-controls .btn,
.controls .btn {
margin: 0;
}
.solver-speed {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.solver-speed input[type="range"] {
width: 100%;
}
.solver-speed-label {
font-weight: bold;
color: #334155;
}
.solver-speed-value {
min-width: 62px;
text-align: right;
color: #475569;
font-variant-numeric: tabular-nums;
}
.board-size-info {
margin: 0 0 10px;
color: #475569;
@@ -225,10 +329,14 @@ body {
width: min(320px, 85vw);
height: 100vh;
padding: 24px;
box-sizing: border-box;
background: white;
box-shadow: -10px 0 24px rgba(15, 23, 42, 0.18);
transform: translateX(100%);
transition: transform 0.25s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
z-index: 30;
}
@@ -394,6 +502,20 @@ body {
pointer-events: auto;
}
@keyframes solverPulse {
0% {
transform: scale(0.97);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
@media (max-width: 720px) {
.container {
padding: 12px;
@@ -403,7 +525,19 @@ body {
padding: 15px 18px;
}
.nav-logout-form {
margin-left: 0;
}
}
.solver-panel-header,
.solver-speed {
grid-template-columns: 1fr;
display: grid;
}
.solver-step-info,
.solver-speed-value {
justify-self: start;
}
}
app/static/js/dashboard.js
+409 -23
View File
@@ -2,17 +2,34 @@ const DEFAULT_BOARD_SIZE = 8;
const MIN_BOARD_SIZE = 4;
const MAX_BOARD_SIZE = 13;
const EMPTY_CELL = -1;
const DEFAULT_SOLVER_MESSAGE = "Bereite einen Ablauf vor und spiele ihn Schritt fuer Schritt ab.";
let mode = "queens";
let boardSize = DEFAULT_BOARD_SIZE;
let pendingBoardSize = DEFAULT_BOARD_SIZE;
let board = createEmptyBoard(boardSize);
let solverSteps = [];
let solverStepIndex = -1;
let solverTimerId = null;
let solverSpeedMs = 320;
let solverLoading = false;
let solverRequestId = 0;
let currentSolverHighlight = null;
const boardDiv = document.getElementById("board");
const statusMessage = document.getElementById("statusMessage");
const queenList = document.getElementById("queenList");
const btnQueens = document.getElementById("btnQueens");
const btnRooks = document.getElementById("btnRooks");
const btnPrepareSolve = document.getElementById("btnPrepareSolve");
const btnInstantSolve = document.getElementById("btnInstantSolve");
const btnNextStep = document.getElementById("btnNextStep");
const btnPlayPause = document.getElementById("btnPlayPause");
const solverMessage = document.getElementById("solverMessage");
const solverStepInfo = document.getElementById("solverStepInfo");
const solverSpeedInput = document.getElementById("solverSpeedInput");
const solverSpeedValue = document.getElementById("solverSpeedValue");
const settingsSidebar = document.getElementById("settingsSidebar");
const sidebarBackdrop = document.getElementById("sidebarBackdrop");
const saveSidebar = document.getElementById("saveSidebar");
@@ -63,6 +80,21 @@ function setStatus(message = "", color = "") {
statusMessage.style.color = color;
}
function setSolverMessage(message = DEFAULT_SOLVER_MESSAGE) {
solverMessage.textContent = message;
}
function updateSolverSpeed(rawValue) {
solverSpeedMs = Number(rawValue);
solverSpeedInput.value = String(solverSpeedMs);
solverSpeedValue.textContent = `${solverSpeedMs} ms`;
if (isSolverPlaying()) {
stopSolverPlayback(false);
scheduleNextSolverPlaybackStep();
}
}
function updateBoardLayout() {
const cellSize = Math.max(32, Math.min(60, Math.floor(480 / boardSize)));
@@ -70,10 +102,85 @@ function updateBoardLayout() {
boardDiv.style.setProperty("--cell-size", `${cellSize}px`);
}
function isSolverPlaying() {
return solverTimerId !== null;
}
function hasPreparedSolverTrace() {
return solverSteps.length > 0;
}
function hasCompletedSolverTrace() {
return hasPreparedSolverTrace() && solverStepIndex >= solverSteps.length - 1;
}
function stopSolverPlayback(refreshControls = true) {
if (solverTimerId !== null) {
window.clearTimeout(solverTimerId);
solverTimerId = null;
}
if (refreshControls) {
updateSolverControls();
}
}
function updateSolverControls() {
const currentStep = Math.max(0, solverStepIndex + 1);
btnPrepareSolve.disabled = solverLoading;
btnInstantSolve.disabled = solverLoading;
btnNextStep.disabled = solverLoading || hasCompletedSolverTrace();
btnPlayPause.disabled = solverLoading;
btnPrepareSolve.textContent = solverLoading ? "Preparing..." : "Solve Step-by-Step";
if (isSolverPlaying()) {
btnPlayPause.textContent = "Pause";
} else if (hasCompletedSolverTrace()) {
btnPlayPause.textContent = "Replay Animation";
} else {
btnPlayPause.textContent = "Play Animation";
}
solverStepInfo.textContent = `Schritt ${currentStep} / ${solverSteps.length}`;
}
function discardSolverTrace(message = DEFAULT_SOLVER_MESSAGE) {
solverRequestId += 1;
solverLoading = false;
stopSolverPlayback(false);
solverSteps = [];
solverStepIndex = -1;
currentSolverHighlight = null;
setSolverMessage(message);
updateSolverControls();
}
function rewindSolverTrace() {
stopSolverPlayback(false);
solverStepIndex = -1;
currentSolverHighlight = null;
board = createEmptyBoard(boardSize);
setSolverMessage("Ablauf zurueckgesetzt. Starte die Animation erneut oder gehe weiter mit Next Step.");
drawBoard();
updateSolverControls();
}
function setMode(newMode) {
if (mode === newMode) {
return;
}
mode = newMode;
resetBoard();
updateModeButtons();
resetBoard({
statusMessageText: `${getPieceLabel(mode)}-Modus aktiviert.`,
statusColor: "#2563eb",
solverMessageText: `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
});
}
function closeAllPanels() {
@@ -99,8 +206,6 @@ function getConflicts() {
const colB = board[rowB];
const sameColumn = colA === colB;
const sameDiagonal = Math.abs(colA - colB) === Math.abs(rowA - rowB);
// Rooks only attack vertically, queens also attack diagonally.
const hasConflict = mode === "rooks" ? sameColumn : sameColumn || sameDiagonal;
if (hasConflict) {
@@ -116,16 +221,16 @@ function checkSolution() {
const allPlaced = board.every((col) => col !== EMPTY_CELL);
if (!allPlaced) {
setStatus("❗ Noch nicht alle Figuren platziert.", "orange");
setStatus("Noch nicht alle Figuren platziert.", "#d97706");
return;
}
if (getConflicts().length > 0) {
setStatus("❌ Es gibt Konflikte!", "red");
setStatus("Es gibt Konflikte auf dem Brett.", "red");
return;
}
setStatus("🎉 Perfekt geloest!", "green");
setStatus("Perfekt geloest.", "green");
}
function drawBoard() {
@@ -134,6 +239,7 @@ function drawBoard() {
updateBoardLayout();
const conflicts = getConflicts();
const highlight = currentSolverHighlight;
for (let row = -1; row < boardSize; row++) {
for (let col = -1; col < boardSize; col++) {
@@ -150,10 +256,19 @@ function drawBoard() {
} else {
cell.classList.add("cell", (row + col) % 2 === 0 ? "white" : "black");
if (highlight && highlight.row === row && highlight.col === col) {
cell.classList.add(
highlight.type === "remove"
? "solver-remove"
: highlight.type === "solution"
? "solver-solution"
: "solver-place"
);
}
if (board[row] === col) {
cell.textContent = mode === "queens" ? "♛" : "♜";
// Highlight pieces that are part of at least one conflict pair.
if (conflicts.some(([conflictRow, conflictCol]) => conflictRow === row && conflictCol === col)) {
cell.classList.add("invalid");
}
@@ -170,6 +285,18 @@ function drawBoard() {
}
function placeQueen(row, col) {
if (solverLoading) {
return;
}
if (hasPreparedSolverTrace() || isSolverPlaying()) {
discardSolverTrace("Solver-Ablauf verworfen, weil das Brett manuell geaendert wurde.");
setStatus("Solver-Ablauf verworfen. Bereite ihn bei Bedarf neu vor.", "#d97706");
} else {
setStatus();
}
currentSolverHighlight = null;
board[row] = board[row] === col ? EMPTY_CELL : col;
drawBoard();
}
@@ -182,7 +309,9 @@ function previewBoardSize(size) {
function applyBoardSize() {
boardSize = pendingBoardSize;
discardSolverTrace(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
board = createEmptyBoard(boardSize);
currentSolverHighlight = null;
updateBoardSizeDisplays(boardSize);
setStatus(`Brettgroesse auf ${boardSize} x ${boardSize} gesetzt.`, "#2563eb");
drawBoard();
@@ -358,30 +487,284 @@ async function openSavePointsPanel() {
}
function applyLoadedGame(data) {
board = data.board;
discardSolverTrace(`${getPieceLabel(data.mode || "queens")}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
board = Array.isArray(data.board) ? data.board.slice() : createEmptyBoard(DEFAULT_BOARD_SIZE);
boardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
pendingBoardSize = boardSize;
mode = data.mode;
mode = data.mode === "rooks" ? "rooks" : "queens";
currentSolverHighlight = null;
updateModeButtons();
updateBoardSizeDisplays(boardSize);
drawBoard();
}
async function solve() {
const endpoint = mode === "rooks" ? "/solve_rooks" : "/solve";
const response = await fetch(`${endpoint}?size=${boardSize}`);
const solution = await response.json();
function applySolverStep(step) {
board = Array.isArray(step.board) ? step.board.slice() : createEmptyBoard(boardSize);
// The queens endpoint may return multiple solutions; we display the first one.
board = mode === "queens" && Array.isArray(solution[0]) ? solution[0] : solution;
setStatus(`Loesung fuer ${boardSize} x ${boardSize} geladen.`, "green");
if (Number.isInteger(step.row) && Number.isInteger(step.col)) {
currentSolverHighlight = {
row: step.row,
col: step.col,
type: step.type
};
} else if (step.type === "solution" && solverStepIndex > 0) {
const previousStep = solverSteps[solverStepIndex - 1];
currentSolverHighlight = Number.isInteger(previousStep.row) && Number.isInteger(previousStep.col)
? {
row: previousStep.row,
col: previousStep.col,
type: "solution"
}
: null;
} else {
currentSolverHighlight = null;
}
setSolverMessage(step.message || DEFAULT_SOLVER_MESSAGE);
drawBoard();
updateSolverControls();
}
function resetBoard() {
function advanceSolverStep() {
if (!hasPreparedSolverTrace() || hasCompletedSolverTrace()) {
stopSolverPlayback(false);
updateSolverControls();
return false;
}
solverStepIndex += 1;
applySolverStep(solverSteps[solverStepIndex]);
if (hasCompletedSolverTrace()) {
stopSolverPlayback(false);
setStatus(`Loesung fuer ${boardSize} x ${boardSize} Schritt fuer Schritt aufgebaut.`, "green");
updateSolverControls();
}
return true;
}
function scheduleNextSolverPlaybackStep() {
stopSolverPlayback(false);
solverTimerId = window.setTimeout(() => {
solverTimerId = null;
const advanced = advanceSolverStep();
if (advanced && !hasCompletedSolverTrace()) {
scheduleNextSolverPlaybackStep();
return;
}
updateSolverControls();
}, solverSpeedMs);
updateSolverControls();
}
function startSolverPlayback(stepImmediately = true) {
if (!hasPreparedSolverTrace() || hasCompletedSolverTrace()) {
updateSolverControls();
return;
}
if (stepImmediately) {
const advanced = advanceSolverStep();
if (!advanced || hasCompletedSolverTrace()) {
updateSolverControls();
return;
}
}
scheduleNextSolverPlaybackStep();
}
async function prepareSolutionTrace() {
const endpoint = mode === "rooks" ? "/solve_rooks_trace" : "/solve_trace";
const requestId = ++solverRequestId;
solverLoading = true;
stopSolverPlayback(false);
solverSteps = [];
solverStepIndex = -1;
currentSolverHighlight = null;
setSolverMessage(`Berechne ${getPieceLabel(mode)}-Ablauf fuer ${boardSize} x ${boardSize}...`);
setStatus(`Solver berechnet die Schritte fuer ${boardSize} x ${boardSize}.`, "#2563eb");
updateSolverControls();
try {
const response = await fetch(`${endpoint}?size=${boardSize}`);
if (!response.ok) {
throw new Error("trace request failed");
}
const trace = await response.json();
if (requestId !== solverRequestId) {
return false;
}
solverSteps = Array.isArray(trace.steps) ? trace.steps : [];
solverStepIndex = -1;
board = Array.isArray(trace.initial_board) ? trace.initial_board.slice() : createEmptyBoard(boardSize);
currentSolverHighlight = null;
if (!trace.solved || solverSteps.length === 0) {
setSolverMessage("Keine Loesung gefunden.");
setStatus("Keine Loesung fuer dieses Brett gefunden.", "red");
drawBoard();
return false;
}
setSolverMessage(
mode === "queens"
? `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder Play Animation, um das Backtracking zu verfolgen.`
: `Ablauf bereit mit ${solverSteps.length} Schritten. Nutze Next Step oder starte die Animation.`
);
setStatus("Solver-Ablauf bereit. Nutze Next Step oder Play Animation.", "#2563eb");
drawBoard();
return true;
} catch (error) {
if (requestId !== solverRequestId) {
return false;
}
setSolverMessage("Der Solver-Ablauf konnte nicht geladen werden.");
setStatus("Der Solver-Ablauf konnte nicht geladen werden.", "red");
return false;
} finally {
if (requestId === solverRequestId) {
solverLoading = false;
updateSolverControls();
}
}
}
async function nextSolverStep() {
if (solverLoading) {
return;
}
if (!hasPreparedSolverTrace()) {
const prepared = await prepareSolutionTrace();
if (!prepared) {
return;
}
}
if (isSolverPlaying()) {
stopSolverPlayback(false);
}
if (!advanceSolverStep()) {
setStatus("Der Solver-Ablauf ist bereits abgeschlossen.", "#2563eb");
}
}
async function toggleSolverPlayback() {
if (solverLoading) {
return;
}
if (isSolverPlaying()) {
stopSolverPlayback();
setStatus("Solver-Animation pausiert.", "#2563eb");
return;
}
if (!hasPreparedSolverTrace()) {
const prepared = await prepareSolutionTrace();
if (!prepared) {
return;
}
}
if (hasCompletedSolverTrace()) {
rewindSolverTrace();
}
setStatus("Solver-Animation laeuft.", "#2563eb");
startSolverPlayback(true);
}
async function solve() {
await prepareSolutionTrace();
}
async function instantSolve() {
if (solverLoading) {
return;
}
const endpoint = mode === "rooks" ? "/solve_rooks" : "/solve";
const requestId = ++solverRequestId;
solverLoading = true;
stopSolverPlayback(false);
solverSteps = [];
solverStepIndex = -1;
currentSolverHighlight = null;
setSolverMessage(`Lade sofortige ${getPieceLabel(mode)}-Loesung fuer ${boardSize} x ${boardSize}...`);
setStatus(`Sofortige Loesung wird geladen.`, "#2563eb");
updateSolverControls();
try {
const response = await fetch(`${endpoint}?size=${boardSize}`);
if (!response.ok) {
throw new Error("instant solve request failed");
}
const solution = await response.json();
if (requestId !== solverRequestId) {
return;
}
board = mode === "queens" && Array.isArray(solution[0]) ? solution[0].slice() : solution.slice();
currentSolverHighlight = null;
setSolverMessage("Sofortige Loesung geladen. Starte Solve Step-by-Step, wenn du den Ablauf sehen moechtest.");
setStatus(`Loesung fuer ${boardSize} x ${boardSize} sofort geladen.`, "green");
drawBoard();
} catch (error) {
if (requestId !== solverRequestId) {
return;
}
setSolverMessage("Die sofortige Loesung konnte nicht geladen werden.");
setStatus("Die sofortige Loesung konnte nicht geladen werden.", "red");
} finally {
if (requestId === solverRequestId) {
solverLoading = false;
updateSolverControls();
}
}
}
function resetBoard(options = {}) {
const {
statusMessageText = "",
statusColor = "",
solverMessageText = `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
} = options;
discardSolverTrace(solverMessageText);
board = createEmptyBoard(boardSize);
setStatus();
currentSolverHighlight = null;
if (statusMessageText) {
setStatus(statusMessageText, statusColor);
} else {
setStatus();
}
drawBoard();
}
@@ -401,7 +784,7 @@ function updateQueenList() {
li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${position}`;
queenList.appendChild(li);
count++;
count += 1;
}
}
@@ -422,7 +805,7 @@ async function saveGame() {
});
if (!response.ok) {
setStatus("❌ Der Speicherstand konnte nicht gespeichert werden.", "red");
setStatus("Der Speicherstand konnte nicht gespeichert werden.", "red");
return;
}
@@ -443,7 +826,7 @@ async function loadSavePoint(savePointId) {
const response = await fetch(`/load/${savePointId}`);
if (!response.ok) {
setStatus("❌ Dieser Speicherstand konnte nicht geladen werden.", "red");
setStatus("Dieser Speicherstand konnte nicht geladen werden.", "red");
return;
}
@@ -460,7 +843,7 @@ async function toggleSavePointFavorite(savePointId) {
});
if (!response.ok) {
setStatus("❌ Favorit konnte nicht aktualisiert werden.", "red");
setStatus("Favorit konnte nicht aktualisiert werden.", "red");
return;
}
@@ -480,7 +863,7 @@ async function deleteSavePoint(savePointId) {
});
if (!response.ok) {
setStatus("❌ Speicherpunkt konnte nicht geloescht werden.", "red");
setStatus("Speicherpunkt konnte nicht geloescht werden.", "red");
return;
}
@@ -491,4 +874,7 @@ async function deleteSavePoint(savePointId) {
pendingBoardSize = boardSize;
updateModeButtons();
updateBoardSizeDisplays(boardSize);
updateSolverSpeed(solverSpeedMs);
setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
updateSolverControls();
drawBoard();