grid resizing and auto reset

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.canvas.height = $('#'+container_id).height();
+        this.fillWindow(container_id)
 		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);