-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 = "800px";
+ layer.style.backgroundRepeat = "no-repeat";
+ layer.style.backgroundPosition = "right 50px 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);
+ });
+ }
+
+ function updateLogbook() {
+ const logList = document.getElementById("logList");
+ logList.innerHTML = "";
+ if (tankData.logs) {
+ const now = Date.now() / 1000;
+ tankData.logs.forEach((log) => {
+ const li = document.createElement("li");
+ let epoch =
+ typeof log.date === "number"
+ ? log.date
+ : Date.parse(log.date) / 1000;
+ const ageHours = (now - epoch) / 3600;
+
+ // Color interpolation: 0h = #fff, 8h = #888
+ let color;
+ if (ageHours <= 0) {
+ color = "#fff";
+ } else if (ageHours >= 8) {
+ color = "#888";
+ } else {
+ // Linear interpolation between #fff and #888
+ const t = ageHours / 8;
+ const r = Math.round(255 + (136 - 255) * t);
+ const g = Math.round(255 + (136 - 255) * t);
+ const b = Math.round(255 + (136 - 255) * t);
+ color = `rgb(${r},${g},${b})`;
+ }
+ li.style.color = color;
+
+ // Add shimmer class if less than 8 hours old
+ if (ageHours < 8) {
+ li.classList.add("log-shimmer");
+ }
+
+ li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date
+ } — ${log.text}`;
+ logList.appendChild(li);
+ });
+ // Auto-scroll to bottom
+ const logbookDiv = document.querySelector(".logbook");
+ if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
+ }
+ }
+
+ // Update settings
+ function updateSettings() {
+ if (!tankData) return;
+
+ tankData.settings.tankTopOffset = parseInt(tankTopOffsetInput.value);
+ tankData.settings.tankBottomOffset = parseInt(
+ tankBottomOffsetInput.value
+ );
+ updateTank();
+ updateLogbook();
+ }
+
+ // Event listeners
+ tankTopOffsetInput.addEventListener("change", updateSettings);
+ tankBottomOffsetInput.addEventListener("change", updateSettings);
+
+ // Initial load
+ loadData();
+
+
+
+
+
+
+
+ Back to snowsune.net!
+