From 1c708c610d53f27eace5f4b41f5f0534d808e017 Mon Sep 17 00:00:00 2001
From: Elie Soued <eliegebransoued@gmail.com>
Date: Tue, 23 Nov 2021 15:51:07 +0100
Subject: [PATCH] Adding Buttons

- Create 3 Buttons in the HTML file
- Create  EventListeners for these Buttons
- Create 2 new functions (play and pause)
- Create 2 new properties to the G_Matrix.config Object:
  (isRunning and initialState)
- Amend the animate function so that is behaves
  differently depending on G_Matrix.config
---
 game.js    | 58 ++++++++++++++++++++++++++++++++++++++----------------
 index.html | 36 ++++++++++++++++++++++++++++-----
 2 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/game.js b/game.js
index be3d3c8..946c536 100644
--- a/game.js
+++ b/game.js
@@ -15,27 +15,29 @@ var G_MATRIX = {
                            // relative to the beginning of the canvas.
 
         refresh_rate: 1000 / 60, // speed of evolution of the game (in ms)
+
+        isRunning : false,
+
+        initialState: true
     },
 
     get_cell_value: function (i, j) {
 
         if (i<0) {
             i += this.config.matsize;
-	}
+        }
 
         if (i >= this.config.matsize) {
             i -= this.config.matsize;
-	}
-	
+        }
+ 
         if (j < 0) {
             j += this.config.matsize;
-	}
+        }
 
         if (j >= this.config.matsize) {
             j -= this.config.matsize;
-	}
-	
-
+        }
         return this.cells[i + j*this.config.matsize];
     },
 
@@ -56,7 +58,7 @@ var G_MATRIX = {
                 if (this.config.stroked)
                     context.stroke();
 
-		context.closePath();
+                context.closePath();
                 
                 x += this.config.cellsize;
             }
@@ -147,8 +149,10 @@ window.requestAnimFrame = (function(callback) {
 
 function animate (canvas) {
 
+    var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');
 
+    if (G_MATRIX.config.isRunning) {
     context.clearRect(0, 0, canvas.width, canvas.height);
 
     G_MATRIX.draw(context);
@@ -159,16 +163,36 @@ function animate (canvas) {
     requestAnimFrame(function() {
         animate(canvas);
     });
+  } else {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    G_MATRIX.draw(context);
+    G_MATRIX.next_iteration();
+  }
 }
-    
 
-window.onload = function () {
-    var canvas = document.getElementById('myCanvas');
-
-    // random initial state
-    //G_MATRIX.blink();
+function play() {
+  if (G_MATRIX.config.initialState) {
+    var canvas = document.getElementById("myCanvas");
     G_MATRIX.init();
-
-    // launch animation
+    G_MATRIX.config.isRunning = true;
     animate(canvas);
-};
+    G_MATRIX.config.initialState = false;
+  } else {
+    var canvas = document.getElementById("myCanvas");
+    G_MATRIX.next_iteration();
+    G_MATRIX.config.isRunning = true;
+    animate(canvas);
+  }
+}
+
+function pause() {
+  var canvas = document.getElementById("myCanvas");
+  G_MATRIX.config.isRunning = false;
+  animate(canvas);
+}
+
+document.getElementById("playButton").addEventListener("click", play);
+document.getElementById("pauseButton").addEventListener("click", pause);
+document.getElementById("resetButton").addEventListener("click", function () {
+  location.reload();
+});
diff --git a/index.html b/index.html
index bf4a160..ee1f9af 100644
--- a/index.html
+++ b/index.html
@@ -4,15 +4,41 @@
     <meta charset="utf-8" />
     <title>Conway's Game of Life</title>
     <style type="text/css" media="screen">
-      #myCanvas{
-    	border: 1px solid #9c9898;
+      #myCanvas {
+        border: 1px solid #9c9898;
+      }
+
+      body {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: 100vh;
+      }
+
+      main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 400px;
+      }
+
+      canvas {
+        margin-bottom: 2rem;
       }
     </style>
-    <script type="text/javascript" src="game.js"></script>
   </head>
 
   <body>
-    <h1>Conway's Game of Life</h1>
-    <canvas id="myCanvas" width="1000" height="750"></canvas>
+    <main>
+      <h1>Conway's Game of Life</h1>
+      <canvas id="myCanvas" width="200" height="200"></canvas>
+      <div>
+        <button id="playButton">Play</button>
+        <button id="pauseButton">Pause</button>
+        <button id="resetButton">Reset</button>
+      </div>
+    </main>
+    <script type="text/javascript" src="game.js"></script>
   </body>
 </html>