From 159f4197ae5486ea6b318445fc15a282135fd924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Fri, 17 Jul 2026 23:44:44 +0300 Subject: [PATCH] theory pages added --- app.js | 69 +++++++++++++++++++++++++++++++++++++++++ index.html | 32 +++++++++++++++++-- styles.css | 66 +++++++++++++++++++++++++++++++++++++++ sw.js | 3 +- theory/base3.en.html | 8 +++++ theory/base3.ru.html | 8 +++++ theory/binary.en.html | 9 ++++++ theory/binary.ru.html | 9 ++++++ theory/braille.en.html | 9 ++++++ theory/braille.ru.html | 9 ++++++ theory/greek.en.html | 15 +++++++++ theory/greek.ru.html | 15 +++++++++ theory/hebrew.en.html | 22 +++++++++++++ theory/hebrew.ru.html | 22 +++++++++++++ theory/hex.en.html | 8 +++++ theory/hex.ru.html | 8 +++++ theory/octal.en.html | 8 +++++ theory/octal.ru.html | 8 +++++ theory/roman.en.html | 11 +++++++ theory/roman.ru.html | 11 +++++++ theory/slavonic.en.html | 15 +++++++++ theory/slavonic.ru.html | 15 +++++++++ theory/ternary.en.html | 11 +++++++ theory/ternary.ru.html | 11 +++++++ 24 files changed, 398 insertions(+), 4 deletions(-) create mode 100644 theory/base3.en.html create mode 100644 theory/base3.ru.html create mode 100644 theory/binary.en.html create mode 100644 theory/binary.ru.html create mode 100644 theory/braille.en.html create mode 100644 theory/braille.ru.html create mode 100644 theory/greek.en.html create mode 100644 theory/greek.ru.html create mode 100644 theory/hebrew.en.html create mode 100644 theory/hebrew.ru.html create mode 100644 theory/hex.en.html create mode 100644 theory/hex.ru.html create mode 100644 theory/octal.en.html create mode 100644 theory/octal.ru.html create mode 100644 theory/roman.en.html create mode 100644 theory/roman.ru.html create mode 100644 theory/slavonic.en.html create mode 100644 theory/slavonic.ru.html create mode 100644 theory/ternary.en.html create mode 100644 theory/ternary.ru.html diff --git a/app.js b/app.js index 0629f6e..1e10c0e 100644 --- a/app.js +++ b/app.js @@ -6,6 +6,7 @@ const STRINGS = { en: { subtitle: 'Numeral systems trainer', startGame: 'Start', + theory: 'Theory', chooseSystem: 'Choose numeral system', positional: 'Positional', nonPositional: 'Non-Positional', @@ -46,6 +47,7 @@ const STRINGS = { ru: { subtitle: '\u0422\u0440\u0435\u043D\u0430\u0436\u0435\u0440 \u0441\u0438\u0441\u0442\u0435\u043C \u0441\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F', startGame: 'Начать', + theory: '\u0422\u0435\u043E\u0440\u0438\u044F', chooseSystem: '\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u0438\u0441\u0442\u0435\u043C\u0443 \u0441\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F', positional: '\u041F\u043E\u0437\u0438\u0446\u0438\u043E\u043D\u043D\u044B\u0435', nonPositional: '\u041D\u0435\u043F\u043E\u0437\u0438\u0446\u0438\u043E\u043D\u043D\u044B\u0435', @@ -185,6 +187,8 @@ const SYSTEM_GROUPS = { nonpos: ['roman', 'greek', 'slavonic', 'hebrew'], }; +const theoryCache = {}; + const MODES = [ { labelKey: 'choose', value: 'choice' }, { labelKey: 'type', value: 'manual' }, @@ -700,6 +704,59 @@ function spawnConfetti() { } } +// ---- THEORY ---- + +async function loadTheory(key) { + if (theoryCache[key]) return theoryCache[key]; + try { + const resp = await fetch(`theory/${key}.${LANG}.html`); + if (!resp.ok) throw new Error(resp.status); + const html = await resp.text(); + theoryCache[key] = html; + return html; + } catch { + if (LANG !== 'en') { + try { + const resp = await fetch(`theory/${key}.en.html`); + const html = await resp.text(); + theoryCache[key] = html; + return html; + } catch { return null; } + } + return null; + } +} + +function renderTheorySystem() { + const posDiv = document.getElementById('theory-systems-pos'); + const nonposDiv = document.getElementById('theory-systems-nonpos'); + posDiv.innerHTML = ''; + nonposDiv.innerHTML = ''; + + for (const [group, keys] of Object.entries(SYSTEM_GROUPS)) { + const target = group === 'pos' ? posDiv : nonposDiv; + keys.forEach(key => { + const btn = document.createElement('button'); + btn.className = 'option-btn'; + btn.textContent = systemName(key); + btn.addEventListener('click', () => showTheoryContent(key)); + target.appendChild(btn); + }); + } + + showScreen('theory-system'); +} + +async function showTheoryContent(key) { + const html = await loadTheory(key); + if (!html) return; + + document.getElementById('theory-title').textContent = systemName(key); + document.getElementById('theory-scroll').innerHTML = html; + + showScreen('theory-content'); +} + // ---- INIT ---- const SUBSCRIPTS = { '0':'\u2080', '1':'\u2081', '2':'\u2082', '3':'\u2083', @@ -875,6 +932,18 @@ document.getElementById('btn-results-menu').addEventListener('click', () => { showScreen('menu'); }); +document.getElementById('btn-theory').addEventListener('click', () => { + renderTheorySystem(); +}); + +document.getElementById('btn-theory-back').addEventListener('click', () => { + showScreen('menu'); +}); + +document.getElementById('btn-theory-content-back').addEventListener('click', () => { + renderTheorySystem(); +}); + document.getElementById('btn-stop').addEventListener('click', () => { stopTimer(); endGame(); diff --git a/index.html b/index.html index 1adfce8..777268a 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - +
@@ -24,6 +24,7 @@
+