diff --git a/frontend/js/labs/organic.js b/frontend/js/labs/organic.js index dc23237..22e4673 100644 --- a/frontend/js/labs/organic.js +++ b/frontend/js/labs/organic.js @@ -1382,15 +1382,21 @@ class OrganicSim { const comp = this._qualCompound; const anim = this._qualAnim; - // draw multiple test tubes + // draw multiple test tubes — sized to fill the available height (bigger flasks) const tubes = rxn.compounds; - const tubeW = 56, tubeH = 150, gap = 20; + const badgePad = 48; // room above tubes for the +/−/? badge + const labelPad = 62; // room below tubes for the name + reagent labels + const tubeH = Math.max(190, Math.min(H - badgePad - labelPad, 340)); + const tubeW = Math.round(tubeH * 0.46); + const gap = Math.round(tubeW * 0.6); const totalW = tubes.length * (tubeW + gap) - gap; - let startX = (W - totalW) / 2; + const startX = (W - totalW) / 2; + // centre vertically, but never push the tubes so low they leave the viewport + let ty = badgePad + Math.max(0, (H - badgePad - labelPad - tubeH) / 2); + ty = Math.min(ty, 210); tubes.forEach((tube, i) => { const tx = startX + i * (tubeW + gap); - const ty = (H - tubeH) / 2 - 10; const isActive = comp && comp === tube; const progress = (isActive && anim) ? Math.min(anim.t / anim.maxT, 1) : 0; @@ -1398,19 +1404,19 @@ class OrganicSim { // label ctx.fillStyle = isActive ? '#C9A0FF' : 'rgba(255,255,255,0.5)'; - ctx.font = `${isActive ? '700' : '400'} 10px Manrope,sans-serif`; + ctx.font = `${isActive ? '700' : '400'} 11px Manrope,sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; - const label = tube.name.length > 12 ? tube.name.substring(0,11)+'…' : tube.name; - ctx.fillText(label, tx + tubeW/2, ty + tubeH + 8); + const label = tube.name.length > 14 ? tube.name.substring(0,13)+'…' : tube.name; + ctx.fillText(label, tx + tubeW/2, ty + tubeH + 10); }); // reagent label ctx.fillStyle = 'rgba(255,255,255,0.35)'; - ctx.font = '11px Manrope,sans-serif'; + ctx.font = '12px Manrope,sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - ctx.fillText(`Реагент: ${rxn.reagent}`, W/2, H - 4); + ctx.fillText(`Реагент: ${rxn.reagent}`, W/2, Math.min(H - 6, ty + tubeH + 44)); } _drawTestTube(ctx, x, y, w, h, rxn, comp, progress, isActive) {