grid resizing and auto reset

dist/css/style.css

@@ -7,7 +7,8 @@ body{
 }
 
 canvas {
-    display: block;
+    /* display: block; */
+
 }
 
 * {
@@ -16,21 +17,22 @@ canvas {
 }
 
 #env {
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 300px; /* must correspond to control-panel height*/
     width: 100%;
+    text-align: center;
 }
 
 .control-panel {
     height: 300px;
     width: 100%;
     bottom: 0;
-    position: absolute;
+    position: fixed;
     background-color: gray;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(2, 1fr);
+    /* grid-template-rows: repeat(2, 1fr); */
 }
 
 .control-set {
@@ -39,21 +41,19 @@ canvas {
     border: 10px;
     border-color: black;
     background-color: lightgray;
+    grid-row: 1;
 }
 
 #speed-controller {
     grid-column: 1;
-    grid-row: 1;
 }
 
-#stats {
+.col-row-input {
-    grid-column: 1;
+    display: none;
-    grid-row: 2;
 }
 
 #tab-container {
     grid-column: 2 / 4;
-    grid-row: 1 / 3;
 }
 
 .tabnav {
@@ -77,14 +77,11 @@ canvas {
 .tab {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1;
-}
-
-.tab#hyperparameters {
     display: none;
-
+    padding: 10px
 }
 
-.tab#editor {
+.tab#about {
     display: grid;
 }
 

dist/html/index.html

@@ -21,20 +21,44 @@
 				<p id='fps-actual'></p>
 				<br/>
 				<button id='reset-env'>Reset Environment</button>
-			</div>
+				<label for="auto-reset">Auto Reset</label>
-
+				<input type="checkbox" id="auto-reset" checked>
-			<div id='stats' class='control-set'>
+				<br><br/>
-				<h2>Stats</h2>
+				<h2>Grid Size</h2>
-				<p id='org-count'>Organism count: </p>
+				<label for="cell-size">Cell Size:</label>
-				<p id='org-record'>Highest count: </p>
+				<input type="number" id="cell-size" min="1" max="100" value=5 step="1">
-				<p id='avg-mut'>Average Mutation Rate: </p>
+				<label for="fill-window">Fill Window</label>
+				<input type="checkbox" id="fill-window" checked>
+				<br/>
+				<div class='col-row-input'>
+					<label for="col-input">Columns:</label>
+					<input type="number" id="col-input" min="1" value=100 step="1">
+					<br/>
+					<label for="row-input">Rows:</label>
+					<input type="number" id="row-input" min="1" value=100 step="1">
+				</div>
+				<br/>
+				<button id='resize'>Resize and Reset</button>
 			</div>
 
 			<div id='tab-container' class='control-set'>
 
 				<div class="tabnav">
+					<p class='tabnav-item' id='about'>About</p>
 					<p class='tabnav-item' id='editor'>Editor</p>
 					<p class='tabnav-item' id='hyperparameters'>Hyperparameters</p>
+					<p class='tabnav-item' id='stats'>Stats</p>
+				</div>
+
+				<div id='about' class='tab'>
+					<div class='left-half'>
+						<h2>Welcome to the Life Engine</h2>
+						<p>The life engine is a simulation of a living ecosystem, and allows organisms to survive, reproduce, spread, and compete in a very simple world. The world is a grid, and organisms are made up of cells that occupy different grid locations. Different colored cells do different things for the organism.</p>
+						<p>To understand more about how the simulation works, take a look at the readme (LINK).</p>
+					</div>
+					<div class='right-half'>
+						<p></p>
+					</div>
 				</div>
 
 				<div id='editor' class='tab'>
@@ -80,7 +104,7 @@
 						<input type="number" id="lifespan-multiplier" min="1" max="10000" value=100 step="1">
 						<br/>
 						<label for="fixed-ratio">Use fixed ratio</label>
-						<input type="checkbox" id="fixed-ratio" name="scales" checked>
+						<input type="checkbox" id="fixed-ratio" checked>
 						<br><br/>
 						<h4>Mutation Probabilities</h4>
 						<label for="add-prob">Add Cell:</label>
@@ -97,16 +121,26 @@
 					<div class='right-half'>
 						<h4>Organism Rotation</h4>
 						<label for="mover-rot">Movers can rotate</label>
-						<input type="checkbox" id="mover-rot" name="scales" checked>
+						<input type="checkbox" id="mover-rot" checked>
 						<br/>
 						<label for="offspring-rot">Offspring rotate</label>
-						<input type="checkbox" id="offspring-rot" name="scales" checked>
+						<input type="checkbox" id="offspring-rot" checked>
 						<br/>
 						<h4>Killer Cell Effects</h4>
 						<label for="insta-kill">One touch kill</label>
-						<input type="checkbox" id="insta-kill" name="scales">
+						<input type="checkbox" id="insta-kill"  >
 					</div>
 				</div>
+				<div id='stats' class='tab'>
+					<div class='left-half'>
+						<h2>Stats</h2>
+						<p id='org-count'>Organism count: </p>
+						<p id='org-record'>Highest count: </p>
+						<p id='avg-mut'>Average Mutation Rate: </p>
+					</div>
+					<div class='right-half'></div>
+					
+				</div>
 			</div>
 		</div>
 	</body>

src/Controllers/ControlPanel.js

@@ -6,6 +6,7 @@ class ControlPanel {
     constructor(engine) {
         this.engine = engine;
         this.defineEngineSpeedControls();
+        this.defineGridSizeControls();
         this.defineTabNavigation();
         this.defineHyperparameterControls();
         this.defineModeControls();
@@ -39,6 +40,29 @@ class ControlPanel {
         }.bind(this));
     }
 
+    defineGridSizeControls() {
+        $('#fill-window').change(function() {
+            if (this.checked)
+                $('.col-row-input').css('display' ,'none');
+            else
+                $('.col-row-input').css('display' ,'block');
+        });
+
+        $('#resize').click(function() {
+            var cell_size = $('#cell-size').val();
+            var fill_window = $('#fill-window').is(":checked");
+            if (fill_window) {
+                this.engine.env.resizeFillWindow(cell_size);
+            }
+            else {
+                var cols = $('#col-input').val();
+                var rows = $('#row-input').val();
+                this.engine.env.resizeGridColRow(cell_size, cols, rows);
+            }
+            
+        }.bind(this));
+    }
+
     defineTabNavigation() {
         var self = this;
         $('.tabnav-item').click(function() {
@@ -146,10 +170,13 @@ class ControlPanel {
             }
         });
 
-
+        var env = this.engine.env;
         $('#reset-env').click( function() {
             this.engine.env.reset();
         }.bind(this));
+        $('#auto-reset').change(function() {
+            env.auto_reset = this.checked;
+        });
         $('#kill-all').click( function() {
             this.engine.env.clearOrganisms();
         }.bind(this));

src/Environments/Environment.js

@@ -17,6 +17,7 @@ class Environment{
         this.organisms = [];
         this.walls = [];
         this.total_mutability = 0;
+        this.auto_reset = true;
     }
 
     update(delta_time) {
@@ -40,6 +41,8 @@ class Environment{
             this.total_mutability -= this.organisms[i].mutability;
             this.organisms.splice(i, 1);
         }
+        if (this.organisms.length == 0 && this.auto_reset)
+            this.reset();
     }
 
     OriginOfLife() {
@@ -89,6 +92,22 @@ class Environment{
         this.total_mutability = 0;
         this.OriginOfLife();
     }
+
+    resizeGridColRow(cell_size, cols, rows) {
+        this.renderer.cell_size = cell_size;
+        this.renderer.fillShape(rows*cell_size, cols*cell_size);
+        this.grid_map.resize(cols, rows, cell_size);
+        this.reset();
+    }
+
+    resizeFillWindow(cell_size) {
+        this.renderer.cell_size = cell_size;
+        this.renderer.fillWindow('env');
+        var cols = Math.floor(this.renderer.width / cell_size);
+        var rows = Math.floor(this.renderer.height / cell_size);
+        this.grid_map.resize(cols, rows, cell_size);
+        this.reset();
+    }
 }
 
 module.exports = Environment;

src/Grid/GridMap.js

@@ -2,7 +2,11 @@ const Cell = require('../Organism/Cell/Cell');
 const CellTypes = require('../Organism/Cell/CellTypes');
 
 class GridMap {
-    constructor(cols, rows, cell_size, filltype=CellTypes.empty) {
+    constructor(cols, rows, cell_size) {
+        this.resize(cols, rows, cell_size);
+    }
+
+    resize(cols, rows, cell_size) {
         this.grid = [];
         this.cols = cols;
         this.rows = rows;
@@ -10,8 +14,7 @@ class GridMap {
         for(var c=0; c<cols; c++) {
             var row = [];
             for(var r=0; r<rows; r++) {
-                var cell = new Cell(filltype, c, r, c*cell_size, r*cell_size);
+                var cell = new Cell(CellTypes.empty, c, r, c*cell_size, r*cell_size);
-
                 row.push(cell);
             }            
             this.grid.push(row);
@@ -20,7 +23,7 @@ class GridMap {
 
     fillGrid(type) {
         for (var col of this.grid) {
-            for (var cell of col){
+            for (var cell of col) {
                 cell.setType(type);
                 cell.owner = null;
             }

src/Rendering/Renderer.js

@@ -5,8 +5,7 @@ class Renderer {
         this.cell_size = cell_size;
         this.canvas = document.getElementById(canvas_id);
         this.ctx = this.canvas.getContext("2d");
-        this.canvas.width = $('#'+container_id).width();
+        this.fillWindow(container_id)
-        this.canvas.height = $('#'+container_id).height();
 		this.height = this.canvas.height;
         this.width = this.canvas.width;
         this.cells_to_render = new Set();
@@ -14,6 +13,17 @@ class Renderer {
         this.highlighted_cells = new Set();
     }
 
+    fillWindow(container_id) {
+        this.fillShape($('#'+container_id).height(), $('#'+container_id).width());
+    }
+
+    fillShape(height, width) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.height = this.canvas.height;
+        this.width = this.canvas.width;
+    }
+
     clear() {
         this.ctx.fillStyle = 'white';
         this.ctx.fillRect(0, 0, this.height, this.width);