`;
return;
}
@@ -660,7 +1198,7 @@ function renderTimeHistory(savePoints) {
`${savePoint.board_size} x ${savePoint.board_size}`,
String(savePoint.step_count || 0),
formatDuration(savePoint.elapsed_seconds),
- savePoint.is_solved ? "Geloest" : "Offen",
+ savePoint.is_solved ? t("solvedMeta") : t("openMeta"),
savePoint.updated_at
];
@@ -698,7 +1236,7 @@ async function openSavePointsPanel() {
}
function applyLoadedGame(data) {
- discardSolverTrace(`${getPieceLabel(data.mode || "queens")}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
+ discardSolverTrace(t("solverReady", { modeLabel: getModeLabel(data.mode || "queens") }));
const restoredBoardSize = Array.isArray(data.board) ? clampBoardSize(data.board.length) : DEFAULT_BOARD_SIZE;
@@ -714,6 +1252,7 @@ function applyLoadedGame(data) {
});
updateModeButtons();
+ updateModeContent();
updateBoardSizeDisplays(boardSize);
drawBoard();
updateProgressDisplay();
@@ -742,7 +1281,7 @@ function applySolverStep(step) {
currentSolverHighlight = null;
}
- setSolverMessage(step.message || DEFAULT_SOLVER_MESSAGE);
+ setSolverMessage(step.message || getDefaultSolverMessage());
drawBoard();
persistCurrentSession();
updateSolverControls();
@@ -761,7 +1300,7 @@ function advanceSolverStep() {
if (hasCompletedSolverTrace()) {
finishSolvedRun();
stopSolverPlayback(false);
- setStatus(`Loesung fuer ${boardSize} x ${boardSize} Schritt fuer Schritt aufgebaut.`, "green");
+ setStatus(t("animationFinishedStatus", { size: boardSize }), "green");
updateSolverControls();
}
@@ -814,8 +1353,8 @@ async function prepareSolutionTrace() {
solverSteps = [];
solverStepIndex = -1;
currentSolverHighlight = null;
- setSolverMessage(`Berechne ${getPieceLabel(mode)}-Ablauf fuer ${boardSize} x ${boardSize}...`);
- setStatus(`Solver berechnet die Schritte fuer ${boardSize} x ${boardSize}.`, "#2563eb");
+ setSolverMessage(t("animationPreparing", { modeLabel: getModeLabel(mode), size: boardSize }));
+ setStatus(t("animationPreparingStatus", { size: boardSize }), "#2563eb");
updateSolverControls();
try {
@@ -837,19 +1376,15 @@ async function prepareSolutionTrace() {
currentSolverHighlight = null;
if (!trace.solved || solverSteps.length === 0) {
- setSolverMessage("Keine Loesung gefunden.");
- setStatus("Keine Loesung fuer dieses Brett gefunden.", "red");
+ setSolverMessage(t("noSolution"));
+ setStatus(t("noSolutionStatus"), "red");
drawBoard();
persistCurrentSession();
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");
+ setSolverMessage(t("animationReady", { steps: solverSteps.length, queensMode: mode === "queens" }));
+ setStatus(t("animationReadyStatus"), "#2563eb");
drawBoard();
return true;
} catch (error) {
@@ -857,8 +1392,8 @@ async function prepareSolutionTrace() {
return false;
}
- setSolverMessage("Der Solver-Ablauf konnte nicht geladen werden.");
- setStatus("Der Solver-Ablauf konnte nicht geladen werden.", "red");
+ setSolverMessage(t("animationLoadError"));
+ setStatus(t("animationLoadError"), "red");
return false;
} finally {
if (requestId === solverRequestId) {
@@ -886,7 +1421,7 @@ async function nextSolverStep() {
}
if (!advanceSolverStep()) {
- setStatus("Der Solver-Ablauf ist bereits abgeschlossen.", "#2563eb");
+ setStatus(t("animationAlreadyFinished"), "#2563eb");
}
}
@@ -897,7 +1432,7 @@ async function toggleSolverPlayback() {
if (isSolverPlaying()) {
stopSolverPlayback();
- setStatus("Solver-Animation pausiert.", "#2563eb");
+ setStatus(t("animationPaused"), "#2563eb");
return;
}
@@ -913,7 +1448,7 @@ async function toggleSolverPlayback() {
rewindSolverTrace();
}
- setStatus("Solver-Animation laeuft.", "#2563eb");
+ setStatus(t("animationRunning"), "#2563eb");
startSolverPlayback(true);
}
@@ -934,8 +1469,8 @@ async function instantSolve() {
solverSteps = [];
solverStepIndex = -1;
currentSolverHighlight = null;
- setSolverMessage(`Lade sofortige ${getPieceLabel(mode)}-Loesung fuer ${boardSize} x ${boardSize}...`);
- setStatus(`Sofortige Loesung wird geladen.`, "#2563eb");
+ setSolverMessage(t("instantLoading", { modeLabel: getModeLabel(mode), size: boardSize }));
+ setStatus(t("instantLoadingStatus"), "#2563eb");
updateSolverControls();
try {
@@ -954,8 +1489,8 @@ async function instantSolve() {
board = mode === "queens" && Array.isArray(solution[0]) ? solution[0].slice() : solution.slice();
currentSolverHighlight = null;
finishSolvedRun();
- setSolverMessage("Sofortige Loesung geladen. Starte Solve Step-by-Step, wenn du den Ablauf sehen moechtest.");
- setStatus(`Loesung fuer ${boardSize} x ${boardSize} sofort geladen.`, "green");
+ setSolverMessage(t("instantLoaded"));
+ setStatus(t("instantLoadedStatus", { size: boardSize }), "green");
drawBoard();
persistCurrentSession();
} catch (error) {
@@ -963,8 +1498,8 @@ async function instantSolve() {
return;
}
- setSolverMessage("Die sofortige Loesung konnte nicht geladen werden.");
- setStatus("Die sofortige Loesung konnte nicht geladen werden.", "red");
+ setSolverMessage(t("instantLoadError"));
+ setStatus(t("instantLoadError"), "red");
} finally {
if (requestId === solverRequestId) {
solverLoading = false;
@@ -977,7 +1512,7 @@ function resetBoard(options = {}) {
const {
statusMessageText = "",
statusColor = "",
- solverMessageText = `${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`
+ solverMessageText = t("solverReady", { modeLabel: getModeLabel(mode) })
} = options;
discardSolverTrace(solverMessageText);
@@ -996,7 +1531,6 @@ function resetBoard(options = {}) {
function updateQueenList() {
queenList.innerHTML = "";
-
let count = 1;
for (let row = 0; row < boardSize; row++) {
@@ -1008,10 +1542,20 @@ function updateQueenList() {
const position = `${getColumnLabel(col)}${boardSize - row}`;
const li = document.createElement("li");
- li.textContent = `${mode === "queens" ? "Dame" : "Turm"} ${count}: ${position}`;
+ li.textContent = `${getPieceLabel(mode)} ${count}: ${position}`;
queenList.appendChild(li);
count += 1;
}
+
+ const placedPieces = count - 1;
+ pieceCountBadge.textContent = t("pieceCount", { count: placedPieces });
+
+ if (placedPieces === 0) {
+ const emptyItem = document.createElement("li");
+ emptyItem.className = "empty";
+ emptyItem.textContent = t("pieceEmpty", { modeLabel: getModeLabel(mode) });
+ queenList.appendChild(emptyItem);
+ }
}
async function saveGame() {
@@ -1034,7 +1578,7 @@ async function saveGame() {
});
if (!response.ok) {
- setStatus("Der Speicherstand konnte nicht gespeichert werden.", "red");
+ setStatus(t("saveError"), "red");
return;
}
@@ -1043,7 +1587,7 @@ async function saveGame() {
toggleSavePanel(false);
await refreshSavePoints();
await refreshTimeHistory();
- setStatus(`Speicherpunkt "${data.save_point.save_name}" gespeichert.`, "green");
+ setStatus(t("saveSuccess", { name: data.save_point.save_name }), "green");
}
async function loadGame() {
@@ -1056,14 +1600,14 @@ async function loadSavePoint(savePointId) {
const response = await fetch(`/load/${savePointId}`);
if (!response.ok) {
- setStatus("Dieser Speicherstand konnte nicht geladen werden.", "red");
+ setStatus(t("loadError"), "red");
return;
}
const data = await response.json();
applyLoadedGame(data);
- setStatus(`Speicherpunkt "${data.save_name}" geladen.`, "green");
+ setStatus(t("loadSuccess", { name: data.save_name }), "green");
toggleSavePointsPanel(false);
}
@@ -1073,17 +1617,17 @@ async function toggleSavePointFavorite(savePointId) {
});
if (!response.ok) {
- setStatus("Favorit konnte nicht aktualisiert werden.", "red");
+ setStatus(t("favoriteError"), "red");
return;
}
await refreshSavePoints();
await refreshTimeHistory();
- setStatus("Favoritenstatus aktualisiert.", "#2563eb");
+ setStatus(t("favoriteSuccess"), "#2563eb");
}
async function deleteSavePoint(savePointId) {
- const confirmed = window.confirm("Diesen Speicherpunkt wirklich loeschen?");
+ const confirmed = window.confirm(t("deleteConfirm"));
if (!confirmed) {
return;
@@ -1094,13 +1638,13 @@ async function deleteSavePoint(savePointId) {
});
if (!response.ok) {
- setStatus("Speicherpunkt konnte nicht geloescht werden.", "red");
+ setStatus(t("deleteError"), "red");
return;
}
await refreshSavePoints();
await refreshTimeHistory();
- setStatus("Speicherpunkt geloescht.", "#2563eb");
+ setStatus(t("deleteSuccess"), "#2563eb");
}
function restoreSessionFromStorage() {
@@ -1122,6 +1666,7 @@ function restoreSessionFromStorage() {
currentSolverHighlight = null;
updateModeButtons();
+ updateModeContent();
updateBoardSizeDisplays(boardSize);
drawBoard();
resetProgress({
@@ -1137,12 +1682,13 @@ function restoreSessionFromStorage() {
}
async function initializeDashboard() {
+ currentLanguage = normalizeLanguage(getStoredLanguage() || detectBrowserLanguage());
pendingBoardSize = boardSize;
updateModeButtons();
updateBoardSizeDisplays(boardSize);
- updateSolverSpeed(solverSpeedMs);
- setSolverMessage(`${getPieceLabel(mode)}-Solver bereit. ${DEFAULT_SOLVER_MESSAGE}`);
- updateSolverControls();
+ applyLanguageContent();
+ updateSettingsTrigger(false);
+ setSolverMessage(t("solverReady", { modeLabel: getModeLabel(mode) }));
if (!restoreSessionFromStorage()) {
resetProgress();
@@ -1153,10 +1699,28 @@ async function initializeDashboard() {
await refreshTimeHistory();
}
+if (langSwitch) {
+ langSwitch.addEventListener("click", async () => {
+ currentLanguage = currentLanguage === "de" ? "en" : "de";
+ storeLanguage(currentLanguage);
+ applyLanguageContent();
+ resetSaveForm();
+ await refreshTimeHistory();
+
+ if (savePointsSidebar.classList.contains("open")) {
+ await refreshSavePoints();
+ }
+ });
+}
+
window.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeAllPanels();
}
});
+window.addEventListener("resize", () => {
+ drawBoard();
+});
+
initializeDashboard();
diff --git a/app/static/js/index.js b/app/static/js/index.js
new file mode 100644
index 0000000..be170c2
--- /dev/null
+++ b/app/static/js/index.js
@@ -0,0 +1,238 @@
+const HERO_BOARD_SIZE = 8;
+const heroBoard = document.getElementById("heroBoard");
+const langSwitch = document.getElementById("langSwitch");
+const supportedLanguages = ["de", "en"];
+const initialLanguage = window.LANDING_INITIAL_LANGUAGE || "de";
+
+const translations = {
+ de: {
+ "meta.title": "8-Damen- und 8-Türme Solver",
+ "nav.brand": "8-Damen- und 8-Türme Solver",
+ "nav.problem": "Problem",
+ "nav.features": "Features",
+ "nav.journey": "Ablauf",
+ "nav.login": "Login",
+ "nav.signup": "Create Account",
+ "hero.eyebrow": "Interaktives Lernen mit Strategie, Logik und Backtracking",
+ "hero.title": "Entdecke das Acht-Damen- und Acht-Türme-Problem.",
+ "hero.text": "Diese App macht aus einem klassischen Informatik- und Mathematikproblem ein interaktives Erlebnis: Setze Damen oder Türme, verfolge den Solver Schritt fuer Schritt, miss deine Zeit und speichere clevere Zwischenstände.",
+ "hero.primaryCta": "Jetzt starten",
+ "hero.secondaryCta": "Bereits Account? Login",
+ "hero.fact1Title": "Skalierbar",
+ "hero.fact1Text": "Brettgrösse flexibel anpassen",
+ "hero.fact2Title": "Schritt für Schritt",
+ "hero.fact2Text": "Solver mit Animation",
+ "hero.fact3Title": "Save-Points",
+ "hero.fact3Text": "Zeit und Fortschritt behalten",
+ "hero.solverLabel": "Solver",
+ "hero.solverValue": "Backtracking live",
+ "hero.challengeLabel": "Challenge",
+ "hero.challengeValue": "Zeit und Schritte messen",
+ "problem.eyebrow": "Warum dieses Problem spannend ist",
+ "problem.title": "Die Acht-Damen- und Acht-Türme-Probleme sind mehr als Schachrätsel.",
+ "problem.text": "Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich keine zwei Damen schlagen. Beim Acht-Tuerme-Problem gilt dieselbe Idee für Türme, nur mit einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und Backtracking funktionieren.
Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige moegliche Platzierungen, aber nur sehr wenige wirklich gültige Loesungen. Genau das macht diese App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.",
+ "features.eyebrow": "Was die Applikation bietet",
+ "features.title": "Von der Idee bis zur gelösten Stellung.",
+ "features.card1Title": "Interaktives Brett",
+ "features.card1Text": "Setze Damen oder Türme direkt auf dem Brett und prüfe, ob deine Anordnung konfliktfrei ist.",
+ "features.card2Title": "Solver mit Animation",
+ "features.card2Text": "Beobachte den Loesungsweg Schritt fuer Schritt und verstehe, wie Backtracking arbeitet.",
+ "features.card3Title": "Zeit und Schritte",
+ "features.card3Text": "Miss deinen Fortschritt während des Spiels und vergleiche unterschiedliche Versuche.",
+ "features.card4Title": "Save-Points",
+ "features.card4Text": "Speichere Zwischenstände mit Notizen, Zeiten und Schrittzahl fuer späteres Weiterarbeiten.",
+ "features.card5Title": "Skalierbare Bretter",
+ "features.card5Text": "Passe die Brettgrösse an und erkunde die Probleme nicht nur auf dem klassischen 8x8-Brett.",
+ "journey.eyebrow": "So funktioniert dein Einstieg",
+ "journey.title": "In wenigen Schritten vom ersten Besuch zur eigenen Lösung.",
+ "journey.step1Title": "Account erstellen",
+ "journey.step1Text": "Registriere dich und erhalte Zugang zu Dashboard, Save-Points und deinem Fortschritt.",
+ "journey.step2Title": "Spielmodus wählen",
+ "journey.step2Text": "Arbeite mit Damen oder Türmen und passe die Brettgrösse deinem Ziel an.",
+ "journey.step3Title": "Loesen oder analysieren",
+ "journey.step3Text": "Teste eigene Ideen oder lass dir die Lösung visuell vom Solver lösen lassen, dabei wird 1:1 gezeigt wie der Solver vorgeht.",
+ "cta.eyebrow": "Bereit für den ersten Versuch?",
+ "cta.title": "Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.",
+ "cta.text": "Starte mit einem Account, speichere deine Zwischenstände und finde heraus, wie schnell du eine konfliktfreie Lösung erreichst.",
+ "cta.primaryCta": "Create Account",
+ "cta.secondaryCta": "Login"
+ },
+ en: {
+ "meta.title": "8 Queens and 8 Rooks Solver",
+ "nav.brand": "8 Queens and 8 Rooks Solver",
+ "nav.problem": "Problem",
+ "nav.features": "Features",
+ "nav.journey": "Journey",
+ "nav.login": "Login",
+ "nav.signup": "Create Account",
+ "hero.eyebrow": "Interactive learning with strategy, logic, and backtracking",
+ "hero.title": "Discover the Eight Queens and Eight Rooks puzzle.",
+ "hero.text": "This app turns a classic computer science and mathematics problem into an interactive experience: place queens or rooks, follow the solver step by step, track your time, and save clever checkpoints.",
+ "hero.primaryCta": "Get Started",
+ "hero.secondaryCta": "Already have an account? Login",
+ "hero.fact1Title": "Scalable",
+ "hero.fact1Text": "Adjust the board size freely",
+ "hero.fact2Title": "Step by step",
+ "hero.fact2Text": "Animated solver walkthrough",
+ "hero.fact3Title": "Save points",
+ "hero.fact3Text": "Keep your time and progress",
+ "hero.solverLabel": "Solver",
+ "hero.solverValue": "Backtracking in motion",
+ "hero.challengeLabel": "Challenge",
+ "hero.challengeValue": "Measure time and steps",
+ "problem.eyebrow": "Why this puzzle matters",
+ "problem.title": "The Eight Queens and Eight Rooks problems are more than chess puzzles.",
+ "problem.text": "In the Eight Queens problem, you search for a way to place eight queens on a chessboard so that no two queens can attack each other. The Eight Rooks problem follows the same idea for rooks, but with simpler conflict rules. Both tasks show how pattern recognition, systematic search, and backtracking work.
The queens puzzle quickly makes it obvious why strategy matters: there are countless possible placements, but only a few truly valid solutions. That is what makes this app interesting, because you do not just see the result, you also see the path to it.",
+ "features.eyebrow": "What the application offers",
+ "features.title": "From the first idea to a solved position.",
+ "features.card1Title": "Interactive board",
+ "features.card1Text": "Place queens or rooks directly on the board and check whether your setup is conflict-free.",
+ "features.card2Title": "Animated solver",
+ "features.card2Text": "Watch the solving path step by step and understand how backtracking works.",
+ "features.card3Title": "Time and steps",
+ "features.card3Text": "Track your progress during play and compare different attempts.",
+ "features.card4Title": "Save points",
+ "features.card4Text": "Store checkpoints with notes, time, and step count so you can continue later.",
+ "features.card5Title": "Scalable boards",
+ "features.card5Text": "Adjust the board size and explore the puzzle beyond the classic 8x8 board.",
+ "journey.eyebrow": "How your first session works",
+ "journey.title": "Reach your own solution in just a few steps.",
+ "journey.step1Title": "Create an account",
+ "journey.step1Text": "Sign up and unlock the dashboard, save points, and your tracked progress.",
+ "journey.step2Title": "Choose a game mode",
+ "journey.step2Text": "Work with queens or rooks and tune the board size to your goal.",
+ "journey.step3Title": "Solve or analyze",
+ "journey.step3Text": "Test your own ideas or let the solver show the solution visually, with a 1:1 view of each solving step.",
+ "cta.eyebrow": "Ready for your first attempt?",
+ "cta.title": "Turn a famous puzzle into a visible learning experience.",
+ "cta.text": "Start with an account, save your checkpoints, and find out how quickly you can reach a conflict-free solution.",
+ "cta.primaryCta": "Create Account",
+ "cta.secondaryCta": "Login"
+ }
+};
+
+const queenPatterns = [
+ [0, 4, 7, 5, 2, 6, 1, 3],
+ [1, 3, 5, 7, 2, 0, 6, 4],
+ [2, 5, 7, 0, 3, 6, 4, 1]
+];
+
+let currentPatternIndex = 0;
+
+function normalizeLanguage(language) {
+ const shortLanguage = String(language || "").trim().slice(0, 2).toLowerCase();
+ return supportedLanguages.includes(shortLanguage) ? shortLanguage : "de";
+}
+
+function getStoredLanguage() {
+ try {
+ return window.localStorage.getItem("preferredLanguage");
+ } catch (error) {
+ return null;
+ }
+}
+
+function storeLanguage(language) {
+ try {
+ window.localStorage.setItem("preferredLanguage", language);
+ } catch (error) {
+ return;
+ }
+}
+
+function detectBrowserLanguage() {
+ const browserLanguage = navigator.language || navigator.userLanguage || initialLanguage;
+ return normalizeLanguage(browserLanguage);
+}
+
+function setLanguage(language) {
+ const resolvedLanguage = normalizeLanguage(language);
+ const dictionary = translations[resolvedLanguage];
+ const i18nElements = document.querySelectorAll("[data-i18n]");
+
+ document.documentElement.lang = resolvedLanguage;
+ document.body.dataset.language = resolvedLanguage;
+
+ i18nElements.forEach((element) => {
+ const key = element.dataset.i18n;
+ const translatedText = dictionary[key];
+
+ if (!translatedText) {
+ return;
+ }
+
+ if (element.tagName === "TITLE" || translatedText.includes(" {
+ const row = Number(cell.dataset.row);
+ const col = Number(cell.dataset.col);
+ const hasQueen = pattern[row] === col;
+
+ cell.classList.toggle("queen", hasQueen);
+ cell.classList.toggle("highlight", hasQueen);
+ });
+}
+
+function rotatePattern() {
+ currentPatternIndex = (currentPatternIndex + 1) % queenPatterns.length;
+ applyPattern(queenPatterns[currentPatternIndex]);
+}
+
+if (langSwitch) {
+ langSwitch.addEventListener("click", () => {
+ const nextLanguage = document.documentElement.lang === "de" ? "en" : "de";
+ setLanguage(nextLanguage);
+ });
+}
+
+createHeroBoard();
+applyPattern(queenPatterns[currentPatternIndex]);
+setLanguage(getPreferredLanguage());
+
+if (heroBoard) {
+ window.setInterval(rotatePattern, 2200);
+}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 93129e1..c1c37c9 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -10,18 +10,39 @@
+