From 46d0008b72fd820dc1f9867c8fd142dc37314ca3 Mon Sep 17 00:00:00 2001 From: KenwoodFox Date: Thu, 3 Jul 2025 14:58:03 -0400 Subject: [PATCH] Fix first image --- www/data.json | 10 +- www/index.html | 331 +++++++++++++++++++++++-------------------------- 2 files changed, 155 insertions(+), 186 deletions(-) diff --git a/www/data.json b/www/data.json index 9b84f54..eb9d70e 100644 --- a/www/data.json +++ b/www/data.json @@ -7,17 +7,11 @@ "url": "https://www.f-list.net/c/alice%20prairie" }, { - "name": "Zae & Kan'vi Cum", - "volume": 81, + "name": "Zae", + "volume": 39, "color": "#FF56BD", "url": "https://www.f-list.net/c/Zae", "image": "characters/zae.png" - }, - { - "name": "Dog Cum", - "volume": 8, - "color": "#940619", - "url": "https://www.f-list.net/c/maxene%20sita/" } ], "settings": { diff --git a/www/index.html b/www/index.html index fd51eaa..090e1dd 100644 --- a/www/index.html +++ b/www/index.html @@ -1,193 +1,168 @@ - - - - Cumtanks.snowusne.net - - - - + + + + Cumtanks.snowusne.net - - - - + + + + - - + + + + - -
-
- Tank Background Back - Tank Background Foreground - -
- Art by SethRaven4 -
-
-
-

Settings

- - + + + + + +
+
+ Tank Background Back + Tank Background Foreground + +
+ Art by SethRaven4
+
+

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(); + + + + + + + \ No newline at end of file