From e85f7135ff73b158b6a44d6a4f7284c0739145e0 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Sat, 30 May 2026 10:12:29 +0300 Subject: [PATCH] =?UTF-8?q?feat(phys8=20ch1):=20Phase=201.3=20=E2=80=94=20?= =?UTF-8?q?IV-6=20=D0=B4=D0=BB=D1=8F=20=C2=A72,=20=C2=A74,=20=C2=A75,=20?= =?UTF-8?q?=C2=A77,=20=C2=A79,=20=C2=A710,=20=C2=A711?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Заменены оставшиеся stub'ы (Phase 1. coming soon) на реальные интерактивы. Все 11 параграфов Ch1 теперь имеют flagship IV-6. §2 Способы изменения U — Drag-piston: - Цилиндр с газом, движущийся поршень (scrubber сжатия 0-100%). - Scrubber Q для подачи тепла. Молекулы рисуются динамически (количество ∝ T). Цвет газа по T через P8Helpers.thermal.tempColor. - Readouts T (°C), U (отн.). §4 Конвекция — Animated convection cell: - Canvas-симуляция с 60 частицами, P8Anim.raf. - Поток вверх по центру (нагретая лёгкая вода), вниз по краям. - Скорость потоков ∝ мощности горелки (scrubber). Цвет частиц по локальной T. Кнопки Пуск/Стоп. §5 Излучение — Radiation balance: - Лампа с 3 телами (чёрное, белое, зеркало) разной поглощающей способности (0.95, 0.20, 0.05). - Scrubber мощности лампы. Симуляция P8Anim.raf: T каждого тела растёт ∝ absorption × power. Glow вокруг тёплых тел. §7 Q=qm — Fuel burn: - 3 кнопки палитры топлива (дрова q=10, уголь q=29, газ q=44 МДж/кг). - Кастрюля с водой 1 кг. Сжигание выбранного топлива + scrubber массы. - Q = qm, ΔT = Q/(c·m_в). Пар над кастрюлей при ΔT > 60°C. §9 Q=λm — λ-meter: - Select веществ (лёд, свинец, алюминий, железо) + scrubber массы. - SVG: блок вещества + grad-arrow (Q) + расплав. Q = λ·m в реальном времени. §10 Скорость испарения — 3-scrubber sandbox: - T (0-100°C), площадь (0.01-1 м²), ветер (0-10 м/с). - Стрелки испарения вверх с количеством ∝ rate; наклон ∝ ветру. - Качественная демонстрация трёх факторов. §11 Скороварка — Pressure cooker: - Canvas: кастрюля с водой, динамические пузыри. - Scrubber давления 0.5-3 атм. T_кип = 100 + 20·log₂(p). - Пар, T-индикатор столбиком. Все интерактивы +10 XP при первом использовании. Builders все на месте, JS парсится. --- backend/scripts/redesign_p8_ch1_3.cjs | 612 ++++++++++++++++++++++++++ frontend/textbooks/physics_8_ch1.html | 539 +++++++++++++++++++++-- 2 files changed, 1109 insertions(+), 42 deletions(-) create mode 100644 backend/scripts/redesign_p8_ch1_3.cjs diff --git a/backend/scripts/redesign_p8_ch1_3.cjs b/backend/scripts/redesign_p8_ch1_3.cjs new file mode 100644 index 0000000..7de8c7b --- /dev/null +++ b/backend/scripts/redesign_p8_ch1_3.cjs @@ -0,0 +1,612 @@ +// Phase 1.3 — заменяет оставшиеся IV-6 stubs §2, §4, §5, §7, §9, §10, §11 +// на реальные интерактивы. +'use strict'; +const fs = require('fs'); +const path = require('path'); + +const DST = path.join(__dirname, '..', '..', 'frontend', 'textbooks', 'physics_8_ch1.html'); +let h = fs.readFileSync(DST, 'utf8'); + +function makeStubText(n) { + return `/* IV6 — flagship интерактив (заглушка Phase 1, наполнение в Phase 1.${n}) */ + h += '
' + +'
IV-6
Новый интерактив §${n}
' + +'
Готовится: интерактивная визуализация с drag-and-drop для углубления темы. Скоро будет доступна.
' + +'
' + +'' + +'
Phase 1.${n} — coming soon
' + +'
' + +'
';`; +} + +function replaceStub(pid, n, widgetHtml, initFn) { + const stubLF = makeStubText(n); + const stubCRLF = stubLF.replace(/\n/g, '\r\n'); + let stubText = null; + if (h.includes(stubLF)) stubText = stubLF; + else if (h.includes(stubCRLF)) stubText = stubCRLF; + if (!stubText) { console.warn(`${pid}: stub not found`); return false; } + const eol = stubText === stubCRLF ? '\r\n' : '\n'; + const widget = widgetHtml.trim().replace(/\n/g, eol); + h = h.replace(stubText, widget); + h = h.replace(`wireReadBtn('${pid}');`, `wireReadBtn('${pid}');\n _init${pid.toUpperCase()}_iv6();`); + const fnStart = h.indexOf(`function build_${pid}()`); + const fnEnd = h.indexOf('\n}\n', fnStart); + h = h.slice(0, fnEnd + 3) + '\n' + initFn.trim() + '\n' + h.slice(fnEnd + 3); + console.log(`${pid}: replaced`); + return true; +} + +// ============================================================ +// §2 — Drag-piston (compress gas / supply heat) +// ============================================================ +const P2_HTML = `/* IV6 — Piston (Phase 1.3) */ + h += '
' + +'
IV-6
Поршень — два способа изменить U
' + +'
Двигай поршень — газ сжимается и нагревается (работа над газом → ΔU > 0). Или подавай тепло — U растёт без работы. Сравни графики.
' + +'
' + +'
' + +'
Сжатие0%
' + +'
Q0Дж
' + +'
T20°C
' + +'
U100
' + +'
' + +'
';`; + +const P2_INIT = ` +function _initP2_iv6(){ + const sb = document.getElementById('p2-iv6-sandbox'); + if (!sb || !window.P8Helpers) return; + const svg = P8Helpers.svg.create(560, 240); + svg.setAttribute('width','100%'); svg.setAttribute('height','100%'); svg.style.display='block'; + sb.appendChild(svg); + const state = { comp: 0, q: 0 }; + function render(){ + svg.innerHTML = ''; + /* Cylinder */ + const compFraction = state.comp / 100; + const cylX = 80, cylY = 60, cylW = 320, cylH = 120; + const pistonX = cylX + cylW * (0.2 + compFraction * 0.5); + svg.appendChild(P8Helpers.svg.el('rect', { x: cylX, y: cylY, width: cylW, height: cylH, rx: 8, fill: 'none', stroke: '#0f172a', 'stroke-width': 2 })); + /* Gas region (compressed = brighter, hotter) */ + const T = 20 + compFraction * 60 + state.q * 0.1; + const gasColor = P8Helpers.thermal.tempColor(T / 200); + svg.appendChild(P8Helpers.svg.el('rect', { x: cylX + 2, y: cylY + 2, width: pistonX - cylX - 4, height: cylH - 4, rx: 6, fill: gasColor, opacity: 0.6 })); + /* Molecules — count grows with T */ + const numMol = Math.round(8 + T * 0.3); + for (let i = 0; i < numMol; i++) { + const px = cylX + 8 + Math.random() * (pistonX - cylX - 16); + const py = cylY + 8 + Math.random() * (cylH - 16); + svg.appendChild(P8Helpers.svg.el('circle', { cx: px, cy: py, r: 3, fill: '#fff', opacity: 0.7 })); + } + /* Piston */ + svg.appendChild(P8Helpers.svg.el('rect', { x: pistonX - 6, y: cylY - 8, width: 12, height: cylH + 16, fill: '#475569', stroke: '#0f172a' })); + svg.appendChild(P8Helpers.svg.el('rect', { x: pistonX + 6, y: cylY + cylH/2 - 6, width: 100, height: 12, fill: '#94a3b8', stroke: '#0f172a' })); + /* Heat source if q>0 */ + if (state.q > 0) { + svg.appendChild(P8Helpers.svg.el('rect', { x: cylX + 60, y: cylY + cylH + 4, width: 60, height: 12, fill: '#dc2626', rx: 4 })); + svg.appendChild(P8Helpers.svg.el('text', { x: cylX + 90, y: cylY + cylH + 32, 'font-family':"'Inter',sans-serif", 'font-size':10, 'font-weight':700, fill:'#dc2626', 'text-anchor':'middle', text: 'Q = '+state.q+' Дж' })); + } + if (state.comp > 0) { + svg.appendChild(P8Helpers.svg.el('text', { x: pistonX + 56, y: cylY + cylH/2 - 14, 'font-family':"'Inter',sans-serif", 'font-size':10, 'font-weight':700, fill:'#475569', 'text-anchor':'middle', text: 'A над газом' })); + } + /* Readouts */ + document.getElementById('p2-iv6-t').textContent = Math.round(T); + document.getElementById('p2-iv6-u').textContent = Math.round(100 + compFraction * 60 + state.q * 0.5); + } + document.getElementById('p2-iv6-comp').oninput = ev => { + state.comp = +ev.target.value; + document.getElementById('p2-iv6-comp-val').textContent = state.comp; + render(); + }; + document.getElementById('p2-iv6-q').oninput = ev => { + state.q = +ev.target.value; + document.getElementById('p2-iv6-q-val').textContent = state.q; + render(); + }; + render(); +} +`; +replaceStub('p2', 2, P2_HTML, P2_INIT); + +// ============================================================ +// §4 — Convection cell +// ============================================================ +const P4_HTML = `/* IV6 — Convection (Phase 1.3) */ + h += '
' + +'
IV-6
Конвекция — нагретая вода поднимается
' + +'
Двигай мощность горелки. Частицы воды поднимаются вверх по центру (тёплые, менее плотные) и опускаются по краям (остывшие, плотнее) — это конвекционная ячейка.
' + +'
' + +'
' + +'
Мощность40%
' + +'' + +'' + +'
' + +'
';`; + +const P4_INIT = ` +function _initP4_iv6(){ + const sb = document.getElementById('p4-iv6-sandbox'); + if (!sb || !window.P8Helpers || !window.P8Anim) return; + const W = 560, H = 280; + const canvas = document.createElement('canvas'); + canvas.width = W; canvas.height = H; + canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.display = 'block'; + sb.appendChild(canvas); + const ctx = canvas.getContext('2d'); + let power = 40; + /* Particles in convection loops */ + const particles = []; + const NP = 60; + for (let i = 0; i < NP; i++) { + particles.push({ + x: 60 + Math.random() * (W - 120), + y: 40 + Math.random() * (H - 100), + angle: Math.random() * 2 * Math.PI, + speed: 0.3 + Math.random() * 0.4, + r: 2.5 + Math.random() * 1.5 + }); + } + function step(dt){ + /* Clear */ + ctx.clearRect(0, 0, W, H); + /* Container */ + ctx.strokeStyle = '#0f172a'; + ctx.lineWidth = 2; + ctx.strokeRect(40, 20, W - 80, H - 60); + /* Burner */ + ctx.fillStyle = '#475569'; + ctx.fillRect(180, H - 30, 200, 16); + /* Flame */ + const flameH = (power / 100) * 16; + ctx.fillStyle = '#dc2626'; + ctx.fillRect(200, H - 30 - flameH, 160, flameH); + /* Particles — convection loop: rise in center, fall on edges */ + const cx = W / 2; + particles.forEach(p => { + const dx = p.x - cx; + const localTemp = Math.max(0, 1 - (p.y - 40) / (H - 100)); /* bottom = hot */ + /* Vertical velocity: up in center (proportional to power), down on sides */ + let vy = 0; + if (Math.abs(dx) < 80) { + vy = -p.speed * (power / 50) * (0.6 + localTemp); + } else { + vy = p.speed * 0.4; + } + /* Horizontal: drift inward at top, outward at bottom */ + let vx = 0; + if (p.y < 60) vx = -dx * 0.005 * (power / 50); + else if (p.y > H - 70) vx = dx * 0.008 * (power / 50); + p.x += vx * dt * 60; + p.y += vy * dt * 60; + /* Constrain */ + if (p.x < 50) p.x = 50; + if (p.x > W - 50) p.x = W - 50; + if (p.y < 30) p.y = 30; + if (p.y > H - 38) p.y = H - 38; + /* Color by temp (hotter = closer to bottom and rising) */ + const tempVal = localTemp * (power / 100); + ctx.fillStyle = P8Helpers.thermal.tempColor(tempVal * 0.7 + 0.15); + ctx.beginPath(); + ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI); + ctx.fill(); + }); + } + const raf = P8Anim.raf(dt => step(Math.min(dt, 0.05))); + document.getElementById('p4-iv6-pwr').oninput = ev => { + power = +ev.target.value; + document.getElementById('p4-iv6-pwr-val').textContent = power; + }; + document.getElementById('p4-iv6-play').onclick = () => { + if (!raf.running) { raf.start(); if (window.addXp) addXp(10, 'p4-iv6-conv'); } + }; + document.getElementById('p4-iv6-pause').onclick = () => raf.stop(); + /* Auto-start on first view */ + raf.start(); + step(0); +} +`; +replaceStub('p4', 4, P4_HTML, P4_INIT); + +// ============================================================ +// §5 — Radiation balance (3 bodies under lamp) +// ============================================================ +const P5_HTML = `/* IV6 — Radiation (Phase 1.3) */ + h += '
' + +'
IV-6
Излучение — какой цвет нагревается быстрее?
' + +'
Под лампой — три тела разного цвета: чёрное, белое, зеркальное. Двигай мощность лампы, наблюдай, как растёт T каждого. Чёрное поглощает почти всё, белое — мало, зеркало — почти ничего.
' + +'
' + +'
' + +'
Лампа60%
' + +'' + +'' + +'
' + +'
';`; + +const P5_INIT = ` +function _initP5_iv6(){ + const sb = document.getElementById('p5-iv6-sandbox'); + if (!sb || !window.P8Helpers || !window.P8Anim) return; + const svg = P8Helpers.svg.create(560, 240); + svg.setAttribute('width','100%'); svg.setAttribute('height','100%'); svg.style.display='block'; + sb.appendChild(svg); + let lampPower = 60; + const bodies = [ + { name: 'Чёрное', absorption: 0.95, fill: '#0f172a', x: 130, T: 20 }, + { name: 'Белое', absorption: 0.20, fill: '#f1f5f9', x: 280, T: 20 }, + { name: 'Зеркало', absorption: 0.05, fill: '#cbd5e1', x: 430, T: 20 } + ]; + let running = false; + function render(){ + svg.innerHTML = ''; + /* Lamp */ + svg.appendChild(P8Helpers.svg.el('rect', { x: 240, y: 8, width: 80, height: 20, fill: '#facc15', rx: 4 })); + svg.appendChild(P8Helpers.svg.el('text', { x: 280, y: 22, 'font-family':"'Unbounded',sans-serif", 'font-size':10, 'font-weight':800, fill:'#0f172a', 'text-anchor':'middle', text: lampPower+'%' })); + /* Radiation rays */ + bodies.forEach(b => { + const len = lampPower * 1.2; + const opacity = lampPower / 100; + svg.appendChild(P8Helpers.svg.el('line', { + x1: 280, y1: 28, x2: b.x, y2: 130, + stroke: '#fde047', 'stroke-width': 2, + opacity: opacity, 'stroke-dasharray': '4 3' + })); + }); + /* Bodies */ + bodies.forEach(b => { + const g = P8Helpers.svg.el('g', { transform: 'translate('+b.x+',150)' }); + g.appendChild(P8Helpers.svg.el('rect', { x:-32, y:-12, width:64, height:48, rx:5, fill: b.fill, stroke:'#0f172a', 'stroke-width':1.5 })); + g.appendChild(P8Helpers.svg.el('text', { x:0, y:-22, 'font-family':"'Inter',sans-serif", 'font-size':11, 'font-weight':700, fill:'#0f172a', 'text-anchor':'middle', text: b.name })); + /* Glow when warm */ + const tempNorm = Math.min(1, (b.T - 20) / 80); + if (tempNorm > 0.05) { + g.appendChild(P8Helpers.svg.el('rect', { x:-36, y:-16, width:72, height:56, rx:8, fill: 'none', stroke: P8Helpers.thermal.tempColor(tempNorm*0.5 + 0.5), 'stroke-width': 4, opacity: 0.5 + tempNorm * 0.5 })); + } + svg.appendChild(g); + /* T readout */ + svg.appendChild(P8Helpers.svg.el('text', { x: b.x, y: 220, 'font-family':"'JetBrains Mono',monospace", 'font-size':12, 'font-weight':800, fill: P8Helpers.thermal.tempColor(tempNorm*0.5 + 0.4), 'text-anchor':'middle', text: 'T='+Math.round(b.T)+'°C' })); + }); + } + const raf = P8Anim.raf(dt => { + if (!running) return; + bodies.forEach(b => { + b.T += dt * (lampPower / 100) * b.absorption * 10; + if (b.T > 120) b.T = 120; + }); + render(); + }); + document.getElementById('p5-iv6-lamp').oninput = ev => { + lampPower = +ev.target.value; + document.getElementById('p5-iv6-lamp-val').textContent = lampPower; + render(); + }; + document.getElementById('p5-iv6-play').onclick = () => { + if (!running) { running = true; raf.start(); if (window.addXp) addXp(10, 'p5-iv6-rad'); } + }; + document.getElementById('p5-iv6-reset').onclick = () => { + running = false; raf.stop(); + bodies.forEach(b => b.T = 20); + render(); + }; + render(); +} +`; +replaceStub('p5', 5, P5_HTML, P5_INIT); + +// ============================================================ +// §7 — Q = qm fuel burn +// ============================================================ +const P7_HTML = `/* IV6 — Fuel burn (Phase 1.3) */ + h += '
' + +'
IV-6
Тепло сгорания: $Q = qm$
' + +'
Выбери топливо и его массу — посчитаем выделенное тепло и нагрев воды массой 1 кг ($c=4200$). $Q = qm$, $\\\\Delta T = Q / (cm_в)$.
' + +'
' + +'
' + +'
' + +'' + +'' + +'' + +'
' + +'
' + +'
' + +'
Масса топлива0.10кг
' + +'
Q1.0МДж
' + +'
ΔT воды238К
' + +'
' + +'
';`; + +const P7_INIT = ` +function _initP7_iv6(){ + const sb = document.getElementById('p7-iv6-sandbox'); + if (!sb || !window.P8Helpers) return; + const svg = P8Helpers.svg.create(560, 220); + svg.setAttribute('width','100%'); svg.setAttribute('height','100%'); svg.style.display='block'; + sb.appendChild(svg); + const fuels = { + wood: { q: 10e6, color: '#a16207' }, + coal: { q: 29e6, color: '#1e293b' }, + gas: { q: 44e6, color: '#3b82f6' } + }; + let activeFuel = 'wood'; + let mass = 0.1; + function render(){ + svg.innerHTML = ''; + const f = fuels[activeFuel]; + /* Vessel with water */ + svg.appendChild(P8Helpers.svg.el('rect', { x: 200, y: 30, width: 160, height: 100, fill: 'rgba(125, 211, 252, .55)', stroke: '#0f172a', 'stroke-width': 2, rx: 5 })); + /* Fuel pile */ + const pileH = 10 + mass * 50; + svg.appendChild(P8Helpers.svg.el('rect', { x: 240, y: 140 + (40 - pileH), width: 80, height: pileH, fill: f.color, rx: 3 })); + /* Flame */ + const Q = f.q * mass; + const intensity = Math.min(1, Q / 5e6); + svg.appendChild(P8Helpers.svg.el('rect', { x: 230, y: 130 - intensity * 20, width: 100, height: 12 + intensity * 15, fill: '#dc2626', opacity: 0.85, rx: 4 })); + /* Steam if hot enough */ + const cm = 4200 * 1; + const dT = Q / cm; + if (dT > 60) { + [0, 1, 2].forEach(i => { + svg.appendChild(P8Helpers.svg.el('circle', { cx: 240 + i * 40, cy: 20 - intensity * 10, r: 6 + intensity * 2, fill: '#cbd5e1', opacity: 0.7 })); + }); + } + /* Readouts */ + document.getElementById('p7-iv6-q').textContent = (Q / 1e6).toFixed(2); + document.getElementById('p7-iv6-dt').textContent = Math.round(dT); + } + document.querySelectorAll('#p7-iv6-sandbox ~ * [data-fuel]').forEach(btn => { + btn.onclick = ev => { + activeFuel = ev.currentTarget.dataset.fuel; + document.querySelectorAll('[data-fuel]').forEach(b => b.style.outline = ''); + ev.currentTarget.style.outline = '2px solid var(--p8-brand,#7c3aed)'; + render(); + }; + }); + /* Click on palette items globally */ + Array.from(document.querySelectorAll('[data-fuel]')).forEach(btn => { + btn.onclick = ev => { + activeFuel = btn.dataset.fuel; + document.querySelectorAll('[data-fuel]').forEach(b => b.style.outline = ''); + btn.style.outline = '2px solid var(--p8-brand,#7c3aed)'; + render(); + if (window.addXp) addXp(5, 'p7-iv6-fuel-'+activeFuel); + }; + }); + document.getElementById('p7-iv6-m').oninput = ev => { + mass = +ev.target.value; + document.getElementById('p7-iv6-m-val').textContent = mass.toFixed(2); + render(); + }; + render(); +} +`; +replaceStub('p7', 7, P7_HTML, P7_INIT); + +// ============================================================ +// §9 — λ-meter (Q = λm) +// ============================================================ +const P9_HTML = `/* IV6 — Lambda meter (Phase 1.3) */ + h += '
' + +'
IV-6
Удельная теплота плавления: $Q = \\\\lambda m$
' + +'
Выбери вещество и массу — рассчитаем энергию, нужную для полного плавления. $Q = \\\\lambda \\\\cdot m$, где $\\\\lambda$ — удельная теплота плавления.
' + +'
' + +'
' + +'' + +'
Масса1.0кг
' + +'
Q330кДж
' + +'
' + +'
';`; + +const P9_INIT = ` +function _initP9_iv6(){ + const sb = document.getElementById('p9-iv6-sandbox'); + if (!sb || !window.P8Helpers) return; + const svg = P8Helpers.svg.create(560, 200); + svg.setAttribute('width','100%'); svg.setAttribute('height','100%'); svg.style.display='block'; + sb.appendChild(svg); + const mats = { + ice: { lambda: 330, color: '#bfdbfe', name: 'Лёд' }, + lead: { lambda: 25, color: '#9ca3af', name: 'Свинец' }, + al: { lambda: 380, color: '#cbd5e1', name: 'Алюминий' }, + iron: { lambda: 270, color: '#64748b', name: 'Железо' } + }; + let mat = 'ice', mass = 1; + function render(){ + svg.innerHTML = ''; + const m = mats[mat]; + const Q = m.lambda * mass; + /* Block of material */ + const blockH = 50 + mass * 25; + svg.appendChild(P8Helpers.svg.el('rect', { x: 100, y: 100 - blockH/2, width: 100, height: blockH, fill: m.color, stroke: '#0f172a', 'stroke-width': 2, rx: 6 })); + svg.appendChild(P8Helpers.svg.el('text', { x: 150, y: 100, 'font-family':"'Inter',sans-serif", 'font-size':12, 'font-weight':700, fill:'#0f172a', 'text-anchor':'middle', text: m.name })); + svg.appendChild(P8Helpers.svg.el('text', { x: 150, y: 116, 'font-family':"'JetBrains Mono',monospace", 'font-size':10, fill:'#0f172a', 'text-anchor':'middle', text: mass.toFixed(1)+' кг' })); + /* Arrow Q → */ + const arrow = P8Helpers.svg.gradientArrow(svg, 220, 100, 360, 100, { colorFrom:'#fde047', colorTo:'#dc2626', width: 4, headSize: 16, glow: true }); + svg.appendChild(arrow); + svg.appendChild(P8Helpers.svg.el('text', { x: 290, y: 88, 'font-family':"'Unbounded',sans-serif", 'font-size':13, 'font-weight':800, fill:'#dc2626', 'text-anchor':'middle', text: 'Q = '+Q+' кДж' })); + /* Melted state */ + svg.appendChild(P8Helpers.svg.el('rect', { x: 380, y: 130, width: 100, height: blockH * 0.55, fill: m.color, opacity: 0.7, stroke: '#0f172a', 'stroke-width': 1.5, rx: 4 })); + svg.appendChild(P8Helpers.svg.el('text', { x: 430, y: 156, 'font-family':"'Inter',sans-serif", 'font-size':11, 'font-weight':700, fill:'#0f172a', 'text-anchor':'middle', text: 'расплав' })); + document.getElementById('p9-iv6-q').textContent = Q; + } + document.getElementById('p9-iv6-mat').onchange = ev => { mat = ev.target.value; render(); }; + document.getElementById('p9-iv6-m').oninput = ev => { + mass = +ev.target.value; + document.getElementById('p9-iv6-m-val').textContent = mass.toFixed(1); + render(); + }; + render(); +} +`; +replaceStub('p9', 9, P9_HTML, P9_INIT); + +// ============================================================ +// §10 — Evaporation rate +// ============================================================ +const P10_HTML = `/* IV6 — Evaporation (Phase 1.3) */ + h += '
' + +'
IV-6
Скорость испарения зависит от...
' + +'
Что разгоняет испарение? Температура, площадь поверхности и ветер. Двигай скрубберы и наблюдай качественно — стрелки от поверхности вверх.
' + +'
' + +'
' + +'
T50°C
' + +'
Площадь0.30м²
' + +'
Ветер2.0м/с
' + +'
' + +'
Скорость испарения—отн.
' + +'
';`; + +const P10_INIT = ` +function _initP10_iv6(){ + const sb = document.getElementById('p10-iv6-sandbox'); + if (!sb || !window.P8Helpers) return; + const svg = P8Helpers.svg.create(560, 220); + svg.setAttribute('width','100%'); svg.setAttribute('height','100%'); svg.style.display='block'; + sb.appendChild(svg); + let T = 50, S = 0.3, W = 2; + function render(){ + svg.innerHTML = ''; + /* Water surface */ + const surfaceW = 100 + S * 320; + const surfaceX = (560 - surfaceW) / 2; + svg.appendChild(P8Helpers.svg.el('rect', { x: surfaceX, y: 150, width: surfaceW, height: 60, fill: P8Helpers.thermal.tempColor(T/130), opacity: 0.85, stroke: '#0f172a', 'stroke-width': 2 })); + svg.appendChild(P8Helpers.svg.el('text', { x: 280, y: 200, 'font-family':"'JetBrains Mono',monospace", 'font-size':10, 'font-weight':600, fill:'#fff', 'text-anchor':'middle', text: 'T='+T+'°C, S='+S.toFixed(2)+' м²' })); + /* Evaporation rate (relative) */ + const rate = (T / 100) * (0.5 + S) * (0.5 + W / 10); + const numArrows = Math.round(3 + rate * 12); + for (let i = 0; i < numArrows; i++) { + const x = surfaceX + (i + 0.5) / numArrows * surfaceW + (Math.random() - 0.5) * 8; + const len = 30 + rate * 60 + Math.random() * 20; + const skew = W * 6 * (Math.random() - 0.3); + const arrow = P8Helpers.svg.gradientArrow(svg, x, 150, x + skew, 150 - len, { colorFrom: '#7dd3fc', colorTo: '#bae6fd', width: 1.5, headSize: 7 }); + if (arrow) svg.appendChild(arrow); + } + /* Wind indicator */ + if (W > 1) { + svg.appendChild(P8Helpers.svg.el('text', { x: 510, y: 30, 'font-family':"'Inter',sans-serif", 'font-size':22, fill: '#64748b', text: '~'.repeat(Math.min(3, Math.round(W/2))) })); + svg.appendChild(P8Helpers.svg.el('text', { x: 480, y: 50, 'font-family':"'Inter',sans-serif", 'font-size':10, 'font-weight':700, fill: '#64748b', text: 'ветер →' })); + } + document.getElementById('p10-iv6-rate').textContent = rate.toFixed(2); + } + document.getElementById('p10-iv6-t').oninput = ev => { T = +ev.target.value; document.getElementById('p10-iv6-t-val').textContent = T; render(); }; + document.getElementById('p10-iv6-s').oninput = ev => { S = +ev.target.value; document.getElementById('p10-iv6-s-val').textContent = S.toFixed(2); render(); }; + document.getElementById('p10-iv6-w').oninput = ev => { W = +ev.target.value; document.getElementById('p10-iv6-w-val').textContent = W.toFixed(1); render(); }; + render(); +} +`; +replaceStub('p10', 10, P10_HTML, P10_INIT); + +// ============================================================ +// §11 — Pressure cooker (T_boil vs pressure) +// ============================================================ +const P11_HTML = `/* IV6 — Pressure cooker (Phase 1.3) */ + h += '
' + +'
IV-6
Скороварка — давление меняет $T_{кип}$
' + +'
При нормальном давлении вода кипит при 100°C. В скороварке давление 2 атм — T кипения растёт до 120°C. В горах (0.7 атм) — снижается до 90°C. Кривая зависимости — упрощённая модель.
' + +'
' + +'
' + +'
Давление1.0атм
' + +'
T кипения100°C
' + +'
' + +'
';`; + +const P11_INIT = ` +function _initP11_iv6(){ + const sb = document.getElementById('p11-iv6-sandbox'); + if (!sb || !window.P8Helpers || !window.P8Anim) return; + const W = 560, H = 240; + const canvas = document.createElement('canvas'); + canvas.width = W; canvas.height = H; + canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.display = 'block'; + sb.appendChild(canvas); + const ctx = canvas.getContext('2d'); + let pressure = 1; + /* Approximate T_boil(p) — log curve */ + function Tboil(p){ return Math.round(100 + 20 * Math.log(p) / Math.log(2)); } + const bubbles = []; + function spawnBubble(){ + bubbles.push({ x: 100 + Math.random() * 250, y: 200, r: 3 + Math.random() * 5, vy: -0.5 - Math.random() * 1.5 }); + if (bubbles.length > 30) bubbles.shift(); + } + function render(){ + ctx.clearRect(0, 0, W, H); + /* Pot */ + ctx.strokeStyle = '#475569'; + ctx.lineWidth = 3; + ctx.fillStyle = '#cbd5e1'; + ctx.fillRect(70, 80, 320, 130); + ctx.strokeRect(70, 80, 320, 130); + /* Lid */ + ctx.fillStyle = pressure > 1.3 ? '#475569' : '#94a3b8'; + ctx.fillRect(60, 70, 340, 12); + ctx.strokeRect(60, 70, 340, 12); + /* Water */ + const T = Tboil(pressure); + const waterColor = T > 100 ? '#fb923c' : '#7dd3fc'; + ctx.fillStyle = waterColor; + ctx.globalAlpha = 0.7; + ctx.fillRect(75, 130, 310, 75); + ctx.globalAlpha = 1; + /* Steam if T high enough */ + const intensity = (pressure - 0.5) / 2.5; + /* Bubbles */ + if (Math.random() < 0.3 + intensity * 0.5) spawnBubble(); + bubbles.forEach(b => { + b.y += b.vy; + ctx.fillStyle = '#fff'; + ctx.globalAlpha = 0.7; + ctx.beginPath(); + ctx.arc(b.x, b.y, b.r, 0, 2 * Math.PI); + ctx.fill(); + ctx.globalAlpha = 1; + }); + /* Filter dead bubbles */ + for (let i = bubbles.length - 1; i >= 0; i--) if (bubbles[i].y < 130) bubbles.splice(i, 1); + /* Pressure gauge */ + ctx.fillStyle = '#0f172a'; + ctx.font = "bold 14px 'JetBrains Mono', monospace"; + ctx.textAlign = 'left'; + ctx.fillText('P = '+pressure.toFixed(2)+' атм', 410, 110); + ctx.fillText('T_кип = '+T+'°C', 410, 135); + /* T arrow */ + ctx.strokeStyle = '#dc2626'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(410, 150); + ctx.lineTo(410, 150 - (T - 80) * 1.2); + ctx.stroke(); + ctx.fillStyle = '#dc2626'; + ctx.beginPath(); + ctx.moveTo(410, 150 - (T - 80) * 1.2); + ctx.lineTo(405, 150 - (T - 80) * 1.2 + 8); + ctx.lineTo(415, 150 - (T - 80) * 1.2 + 8); + ctx.fill(); + } + const raf = P8Anim.raf(render); + raf.start(); + document.getElementById('p11-iv6-p').oninput = ev => { + pressure = +ev.target.value; + document.getElementById('p11-iv6-p-val').textContent = pressure.toFixed(2); + document.getElementById('p11-iv6-tboil').textContent = Tboil(pressure); + }; +} +`; +replaceStub('p11', 11, P11_HTML, P11_INIT); + +fs.writeFileSync(DST, h); +console.log('ch1 final size:', h.length); + +const scripts = [...h.matchAll(/