217 lines
11 KiB
JavaScript
217 lines
11 KiB
JavaScript
// settings for preview board
|
|
const HERO_BOARD_SIZE = 8;
|
|
const heroBoard = document.getElementById("heroBoard");
|
|
|
|
//translation for English and German
|
|
const AppLanguage = window.AppLanguage;
|
|
const langSwitch = document.getElementById("langSwitch");
|
|
const initialLanguage = window.LANDING_INITIAL_LANGUAGE || "de";
|
|
let currentLanguage = initialLanguage;
|
|
|
|
const translations = {
|
|
de: {
|
|
"meta.title": "8-Damen- und 8-Türme Solver",
|
|
"nav.brand": "8-Damen- und 8-Türme-Löser",
|
|
"nav.problem": "Problem",
|
|
"nav.features": "Funktionen",
|
|
"nav.journey": "Ablauf",
|
|
"nav.login": "Anmelden",
|
|
"nav.signup": "Account erstellen",
|
|
"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 für Schritt, miss deine Zeit und speichere clevere Zwischenstände.",
|
|
"hero.primaryCta": "Jetzt starten",
|
|
"hero.secondaryCta": "Bereits ein Account? Anmelden",
|
|
"hero.fact1Title": "Skalierbar",
|
|
"hero.fact1Text": "Brettgrösse flexibel anpassen",
|
|
"hero.fact2Title": "Schritt für Schritt",
|
|
"hero.fact2Text": "Solver mit Animation",
|
|
"hero.fact3Title": "Speicherstände",
|
|
"hero.fact3Text": "Zeit und Fortschritt behalten",
|
|
"hero.solverLabel": "Lösungshelfer",
|
|
"hero.solverValue": "Backtracking in Echtzeit",
|
|
"hero.challengeLabel": "Herausforderung",
|
|
"hero.challengeValue": "Zeit und Schritte messen",
|
|
"problem.eyebrow": "Was ist das Acht-Damen-Problem?",
|
|
"problem.title": "Eine klassische schachmathematische Aufgabe mit überraschend vielen Lösungen.",
|
|
"problem.text": "Das Acht-Damen-Problem ist eine schachmathematische Aufgabe: Acht Damen sollen auf einem Schachbrett so aufgestellt werden, dass keine zwei Damen dieselbe Reihe, Spalte oder Diagonale teilen. Das Problem lässt sich auf beliebige Brettgrössen verallgemeinern, indem n Damen auf einem n x n-Brett platziert werden.<br><br>Für das klassische 8x8-Brett gibt es 92 Lösungen. Zählt man Stellungen, die nur durch Spiegelung oder Drehung entstehen, als gleich, bleiben 12 eindeutige Lösungen übrig.<br><br><a href=\"https://de-academic.com/dic.nsf/dewiki/13248\" target=\"_blank\" rel=\"noopener noreferrer\">Quelle: de-academic.com</a>",
|
|
"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 Lösungsweg Schritt für 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": "Speicherstände",
|
|
"features.card4Text": "Speichere Zwischenstände mit Notizen, Zeiten und Schrittzahl für 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 zum Dashboard, zu Speicherständen und zu 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": "Lösen oder analysieren",
|
|
"journey.step3Text": "Teste eigene Ideen oder lass dir die Lösung visuell vom Solver zeigen, damit du den Lösungsweg besser nachvollziehen kannst.",
|
|
"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": "Account erstellen",
|
|
"cta.secondaryCta": "Anmelden",
|
|
"footerText": "Schulprojekt rund um das Acht-Damen- und Acht-Türme-Problem.",
|
|
"footerPrivacy": "Datenschutzerklärung",
|
|
"footerImprint": "Impressum",
|
|
"footerNavAria": "Rechtliche Hinweise"
|
|
},
|
|
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": "Sign in",
|
|
"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? Sign in",
|
|
"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": "What is the Eight Queens problem?",
|
|
"problem.title": "A classic chess-related math puzzle with surprisingly many solutions.",
|
|
"problem.text": "The Eight Queens problem is a chess-related mathematical puzzle: eight queens must be placed on a chessboard so that no two queens share the same row, column, or diagonal. The idea can be generalized to boards of any size by placing n queens on an n x n board.<br><br>On the classic 8x8 board there are 92 solutions. If positions that only differ by reflection or rotation are counted as the same, 12 unique solutions remain.<br><br><a href=\"https://de-academic.com/dic.nsf/dewiki/13248\" target=\"_blank\" rel=\"noopener noreferrer\">Source: de-academic.com</a>",
|
|
"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": "Sign in",
|
|
"footerText": "School project about the Eight Queens and Eight Rooks problem.",
|
|
"footerPrivacy": "Privacy Policy",
|
|
"footerImprint": "Imprint",
|
|
"footerNavAria": "Legal information"
|
|
}
|
|
};
|
|
|
|
function t(key) {
|
|
return translations[currentLanguage]?.[key] ?? null;
|
|
}
|
|
|
|
function applyTranslations(language) {
|
|
currentLanguage = language;
|
|
|
|
AppLanguage.applyTranslations({
|
|
translate: (key) => t(key),
|
|
allowHtml: (element, translatedText) => element.tagName === "TITLE" || String(translatedText).includes("<br"),
|
|
attributeMappings: [
|
|
{
|
|
selector: "[data-i18n-aria-label]",
|
|
datasetKey: "i18nAriaLabel",
|
|
attribute: "aria-label"
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
const languageController = AppLanguage.createController({
|
|
button: langSwitch,
|
|
defaultLanguage: initialLanguage,
|
|
onApply(language, helpers) {
|
|
applyTranslations(language);
|
|
helpers.updateLanguageSwitch({
|
|
ariaLabel: language === "de" ? "Switch language to English" : "Sprache auf Deutsch wechseln",
|
|
title: language === "de" ? "Switch to English" : "Zu Deutsch wechseln"
|
|
});
|
|
}
|
|
});
|
|
|
|
languageController.init();
|
|
|
|
// ----------------------------------------------------------------------------------------
|
|
|
|
// simple pattern for preview board
|
|
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 createHeroBoard() {
|
|
if (!heroBoard) {
|
|
return;
|
|
}
|
|
|
|
heroBoard.innerHTML = "";
|
|
|
|
for (let row = 0; row < HERO_BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < HERO_BOARD_SIZE; col += 1) {
|
|
const cell = document.createElement("div");
|
|
cell.className = `board-cell ${(row + col) % 2 === 0 ? "light" : "dark"}`;
|
|
cell.dataset.row = String(row);
|
|
cell.dataset.col = String(col);
|
|
heroBoard.appendChild(cell);
|
|
}
|
|
}
|
|
}
|
|
|
|
function applyPattern(pattern) {
|
|
if (!heroBoard) {
|
|
return;
|
|
}
|
|
|
|
const cells = heroBoard.querySelectorAll(".board-cell");
|
|
|
|
cells.forEach((cell) => {
|
|
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]);
|
|
}
|
|
|
|
createHeroBoard();
|
|
applyPattern(queenPatterns[currentPatternIndex]);
|
|
|
|
if (heroBoard) {
|
|
window.setInterval(rotatePattern, 2200);
|
|
}
|