From e8cb95be55fe306da929eea381195bc57e184974 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Sat, 30 May 2026 19:45:53 +0300
Subject: [PATCH] =?UTF-8?q?feat(chemistry7):=20=D0=B2=D0=B8=D0=B7=D1=83?=
 =?UTF-8?q?=D0=B0=D0=BB=20V2=20=E2=80=94=20=D0=B7=D0=B2=D1=91=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D1=84=D0=BB=D0=B0=D0=B3=D0=BC=D0=B0=D0=BD?=
 =?UTF-8?q?=20=C2=A715=20=C2=AB=D0=93=D0=BE=D1=80=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=C2=BB=20(=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Подключён chem7_anim.js в Главу 2. §15: статичное SVG-пламя заменено на
анимированный flameBox с достоверным цветом по веществу — углерод оранжевое,
сера синее, фосфор ярко-белое, железо/магний с искрами; продукт-оксид и
уравнение всплывают. Тесты chem7: 16/16 pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 backend/tests/chemistry7-page.test.js   |  1 +
 frontend/js/chem7_ch2_widgets.js        | 25 +++++++++++++++----------
 frontend/textbooks/chemistry_7_ch2.html |  1 +
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/backend/tests/chemistry7-page.test.js b/backend/tests/chemistry7-page.test.js
index 8d907b0..475df7e 100644
--- a/backend/tests/chemistry7-page.test.js
+++ b/backend/tests/chemistry7-page.test.js
@@ -171,6 +171,7 @@ test('ch2 Волна 1: интерактивы §13 + ЛО2 + §14 + §15 мон
   assert.ok(doc.querySelector('#p15-burn #p15-go'), 'симулятор горения §15');
   doc.defaultView.goTo('p15'); doc.getElementById('p15-go').dispatchEvent(new doc.defaultView.Event('click', { bubbles: true }));
   assert.match(doc.querySelector('#p15-out').textContent, /оксид/, 'горение даёт оксид');
+  assert.ok(doc.querySelector('#p15-stage div'), 'анимация пламени §15');
   assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
 });
 
diff --git a/frontend/js/chem7_ch2_widgets.js b/frontend/js/chem7_ch2_widgets.js
index 4109066..f8a7291 100644
--- a/frontend/js/chem7_ch2_widgets.js
+++ b/frontend/js/chem7_ch2_widgets.js
@@ -86,28 +86,33 @@
 
   /* §15 — симулятор горения: вещество + O₂ → оксид */
   var FUELS = [
-    { el:'C',  name:'углерод',  eq:'C + O2 = CO2',        note:'горит с образованием углекислого газа' },
-    { el:'S',  name:'сера',     eq:'S + O2 = SO2',        note:'горит синим пламенем, резкий запах' },
-    { el:'P',  name:'фосфор',   eq:'4P + 5O2 = 2P2O5',    note:'горит ярко, белый дым' },
-    { el:'Fe', name:'железо',   eq:'3Fe + 2O2 = Fe3O4',   note:'горит, разбрасывая искры' },
-    { el:'Mg', name:'магний',   eq:'2Mg + O2 = 2MgO',     note:'ослепительно яркое пламя' }
+    { el:'C',  name:'углерод',  eq:'C + O2 = CO2',        flame:'#f97316', sparks:false, note:'горит с образованием углекислого газа' },
+    { el:'S',  name:'сера',     eq:'S + O2 = SO2',        flame:'#3b82f6', sparks:false, note:'горит синим пламенем, резкий запах' },
+    { el:'P',  name:'фосфор',   eq:'4P + 5O2 = 2P2O5',    flame:'#fde68a', sparks:false, note:'горит ярко, с белым дымом' },
+    { el:'Fe', name:'железо',   eq:'3Fe + 2O2 = Fe3O4',   flame:'#f59e0b', sparks:true,  note:'горит, разбрасывая искры' },
+    { el:'Mg', name:'магний',   eq:'2Mg + O2 = 2MgO',     flame:'#e0f2fe', sparks:true,  note:'горит ослепительно ярким пламенем' }
   ];
   function flame(){
     return '<svg viewBox="0 0 60 70" width="56" height="66" style="vertical-align:middle"><path d="M30 8 C40 26 48 34 38 52 C46 46 46 60 30 64 C14 60 14 46 22 52 C12 34 22 26 30 8 Z" fill="#f97316"/><path d="M30 22 C36 34 40 40 33 52 C39 48 38 58 30 60 C22 58 22 50 26 52 C20 40 26 34 30 22 Z" fill="#fde047"/></svg>';
   }
   function mount_p15() {
     var m = $('p15-burn'); if (!m || m._built) return; m._built = 1;
-    var idx = 0;
+    var idx = 0, anim = null;
+    function stopAnim() { if (anim) { anim.stop(); anim = null; } }
     function render(){
-      var f = FUELS[idx];
+      stopAnim();
       m.innerHTML = '<div class="fld"><label>Вещество</label><select id="p15-pick">'
         + FUELS.map(function(x,i){ return '<option value="'+i+'"'+(i===idx?' selected':'')+'>'+esc(x.name)+' ('+x.el+')</option>'; }).join('') + '</select>'
         + '<button class="btn primary" id="p15-go">Поджечь в кислороде</button></div>'
+        + '<div id="p15-stage" style="margin:8px 0"></div>'
         + '<div class="out" id="p15-out" style="margin-top:8px">Выбери вещество и подожги его в кислороде.</div>';
-      $('p15-pick').addEventListener('change', function(e){ idx=+e.target.value; m._built=0; render(); });
+      $('p15-pick').addEventListener('change', function(e){ idx=+e.target.value; render(); });
       $('p15-go').addEventListener('click', function(){
-        var out = $('p15-out'); out.className='out ok';
-        out.innerHTML = flame() + ' <b>' + esc(f.name[0].toUpperCase()+f.name.slice(1)) + ' горит в кислороде:</b> ' + esc(f.note) + '.<br>'
+        var f = FUELS[idx], out = $('p15-out');
+        stopAnim();
+        if (W.Chem7Anim) anim = W.Chem7Anim.flameBox($('p15-stage'), { color: f.flame, sparks: f.sparks });
+        out.className='out ok';
+        out.innerHTML = '<b>' + esc(f.name[0].toUpperCase()+f.name.slice(1)) + ' горит в кислороде:</b> ' + esc(f.note) + '.<br>'
           + '<div style="margin-top:6px;font-size:1.05rem">' + ceq(f.eq) + '</div>'
           + '<div style="font-size:.84rem;color:var(--muted);margin-top:4px">Продукт — <b>оксид</b> (соединение элемента с кислородом).</div>';
       });
diff --git a/frontend/textbooks/chemistry_7_ch2.html b/frontend/textbooks/chemistry_7_ch2.html
index 078d227..ffea7ec 100644
--- a/frontend/textbooks/chemistry_7_ch2.html
+++ b/frontend/textbooks/chemistry_7_ch2.html
@@ -23,6 +23,7 @@ html.dark{--bg:#08191c;--border:#164e5b;--pri-soft:rgba(8,145,178,.18);--sec-acc
 <script src="/js/biochem-core.js" defer></script>
 <script src="/js/chem8_svg.js" defer></script>
 <script src="/js/chem7_svg.js" defer></script>
+<script src="/js/chem7_anim.js" defer></script>
 <script src="/js/chem7_ch2_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>