Spruced up the growth panel a bit

game.js

@@ -3173,24 +3173,22 @@ function pick_move()
   stomp();
 }
 
+function grow_part_pick(id) {
+  document.querySelector(".growth-part-active").classList.remove("growth-part-active");
+  document.querySelector("#" + id).classList.add("growth-part-active");
+}
+
 function grow_pick(times) {
-  if (document.getElementById("part-body").checked === true) {
-    grow(times);
-  }
-  else if (document.getElementById("part-ass").checked === true) {
-    grow_ass(times);
-  }
-  else if (document.getElementById("part-dick").checked === true) {
-    grow_dick(times);
-  }
-  else if (document.getElementById("part-balls").checked === true) {
-    grow_balls(times);
-  }
-  else if (document.getElementById("part-breasts").checked === true) {
-    grow_breasts(times);
-  }
-  else if (document.getElementById("part-vagina").checked === true) {
-    grow_vagina(times);
+
+  let button = document.querySelector(".growth-part-active");
+
+  switch (button.id.replace("button-", "")) {
+    case "body": grow(times); break;
+    case "ass": grow_ass(times); break;
+    case "dick": grow_dick(times); break;
+    case "balls": grow_balls(times); break;
+    case "slit": grow_vagina(times); break;
+    case "breasts": grow_breasts(times); break;
   }
 }
 
@@ -3430,7 +3428,7 @@ function enable_stat(name) {
 }
 
 function enable_growth_part(name) {
-  document.querySelector("#part-" + name + "+label").style.display = 'inline';
+  //document.querySelector("#part-" + name + "+label").style.display = 'inline';
 }
 
 function disable_button(name) {
@@ -3877,12 +3875,17 @@ window.addEventListener('load', function(event) {
   document.getElementById("button-stats").addEventListener("click",showStats);
   document.getElementById("button-debug-log").addEventListener("click",debugLog);
 
-  document.getElementById("button-amount-1").addEventListener("click",function() { grow_pick(1); });
-  document.getElementById("button-amount-5").addEventListener("click",function() { grow_pick(5); });
-  document.getElementById("button-amount-10").addEventListener("click",function() { grow_pick(10); });
-  document.getElementById("button-amount-20").addEventListener("click",function() { grow_pick(20); });
-  document.getElementById("button-amount-50").addEventListener("click",function() { grow_pick(50); });
-  document.getElementById("button-amount-100").addEventListener("click",function() { grow_pick(100); });
+  document.querySelectorAll(".growth-part").forEach(function (button) {
+    button.addEventListener("click", function() { grow_part_pick(button.id); });
+  });
+
+  document.getElementById("button-growth-1.1").addEventListener("click",function() { grow_pick(1); });
+  document.getElementById("button-growth-1.5").addEventListener("click",function() { grow_pick(5); });
+  document.getElementById("button-growth-2").addEventListener("click",function() { grow_pick(10); });
+  document.getElementById("button-growth-3").addEventListener("click",function() { grow_pick(20); });
+  document.getElementById("button-growth-5").addEventListener("click",function() { grow_pick(40); });
+  document.getElementById("button-growth-10").addEventListener("click",function() { grow_pick(90); });
+
   document.getElementById("button-load-preset").addEventListener("click",loadPreset);
 
   document.getElementById("button-export-clear").addEventListener("click",clearExport);

stroll.html

@@ -71,7 +71,7 @@
           </div>
         </div>
 
-        <p>
+        <p></p>
         <!-- external svg is such a pain in the ass -->
 
         <div class="meter" id="cumMeter">
@@ -160,38 +160,27 @@
         <div class="stat-line-hidden" id="scat"></div>
       </div>
       <div class="stat-header-self">Growth</div>
-      <table id="grow-panel">
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" checked="true" id="part-body">
-            <label class="growth-label" for="part-body">Body</label></th>
-          <th><button class="growth-amount" id="button-amount-1">1x</button></th>
-        </tr>
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-ass">
-            <label class="growth-label" for="part-ass">Ass</label></th>
-          <th><button class="growth-amount" id="button-amount-5">5x</button></th>
-        </tr>
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-dick">
-            <label class="growth-label" for="part-dick">Cock</label></th>
-          <th><button class="growth-amount" id="button-amount-10">10x</button></th>
-        </tr>
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-balls">
-            <label class="growth-label" for="part-balls">Balls</label></th>
-          <th><button class="growth-amount" id="button-amount-20">20x</button></th>
-        </tr>
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-breasts">
-            <label class="growth-label" for="part-breasts">Breasts</label></th>
-          <th><button class="growth-amount" id="button-amount-50">50x</button></th>
-        </tr>
-        <tr>
-          <th><input autocomplete="off" class="growth-option" type="radio" name="part" id="part-vagina">
-            <label class="growth-label" for="part-vagina">Slit</label></th>
-          <th><button class="growth-amount" id="button-amount-100">100x</button></th>
-        </tr>
-      </table>
+
+      <div class="growth-box">
+        <button class="growth-part growth-part-active" id="button-body">Body</button>
+        <button class="growth-part" id="button-ass">Ass</button>
+        <button class="growth-part" id="button-cock">Cock</button>
+        <button class="growth-part" id="button-balls">Balls</button>
+        <button class="growth-part" id="button-slit">Slit</button>
+        <button class="growth-part" id="button-breasts">Breasts</button>
+        <button class="growth-amount" id="button-growth-1.1">1.1x</button>
+        <button class="growth-amount" id="button-growth-1.5">1.5x</button>
+        <button class="growth-amount" id="button-growth-2">2x</button>
+        <button class="growth-amount" id="button-growth-3">3x</button>
+        <button class="growth-amount" id="button-growth-5">5x</button>
+        <button class="growth-amount" id="button-growth-10">10x</button>
+      </div>
+
+      <div class="stat-container">
+        <button class="stat-button" id="button-look">Look Around</button>
+        <button class="stat-button" id="button-grow-lots">SUPER BIG</button>
+        <button class="stat-button" id="button-stats">Stats</button>
+      </div>
     </div>
     <div id="log-area">
       <div id="log">
@@ -306,15 +295,12 @@
       </div>
 
       <div class="action-tab" id="actions-options">
-        <button class="stat-button" id="button-look">Look Around</button>
         <button class="stat-button" id="button-arousal">Arousal On</button>
         <button class="stat-button" id="button-stroll">Status: Standing</button>
         <button class="stat-button" id="button-numbers">Numbers: Full</button>
         <button class="stat-button" id="button-units">Units: Metric</button>
         <button class="stat-button" id="button-verbose">Verbose Text</button>
-        <button class="stat-button" id="button-grow-lots">SUPER BIG</button>
         <button class="stat-button" id="button-dark-mode-game">Toggle Dark Mode</button>
-        <button class="stat-button" id="button-stats">Stats</button>
         <button class="stat-button" id="button-debug-log">Debug Log</button>
       </div>
     </div>

style.css

@@ -447,27 +447,6 @@ th {
   font-weight: normal;
 }
 
-.growth-option {
-  display: none;
-}
-
-.growth-option+label {
-  display: none;
-}
-
-.growth-label {
-  font-size: 20pt;
-}
-
-input[type="radio"]:checked+
-.growth-label {
-  font-weight: bold;
-}
-
-.growth-amount {
-  width: 50%;
-}
-
 ul {
   list-style: none;
 }
@@ -621,5 +600,31 @@ body.dark .meterLabel {
     10% { transform: translate(0px, -2px); }
     25% { transform: translate(0px, 0px); }
     100% { transform: translate(0px, 0px); }
+}
+
+.growth-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  flex: 0 1 300px;
+}
+
+.growth-box > * {
+  margin: 0px;
+  display: block;
+  width: 50%;
+  height: 50px;
+}
+
+.growth-part {
+
+}
+
+.growth-part-active {
+  background: #555 !important;
+}
+
+.growth-amount {
 
 }