Merge pull request #11 from ScriptSorcerer20/10-acht-tuerme-algorithmus

implemented "acht-damen algorithmus", seperated javascript from html,…

app/routes/main_routes.py

@@ -1,5 +1,6 @@
 from flask import Blueprint, jsonify, render_template, request
 from flask_login  import login_required, current_user
+import random
 
 main_bp = Blueprint("main", __name__)
 
@@ -61,4 +62,14 @@ def solve():
                 board[row] = -1
 
     backtrack(0)
-    return jsonify(solutions)
+    return jsonify(solutions)
+
+@main_bp.route("/solve_rooks")
+def solve_rooks_route():
+    return jsonify(solve_rooks(8))
+
+def solve_rooks(n=8):
+    solution = list(range(n))
+    random.shuffle(solution)
+    return solution
+

app/static/css/dashboard.css

@@ -140,4 +140,16 @@ body {
     background: #f1f5f9;
     margin: 4px 0;
     border-radius: 6px;
+}
+
+.mode-switch {
+    margin-bottom: 15px;
+}
+
+.mode-switch .btn {
+    margin: 5px;
+}
+
+.btn.active {
+    background: #22c55e;
 }

app/static/js/dashboard.js

@@ -0,0 +1,199 @@
+let mode = "queens"; // oder "rooks"
+
+function setMode(newMode) {
+    mode = newMode;
+    resetBoard();
+
+    document.getElementById("btnQueens").classList.remove("active");
+    document.getElementById("btnRooks").classList.remove("active");
+
+    if (mode === "queens") {
+        document.getElementById("btnQueens").classList.add("active");
+    } else {
+        document.getElementById("btnRooks").classList.add("active");
+    }
+
+    drawBoard();
+}
+
+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];
+
+            // 🔴 Türme: nur gleiche Spalte
+            if (mode === "rooks") {
+                if (c1 === c2) {
+                    conflicts.push([r1, c1]);
+                    conflicts.push([r2, c2]);
+                }
+            }
+
+            // 🔴 Damen: Spalte + Diagonale
+            else if (mode === "queens") {
+                if (
+                    c1 === c2 ||
+                    Math.abs(c1 - c2) === Math.abs(r1 - r2)
+                ) {
+                    conflicts.push([r1, c1]);
+                    conflicts.push([r2, c2]);
+                }
+            }
+        }
+    }
+
+    return conflicts;
+}
+
+function checkSolution() {
+    const status = document.getElementById("statusMessage");
+
+    const allPlaced = board.every(col => col !== -1);
+
+    if (!allPlaced) {
+        status.textContent = "❗ Noch nicht alle Figuren platziert.";
+        status.style.color = "orange";
+        return;
+    }
+
+    const conflicts = getConflicts();
+
+    if (conflicts.length > 0) {
+        status.textContent = "❌ Es gibt Konflikte!";
+        status.style.color = "red";
+        return;
+    }
+
+    status.textContent = "🎉 Perfekt gelöst!";
+    status.style.color = "green";
+}
+
+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 = (mode === "queens") ? "♛" : "♜";
+
+                    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() {
+
+    if (mode === "rooks") {
+        const res = await fetch("/solve_rooks");
+        const solution = await res.json();
+
+        board = solution;
+        drawBoard();
+        return;
+    }
+
+    // Damen (wie vorher)
+    const res = await fetch("/solve");
+    const solution = await res.json();
+
+    board = Array.isArray(solution[0]) ? solution[0] : solution;
+    drawBoard();
+}
+
+
+function resetBoard() {
+    const status = document.getElementById("statusMessage");
+    board = Array(8).fill(-1);
+    drawBoard();
+    updateQueenList();
+    status.textContent = "";
+}
+
+drawBoard();
+
+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 = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${pos}`;
+
+            list.appendChild(li);
+            count++;
+        }
+    }
+}

app/templates/dashboard.html

@@ -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>
+    <script src="../static/js/dashboard.js"></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>
 
 </body>