// vessel.js — volume in Liters (0.5–1.0 L), fully responsive

const container = document.getElementById("container");

// wrapper
const wrap = document.createElement("div");
wrap.id = "vessel-wrapper";

// vessel
const vessel = document.createElement("div");
vessel.id = "vessel";

// piston
const piston = document.createElement("div");
piston.id = "piston";

// catalyst solid layer
const catalystLayer = document.createElement("div");
catalystLayer.id = "catalyst-layer";

vessel.appendChild(catalystLayer);
vessel.appendChild(piston);
window._catalystLayer = catalystLayer;

// DOM assembly
vessel.appendChild(piston);
wrap.appendChild(vessel);

container.innerHTML = "";
container.appendChild(wrap);

// update geometry based on REAL width
function updateVessel(){
  const V = window.simulationParams?.V ?? 0.5;

  const Vmin = 0.0;
  const Vmax = 1.0;
  const frac = Math.min(1, Math.max(0, (V - Vmin) / (Vmax - Vmin)));

  const vesselWidth = vessel.clientWidth;
  const pistonWidth = piston.offsetWidth;
  if(vesselWidth <= pistonWidth) return;

  const freeLen = vesselWidth - pistonWidth;
  const pistonX = frac * freeLen;

  piston.style.left = pistonX + "px";

// ⬅️ ΣΤΕΡΕΟΣ ΚΑΤΑΛΥΤΗΣ (ΜΟΝΟ ΑΝ catalyst === true)
if (window.kineticsState?.catalyst === true) {
  catalystLayer.style.width = pistonX + "px";
  catalystLayer.style.opacity = "1";
} else {
  catalystLayer.style.opacity = "0";
  catalystLayer.style.width = "0px";
}

}


// expose
window.updateVessel = updateVessel;

// αρχικοποίηση & responsiveness
window.addEventListener("load", updateVessel);
window.addEventListener("resize", updateVessel);
