Maxim Dolgolyov
be4d43105e
Node.js/Express backend + vanilla JS frontend. Features: real-time collaborative whiteboard (SSE), multi-page support, LaTeX formulas, shapes/connectors, coordinate systems, number lines, compass, zoom/pan, Catmull-Rom pencil smoothing, ruler/protractor with rotation & resize controls, minimap navigation overlay, auto-measurements, multi-page thumbnails sidebar, PNG export, page templates. Student/teacher workflows: classes, assignments, library, dashboard. Mobile responsive. SQLite (better-sqlite3). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
504 lines
22 KiB
JavaScript
504 lines
22 KiB
JavaScript
'use strict';
|
||
/* ====================================================================
|
||
RedoxSim — Окислительно-восстановительные реакции
|
||
==================================================================== */
|
||
|
||
class RedoxSim {
|
||
|
||
/* ── Данные реакций ──────────────────────────────────────────────── */
|
||
|
||
static RXN = {
|
||
fe_cu: {
|
||
name: 'Fe + CuSO₄',
|
||
reducer: { f: 'Fe', name: 'Железо', color: '#A0856A', ox: 0 },
|
||
oxidizer: { f: 'Cu²⁺', name: 'Ион меди', color: '#29B6F6', ox: 2 },
|
||
prod_r: { f: 'Fe²⁺', color: '#66BB6A', ox: 2 },
|
||
prod_o: { f: 'Cu', color: '#C87840', ox: 0, solid: true },
|
||
e: 2,
|
||
half_r: 'Fe⁰ – 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Fe²⁺ окисление',
|
||
half_o: 'Cu²⁺ + 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Cu⁰ восстановление',
|
||
eq_ion: 'Fe + Cu²⁺ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Fe²⁺ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
|
||
eq_mol: 'Fe + CuSO₄ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> FeSO₄ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
|
||
sol_a: '#1565C040', sol_b: '#2E7D3230',
|
||
precip: true, pcolor: '#C87840', pname: 'медь Cu',
|
||
},
|
||
zn_hcl: {
|
||
name: 'Zn + HCl',
|
||
reducer: { f: 'Zn', name: 'Цинк', color: '#90A4AE', ox: 0 },
|
||
oxidizer: { f: 'H⁺', name: 'Ион H⁺', color: '#EF5350', ox: 1 },
|
||
prod_r: { f: 'Zn²⁺', color: '#80CBC4', ox: 2 },
|
||
prod_o: { f: 'H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', color: '#EEEEEE', ox: 0, gas: true },
|
||
e: 2,
|
||
half_r: 'Zn⁰ – 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Zn²⁺ окисление',
|
||
half_o: '2H⁺ + 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> восстановление',
|
||
eq_ion: 'Zn + 2H⁺ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Zn²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
|
||
eq_mol: 'Zn + 2HCl <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> ZnCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
|
||
sol_a: '#EF525228', sol_b: '#E0F2F118',
|
||
gas: true, gcolor: '#CFD8DC', gname: 'водород H₂',
|
||
},
|
||
cl2_ki: {
|
||
name: 'Cl₂ + KI',
|
||
reducer: { f: 'I⁻', name: 'Иодид-ион', color: '#CE93D8', ox: -1 },
|
||
oxidizer: { f: 'Cl₂', name: 'Хлор', color: '#D4E157', ox: 0 },
|
||
prod_r: { f: 'I₂', color: '#6A1B9A', ox: 0, solid: true },
|
||
prod_o: { f: 'Cl⁻', color: '#AED581', ox: -1 },
|
||
e: 1,
|
||
half_r: '2I⁻ – 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> I₂ окисление',
|
||
half_o: 'Cl₂ + 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> 2Cl⁻ восстановление',
|
||
eq_ion: 'Cl₂ + 2I⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> I₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Cl⁻',
|
||
eq_mol: 'Cl₂ + 2KI <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> I₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2KCl',
|
||
sol_a: '#7B1FA230', sol_b: '#F9A82520',
|
||
precip: true, pcolor: '#6A1B9A', pname: 'йод I₂',
|
||
},
|
||
kmno4: {
|
||
name: 'KMnO₄ + FeSO₄',
|
||
reducer: { f: 'Fe²⁺', name: 'Ион Fe²⁺', color: '#66BB6A', ox: 2 },
|
||
oxidizer: { f: 'MnO₄⁻', name: 'Перманганат', color: '#AB47BC', ox: 7 },
|
||
prod_r: { f: 'Fe³⁺', color: '#FFA726', ox: 3 },
|
||
prod_o: { f: 'Mn²⁺', color: '#FFF9C4', ox: 2 },
|
||
e: 5,
|
||
half_r: 'Fe²⁺ – e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Fe³⁺ (×5) окисление',
|
||
half_o: 'MnO₄⁻+8H⁺+5e⁻<svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>Mn²⁺+4H₂O восстановление',
|
||
eq_ion: 'MnO₄⁻ + 5Fe²⁺ + 8H⁺ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Mn²⁺ + 5Fe³⁺ + 4H₂O',
|
||
eq_mol: '2KMnO₄ + 10FeSO₄ + 8H₂SO₄ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> 2MnSO₄ + 5Fe₂(SO₄)₃ + K₂SO₄ + 8H₂O',
|
||
sol_a: '#7B1FA250', sol_b: '#F9A82515',
|
||
colorChange: true, newSolColor: '#FFF9C428', newName: 'бесцветный MnSO₄',
|
||
},
|
||
cu_fecl3: {
|
||
name: 'Cu + FeCl₃',
|
||
reducer: { f: 'Cu', name: 'Медь', color: '#C87840', ox: 0 },
|
||
oxidizer: { f: 'Fe³⁺', name: 'Ион Fe³⁺', color: '#FFA726', ox: 3 },
|
||
prod_r: { f: 'Cu²⁺', color: '#29B6F6', ox: 2 },
|
||
prod_o: { f: 'Fe²⁺', color: '#66BB6A', ox: 2 },
|
||
e: 1,
|
||
half_r: 'Cu⁰ – 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Cu²⁺ окисление',
|
||
half_o: '2Fe³⁺ + 2e⁻ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> 2Fe²⁺ восстановление',
|
||
eq_ion: 'Cu + 2Fe³⁺ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Cu²⁺ + 2Fe²⁺',
|
||
eq_mol: 'Cu + 2FeCl₃ <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> CuCl₂ + 2FeCl₂',
|
||
sol_a: '#E6510018', sol_b: '#1565C018',
|
||
colorChange: true, newSolColor: '#1565C030', newName: 'синий CuCl₂',
|
||
},
|
||
};
|
||
|
||
constructor(canvas) {
|
||
this.canvas = canvas;
|
||
this.ctx = canvas.getContext('2d');
|
||
this.rxnId = 'fe_cu';
|
||
this._raf = null;
|
||
this._last = 0;
|
||
this._t = 0;
|
||
this._phase = 'idle'; // idle | mixing | reacting | done
|
||
this._prog = 0;
|
||
this._colorT = 0;
|
||
this._stepIdx = 0;
|
||
this._stepTimer = 0;
|
||
this._eParts = [];
|
||
this._rParts = [];
|
||
this._oParts = [];
|
||
this._precip = [];
|
||
this._gas = [];
|
||
this.W = 0; this.H = 0;
|
||
this.onUpdate = null;
|
||
this.fit();
|
||
this._initParts();
|
||
}
|
||
|
||
fit() {
|
||
const dpr = window.devicePixelRatio || 1;
|
||
const W = this.canvas.offsetWidth || 600;
|
||
const H = this.canvas.offsetHeight || 400;
|
||
this.canvas.width = Math.round(W * dpr);
|
||
this.canvas.height = Math.round(H * dpr);
|
||
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
this.W = W; this.H = H;
|
||
this._initParts();
|
||
}
|
||
|
||
setReaction(id) {
|
||
if (!RedoxSim.RXN[id]) return;
|
||
this.rxnId = id;
|
||
this.reset();
|
||
}
|
||
|
||
reset() {
|
||
this._phase = 'idle'; this._prog = 0; this._colorT = 0;
|
||
this._stepIdx = 0; this._stepTimer = 0;
|
||
this._eParts = []; this._precip = []; this._gas = [];
|
||
this._initParts();
|
||
this.draw();
|
||
}
|
||
|
||
_initParts() {
|
||
const { W, H } = this;
|
||
const N = 16;
|
||
this._rParts = Array.from({ length: N }, () => ({
|
||
x: W * 0.22 + (Math.random() - 0.5) * W * 0.22,
|
||
y: H * 0.42 + (Math.random() - 0.5) * H * 0.34,
|
||
vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
|
||
r: 11 + Math.random() * 4,
|
||
phase: Math.random() * Math.PI * 2,
|
||
trans: false, flashT: 0,
|
||
}));
|
||
this._oParts = Array.from({ length: N }, () => ({
|
||
x: W * 0.78 + (Math.random() - 0.5) * W * 0.22,
|
||
y: H * 0.42 + (Math.random() - 0.5) * H * 0.34,
|
||
vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
|
||
r: 11 + Math.random() * 4,
|
||
phase: Math.random() * Math.PI * 2,
|
||
trans: false, flashT: 0,
|
||
}));
|
||
}
|
||
|
||
start() {
|
||
if (this._phase !== 'idle') this.reset();
|
||
this._phase = 'mixing'; this._prog = 0;
|
||
if (this._raf) return;
|
||
this._last = performance.now();
|
||
const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
|
||
this._raf = requestAnimationFrame(loop);
|
||
}
|
||
|
||
stop() { cancelAnimationFrame(this._raf); this._raf = null; }
|
||
|
||
/* ── Физика ─────────────────────────────────────────────────────── */
|
||
|
||
_tick(t) {
|
||
const dt = Math.min((t - this._last) / 1000, 0.05);
|
||
this._last = t; this._t += dt;
|
||
const { W, H } = this;
|
||
const rxn = RedoxSim.RXN[this.rxnId];
|
||
|
||
if (this._phase === 'mixing') {
|
||
this._prog = Math.min(1, this._prog + dt * 0.38);
|
||
const all = [...this._rParts, ...this._oParts];
|
||
all.forEach(p => {
|
||
const tx = W * 0.5 + (Math.random() - 0.5) * W * 0.52;
|
||
const ty = H * 0.44 + (Math.random() - 0.5) * H * 0.34;
|
||
p.vx += (tx - p.x) * 0.003 * this._prog;
|
||
p.vy += (ty - p.y) * 0.003 * this._prog;
|
||
p.vx += (Math.random() - 0.5) * 0.5;
|
||
p.vy += (Math.random() - 0.5) * 0.5;
|
||
p.vx *= 0.90; p.vy *= 0.90;
|
||
p.x += p.vx; p.y += p.vy;
|
||
p.phase += dt * 1.5;
|
||
this._clamp(p);
|
||
});
|
||
if (this._prog >= 1) { this._phase = 'reacting'; this._prog = 0; }
|
||
}
|
||
|
||
if (this._phase === 'reacting') {
|
||
this._prog = Math.min(1, this._prog + dt * 0.14);
|
||
this._colorT = this._prog;
|
||
this._stepTimer += dt;
|
||
if (this._stepTimer > 1.6 && this._stepIdx < 3) { this._stepIdx++; this._stepTimer = 0; }
|
||
|
||
const all = [...this._rParts, ...this._oParts];
|
||
all.forEach(p => {
|
||
p.vx += (Math.random() - 0.5) * 0.9;
|
||
p.vy += (Math.random() - 0.5) * 0.9;
|
||
p.vx *= 0.87; p.vy *= 0.87;
|
||
p.x += p.vx; p.y += p.vy;
|
||
p.phase += dt * 2;
|
||
p.flashT = Math.max(0, p.flashT - dt * 3);
|
||
this._clamp(p);
|
||
});
|
||
|
||
/* Transform particles proportional to progress */
|
||
const rT = Math.floor(this._prog * this._rParts.length);
|
||
const oT = Math.floor(this._prog * this._oParts.length);
|
||
this._rParts.forEach((p, i) => {
|
||
if (i < rT && !p.trans) { p.trans = true; p.flashT = 1; }
|
||
});
|
||
this._oParts.forEach((p, i) => {
|
||
if (i < oT && !p.trans) {
|
||
p.trans = true; p.flashT = 1;
|
||
if (rxn.precip) this._precip.push({ x: p.x, y: p.y, vy: 0, r: 3 + Math.random() * 3, settled: false });
|
||
if (rxn.gas) this._gas.push({ x: p.x, y: p.y, vy: -(1.5 + Math.random()), vx: (Math.random() - 0.5) * 0.5, r: 2 + Math.random() * 3, alpha: 1 });
|
||
}
|
||
});
|
||
|
||
if (Math.random() < 0.22 && this._prog > 0.05) this._spawnE();
|
||
if (this._prog >= 1) { this._phase = 'done'; this._stepIdx = 3; }
|
||
}
|
||
|
||
if (this._phase === 'done') {
|
||
const all = [...this._rParts, ...this._oParts];
|
||
all.forEach(p => {
|
||
p.vx += (Math.random() - 0.5) * 0.45;
|
||
p.vy += (Math.random() - 0.5) * 0.45;
|
||
p.vx *= 0.92; p.vy *= 0.92;
|
||
p.x += p.vx; p.y += p.vy;
|
||
p.phase += dt;
|
||
this._clamp(p);
|
||
});
|
||
}
|
||
|
||
/* Electrons — quadratic bezier arc */
|
||
this._eParts = this._eParts.filter(e => e.t < 1);
|
||
this._eParts.forEach(e => {
|
||
e.t = Math.min(1, e.t + dt * e.spd);
|
||
const u = e.t;
|
||
e.x = (1-u)*(1-u)*e.x0 + 2*(1-u)*u*e.mx + u*u*e.x1;
|
||
e.y = (1-u)*(1-u)*e.y0 + 2*(1-u)*u*e.my + u*u*e.y1;
|
||
e.alpha = u < 0.1 ? u * 10 : u > 0.85 ? (1 - u) / 0.15 : 1;
|
||
});
|
||
|
||
/* Precipitate */
|
||
this._precip.forEach(p => {
|
||
if (!p.settled) {
|
||
p.vy = Math.min(p.vy + 0.15, 5);
|
||
p.y += p.vy;
|
||
if (p.y >= H * 0.78) { p.y = H * 0.78; p.vy = 0; p.settled = true; }
|
||
}
|
||
});
|
||
|
||
/* Gas */
|
||
this._gas.forEach(b => { b.y += b.vy; b.x += b.vx; b.vy -= 0.01; b.alpha -= 0.005; });
|
||
this._gas = this._gas.filter(b => b.alpha > 0 && b.y > 10);
|
||
|
||
this.draw();
|
||
if (this.onUpdate) this.onUpdate(this.info());
|
||
}
|
||
|
||
_clamp(p) {
|
||
const { W, H } = this;
|
||
const bot = H * 0.78;
|
||
if (p.x < p.r + 6) { p.x = p.r + 6; p.vx *= -0.5; }
|
||
if (p.x > W - p.r - 6) { p.x = W - p.r - 6; p.vx *= -0.5; }
|
||
if (p.y < p.r + 6) { p.y = p.r + 6; p.vy *= -0.5; }
|
||
if (p.y > bot - p.r) { p.y = bot - p.r; p.vy *= -0.5; }
|
||
}
|
||
|
||
_spawnE() {
|
||
const freeR = this._rParts.filter(p => !p.trans);
|
||
const freeO = this._oParts.filter(p => !p.trans);
|
||
if (!freeR.length || !freeO.length) return;
|
||
const rp = freeR[Math.floor(Math.random() * freeR.length)];
|
||
const op = freeO[Math.floor(Math.random() * freeO.length)];
|
||
const mx = (rp.x + op.x) / 2;
|
||
const my = Math.min(rp.y, op.y) - 45 - Math.random() * 40;
|
||
this._eParts.push({
|
||
x0: rp.x, y0: rp.y, x1: op.x, y1: op.y,
|
||
mx, my, x: rp.x, y: rp.y,
|
||
t: 0, spd: 0.65 + Math.random() * 0.45, alpha: 0,
|
||
});
|
||
}
|
||
|
||
/* ── Рендеринг ──────────────────────────────────────────────────── */
|
||
|
||
draw() {
|
||
const { ctx, W, H } = this;
|
||
const rxn = RedoxSim.RXN[this.rxnId];
|
||
|
||
/* Background */
|
||
ctx.fillStyle = '#07071A';
|
||
ctx.fillRect(0, 0, W, H);
|
||
|
||
/* Dot grid */
|
||
ctx.fillStyle = 'rgba(255,255,255,0.07)';
|
||
for (let x = 0; x < W; x += 28) {
|
||
for (let y = 0; y < H; y += 28) {
|
||
ctx.beginPath(); ctx.arc(x, y, 0.8, 0, Math.PI * 2); ctx.fill();
|
||
}
|
||
}
|
||
|
||
/* Solution tint */
|
||
const bx = W * 0.04, bw = W * 0.92, bTop = H * 0.08, bBot = H * 0.80;
|
||
if (this._phase === 'idle') {
|
||
if (rxn.sol_a) { ctx.save(); ctx.fillStyle = rxn.sol_a; ctx.fillRect(bx, bTop, bw / 2, bBot - bTop); ctx.restore(); }
|
||
if (rxn.sol_b) { ctx.save(); ctx.fillStyle = rxn.sol_b; ctx.fillRect(bx + bw / 2, bTop, bw / 2, bBot - bTop); ctx.restore(); }
|
||
/* Dashed divider */
|
||
ctx.save();
|
||
ctx.setLineDash([6, 5]); ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1.5;
|
||
ctx.beginPath(); ctx.moveTo(W / 2, bTop + 4); ctx.lineTo(W / 2, bBot - 4); ctx.stroke();
|
||
ctx.setLineDash([]); ctx.restore();
|
||
/* Zone labels */
|
||
ctx.save();
|
||
ctx.textAlign = 'center'; ctx.textBaseline = 'top';
|
||
ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = 'bold 12px sans-serif';
|
||
ctx.fillText(rxn.reducer.name, W * 0.22, bTop + 8);
|
||
ctx.fillStyle = 'rgba(255,255,255,0.14)'; ctx.font = '10px sans-serif';
|
||
ctx.fillText('восстановитель', W * 0.22, bTop + 26);
|
||
ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = 'bold 12px sans-serif';
|
||
ctx.fillText(rxn.oxidizer.name, W * 0.78, bTop + 8);
|
||
ctx.fillStyle = 'rgba(255,255,255,0.14)'; ctx.font = '10px sans-serif';
|
||
ctx.fillText('окислитель', W * 0.78, bTop + 26);
|
||
ctx.restore();
|
||
} else if (this._colorT > 0) {
|
||
if (rxn.sol_a) {
|
||
ctx.save(); ctx.globalAlpha = 1 - this._colorT * 0.7;
|
||
ctx.fillStyle = rxn.sol_a; ctx.fillRect(bx, bTop, bw, bBot - bTop); ctx.restore();
|
||
}
|
||
if (rxn.colorChange && rxn.newSolColor) {
|
||
ctx.save(); ctx.globalAlpha = this._colorT * 0.55;
|
||
ctx.fillStyle = rxn.newSolColor; ctx.fillRect(bx, bTop, bw, bBot - bTop); ctx.restore();
|
||
}
|
||
}
|
||
|
||
this._drawBeaker(ctx, W, H);
|
||
this._drawParticles(ctx, rxn);
|
||
this._drawElectrons(ctx);
|
||
if (rxn.precip) this._drawPrecip(ctx, rxn);
|
||
if (rxn.gas) this._drawGas(ctx, rxn);
|
||
this._drawPanel(ctx, W, H, rxn);
|
||
}
|
||
|
||
_drawBeaker(ctx, W, H) {
|
||
const bx = W * 0.04, by = H * 0.08, bw = W * 0.92, bh = H * 0.73;
|
||
ctx.save();
|
||
ctx.strokeStyle = 'rgba(120,185,255,0.60)'; ctx.lineWidth = 2.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(bx, by); ctx.lineTo(bx, by + bh);
|
||
ctx.lineTo(bx + bw, by + bh); ctx.lineTo(bx + bw, by);
|
||
ctx.stroke();
|
||
ctx.beginPath(); ctx.moveTo(bx - 5, by); ctx.lineTo(bx + bw + 5, by); ctx.stroke();
|
||
/* Left highlight */
|
||
const hlg = ctx.createLinearGradient(bx, by, bx + 18, by + bh);
|
||
hlg.addColorStop(0, 'rgba(200,230,255,0.18)');
|
||
hlg.addColorStop(1, 'rgba(200,230,255,0.02)');
|
||
ctx.strokeStyle = hlg; ctx.lineWidth = 6;
|
||
ctx.beginPath(); ctx.moveTo(bx + 8, by + 8); ctx.lineTo(bx + 8, by + bh - 8); ctx.stroke();
|
||
ctx.restore();
|
||
}
|
||
|
||
_drawParticles(ctx, rxn) {
|
||
const draw1 = (p, spec, prod) => {
|
||
const s = p.trans ? prod : spec;
|
||
ctx.save();
|
||
ctx.shadowColor = p.flashT > 0 ? '#FFFFFF' : s.color;
|
||
ctx.shadowBlur = p.flashT > 0 ? 28 * p.flashT : 8 + Math.sin(p.phase) * 3;
|
||
ctx.globalAlpha = 0.88;
|
||
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||
ctx.fillStyle = p.flashT > 0 ? `rgba(255,255,255,${p.flashT * 0.9})` : s.color;
|
||
ctx.fill();
|
||
ctx.strokeStyle = 'rgba(255,255,255,0.22)'; ctx.lineWidth = 1; ctx.stroke();
|
||
ctx.shadowBlur = 0; ctx.globalAlpha = 1;
|
||
/* Oxidation state */
|
||
const ox = p.trans ? prod.ox : spec.ox;
|
||
const oxStr = ox > 0 ? `+${ox}` : ox < 0 ? `${ox}` : '0';
|
||
ctx.fillStyle = p.trans ? '#FFD166' : 'rgba(255,255,255,0.88)';
|
||
ctx.font = `bold ${Math.round(p.r * 0.78)}px monospace`;
|
||
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
||
ctx.fillText(oxStr, p.x, p.y);
|
||
ctx.restore();
|
||
};
|
||
this._rParts.forEach(p => draw1(p, rxn.reducer, rxn.prod_r));
|
||
this._oParts.forEach(p => draw1(p, rxn.oxidizer, rxn.prod_o));
|
||
}
|
||
|
||
_drawElectrons(ctx) {
|
||
this._eParts.forEach(e => {
|
||
ctx.save();
|
||
ctx.globalAlpha = e.alpha;
|
||
ctx.shadowColor = '#4FC3F7'; ctx.shadowBlur = 16;
|
||
ctx.beginPath(); ctx.arc(e.x, e.y, 5.5, 0, Math.PI * 2);
|
||
ctx.fillStyle = '#4FC3F7'; ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillStyle = 'rgba(255,255,255,0.95)';
|
||
ctx.font = 'bold 7px monospace';
|
||
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
||
ctx.fillText('e⁻', e.x, e.y);
|
||
ctx.restore();
|
||
});
|
||
}
|
||
|
||
_drawPrecip(ctx, rxn) {
|
||
if (!this._precip.length) return;
|
||
ctx.save();
|
||
this._precip.forEach(p => {
|
||
ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 4;
|
||
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||
ctx.fillStyle = rxn.pcolor; ctx.fill();
|
||
});
|
||
ctx.restore();
|
||
/* Label when settled */
|
||
const settled = this._precip.filter(p => p.settled);
|
||
if (settled.length > 3) {
|
||
ctx.save();
|
||
ctx.fillStyle = rxn.pcolor; ctx.font = 'bold 10px monospace';
|
||
ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
|
||
ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 6;
|
||
ctx.fillText(`↓ ${rxn.pname}`, this.W / 2, this.H * 0.80 - 4);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
_drawGas(ctx, rxn) {
|
||
this._gas.forEach(b => {
|
||
ctx.save(); ctx.globalAlpha = b.alpha * 0.75;
|
||
ctx.shadowColor = rxn.gcolor; ctx.shadowBlur = 5;
|
||
ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
|
||
ctx.strokeStyle = rxn.gcolor; ctx.lineWidth = 1; ctx.stroke();
|
||
ctx.restore();
|
||
});
|
||
const count = this._gas.length;
|
||
if (count > 2) {
|
||
ctx.save();
|
||
ctx.fillStyle = rxn.gcolor; ctx.font = 'bold 10px monospace';
|
||
ctx.textAlign = 'center'; ctx.shadowColor = rxn.gcolor; ctx.shadowBlur = 6;
|
||
ctx.fillText(`↑ ${rxn.gname}`, this.W / 2, this.H * 0.12);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
_drawPanel(ctx, W, H, rxn) {
|
||
const py = H * 0.82;
|
||
ctx.fillStyle = 'rgba(7,7,26,0.94)';
|
||
ctx.fillRect(0, py, W, H - py);
|
||
ctx.strokeStyle = 'rgba(100,165,255,0.25)'; ctx.lineWidth = 1;
|
||
ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
|
||
|
||
if (this._phase === 'idle') {
|
||
ctx.fillStyle = '#37474F'; ctx.font = '11px monospace';
|
||
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
||
ctx.fillText('← Нажми «Начать» для запуска реакции →', W / 2, py + (H - py) / 2);
|
||
return;
|
||
}
|
||
|
||
const steps = [
|
||
{ lbl: 'Молекулярное:', txt: rxn.eq_mol, col: '#B0BEC5' },
|
||
{ lbl: 'Окисление:', txt: rxn.half_r, col: '#EF476F' },
|
||
{ lbl: 'Восстановление:', txt: rxn.half_o, col: '#4CC9F0' },
|
||
{ lbl: 'Ионное:', txt: rxn.eq_ion, col: '#FFD166' },
|
||
];
|
||
|
||
const panH = H - py;
|
||
const n = Math.min(this._stepIdx + 1, steps.length);
|
||
for (let i = 0; i < n; i++) {
|
||
const s = steps[i];
|
||
const y = py + 11 + i * (panH * 0.22);
|
||
ctx.save();
|
||
if (i === this._stepIdx && this._phase !== 'done') {
|
||
ctx.fillStyle = 'rgba(255,255,255,0.04)';
|
||
ctx.fillRect(8, y - 9, W - 16, 20);
|
||
}
|
||
ctx.fillStyle = s.col; ctx.font = 'bold 9.5px monospace';
|
||
ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
|
||
ctx.fillText(s.lbl, 14, y);
|
||
ctx.fillStyle = (i === this._stepIdx && this._phase !== 'done') ? '#FFF' : 'rgba(255,255,255,0.62)';
|
||
ctx.font = '9.5px monospace';
|
||
ctx.fillText(s.txt, 14 + ctx.measureText(s.lbl).width + 8, y);
|
||
ctx.restore();
|
||
}
|
||
|
||
if (this._phase === 'done') {
|
||
ctx.save();
|
||
ctx.fillStyle = '#7BF5A4'; ctx.font = 'bold 10px monospace';
|
||
ctx.textAlign = 'right'; ctx.textBaseline = 'top';
|
||
ctx.shadowColor = '#7BF5A4'; ctx.shadowBlur = 8;
|
||
ctx.fillText('✓ Реакция завершена', W - 14, py + 3);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
info() {
|
||
const rxn = RedoxSim.RXN[this.rxnId];
|
||
return {
|
||
rxn: rxn.name,
|
||
phase: this._phase,
|
||
prog: Math.round((this._phase === 'reacting' ? this._prog : this._phase === 'done' ? 1 : 0) * 100),
|
||
e: rxn.e,
|
||
};
|
||
}
|
||
}
|