Pretty stat bars

game.js

@@ -2842,19 +2842,26 @@ function update(lines = [])
   document.getElementById("mass").innerHTML = "Mass: " + transformNumbers(mass(macro.totalMass, unit));
   document.getElementById("arousal").innerHTML = "Arousal: " + round(macro.arousal,0) + "%";
   document.getElementById("edge").innerHTML = "Edge: " + round(macro.edge * 100,0) + "%";
-  document.getElementById("cum").innerHTML = "Cum: " + transformNumbers(volume(macro.cumStorage.amount,unit,false));
-  document.getElementById("cumPercent").innerHTML = Math.round(macro.cumStorage.amount / macro.cumStorage.limit * 100) + "%";
-  document.getElementById("femcum").innerHTML = "Femcum: " + transformNumbers(volume(macro.femcumStorage.amount,unit,false));
-  document.getElementById("femcumPercent").innerHTML = Math.round(macro.femcumStorage.amount / macro.femcumStorage.limit * 100) + "%";
-  document.getElementById("milk").innerHTML = "Milk: " + transformNumbers(volume(macro.milkStorage.amount,unit,false));
-  document.getElementById("milkPercent").innerHTML = Math.round(macro.milkStorage.amount / macro.milkStorage.limit * 100) + "%";
-  document.getElementById("gas").innerHTML = "Gas: " + transformNumbers(volume(macro.gasStorage.amount,unit,false));
-  document.getElementById("gasPercent").innerHTML = Math.round(macro.gasStorage.amount / macro.gasStorage.limit * 100) + "%";
-  document.getElementById("piss").innerHTML = "Piss: " + transformNumbers(volume(macro.pissStorage.amount,unit,false));
-  document.getElementById("pissPercent").innerHTML = Math.round(macro.pissStorage.amount / macro.pissStorage.limit * 100) + "%";
-  document.getElementById("scat").innerHTML = "Scat: " + transformNumbers(volume(macro.scatStorage.amount,unit,false));
-  document.getElementById("scatPercent").innerHTML = Math.round(macro.scatStorage.amount / macro.scatStorage.limit * 100) + "%";
 
+  stylePercentage("cum", macro.cumStorage);
+  stylePercentage("femcum", macro.femcumStorage);
+  stylePercentage("milk", macro.milkStorage);
+  stylePercentage("gas", macro.gasStorage);
+  stylePercentage("piss", macro.pissStorage);
+  stylePercentage("scat", macro.scatStorage);
+}
+
+function stylePercentage(name, storage) {
+  document.getElementById(name).innerHTML = name + ": " + transformNumbers(volume(storage.amount,unit,false));
+  let meterPos = 150 - storage.amount / storage.limit * 150;
+  document.querySelector("#" + name + "Meter .fill").style.setProperty("transform", "translate(0px, " + Math.round(meterPos) + "px)");
+}
+
+function stylePercentages() {
+  document.querySelectorAll(".meter .fill").forEach(function(x) {
+    let amount = 150 - x.value / x.max * 150;
+    x.style.setProperty("transform", "translate(0px, " + amount + ")");
+  });
 }
 
 function pick_move()
@@ -3113,7 +3120,6 @@ function enable_panel(name) {
 
 function enable_stat(name) {
   document.getElementById(name).style.display = 'block';
-  document.getElementById(name + "Percent").style.display = 'block';
 }
 
 function enable_growth_part(name) {

stroll.html

@@ -30,18 +30,75 @@
         <div class="stat-line" id="growth-points"></div>
         <div class="stat-line" id="arousal"></div>
         <div class="stat-line" id="edge"></div>
+
+        <!-- external svg is such a pain in the ass -->
+
+        <div class="meter" id="cumMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="meter" id="femcumMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="meter" id="milkMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="meter" id="gasMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="meter" id="pissMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="meter" id="scatMeter">
+          <div class="fill">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+              <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+        	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+        	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+            </svg>
+          </div>
+        </div>
+
         <div class="stat-line-hidden" id="cum"></div>
-        <div class="stat-line-hidden" id="cumPercent"></div>
         <div class="stat-line-hidden" id="femcum"></div>
-        <div class="stat-line-hidden" id="femcumPercent"></div>
         <div class="stat-line-hidden" id="milk"></div>
-        <div class="stat-line-hidden" id="milkPercent"></div>
         <div class="stat-line-hidden" id="gas"></div>
-        <div class="stat-line-hidden" id="gasPercent"></div>
         <div class="stat-line-hidden" id="piss"></div>
-        <div class="stat-line-hidden" id="pissPercent"></div>
         <div class="stat-line-hidden" id="scat"></div>
-        <div class="stat-line-hidden" id="scatPercent"></div>
       </div>
       <div class="stat-header-self">Growth</div>
       <table id="grow-panel">

style.css

@@ -100,7 +100,36 @@ body.dark #log {
 .stat-line-hidden {
   font-weight: normal;
   font-size: 12pt;
+}
+
+.stat-line-hidden {
   display: none;
+  background-color: #f00;
+  position: relative;
+}
+
+.stat-line-hidden:before {
+  content: attr(data-stat);
+  position: absolute;
+  text-align: center;
+  top: 5px;
+  left: 0;
+  right: 0;
+}
+
+.stat-line-hidden .value {
+  background-color: #0f0;
+  display: inline-block;
+  height: 24px;
+  width: attr(data-percent percentage);
+}
+
+progress {
+  background: blue;
+}
+
+.stat-percent-full {
+  background: #f00;
 }
 
 .sidebar {
@@ -457,3 +486,69 @@ ul {
   height: 100px;
   background: #555;
 }
+
+/* SRC: https://stackoverflow.com/questions/29738787/filling-water-animation/29740828 */
+
+.meter {
+  border-radius: 0%;
+  width: 10%;
+  height: 150px;
+  background: #000;
+  overflow: hidden;
+  backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  display: inline-block;
+}
+
+.meter #waveShape {
+  animation-name: waveAction;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 0.5s;
+  width:300px;
+  height: 150px;
+  fill: #04ACFF;
+}
+
+.meter#cumMeter #waveShape {
+  fill: #EEEEEE;
+}
+
+.meter#femcumMeter #waveShape {
+  fill: #999999;
+}
+
+.meter#milkMeter #waveShape {
+  fill: #FFFFFF;
+}
+
+.meter#gasMeter #waveShape {
+  fill: #33FF33;
+}
+
+.meter#pissMeter #waveShape {
+  fill: #FFFF33;
+}
+
+.meter#scatMeter #waveShape {
+  animation-duration: 2s;
+  fill: #552222;
+}
+
+@keyframes fillAction {
+    0% {
+        transform: translate(0, 150px);
+    }
+    100% {
+        transform: translate(0, -5px);
+    }
+}
+
+@keyframes waveAction {
+    0% {
+        transform: translate(-150px, 0);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}

svg/cum.svg

@@ -0,0 +1,19 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
+  c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
+  c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
+  <style type="text/css" media="screen">
+
+    svg #waveShape {
+      animation-name: waveAction;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      animation-duration: 0.5s;
+      width:300px;
+      height: 150px;
+      fill: #04ACFF;
+    }
+
+  </style>
+
+</svg>