From b398e41d718a050a7d89c43c0408e264496d7d6f Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Fri, 13 Apr 2018 18:36:47 -0400
Subject: [PATCH] Values are previewed now..albeit just copying the input value
 over for now

---
 game.js     | 19 ++++++++++++++++++-
 stroll.html | 38 ++++++++++++++++++++++++++++++++++++++
 style.css   |  8 ++++++--
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/game.js b/game.js
index 899f147..32e5f05 100644
--- a/game.js
+++ b/game.js
@@ -3385,10 +3385,23 @@ function registerActions() {
   buttons.forEach( function(button) {
     let name = button.id;
     name = name.replace(/button-action-/,"");
-    button.addEventListener("click", function() { window[name]() });
+    button.addEventListener("click", function() { window[name](); });
   });
 }
 
+function updateAllPreviews() {
+  document.querySelectorAll(".preview").forEach(function(prev) {
+    let name = prev.id.replace("Preview","");
+    updatePreview(name);
+  });
+}
+
+function updatePreview(name) {
+  let value = document.getElementById(name).value;
+  if (value == "")
+    value = document.getElementById(name).placeholder;
+  document.getElementById(name + "Preview").innerHTML = value;
+}
 function debugLog() {
   console.log("Your character settings:");
   console.log(JSON.stringify(generateSettings()));
@@ -3410,6 +3423,10 @@ window.addEventListener('load', function(event) {
     }
   }());
 
+  document.querySelectorAll("input[type='number']").forEach(function(x) {
+    x.addEventListener("input", function() { updatePreview(x.id); });
+  });
+  
   presets.sort(function(x,y) {return x.name.localeCompare(y.name); } );
 
   let list = document.getElementById("character-presets");
diff --git a/stroll.html b/stroll.html
index 65aae61..3e00209 100644
--- a/stroll.html
+++ b/stroll.html
@@ -264,26 +264,32 @@
               <li>
                 <label for="scale" class="has-tooltip" title="How many times larger than normal you start.">Scale (?)</label>
                 <input type="number" step="any" id="scale" name="scale" placeholder="1" />
+                <div class="preview" id="scalePreview"></div>
               </li>
               <li>
                 <label for="baseHeight">Height</label>
                 <input type="number" step="any" id="baseHeight" name="baseHeight" placeholder="2.26" />
+                <div class="preview" id="baseHeightPreview"></div>
               </li>
               <li>
                 <label for="baseMass">Weight</label>
                 <input type="number" step="any" id="baseMass" name="baseMass" placeholder="135">
+                <div class="preview" id="baseMassPreview"></div>
               </li>
               <li>
                 <label for="basePawArea">Paw area</label>
                 <input type="number" step="any" id="basePawArea" name="basePawArea" placeholder="0.1">
+                <div class="preview" id="basePawAreaPreview"></div>
               </li>
               <li>
                 <label for="baseHandArea">Hand area</label>
                 <input type="number" step="any" id="baseHandArea" name="baseHandArea" placeholder="0.1">
+                <div class="preview" id="baseHandAreaPreview"></div>
               </li>
               <li>
                 <label for="baseAssArea">Ass area</label>
                 <input type="number" step="any" id="baseAssArea" name="baseAssArea" placeholder="0.4">
+                <div class="preview" id="baseAssAreaPreview"></div>
               </li>
             </div>
           </div>
@@ -411,6 +417,7 @@
               <li>
                 <label for="baseAnalVoreDiameter">Tailhole diameter</label>
                 <input type="number" step="any" id="baseAnalVoreDiameter" name="baseAnalVoreDiameter" placeholder="0.1">
+                <div class="preview" id="baseAnalVoreDiameterPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="analVoreToStomach" title="Otherwise, bowels absorb/digest">Anal vore goes to stomach</label>
@@ -496,10 +503,12 @@
               <li>
                 <label for="baseDickLength">Cock length</label>
                 <input type="number" step="any" id="baseDickLength" name="baseDickLength" placeholder="0.3" />
+                <div class="preview" id="baseDickLengthPreview"></div>
               </li>
               <li>
                 <label for="baseDickDiameter">Cock diameter</label>
                 <input type="number" step="any" id="baseDickDiameter" name="baseDickDiameter" placeholder="0.08" />
+                <div class="preview" id="baseDickDiameterPreview"></div>
               </li>
               <li>
                 <label for="dickStretchiness">Cock stretchiness</label>
@@ -508,22 +517,27 @@
               <li>
                 <label for="baseBallDiameter">Ball diameter</label>
                 <input type="number" step="any" id="baseBallDiameter" name="baseBallDiameter" placeholder="0.05" />
+                <div class="preview" id="baseBallDiameterPreview"></div>
               </li>
               <li>
                 <label for="baseCumRatio" class="has-tooltip" title="scales how much cum is released with each shot">Orgasm cum ratio</label>
                 <input type="number" step="any" id="baseCumRatio" name="baseCumRatio" placeholder="1" />
+                <div class="preview" id="baseCumRatioPreview"></div>
               </li>
               <li>
                 <label for="baseMass">Cum production factor</label>
                 <input type="number" step="any" id="cumScale" name="cumScale" placeholder="1" />
+                <div class="preview" id="cumScalePreview"></div>
               </li>
               <li>
                 <label for="cumStorageScale">Cum storage multiplier</label>
                 <input type="number" step="any" id="cumStorageScale" name="cumStorageScale" placeholder="1" />
+                <div class="preview" id="cumStorageScalePreview"></div>
               </li>
               <li>
                 <label for="baseCumDigestFactor">Cum digestion factor</label>
                 <input type="number" step="any" id="baseCumDigestFactor" name="baseCumDigestFactor" placeholder="1" />
+                <div class="preview" id="baseCumDigestFactorPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="cumScaleWithSize" title="If checked, produces more cum from the same prey as you get larger">Scale cum with size</label>
@@ -539,6 +553,7 @@
               <li>
                 <label for="baseBreastDiameter">Breast diameter</label>
                 <input type="number" step="any" id="baseBreastDiameter" name="baseBreastDiameter" placeholder="0.1" />
+                <div class="preview" id="baseBreastDiameterPreview"></div>
               </li>
               <li>
                 <div class="custom-category-sub">
@@ -549,14 +564,17 @@
                       <li>
                         <label for="lactationFactor" class="has-tooltip" title="scales how much milk is released with each squeeze">Lactation ratio</label>
                         <input type="number" step="any" id="lactationFactor" name="lactationFactor" placeholder="0.25" />
+                <div class="preview" id="lactationFactorPreview"></div>
                       </li>
                       <li>
                         <label for="lactationScale">Milk production factor</label>
                         <input type="number" step="any" id="lactationScale" name="lactationScale" placeholder="1" />
+                <div class="preview" id="lactationScalePreview"></div>
                       </li>
                       <li>
                         <label for="milkStorageScale">Milk storage multiplier</label>
                         <input type="number" step="any" id="milkStorageScale" name="milkStorageScale" placeholder="1" />
+                <div class="preview" id="milkStorageScalePreview"></div>
                       </li>
                     </div>
                   </ul>
@@ -575,6 +593,7 @@
                       <li>
                         <label for="baseMilkDigestFactor">Milk digestion factor</label>
                         <input type="number" step="any" id="baseMilkDigestFactor" name="baseMilkDigestFactor" placeholder="1" />
+                <div class="preview" id="baseMilkDigestFactorPreview"></div>
                       </li>
                       <li>
                         <label class="has-tooltip" for="milkScaleWithSize" title="If checked, produces more milk from the same prey as you get larger">Scale milk with size</label>
@@ -594,10 +613,12 @@
               <li>
                 <label for="baseVaginaLength">Slit length</label>
                 <input type="number" step="any" id="baseVaginaLength" name="baseVaginaLength" placeholder="0.1" />
+                <div class="preview" id="baseVaginaLengthPreview"></div>
               </li>
               <li>
                 <label for="baseVaginaWidth">Slit width</label>
                 <input type="number" step="any" id="baseVaginaWidth" name="baseVaginaWidth" placeholder="0.05" />
+                <div class="preview" id="baseVaginaWidthPreview"></div>
               </li>
               <li>
                 <label for="vaginaStretchiness">Slit stretchiness</label>
@@ -606,18 +627,22 @@
               <li>
                 <label for="baseFemcumRatio" class="has-tooltip" title="scales how much femcum is released with each shot">Orgasm femcum ratio</label>
                 <input type="number" step="any" id="baseFemcumRatio" name="baseFemcumRatio" placeholder="1" />
+                <div class="preview" id="baseFemcumRatioPreview"></div>
               </li>
               <li>
                 <label for="femcumScale">Femcum production factor</label>
                 <input type="number" step="any" id="femcumScale" name="femcumScale" placeholder="1" />
+                <div class="preview" id="femcumScalePreview"></div>
               </li>
               <li>
                 <label for="femcumStorageScale">Femcum storage multiplier</label>
                 <input type="number" step="any" id="femcumStorageScale" name="femcumStorageScale" placeholder="1" />
+                <div class="preview" id="femcumStorageScalePreview"></div>
               </li>
               <li>
                 <label for="baseFemcumDigestFactor">Femcum digestion factor</label>
                 <input type="number" step="any" id="baseFemcumDigestFactor" name="baseFemcumDigestFactor" placeholder="1" />
+                <div class="preview" id="baseFemcumDigestFactorPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="femcumScaleWithSize" title="If checked, produces more femcum from the same prey as you get larger">Scale femcum with size</label>
@@ -633,10 +658,12 @@
               <li>
                 <label class="has-tooltip" for="basePawStenchArea" title="How many times your paw area should be covered in stench">Paw stench area</label>
                 <input type="number" step="any" id="basePawStenchArea" name="basePawStenchArea" placeholder="1" />
+                <div class="preview" id="basePawStenchAreaPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="baseAssStenchArea" title="How many times your ass' area should be covered in stench">Ass stench area</label>
                 <input type="number" step="any" id="baseAssStenchArea" name="baseAssStenchArea" placeholder="1" />
+                <div class="preview" id="baseAssStenchAreaPreview"></div>
               </li>
             </div>
           </div>
@@ -656,14 +683,17 @@
               <li>
                 <label for="gasScale">Gas production factor</label>
                 <input type="number" step="any" id="gasScale" name="gasScale" placeholder="1" />
+                <div class="preview" id="gasScalePreview"></div>
               </li>
               <li>
                 <label for="gasStorageScale">Gas storage multiplier</label>
                 <input type="number" step="any" id="gasStorageScale" name="gasStorageScale" placeholder="1" />
+                <div class="preview" id="gasStorageScalePreview"></div>
               </li>
               <li>
                 <label for="baseGasDigestFactor">Gas digestion factor</label>
                 <input type="number" step="any" id="baseGasDigestFactor" name="baseGasDigestFactor" placeholder="1" />
+                <div class="preview" id="baseGasDigestFactorPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="gasScaleWithSize" title="If checked, produces more gas from the same prey as you get larger">Scale gas with size</label>
@@ -711,10 +741,12 @@
               <li>
                 <label for="pissScale" >Piss production scale</label>
                 <input type="number" step="any" id="pissScale" name="pissScale" placeholder="1" />
+                <div class="preview" id="pissScalePreview"></div>
               </li>
               <li>
                 <label for="pissStorageScale">Piss storage multiplier</label>
                 <input type="number" step="any" id="pissStorageScale" name="pissStorageScale" placeholder="1" />
+                <div class="preview" id="pissStorageScalePreview"></div>
               </li>
               <div class="custom-category-sub">
                 <ul class="flex-outer-sub">
@@ -724,14 +756,17 @@
                     <li>
                       <label for="baseUrethraDiameter">Urethra diameter</label>
                       <input type="number" step="any" id="baseUrethraDiameter" name="baseUrethraDiameter" placeholder="0.03" />
+                <div class="preview" id="baseUrethraDiameterPreview"></div>
                     </li>
                     <li>
                       <label for="urethraStretchiness">Urethra stretchiness</label>
                       <input type="number" step="any" id="urethraStretchiness" name="urethraStretchiness" placeholder="5" />
+                <div class="preview" id="urethraStretchinessPreview"></div>
                     </li>
                     <li>
                       <label for="basePissDigestFactor">Piss digestion factor</label>
                       <input type="number" step="any" id="basePissDigestFactor" name="basePissDigestFactor" placeholder="1" />
+                <div class="preview" id="basePissDigestFactorPreview"></div>
                     </li>
                     <li>
                       <label class="has-tooltip" for="pissScaleWithSize" title="If checked, produces more piss from the same prey as you get larger">Scale piss with size</label>
@@ -753,14 +788,17 @@
               <li>
                 <label for="baseScatDigestFactor">Scat digestion factor</label>
                 <input type="number" step="any" id="baseScatDigestFactor" name="baseScatDigestFactor" placeholder="1" />
+                <div class="preview" id="baseScatDigestFactorPreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="scatScale" title="1 = 1% fill per second">Passive scat production</label>
                 <input type="number" step="any" id="scatScale" name="scatScale" placeholder="0" />
+                <div class="preview" id="scatScalePreview"></div>
               </li>
               <li>
                 <label for="scatStorageScale">Scat storage multiplier</label>
                 <input type="number" step="any" id="scatStorageScale" name="scatStorageScale" placeholder="1" />
+                <div class="preview" id="scatStorageScalePreview"></div>
               </li>
               <li>
                 <label class="has-tooltip" for="scatScaleWithSize" title="If checked, produces more scat from the same prey as you get larger">Scale scat with size</label>
diff --git a/style.css b/style.css
index c42edf7..5a7fd26 100644
--- a/style.css
+++ b/style.css
@@ -301,13 +301,17 @@ body.dark input[type="checkbox"]:checked+
 
 .flex-outer label,
 .flex-outer > div > div > li > label {
-  flex: 1 0 150px;
+  flex: 0 0 200px;
 }
 
 .flex-outer > li > label + *,
 .flex-outer label + *,
 .flex-inner {
-  flex: 1 0 200px;
+  flex: 1 0 100px;
+}
+
+.preview {
+  flex: 1 0 100px;
 }
 
 .flex-outer-sub {