Added a basic custom species menu

game.js

@@ -28,10 +28,10 @@ var macro =
   get analVoreArea() { return this.scaling(this.baseAnalVoreArea, this.scale, 2); },
   "baseAssArea": 0.4,
   get assArea() { return this.scaling(this.baseAssArea, this.scale, 2); },
-  "baseHandArea": 0.3,
+  "baseHandArea": 0.1,
   get handArea() { return this.scaling(this.baseHandArea, this.scale, 2); },
 
-  "baseDickLength": 0.3048,
+  "baseDickLength": 0.3,
   "baseDickDiameter": 0.08,
   "dickDensity": 1000,
   "dickScale": 1,
@@ -998,18 +998,6 @@ function grow_lots()
   update(["Power surges through you as you grow " + heightStr + " taller and gain " + massStr + " of mass",newline]);
 }
 
-function option_male() {
-  macro.maleParts = !macro.maleParts;
-
-  document.getElementById("button-male-genitals").innerHTML = (macro.maleParts ? "Male genitals on" : "Male genitals off");
-}
-
-function option_female() {
-  macro.femaleParts = !macro.femaleParts;
-
-  document.getElementById("button-female-genitals").innerHTML = (macro.femaleParts ? "Female genitals on" : "Female genitals off");
-}
-
 function preset(name) {
   switch(name){
     case "Fen":
@@ -1027,7 +1015,26 @@ function preset(name) {
       macro.baseMass = 180591661866272;
   }
 }
-function startGame() {
+
+function startGame(e) {
+  if (e.preventDefault)
+    e.preventDefault();
+
+  form = document.forms.namedItem("custom-species-form");
+
+  for (var i=0; i<form.length; i++) {
+    if (form[i].value != "") {
+      if (form[i].type == "text")
+        macro[form[i].name] = form[i].value;
+      else if (form[i].type == "number")
+        macro[form[i].name] = parseFloat(form[i].value);
+      else if (form[i].type == "checkbox") {
+        macro[form[i].name] = form[i].checked;
+      }
+    }
+  }
+
+  document.getElementById("log-area").style.display = 'inline';
   document.getElementById("option-panel").style.display = 'none';
   document.getElementById("action-panel").style.display = 'flex';
 
@@ -1068,7 +1075,6 @@ function startGame() {
     tr.appendChild(th);
   }
 
-
   table.appendChild(tr);
   for (var key in things) {
     if (things.hasOwnProperty(key) && key != "Container") {
@@ -1103,6 +1109,8 @@ function startGame() {
   update();
 
   document.getElementById("stat-container").style.display = 'flex';
+
+  return false;
 }
 
 window.addEventListener('load', function(event) {
@@ -1134,8 +1142,6 @@ window.addEventListener('load', function(event) {
   document.getElementById("button-verbose").addEventListener("click",toggle_verbose);
   document.getElementById("button-grow-lots").addEventListener("click",grow_lots);
 
-  document.getElementById("button-male-genitals").addEventListener("click",option_male);
-  document.getElementById("button-female-genitals").addEventListener("click",option_female);
-  document.getElementById("button-start").addEventListener("click",startGame);
+  document.getElementById("custom-species-form").addEventListener("submit",startGame);
   setTimeout(pick_move, 2000);
 });

stroll.html

@@ -23,7 +23,7 @@
       </div>
       <div id=log-area>
         <div id=log>
-          <div>Welcome to Stroll 0.2.6</div>
+          <div>Welcome to Stroll 0.2.7</div>
           <div><b>This game features 18+ content</b></div>
           <div><a href="https://chemicalcrux.org/stroll">Changelog</a></div>
           <div>It's a nice day for a walk</div>
@@ -51,9 +51,97 @@
 
 
       <div class=option-container id=option-panel>
-        <button class=option-button id=button-male-genitals>Male genitals on</button>
-        <button class=option-button id=button-female-genitals>Female genitals on</button>
-        <button class=option-button id=button-start>Start game</button>
+        <p>Welcome to Stroll 0.2.7</p>
+        <p><b>This game features 18+ content</b></p>
+        <a href="https://chemicalcrux.org/stroll">Changelog</a>
+        <br>
+        <div id=custom-species>
+          <p>Build your Character</p>
+          <form id=custom-species-form name="custom-species-form">
+            <ul class="flex-outer">
+              <li>
+                <label for="species">Species</label>
+                <input type="text" name="species" placeholder="crux"/>
+              </li>
+              <li>
+                <label for="scale" class="has-tooltip" title="Multiply your base height by this much">Scale (?)</label>
+                <input type="text" name="scale" placeholder="1"/>
+              </li>
+              <li>
+                <label for="baseHeight">Height</label>
+                <input type="number" name="baseHeight" placeholder="2.26"/>
+              </li>
+              <li>
+                <label for="baseMass">Weight</label>
+                <input type="number" name="baseMass" placeholder="135">
+              </li>
+              <br>
+              <li>
+                Paw size (square meters):<br>
+                <input type="number" name="basePawArea" placeholder="0.1"><br>
+              </li>
+              <li>
+                Hand size (square meters):<br>
+                <input type="number" name="baseAnalVoreArea" placeholder="0.1"><br>
+              </li>
+              <li>
+                Tailhole size (square meters):<br>
+                <input type="number" name="baseAnalVoreArea" placeholder="0.1"><br>
+              </li>
+              <li>
+                Ass size (square meters):<br>
+                <input type="number" name="baseAnalVoreArea" placeholder="0.4"><br>
+              </li>
+              <br>
+              <div>
+                Male genitals:<br>
+                <input type="checkbox" checked=true name="maleParts"/><br>
+                <div class=reveal-if-active>
+                  <li>
+                    Dick length:
+                    <input type="text" name="baseDickLength" placeholder="0.3"/><br>
+                  </li>
+                  <li>
+                    Dick thickness:
+                    <input type="text" name="baseDickDiameter" placeholder="0.08"/><br>
+                  </li>
+                  <li>
+                    Ball diameter:
+                    <input type="text" name="baseBallDiameter" placeholder="0.05"/><br>
+                  </li>
+                  <li>
+                    Cum production factor:
+                    <input type="text" name="cumFactor" placeholder="1"/><br>
+                  </li>
+                </div>
+              </div>
+              <br>
+              <div>
+                Female genitals:<br>
+                <input type="checkbox" checked=true name="femaleParts"/><br>
+                <div class=reveal-if-active>
+                  <li>
+                    Slit length:<br>
+                    <input type="text" name="baseVaginaLength" placeholder="0.1"/><br>
+                  </li>
+                  <li>
+                    Slit width:<br>
+                    <input type="text" name="baseVaginaWidth" placeholder="0.05"/><br>
+                  </li>
+                  <li>
+                    Breast diameter:<br>
+                    <input type="text" name="baseBreastDiameter" placeholder="0.1"/><br>
+                  </li>
+                  <li>
+                    Femcum production factor:<br>
+                    <input type="text" name="femcumFactor" placeholder="1"/><br>
+                  </li>
+                </div>
+              </div>
+            </ul>
+            <input type="submit" value="Start game" class=option-button id=button-start></button>
+          </form>
+        </div>
       </div>
     </div>
     <table id=victim-table>

style.css

@@ -23,6 +23,7 @@ body {
 
 #log-area {
   flex: 3;
+  display:none;
 }
 
 #log {
@@ -61,9 +62,7 @@ body {
 }
 
 .option-container {
-  flex-wrap: wrap;
-  max-width: 300px;
-  flex: 2;
+  margin: auto;
 }
 
 .button-container {
@@ -77,10 +76,6 @@ body {
   display: none;
 }
 
-#option-panel {
-  display: flex;
-}
-
 .option-button {
   font-size: 20px;
   width: 120px;
@@ -92,6 +87,7 @@ body {
   width: 300px;
   height: 100px;
 }
+
 .action-button {
   font-size: 24px;
   width: 120px;
@@ -106,3 +102,40 @@ body {
 .victim-table-cell {
   width: 10%;
 }
+
+.reveal-if-active {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+
+input[type="radio"]:checked ~ .reveal-if-active,
+input[type="checkbox"]:checked ~ .reveal-if-active {
+  opacity: 1;
+  max-height: 200px; /* little bit of a magic number :( */
+  overflow: visible;
+}
+
+.flex-outer li,
+.flex-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.flex-outer > li > label,
+.flex-outer li p {
+  flex: 1 0 120px;
+  max-width: 220px;
+}
+
+.flex-outer > li > label + *,
+.flex-inner {
+  flex: 1 0 220px;
+}
+
+.has-tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}