Started working on a procedurally generated character creation screen

features.js

@@ -1,13 +1,84 @@
-features = {
-  "default": {
-    "dependencies": [
-
-    ],
-    "growth_parts": [
-      "paws"
-    ],
-    "victims": [
-      ["stomped"],
+options = [
+  {
+    "name": "Basics",
+    "id": "basics",
+    "optional": false,
+    "entries": [
+      {
+        "name": "Name",
+        "id": "name",
+        "type": "text"
+      },
+      {
+        "name": "Species",
+        "id": "species",
+        "type": "text"
+      },
+      {
+        "name": "Scale",
+        "id": "scale",
+        "type": "float",
+        "default": "1"
+      },
+      {
+        "name": "Height",
+        "id": "baseHeight",
+        "type": "float",
+        "default": "2.26",
+        "unit": "length"
+      },
+      {
+        "name": "Weight",
+        "id": "baseWeight",
+        "type": "float",
+        "default": "135",
+        "unit": "mass"
+      },
+      {
+        "name": "Paw area",
+        "id": "basePawArea",
+        "type": "float",
+        "default": "0.1",
+        "unit": "area"
+      },
+      {
+        "name": "Hand area",
+        "id": "baseHandArea",
+        "type": "float",
+        "default": "0.1",
+        "unit": "area"
+      },
+      {
+        "name": "Ass area",
+        "id": "baseAssArea",
+        "type": "float",
+        "default": "0.2",
+        "unit": "area"
+      }
+    ]
+  },
+  {
+    "name": "Difficulty",
+    "id": "difficulty",
+    "optional": false,
+    "entries":
+    [
+      {
+        "type": "radio",
+        "id": "difficulty",
+        "default": "0",
+        "choices":
+        [
+          {
+            "name": "Sandbox",
+            "value": "0"
+          },
+          {
+            "name": "Stompvival",
+            "value": "1"
+          }
+        ]
+      }
     ]
   }
-}
+];

game.js

@@ -4711,6 +4711,8 @@ window.addEventListener('load', function(event) {
     }
   }());
 
+  construct_options();
+
   document.querySelectorAll("input[type='number']").forEach(function(x) {
     x.addEventListener("input", function() { updatePreview(x.id); });
   });
@@ -4772,5 +4774,140 @@ window.addEventListener('load', function(event) {
   document.getElementById("button-load-custom").addEventListener("click",function() { loadSettings(); });
   document.getElementById("button-save-custom").addEventListener("click",saveSettings);
   document.getElementById("button-start").addEventListener("click",startGame);
+
   setTimeout(pick_move, 2000);
 });
+
+function construct_options() {
+  let root = document.getElementById("character-flex-outer");
+
+  options.forEach(function(category) {
+    let name = category.name;
+    let cat_id = category.id;
+
+    let cat_div = document.createElement("div");
+    cat_div.classList.add("custom-category");
+
+    let header_div = document.createElement("div");
+
+    if (category.optional) {
+      header_div.classList.add("custom-header");
+    } else {
+      header_div.classList.add("custom-header-static");
+    }
+
+    header_div.innerText = name;
+
+    let options_div = document.createElement("div");
+
+    category.entries.forEach(function(option) {
+      let li = document.createElement("li");
+
+      if (option.type == "text") {
+        let input = document.createElement("input");
+        input.setAttribute("autocomplete", "off");
+        input.setAttribute("id", option.id);
+        input.setAttribute("name", option.id);
+        input.setAttribute("type", "text");
+
+        if (option.default) {
+          input.setAttribute("placeholder", option.default);
+        }
+
+        let label = document.createElement("label");
+        label.setAttribute("for", option.id);
+        label.innerText = option.name;
+
+        li.appendChild(label);
+        li.appendChild(input);
+      }
+
+      if (option.type == "float") {
+        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 (option.default) {
+          input.setAttribute("placeholder", option.default);
+        }
+
+
+        let label = document.createElement("label");
+        label.setAttribute("for", option.id);
+        label.innerText = option.name;
+
+        li.appendChild(label);
+        li.appendChild(input);
+
+        if (option.unit) {
+          input.setAttribute("data-unit", option.unit);
+
+          let unit = document.createElement("div");
+
+          unit.classList.add("preview");
+          unit.id = option.id + "Preview";
+          li.appendChild(unit);
+        }
+
+      }
+
+      if (option.type == "radio") {
+        option.choices.forEach(function(choice) {
+          let li = document.createElement("li");
+
+          let input = document.createElement("input");
+          input.setAttribute("autocomplete", "off");
+          input.setAttribute("id", option.id + "-" + choice.value);
+          input.setAttribute("name", option.id);
+          input.setAttribute("value", choice.value);
+          input.setAttribute("type", "radio");
+
+          if (option.default == choice.value) {
+            input.setAttribute("checked", true);
+          }
+
+          let label = document.createElement("label");
+          label.setAttribute("for", option.id + "-" + choice.value);
+          label.innerText = choice.name;
+
+          li.appendChild(input);
+          li.appendChild(label);
+          options_div.appendChild(li);
+
+        });
+
+        // we added n li elements; we need to skip the default one
+        return;
+      }
+
+      if (option.type == "select") {
+        let label = document.createElement("label");
+        label.setAttribute("for", option.id);
+
+        let select = document.createElement("select");
+        select.setAttribute("name", option.id);
+
+        option.choices.forEach(function(choice) {
+          let sub_option = document.createElement("option");
+          sub_option.innerText = choice.name;
+          sub_option.setAttribute("value", choice.value);
+
+          select.appendChild(sub_option);
+        });
+
+        li.appendChild(label);
+        li.appendChild(select);
+      }
+
+      options_div.appendChild(li);
+
+    });
+
+    cat_div.appendChild(header_div);
+    cat_div.appendChild(options_div);
+    root.appendChild(cat_div);
+  });
+}

stroll.html

@@ -6,6 +6,7 @@
   <title>Stroll</title>
   <link rel="stylesheet" href="style.css">
   <script src="sounds.js"></script>
+  <script src="features.js"></script>
   <script src="migrations.js"></script>
   <script src="presets.js"></script>
   <script src="units.js"></script>
@@ -427,51 +428,9 @@
         </div>
       </ul>
       <form id="custom-species-form" name="custom-species-form">
-        <ul class="flex-outer">
-          <div class="custom-category">
-            <div class="custom-header-static">Basics</div>
-            <div>
-              <li>
-                <label for="name">Name</label>
-                <input autocomplete="off" type="text" id="name" name="name" />
-              </li>
-              <li>
-                <label for="species">Species</label>
-                <input autocomplete="off" type="text" id="species" name="species" placeholder="crux" />
-              </li>
-              <li>
-                <label for="scale" class="has-tooltip" title="How many times larger than normal you start.">Scale (?)</label>
-                <input autocomplete="off" type="number" step="any" id="scale" name="scale" placeholder="1" />
-                <div class="preview" id="scalePreview"></div>
-              </li>
-              <li>
-                <label for="baseHeight">Height</label>
-                <input autocomplete="off" type="number" step="any" id="baseHeight" name="baseHeight" data-unit="length" placeholder="2.26" />
-                <div class="preview" id="baseHeightPreview"></div>
-              </li>
-              <li>
-                <label for="baseMass">Weight</label>
-                <input autocomplete="off" type="number" step="any" id="baseMass" name="baseMass" data-unit="mass" placeholder="135">
-                <div class="preview" id="baseMassPreview"></div>
-              </li>
-              <li>
-                <label for="basePawArea">Paw area</label>
-                <input autocomplete="off" type="number" step="any" id="basePawArea" name="basePawArea" data-unit="area" placeholder="0.1">
-                <div class="preview" id="basePawAreaPreview"></div>
-              </li>
-              <li>
-                <label for="baseHandArea">Hand area</label>
-                <input autocomplete="off" type="number" step="any" id="baseHandArea" name="baseHandArea" data-unit="area" placeholder="0.1">
-                <div class="preview" id="baseHandAreaPreview"></div>
-              </li>
-              <li>
-                <label for="baseAssArea">Ass area</label>
-                <input autocomplete="off" type="number" step="any" id="baseAssArea" name="baseAssArea" data-unit="area" placeholder="0.25">
-                <div class="preview" id="baseAssAreaPreview"></div>
-              </li>
-            </div>
-          </div>
+        <ul class="flex-outer" id="character-flex-outer">
 
+          <!--
           <div class="custom-category">
             <div class="custom-header-static">Difficulty</div>
             <div>
@@ -487,6 +446,7 @@
             </div>
             </div>
           </div>
+        -->
 
           <div class="custom-category">
             <div class="custom-header-static">Brutality</div>