diff --git a/game.js b/game.js
index 8a2c9dd..da80511 100644
--- a/game.js
+++ b/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) {
diff --git a/stroll.html b/stroll.html
index bd48fd0..017df3d 100644
--- a/stroll.html
+++ b/stroll.html
@@ -30,18 +30,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
diff --git a/style.css b/style.css
index cdcb02c..2c5b7aa 100644
--- a/style.css
+++ b/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);
+ }
+}
diff --git a/svg/cum.svg b/svg/cum.svg
new file mode 100644
index 0000000..47e4ada
--- /dev/null
+++ b/svg/cum.svg
@@ -0,0 +1,19 @@
+