added saving/loading sim controls

dist/css/style.css

@@ -271,8 +271,7 @@ button:active{
 }
 
 #video {
-    height: 100%;
+    height: 200px;
-    max-height: 190px;
     margin: auto;
     margin-bottom: 0;
     padding-bottom: 0;

dist/index.html

@@ -233,7 +233,10 @@
 						<label for="food-blocks" title='When on, reproduction will fail if offspring intersect with food. When off, offspring will remove blocking food.'>Food blocks reproduction</label>
 						<input type="checkbox" id="food-blocks" checked>
 						<br>
-						
+						<button id='save-controls'>Save</button>
+						<button id='load-controls'>Load</button>
+						<a id="download-el" style="display: none;"></a>
+						<input id="upload-el" style="display: none;" type="file">
 					</div>
 				</div>
 				<div id='stats' class='tab'>

src/Controllers/ControlPanel.js

@@ -269,10 +269,37 @@ class ControlPanel {
         $('#reset-rules').click(() => {
             this.setHyperparamDefaults();
         });
+        $('#save-controls').click(() => {
+            let data = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(Hyperparams));
+            let downloadEl = document.getElementById('download-el');
+            downloadEl.setAttribute("href", data);
+            downloadEl.setAttribute("download", "controls.json");
+            downloadEl.click();
+        });
+        $('#load-controls').click(() => {
+            $('#upload-el').click();
+        });
+        $('#upload-el').change((e)=>{
+            let files = e.target.files;
+            if (!files.length) {return;};
+            let reader = new FileReader();
+            reader.onload = (e) => {
+                let result=JSON.parse(e.target.result);
+                Hyperparams.loadJsonObj(result);
+                this.updateHyperparamUIValues();
+                // have to clear the value so change() will be triggered if the same file is uploaded again
+                $('#upload-el')[0].value = '';
+            };
+            reader.readAsText(files[0]);
+        });
     }
 
     setHyperparamDefaults() {
         Hyperparams.setDefaults();
+        this.updateHyperparamUIValues();
+    }
+
+    updateHyperparamUIValues(){
         $('#food-prod-prob').val(Hyperparams.foodProdProb);
         $('#lifespan-multiplier').val(Hyperparams.lifespanMultiplier);
         $('#rot-enabled').prop('checked', Hyperparams.rotationEnabled);

src/Hyperparameters.js

@@ -2,8 +2,6 @@ const Neighbors = require("./Grid/Neighbors");
 
 const Hyperparams = {
     setDefaults: function() {
-        this.headless = false;
-
         this.lifespanMultiplier = 100;
         this.foodProdProb = 5;
         this.killableNeighbors = Neighbors.adjacent;
@@ -27,6 +25,12 @@ const Hyperparams = {
 
         this.foodDropProb = 0;
     },
+
+    loadJsonObj(obj) {
+        for (let key in obj) {
+            this[key] = obj[key];
+        }
+    }
 }
 
 Hyperparams.setDefaults();