@

feat(chemistry-8): Phase 1 — раздел «Количественные понятия» (§1–9 + ПР1)

Полноценная интерактивная страница chemistry_8_intro.html (9 § + ПР1 + босс):
- §1 карта элементов (Z, название, Ar), §2 калькулятор Mr по формуле
- §3 «порция вещества» n⇒N,m, §4 счётчик частиц N=n·N_A, §5 M+молярный объём
- §6 звёздный виджет: интерактивный треугольник n–m–M
- §7 универсальный калькулятор газа (m–n–V–N), §8 балансировщик уравнений
- §9 пошаговый решатель по уравнению; босс раздела (4 задачи) + ачивка «Счёт в химии»
- прогресс/XP через /api/textbooks/chemistry-8-intro/progress, scrollspy, тема

chem8_svg.js: реализованы движки — molarMass (школьные Ar: Mr(H2O)=18),
elementCounts, moleTriangle, equationBalancer (+ fmt, arOf).

Фикс порядка загрузки: инициализация обёрнута в DOMContentLoaded (defer-скрипты
готовы к этому моменту). Генератор каркасов получил skip-if-exists (--force для перезаписи).

Тесты: chemistry8.test.js (14) + chemistry8-dom.test.js (jsdom-смоук виджетов, 3) — 17/17.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@

frontend/js/chem8_svg.js

@@ -102,6 +102,254 @@
     });
   }
 
+  /* ── Относительные атомные массы Ar (школьно-округлённые, как в учебнике РБ).
+     Намеренно НЕ берём точные массы biochem-core: для 8 класса Mr(H₂O)=18,
+     Mr(CaCO₃)=100 и т. п. — иначе расходимся с ответами учебника. ── */
+  var AR = {
+    H:1, He:4, Li:7, Be:9, B:11, C:12, N:14, O:16, F:19, Ne:20,
+    Na:23, Mg:24, Al:27, Si:28, P:31, S:32, Cl:35.5, Ar:40, K:39, Ca:40,
+    Sc:45, Ti:48, V:51, Cr:52, Mn:55, Fe:56, Co:59, Ni:59, Cu:64, Zn:65,
+    Ga:70, Ge:73, As:75, Se:79, Br:80, Kr:84, Rb:85, Sr:88, Ag:108, Cd:112,
+    Sn:119, Sb:122, I:127, Xe:131, Ba:137, Pt:195, Au:197, Hg:201, Pb:207, Bi:209
+  };
+  function arOf(sym) {
+    if (Object.prototype.hasOwnProperty.call(AR, sym)) return AR[sym];
+    // запасной путь — точная масса из biochem-core, если элемента нет в школьной таблице
+    if (global.BIO && global.BIO.ELEMENTS && global.BIO.ELEMENTS[sym]) {
+      return Math.round(global.BIO.ELEMENTS[sym].mass);
+    }
+    return 0;
+  }
+
+  /* elementCounts('Ca(OH)2') -> {Ca:1, O:2, H:2} (скобки и индексы) */
+  function elementCounts(str) {
+    var out = {}, stack = [out];
+    var re = /([A-Z][a-z]?)(\d*)|(\()|(\))(\d*)/g, m;
+    while ((m = re.exec(str)) !== null) {
+      if (m[1]) {
+        var n = m[2] ? parseInt(m[2], 10) : 1;
+        var top = stack[stack.length - 1];
+        top[m[1]] = (top[m[1]] || 0) + n;
+      } else if (m[3]) {
+        stack.push({});
+      } else if (m[4] !== undefined) {
+        var grp = stack.pop(), mult = m[5] ? parseInt(m[5], 10) : 1, t2 = stack[stack.length - 1];
+        for (var k in grp) t2[k] = (t2[k] || 0) + grp[k] * mult;
+      }
+    }
+    return out;
+  }
+
+  /* molarMass('CaCO3') -> 100 (г/моль), на школьных Ar. NaN при неизвестном элементе. */
+  function molarMass(str) {
+    var c = elementCounts(String(str || '').replace(/\s+/g, ''));
+    var keys = Object.keys(c);
+    if (!keys.length) return NaN;
+    var m = 0;
+    for (var i = 0; i < keys.length; i++) {
+      var a = arOf(keys[i]);
+      if (!a) return NaN;
+      m += a * c[keys[i]];
+    }
+    return Math.round(m * 1000) / 1000;
+  }
+
+  /* Округление до значащих для вывода (избегаем 18.000000002). */
+  function fmt(x, d) {
+    if (!isFinite(x)) return '—';
+    var p = Math.pow(10, d == null ? 3 : d);
+    return String(Math.round(x * p) / p);
+  }
+
+  /* ──────────────────────────────────────────────────────────────────────────
+     moleTriangle(mount, opts) — интерактивный калькулятор-треугольник n–m–M.
+     Пользователь вводит любые два из {n, m, M} — третье считается (n=m/M,
+     m=n·M, M=m/n). opts.substance — предзаполнить M по формуле (через molarMass).
+     Возвращает {el, get, set}. Без setPointerCapture, чистый DOM.
+  ────────────────────────────────────────────────────────────────────────── */
+  function moleTriangle(mount, opts) {
+    var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
+    if (!host) return null;
+    opts = opts || {};
+    var state = { n: '', m: '', M: opts.substance ? molarMass(opts.substance) : '' };
+    var lastEdited = [];   // последние два редактированных поля → третье вычисляем
+
+    host.innerHTML =
+      '<div class="mtri">' +
+        '<svg class="mtri-svg" viewBox="0 0 200 150" aria-hidden="true">' +
+          '<polygon points="100,14 18,140 182,140" fill="none" stroke="currentColor" stroke-width="2" opacity=".5"/>' +
+          '<line x1="59" y1="77" x2="141" y2="77" stroke="currentColor" stroke-width="1.5" opacity=".4"/>' +
+          '<text x="100" y="52" text-anchor="middle" font-size="26" font-weight="800" fill="currentColor">m</text>' +
+          '<text x="62" y="124" text-anchor="middle" font-size="22" font-weight="800" fill="currentColor">n</text>' +
+          '<text x="140" y="124" text-anchor="middle" font-size="22" font-weight="800" fill="currentColor">M</text>' +
+        '</svg>' +
+        '<div class="mtri-fields">' +
+          fieldHtml('n', 'n, моль', 'химическое количество') +
+          fieldHtml('m', 'm, г', 'масса вещества') +
+          fieldHtml('M', 'M, г/моль', 'молярная масса') +
+        '</div>' +
+        '<div class="mtri-out" data-out>Введите любые два значения — третье вычислится.</div>' +
+      '</div>';
+
+    function fieldHtml(key, label, hint) {
+      return '<label class="mtri-f"><span class="mtri-lab">' + label + '</span>' +
+        '<input type="text" inputmode="decimal" data-k="' + key + '" placeholder="?" ' +
+        'title="' + hint + '"></label>';
+    }
+
+    var inputs = host.querySelectorAll('input[data-k]');
+    var out = host.querySelector('[data-out]');
+
+    function num(v) { var x = parseFloat(String(v).replace(',', '.')); return isFinite(x) ? x : null; }
+
+    function recompute(changedKey) {
+      if (lastEdited[0] !== changedKey) { lastEdited.unshift(changedKey); lastEdited = lastEdited.slice(0, 2); }
+      var known = ['n', 'm', 'M'].filter(function (k) { return num(state[k]) !== null; });
+      // целевое поле — то, что НЕ редактировали последним и пусто/производно
+      var target = ['n', 'm', 'M'].filter(function (k) { return lastEdited.indexOf(k) === -1; })[0];
+      if (!target) return;
+      var n = num(state.n), m = num(state.m), M = num(state.M);
+      var res = null, formula = '';
+      if (target === 'n' && m !== null && M) { res = m / M; formula = 'n = m / M = ' + fmt(m) + ' / ' + fmt(M); }
+      else if (target === 'm' && n !== null && M !== null) { res = n * M; formula = 'm = n · M = ' + fmt(n) + ' · ' + fmt(M); }
+      else if (target === 'M' && m !== null && n) { res = m / n; formula = 'M = m / n = ' + fmt(m) + ' / ' + fmt(n); }
+      if (res === null) {
+        out.className = 'mtri-out';
+        out.textContent = (known.length >= 2)
+          ? 'Проверьте: на ноль делить нельзя.'
+          : 'Введите любые два значения — третье вычислится.';
+        return;
+      }
+      var unit = target === 'n' ? ' моль' : target === 'm' ? ' г' : ' г/моль';
+      setField(target, fmt(res));
+      out.className = 'mtri-out ok';
+      out.innerHTML = '<b>' + target + ' = ' + fmt(res) + unit + '</b><span class="mtri-form">' + formula + '</span>';
+    }
+
+    function setField(key, val) {
+      state[key] = val;
+      for (var i = 0; i < inputs.length; i++) {
+        if (inputs[i].getAttribute('data-k') === key && global.document.activeElement !== inputs[i]) {
+          inputs[i].value = val;
+        }
+      }
+    }
+
+    for (var i = 0; i < inputs.length; i++) {
+      (function (inp) {
+        inp.addEventListener('input', function () {
+          var k = inp.getAttribute('data-k');
+          state[k] = inp.value;
+          // если поле очистили — сбросить производное
+          recompute(k);
+        });
+      })(inputs[i]);
+    }
+
+    if (state.M) setField('M', fmt(state.M));
+
+    return {
+      el: host,
+      get: function () { return { n: num(state.n), m: num(state.m), M: num(state.M) }; },
+      set: function (k, v) { setField(k, String(v)); recompute(k === 'n' ? 'm' : 'n'); }
+    };
+  }
+
+  /* ──────────────────────────────────────────────────────────────────────────
+     equationBalancer(mount, {skeleton}) — проверка расстановки коэффициентов.
+     skeleton: 'H2 + O2 -> H2O'. Рендерит поля коэффициентов перед каждым
+     веществом, кнопку «Проверить»; считает баланс атомов по сторонам и
+     подсвечивает несбалансированные элементы. opts.solution — массив верных
+     коэффициентов (для кнопки «Показать решение»).
+  ────────────────────────────────────────────────────────────────────────── */
+  function equationBalancer(mount, opts) {
+    var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
+    if (!host) return null;
+    opts = opts || {};
+    var skel = String(opts.skeleton || '');
+    var sides = skel.split(/->|=|→/);
+    var left = parseSide(sides[0] || ''), right = parseSide(sides[1] || '');
+    var all = left.concat(right);
+
+    host.innerHTML =
+      '<div class="ceqb">' +
+        '<div class="ceqb-row" data-eq>' +
+          renderSpecies(left) + '<span class="ceqb-arrow">→</span>' + renderSpecies(right) +
+        '</div>' +
+        '<div class="ceqb-actions">' +
+          '<button type="button" class="ceqb-btn primary" data-check>Проверить</button>' +
+          (opts.solution ? '<button type="button" class="ceqb-btn" data-solve>Показать решение</button>' : '') +
+          '<button type="button" class="ceqb-btn" data-reset>Сброс</button>' +
+        '</div>' +
+        '<div class="ceqb-out" data-out></div>' +
+      '</div>';
+
+    function renderSpecies(list) {
+      return list.map(function (sp, i) {
+        var gi = all.indexOf(sp);
+        return (i ? '<span class="ceqb-plus">+</span>' : '') +
+          '<span class="ceqb-sp"><input type="number" min="1" step="1" class="ceqb-coef" ' +
+          'data-i="' + gi + '" value="1"><span class="ceqb-f">' + formula(sp.raw) + '</span></span>';
+      }).join('');
+    }
+
+    var out = host.querySelector('[data-out]');
+    var coefs = host.querySelectorAll('.ceqb-coef');
+
+    function getCoef(i) { var v = parseInt((coefs[i] && coefs[i].value) || '1', 10); return v > 0 ? v : 1; }
+
+    function tally(list, fromIdx) {
+      var acc = {};
+      list.forEach(function (sp, j) {
+        var c = getCoef(all.indexOf(sp));
+        for (var e in sp.counts) acc[e] = (acc[e] || 0) + sp.counts[e] * c;
+      });
+      return acc;
+    }
+
+    function check() {
+      var L = tally(left), R = tally(right);
+      var elems = {}; Object.keys(L).forEach(function (e) { elems[e] = 1; }); Object.keys(R).forEach(function (e) { elems[e] = 1; });
+      var rows = '', ok = true;
+      Object.keys(elems).sort().forEach(function (e) {
+        var l = L[e] || 0, r = R[e] || 0, eq = l === r;
+        if (!eq) ok = false;
+        rows += '<tr class="' + (eq ? 'eq' : 'ne') + '"><td>' + e + '</td><td>' + l + '</td><td>' + r + '</td>' +
+          '<td>' + (eq ? '✓' : '≠') + '</td></tr>';
+      });
+      out.className = 'ceqb-out ' + (ok ? 'ok' : 'bad');
+      out.innerHTML = (ok ? '<div class="ceqb-msg">Уравнение сбалансировано.</div>'
+                          : '<div class="ceqb-msg">Не сходится — выровняйте выделенные элементы.</div>') +
+        '<table class="ceqb-tab"><thead><tr><th>Элемент</th><th>Слева</th><th>Справа</th><th></th></tr></thead><tbody>' +
+        rows + '</tbody></table>';
+      return ok;
+    }
+
+    var btnCheck = host.querySelector('[data-check]');
+    var btnSolve = host.querySelector('[data-solve]');
+    var btnReset = host.querySelector('[data-reset]');
+    if (btnCheck) btnCheck.addEventListener('click', check);
+    if (btnReset) btnReset.addEventListener('click', function () {
+      for (var i = 0; i < coefs.length; i++) coefs[i].value = '1';
+      out.className = 'ceqb-out'; out.innerHTML = '';
+    });
+    if (btnSolve && opts.solution) btnSolve.addEventListener('click', function () {
+      for (var i = 0; i < coefs.length && i < opts.solution.length; i++) coefs[i].value = String(opts.solution[i]);
+      check();
+    });
+
+    return { el: host, check: check };
+  }
+
+  /* 'H2 + O2' -> [{raw:'H2', counts:{H:2}}, {raw:'O2', counts:{O:2}}] */
+  function parseSide(side) {
+    return String(side).split('+').map(function (t) { return t.trim(); }).filter(Boolean)
+      .map(function (raw) {
+        var r = raw.replace(/^\d+/, '').trim();   // коэффициент в скелете игнорируем
+        return { raw: r, counts: elementCounts(r) };
+      });
+  }
+
   /* ---- Каркасы-заглушки интерактивных виджетов (реализуются по фазам) ---- */
   function notImplemented(name) {
     return function () {
@@ -119,10 +367,15 @@
     chemEq: chemEq,
     toSub: toSub,
     toSup: toSup,
-    // заглушки (см. план, разд. B) — наполняются в Phase 1–6
+    // готово (Phase 1 — движки расчётов)
+    elementCounts: elementCounts,
+    molarMass: molarMass,          // school-rounded Ar: Mr(H2O)=18
+    arOf: arOf,
+    fmt: fmt,
+    moleTriangle: moleTriangle,    // §6 — треугольник n–m–M
+    equationBalancer: equationBalancer, // §8 — балансировщик уравнений
+    // заглушки (см. план, разд. B) — наполняются в Phase 2–6
     testTube:         notImplemented('testTube'),        // §18,25 — пробирка: осадок/газ/окраска
-    moleTriangle:     notImplemented('moleTriangle'),    // §6 — треугольник n–m–M
-    equationBalancer: notImplemented('equationBalancer'),// §8 — балансировщик уравнений
     oxStateCalc:      notImplemented('oxStateCalc'),     // §42 — калькулятор степени окисления
     redoxBalancer:    notImplemented('redoxBalancer'),   // §44 — e-баланс ОВР
     orbitalDiagram:   notImplemented('orbitalDiagram'),  // §33 — орбитальная диаграмма