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

implemented "acht-damen algorithmus", seperated javascript from html, made a simple check function.

Browse Source
This commit is contained in:
ScriptSorcerer20
2026-03-29 17:54:11 +02:00
parent 81d689c1ba
commit 79cf3240e1
5 changed files with 236 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/dashboard.html
+13 -143
View File
@@ -45,163 +45,33 @@
</form>
</div>
<div class="mode-switch">
<button class="btn active" onclick="setMode('queens')" id="btnQueens">♛ Damen</button>
<button class="btn secondary" onclick="setMode('rooks')" id="btnRooks">♜ Türme</button>
</div>
<!-- ♟️ Game Card -->
<div class="card game-card">
<h2>♟️ 8-Damen Spiel</h2>
<p id="statusMessage"></p>
<div class="board" id="board"></div>
<div class="controls">
<button class="btn" onclick="solve()">Solve</button>
<button class="btn" onclick="checkSolution()">Check</button>
<button class="btn secondary" onclick="resetBoard()">Reset</button>
</div>
</div>
<div class="card">
<h3>📋 Damen Positionen</h3>
<ul id="queenList"></ul>
</div>
</div>
<script>
let board = Array(8).fill(-1);
const boardDiv = document.getElementById("board");
function getConflicts() {
let conflicts = [];
for (let r1 = 0; r1 < 8; r1++) {
if (board[r1] === -1) continue;
for (let r2 = r1 + 1; r2 < 8; r2++) {
if (board[r2] === -1) continue;
let c1 = board[r1];
let c2 = board[r2];
if (
c1 === c2 ||
Math.abs(c1 - c2) === Math.abs(r1 - r2)
) {
conflicts.push([r1, c1]);
conflicts.push([r2, c2]);
}
}
}
return conflicts;
}
function drawBoard() {
boardDiv.innerHTML = "";
boardDiv.className = "board-grid";
const conflicts = getConflicts();
const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
for (let row = -1; row < 8; row++) {
for (let col = -1; col < 8; col++) {
const cell = document.createElement("div");
// 🔹 Ecke oben links
if (row === -1 && col === -1) {
cell.classList.add("label");
}
// 🔹 Buchstaben (oben)
else if (row === -1) {
cell.textContent = letters[col];
cell.classList.add("label");
}
// 🔹 Zahlen (links)
else if (col === -1) {
cell.textContent = 8 - row;
cell.classList.add("label");
}
// 🔹 echtes Spielfeld
else {
cell.classList.add("cell");
if ((row + col) % 2 === 0) {
cell.classList.add("white");
} else {
cell.classList.add("black");
}
if (board[row] === col) {
cell.textContent = "♛";
if (conflicts.some(([r, c]) => r === row && c === col)) {
cell.classList.add("invalid");
}
}
cell.onclick = () => placeQueen(row, col);
}
boardDiv.appendChild(cell);
}
}
updateQueenList();
}
function placeQueen(row, col) {
if (board[row] === col) {
board[row] = -1;
} else {
board[row] = col;
}
drawBoard();
updateQueenList();
}
async function solve() {
const res = await fetch("/solve");
const solutions = await res.json();
board = solutions[0];
drawBoard();
}
function resetBoard() {
board = Array(8).fill(-1);
drawBoard();
updateQueenList();
}
drawBoard();
</script>
<div class="card">
<h3>📋 Damen Positionen</h3>
<ul id="queenList"></ul>
</div>
<script>
function updateQueenList() {
const list = document.getElementById("queenList");
list.innerHTML = "";
const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
let count = 1;
for (let row = 0; row < 8; row++) {
if (board[row] !== -1) {
let col = board[row];
let pos = letters[col] + (8 - row);
const li = document.createElement("li");
li.textContent = `Dame ${count}: ${pos}`;
list.appendChild(li);
count++;
}
}
}
</script>
<script src="../static/js/dashboard.js"></script>
</body>