maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(labs): Фаза0 — эконом-режим FX + выбор симуляции из списка в редакторе

Browse Source 
План улучшения симуляций — plans/simulations-improvement/README.md.
- LabFX: reduced-motion/эконом-режим (prefers-reduced-motion + тумблер
  localStorage labfx-economy). Тряска отключается, частицы ×0.25 — доступность
  и экономия на слабых устройствах сразу для всех ~50 симуляций. Кнопка-тумблер
  в lab.html рядом со звуком.
- lesson-editor: блок «Симуляция» — выпадающий список из /api/lab/sims
  (сгруппирован по предметам) вместо сырого ввода simId; неизвестный id не
  теряется, помечается «(не найдена)». Закрывает хрупкую вставку в урок.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-13 10:33:50 +03:00
parent 57eae767bf
commit 28db2de74f
5 changed files with 168 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/labs/_fx_core.js
+23
View File
@@ -4,6 +4,28 @@
/* ── namespace (cooperative init) ── */
global.LabFX = global.LabFX || {};
/* ─────────────────────────────────────────────
REDUCED MOTION / ECONOMY MODE
Уважает системный prefers-reduced-motion + ручной тумблер
(localStorage 'labfx-economy'). Когда LabFX.reduced === true:
тряска отключается, частицы эмитятся в разы меньше — это и
доступность, и экономия на слабых устройствах.
───────────────────────────────────────────── */
(function () {
var mq = null;
try { mq = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)'); } catch (e) {}
var manual = null;
try { var v = localStorage.getItem('labfx-economy'); if (v === '1') manual = true; else if (v === '0') manual = false; } catch (e) {}
function compute() { return manual != null ? manual : !!(mq && mq.matches); }
global.LabFX.reduced = compute();
global.LabFX.setEconomy = function (on) {
manual = !!on;
try { localStorage.setItem('labfx-economy', on ? '1' : '0'); } catch (e) {}
global.LabFX.reduced = compute();
};
if (mq && mq.addEventListener) mq.addEventListener('change', function () { global.LabFX.reduced = compute(); });
})();
/* ─────────────────────────────────────────────
GLOW — Canvas 2D bloom helper
───────────────────────────────────────────── */
@@ -59,6 +81,7 @@
* @param {number} opts.durMs - duration ms (default 200)
*/
global.LabFX.shake = function(elementOrCanvas, opts) {
if (global.LabFX.reduced) return; // эконом/reduced-motion — без тряски
opts = opts || {};
var intensity = opts.intensity != null ? opts.intensity : 5;
var durMs = opts.durMs != null ? opts.durMs : 200;
frontend/js/labs/_fx_particles.js
+3
View File
@@ -72,6 +72,9 @@
var size = opts.size != null ? opts.size : 3;
var sizeFade = opts.sizeFade != null ? opts.sizeFade : true;
// Эконом/reduced-motion — декоративных частиц в разы меньше
if (global.LabFX.reduced) count = Math.max(1, Math.round(count * 0.25));
for (var i = 0; i < count; i++) {
var p = acquire();
if (!p) break;
frontend/lab.html
+25
View File
@@ -362,6 +362,19 @@
<line x1="17" y1="9" x2="23" y2="15"/>
</svg>
</button>
<!-- economy / reduced-motion toggle -->
<button class="zoom-btn" id="labfx-eco-btn" onclick="(function(){var f=window.LabFX;if(!f)return;f.setEconomy(!f.reduced);var on=!!f.reduced;document.getElementById('labfx-eco-btn').setAttribute('aria-pressed',on);document.getElementById('labfx-eco-on').style.display=on?'':'none';document.getElementById('labfx-eco-off').style.display=on?'none':'';})()" title="Эконом-режим: меньше анимаций (для слабых устройств)" style="position:relative" aria-pressed="false">
<!-- economy ON (effects reduced) — leaf -->
<svg id="labfx-eco-on" class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/>
<path d="M2 21c0-3 1.85-5.36 5.08-6"/>
</svg>
<!-- economy OFF (full effects) — zap -->
<svg id="labfx-eco-off" class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
</button>
</div>
<!-- Sim bodies вынесены в /labs-bodies.html (content-engine, Phase 2).
@@ -441,6 +454,18 @@
iconOff.style.display = on ? 'none' : '';
btn.setAttribute('aria-pressed', on ? 'true' : 'false');
})();
/* Sync economy-mode toggle with LabFX.reduced (prefers-reduced-motion + localStorage) */
(function() {
var eco = !!(window.LabFX && window.LabFX.reduced);
var on = document.getElementById('labfx-eco-on');
var off = document.getElementById('labfx-eco-off');
var btn = document.getElementById('labfx-eco-btn');
if (!on || !off || !btn) return;
on.style.display = eco ? '' : 'none';
off.style.display = eco ? 'none' : '';
btn.setAttribute('aria-pressed', eco ? 'true' : 'false');
})();
</script>
</body>
</html>
frontend/lesson-editor.html
+40 -4
View File
@@ -2093,14 +2093,48 @@
}
/* ── sim ── */
// Каталог симуляций (кэш) — чтобы выбирать из списка, а не вписывать id руками.
let _simCatalog = null, _simCatalogLoading = false;
const SIM_SUBJ_RU = { phys:'Физика', chem:'Химия', bio:'Биология', math:'Математика', game:'Игры' };
function loadSimCatalog(cb) {
if (_simCatalog) { cb(_simCatalog); return; }
if (_simCatalogLoading) { setTimeout(() => loadSimCatalog(cb), 200); return; }
_simCatalogLoading = true;
LS.api('/api/lab/sims')
.then(r => { _simCatalog = (r && r.sims) || []; _simCatalogLoading = false; cb(_simCatalog); })
.catch(() => { _simCatalog = []; _simCatalogLoading = false; cb(_simCatalog); });
}
function simOptionsHtml(selected) {
const list = _simCatalog || [];
const bySubj = {};
for (const s of list) (bySubj[s.subject] = bySubj[s.subject] || []).push(s);
let html = '<option value="">— выберите симуляцию —</option>';
const known = new Set(list.map(s => s.id));
if (selected && !known.has(selected)) {
html += `<option value="${escAttr(selected)}" selected>${escAttr(selected)} (не найдена)</option>`;
}
for (const subj of Object.keys(bySubj)) {
html += `<optgroup label="${escAttr(SIM_SUBJ_RU[subj] || subj)}">`;
for (const s of bySubj[subj]) {
html += `<option value="${escAttr(s.id)}"${s.id === selected ? ' selected' : ''}>${escAttr(s.title || s.id)}</option>`;
}
html += '</optgroup>';
}
return html;
}
function renderSimEditor(b) {
const d = b.data;
const bid = b._id;
// подгрузить каталог и заполнить select уже после вставки в DOM
loadSimCatalog(() => { const sel = document.getElementById('sim-select-' + bid); if (sel) sel.innerHTML = simOptionsHtml(d.simId || ''); });
const initial = _simCatalog
? simOptionsHtml(d.simId || '')
: `<option value="${escAttr(d.simId || '')}" selected>${d.simId ? escAttr(d.simId) : 'Загрузка…'}</option>`;
return `<div>
<div class="block-field">
<div class="block-row-label">ID симуляции (напр. coulomb, mag, waves)</div>
<input class="block-input" type="text" placeholder="coulomb" value="${escAttr(d.simId||'')}"
oninput="updateBlockData('${bid}','simId',this.value);updateSimPreview('${bid}',this.value);markDirty()" />
<div class="block-row-label">Симуляция</div>
<select class="block-input" id="sim-select-${bid}"
onchange="updateBlockData('${bid}','simId',this.value);updateSimPreview('${bid}',this.value);markDirty()">${initial}</select>
</div>
<div class="block-field">
<div class="block-row-label">Подпись</div>
@@ -2116,8 +2150,10 @@
function updateSimPreview(bid, simId) {
const el = document.getElementById('sim-preview-' + bid);
if (!el) return;
let label = simId;
if (_simCatalog) { const s = _simCatalog.find(x => x.id === simId); if (s) label = s.title || simId; }
el.innerHTML = simId
? `<div class="sim-preview">${LS.icon('atom',14)} Симуляция: <strong>${escAttr(simId)}</strong></div>`
? `<div class="sim-preview">${LS.icon('atom',14)} Симуляция: <strong>${escAttr(label)}</strong></div>`
: '';
}