- 
-
-
-
Settings
- - + + + + + +
+
+
+
-
+ // Clear existing liquid layers
+ const existingLayers = document.querySelectorAll(".liquid-layer");
+ existingLayers.forEach((layer) => layer.remove());
-
-
-
-
+ const tankContainerHeight = tankContainer.offsetHeight;
+ const tankTopOffset = tankData.settings.tankTopOffset;
+ const tankBottomOffset = tankData.settings.tankBottomOffset;
+ const tankHeight =
+ tankContainerHeight - tankTopOffset - tankBottomOffset;
+ let currentHeight = 0;
+ let cumulativeVolume = 0;
+
+ tankData.liquids.forEach((liquid, i) => {
+ const layer = document.createElement("div");
+ layer.className = "liquid-layer";
+
+ // Set background: image if present, else color
+ if (liquid.image) {
+ layer.style.backgroundImage = `url(${liquid.image})`;
+ layer.style.backgroundSize = "660px";
+ layer.style.backgroundRepeat = "no-repeat";
+ layer.style.backgroundPosition = "right 110px top 0px";
+ layer.style.backgroundColor = liquid.color;
+ } else {
+ layer.style.backgroundImage = "";
+ layer.style.backgroundColor = liquid.color;
+ }
+
+ // Create the label
+ const label = document.createElement("div");
+ label.className = "liquid-label";
+
+ // If there's a URL, make it a clickable link
+ if (liquid.url) {
+ const link = document.createElement("a");
+ link.href = liquid.url;
+ link.textContent = `${liquid.name} (${liquid.volume}%)`;
+ link.className = "liquid-link";
+ label.appendChild(link);
+ } else {
+ label.textContent = `${liquid.name} (${liquid.volume}%)`;
+ }
+
+ cumulativeVolume += liquid.volume;
+
+ // Shift label left if cumulative volume is under 20%
+ if (cumulativeVolume < 20) {
+ label.style.left = "18%";
+ label.style.transform = "translate(-30%, -50%)";
+ } else {
+ label.style.left = "50%";
+ label.style.transform = "translate(-50%, -50%)";
+ }
+
+ // Calculate height based on volume percentage
+ const height = (liquid.volume / 100) * tankHeight;
+ layer.style.height = `${height}px`;
+
+ // Position from bottom, stacking up, starting at tankBottomOffset
+ layer.style.bottom = `${currentHeight + tankBottomOffset}px`;
+ currentHeight += height;
+
+ // Add the label to the layer
+ layer.appendChild(label);
+ tankContainer.appendChild(layer);
+ });
+ }
+
+ // Update settings
+ function updateSettings() {
+ if (!tankData) return;
+
+ tankData.settings.tankTopOffset = parseInt(tankTopOffsetInput.value);
+ tankData.settings.tankBottomOffset = parseInt(
+ tankBottomOffsetInput.value
+ );
+ updateTank();
+ }
+
+ // Event listeners
+ tankTopOffsetInput.addEventListener("change", updateSettings);
+ tankBottomOffsetInput.addEventListener("change", updateSettings);
+
+ // Initial load
+ loadData();
+
+
+
+
+
+
+
+
+