Added some padding to the game elements; made the intro text bigger; added tooltips

features.js

@@ -511,7 +511,8 @@ options = [
         "name": "Scale",
         "id": "scale",
         "type": "float",
-        "default": "1"
+        "default": "1",
+        "tooltip": "You start out this many times larger than normal. A good way to build a macro character is to design them at normal size, then adjust the scale to get them to the right height."
       },
       {
         "name": "Height",
@@ -875,7 +876,7 @@ options = [
       {
         "name": "Number of tails",
         "id": "tailCount",
-        "type": "float",
+        "type": "int",
         "default": "1"
       },
       {
@@ -1050,7 +1051,8 @@ options = [
           {
             "name": "Scale cum with size",
             "id": "cumScaleWithSize",
-            "type": "checkbox"
+            "type": "checkbox",
+            "tooltip": "If you're ten times bigger than normal, you produce ten times as much cum when digesting prey"
           }
         ]
       },
@@ -1190,7 +1192,8 @@ options = [
           {
             "name": "Scale femcum with size",
             "id": "femcumScaleWithSize",
-            "type": "checkbox"
+            "type": "checkbox",
+            "tooltip": "If you're ten times bigger than normal, you produce ten times as much femcum when digesting prey"
           }
         ]
       },
@@ -1295,7 +1298,8 @@ options = [
           {
             "name": "Scale milk with size",
             "id": "milkScaleWithSize",
-            "type": "checkbox"
+            "type": "checkbox",
+            "tooltip": "If you're ten times bigger than normal, you produce ten times as much milk when digesting prey"
           }
         ]
       }
@@ -1377,7 +1381,8 @@ options = [
       {
         "name": "Scale gas with size",
         "id": "gasScaleWithSize",
-        "type": "checkbox"
+        "type": "checkbox",
+        "tooltip": "If you're ten times bigger than normal, you produce ten times as much gas when digesting prey"
       }
     ]
   },
@@ -1494,7 +1499,8 @@ options = [
           {
             "name": "Scale piss with size",
             "id": "pissScaleWithSize",
-            "type": "checkbox"
+            "type": "checkbox",
+            "tooltip": "If you're ten times bigger than normal, you produce ten times as much piss when digesting prey"
           }
         ]
       }
@@ -1532,7 +1538,8 @@ options = [
       {
         "name": "Scale scat with size",
         "id": "scatScaleWithSize",
-        "type": "checkbox"
+        "type": "checkbox",
+        "tooltip": "If you're ten times bigger than normal, you produce ten times as much scat when digesting prey"
       }
     ]
   },

game.js

@@ -4290,16 +4290,13 @@ function grabFormData(form, warnings, panels, buttons, stats, parts) {
     {
       let sib = parent.previousSibling.previousSibling;
 
-      if (!sib.checked) {
-        console.log("aborting " + form.id);
+      if (!sib.checked && form.id == "") {
         return;
       }
-
     }
 
     parent = parent.parentElement;
 
-
   }
 
   if (form.hasAttribute("data-warning")) {
@@ -4955,13 +4952,20 @@ function render_text_option(li, option) {
   li.appendChild(input);
 }
 
-function render_float_option(li, option) {
+function render_number_option(li, option, type) {
   let input = document.createElement("input");
   input.setAttribute("autocomplete", "off");
   input.setAttribute("id", option.id);
   input.setAttribute("name", option.id);
   input.setAttribute("type", "number");
-  input.setAttribute("step", "any");
+
+  if (type == "int") {
+    input.setAttribute("step", "1");
+    input.setAttribute("pattern", "\\d*");
+  } else if (type == "float") {
+    input.setAttribute("step", "any");
+  }
+
 
   if (option.default) {
     input.setAttribute("placeholder", option.default);
@@ -4972,6 +4976,11 @@ function render_float_option(li, option) {
   label.setAttribute("for", option.id);
   label.innerText = option.name;
 
+  if (option.tooltip != undefined) {
+    label.classList.add("has-tooltip");
+    label.setAttribute("title", option.tooltip);
+  }
+
   li.appendChild(label);
   li.appendChild(input);
 
@@ -4986,6 +4995,14 @@ function render_float_option(li, option) {
   }
 }
 
+function render_float_option(li, option) {
+  render_number_option(li, option, "float");
+}
+
+function render_int_option(li, option) {
+  render_number_option(li, option, "int");
+}
+
 function render_radio_option(options_div, option) {
   option.choices.forEach(function(choice) {
     let li = document.createElement("li");
@@ -5032,6 +5049,11 @@ function render_checkbox_option(li, option) {
 
   attach_form_data(input, option);
 
+  if (option.tooltip != undefined) {
+    label.classList.add("has-tooltip");
+    label.setAttribute("title", option.tooltip);
+  }
+
   li.appendChild(input);
   li.appendChild(label);
 }
@@ -5052,6 +5074,11 @@ function render_select_option(li, option) {
     select.appendChild(sub_option);
   });
 
+  if (option.tooltip != undefined) {
+    label.classList.add("has-tooltip");
+    label.setAttribute("title", option.tooltip);
+  }
+
   li.appendChild(label);
   li.appendChild(select);
 }
@@ -5106,6 +5133,10 @@ function render_option(root_div, li, option) {
     render_float_option(li, option);
   }
 
+  if (option.type == "int") {
+    render_int_option(li, option);
+  }
+
   if (option.type == "radio") {
     render_radio_option(root_div, option);
     // we added n li elements; we need to skip the default one

stroll.html

@@ -206,21 +206,22 @@
     </div>
   </div>
   <div class="character-build" id="character-build-area">
-    <p>Welcome to Stroll</p>
-    <p class="version"></p>
-    <p><b>This game features 18+ content</b></p>
-    <p><a href="https://chemicalcrux.org/stroll">Changelog</a> - <a href="https://t.me/joinchat/BSXHzUZmSqc-CXB1khkuYw">Telegram</a> - <a href="https://discord.gg/7pdcVhD">Discord</a></p>
+    <div class="intro-text">
+      <p>Welcome to Stroll</p>
+      <p class="version"></p>
+      <p><b>This game features 18+ content</b></p>
+      <p><a href="https://chemicalcrux.org/stroll">Changelog</a> - <a href="https://t.me/joinchat/BSXHzUZmSqc-CXB1khkuYw">Telegram</a> - <a href="https://discord.gg/7pdcVhD">Discord</a></p>
 
-    <p>Stroll is a text-based macro game. Stomp things, eat things, abuse things - then grow larger and do it all over again.</p>
+      <p>Stroll is a text-based macro game. Stomp things, eat things, abuse things - then grow larger and do it all over again.</p>
 
-    <p><b>Stroll is designed for modern browsers. Chrome, Firefox, or Edge are suggested. Older browsers will likely fail to run the game. Mobile should work fine.</b></p>
+      <p><b>Stroll is designed for modern browsers. Chrome, Firefox, or Edge are suggested. Older browsers will likely fail to run the game. Mobile should work fine.</b></p>
 
-    <div id="browser-ok"></div>
-
-    <p>Leave a box empty for a sane default value</p>
-    <p>Lengths in meters, areas in square meters, masses in kilograms, times in seconds</p>
-    <p>(but you can preview the customary value)</p>
-    <p>Click on boxed titles to enable and disable features.</p>
+      <p>Leave a box empty for a sane default value</p>
+      <p>Lengths in meters, areas in square meters, masses in kilograms, times in seconds</p>
+      <p>(but you can preview the customary value)</p>
+      <p>Click on boxed titles to enable and disable features.</p>
+      <p class="has-tooltip" title="uwu">Underlined options have tooltips</p>
+    </div>
 
     <div id="custom-species">
 

style.css

@@ -88,10 +88,14 @@ body.dark div {
 
 #log {
   overflow: auto;
+  padding: 25px;
+  box-sizing: border-box;
 }
 
 #react-log {
   overflow: auto;
+  padding: 25px;
+  box-sizing: border-box;
 }
 
 body.light #react-log {
@@ -187,6 +191,7 @@ progress {
   text-align: right;
   min-width: 250px;
   flex: 1;
+  padding: 25px;
 }
 
 .preset-selector {
@@ -699,3 +704,7 @@ body.dark .meterLabel {
 #custom-characters {
   font-size: 24px;
 }
+
+.intro-text {
+  font-size: 18px;
+}