feat: add functionality to clear the grid and have seperate function …

…to randomize initialization
EternoSeeker · Feb 27, 2024 · 58eee86 · 58eee86
1 parent c772339
commit 58eee86
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 24 deletions.
diff --git a/app.js b/app.js
@@ -1,14 +1,17 @@
 const WIDTH = 70;
 const HEIGHT = 35;
 
-const ALIVE_COLOR = "#c6e6ee";
+const ALIVE_COLOR = "#d4f3ff";
 const DEAD_COLOR = "#000000";
 
 const ALIVE = 1;
 const DEAD = 0;
 
 const gridContainer = document.getElementById("main-grid");
-let cells = []; // 2D array to hold cell states
+let cells = new Array(HEIGHT);
+for (let i = 0; i < HEIGHT; i++) {
+    cells[i] = new Array(WIDTH);
+} // 2D array to hold cell states
 
 let animationInterval;
 let animationSpeed = 400;
@@ -18,10 +21,9 @@ let isStarted = false;
 
 document.addEventListener("DOMContentLoaded", function () {
   // Generate the grid
-  for (let i = 0; i < HEIGHT; i++) {
-    cells.push([]); // Push an empty array for each row
+  for (let i = 0; i < HEIGHT; i++) { // Push an empty array for each row
     for (let j = 0; j < WIDTH; j++) {
-      cells[i].push(Math.random() < 0.2 ? ALIVE : DEAD); // Initialize cell state
+      cells[i][j] = DEAD; // Initialize cell state
       // Create a new cell element
       const cell = document.createElement("div");
       cell.classList.add("cell");
@@ -39,7 +41,8 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 // draw the cells according to the state
-// we're using style of "cell" class to change the color of the cell, iterate over it
+// using style of "cell" class to change the color of the cell, 
+// iterate over it
 function drawCells() {
   const cellElements = gridContainer.querySelectorAll(".cell");
   cells.forEach((row, i) => {
@@ -50,6 +53,17 @@ function drawCells() {
   });
 }
 
+function isEmpty() {
+  for (let i = 0; i < HEIGHT; i++) {
+    for (let j = 0; j < WIDTH; j++) {
+      if (cells[i][j] === ALIVE) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
 function increaseSpeed() {
   if (animationSpeed > 1) {
     animationSpeed /= 1.1;
@@ -61,19 +75,55 @@ function decreaseSpeed() {
 }
 
 function startAnimation() {
-  isAnimating = !isAnimating;
-  const playPauseIcon = document.getElementById("play-pause-icon");
-  playPauseIcon.src = isAnimating
-    ? "./images/Microsoft-Fluentui-Emoji-Mono-Pause-Button.svg"
-    : "./images/Microsoft-Fluentui-Emoji-Mono-Play-Button.svg";
+  // check if the grid is empty, 
+  // if not then start the animation and start the game 
+  if (!isEmpty()) {
+    // if game is not started, set it to true
+    // if pause is clicked, pause the game
+    isAnimating = !isAnimating;
+    // check if the game is started
+    // if not, set it to true
+    if (isStarted == false) {
+      isStarted = true;
+    }
+    const playPauseIcon = document.getElementById("play-pause-icon");
+    // change the icon according to the state
+    playPauseIcon.src = isAnimating
+      ? "./images/Microsoft-Fluentui-Emoji-Mono-Pause-Button.svg"
+      : "./images/Microsoft-Fluentui-Emoji-Mono-Play-Button.svg";
+  }
   if (isAnimating) {
     animate();
   }
 }
 
 //randomGrid()
-//clearGrid()
+function randomGrid() {
+  // if the game is not started and not animating
+  // then allow user to set the cells to random state
+  if (!isStarted && !isAnimating) {
+    for (let i = 0; i < HEIGHT; i++) {
+      for (let j = 0; j < WIDTH; j++) {
+        cells[i][j] = Math.random() < 0.2 ? ALIVE : DEAD;
+      }
+    }
+    drawCells();
+  }
+}
 
+function clearGrid() {
+  // if the game is paused
+  // then allow user to clear the grid
+  if (!isAnimating) {
+    for (let i = 0; i < HEIGHT; i++) {
+      for (let j = 0; j < WIDTH; j++) {
+        cells[i][j] = DEAD;
+      }
+    }
+    drawCells();
+  }
+  isStarted = false;
+}
 
 function animate() {
   const nextGeneration = [];

diff --git a/index.html b/index.html
@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Conway's Game of Life is a cellular automaton devised by the British mathematician John Horton Conway in 1970."
+    />
+    <meta
+      name="keywords"
+      content="Conway's Game of Life, cellular automaton, John Horton Conway, 1970"
+    />
     <title>Conway's Game of Life</title>
     <link rel="stylesheet" href="style.css" />
     <script src="node_modules/animejs/lib/anime.min.js"></script>
@@ -19,7 +27,7 @@
     ></script>
   </head>
   <body>
-    <div class="heading"><h1>Conway's Game of Life</h1></div>
+    <div class="heading">Conway's Game of Life</div>
     <div class="game">
       <div class="grid-container">
         <div id="main-grid" class="main-grid"></div>

diff --git a/style.css b/style.css
@@ -1,20 +1,36 @@
 * {
   box-sizing: border-box;
+  margin: 0;
+  background-color: var(--background-col);
 }
 
+:root{
+  --primary-color: #0f045a;
+  --shadow-color1: #352a7e;
+  --shadow-color2: #101536;
+  --border-color1: #080126;
+  --secondary-color: #dcdcdc;
+  --tertiary-color: #4e4e4e;
+  --background-col: #c6cede;
+}
+
+
 .heading {
   text-align: center;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
   margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--primary-color);
 }
 
 .game {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .grid-container {
@@ -45,7 +61,7 @@
 .controls {
   display: flex;
   flex-direction: row;
-  max-width: 40vw;
+  min-width: 40vw;
   height: 5rem;
   justify-content: center;
   align-items: center;
@@ -61,16 +77,22 @@ button {
 }
 
 .icon{
-  width: 2.5rem;
-  height: 2.5rem;
+  width: calc((30vw)/8);
+  height: calc((30vw)/8);
 }
 
 .clear-button, .random-button{
   border: solid 0.1rem #000000;
   border-radius: 0.6rem;
-  height: calc((100%)/2);
+  height: calc((100%)/1.8);
+  width: auto;
   text-align: center;
-  padding: 0.4rem;
+  padding: 0.5rem;
+  border-color: var(--border-color1);
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--primary-color);
 }
 
 .clear-button{
@@ -82,11 +104,11 @@ button {
 }
 
 .clear-button:hover, .random-button:hover {
-  box-shadow: 0.1rem 0.1rem #4e4e4e;
+  box-shadow: 0.1rem 0.1rem var(--shadow-color1);
 }
 
 .clear-button:active, .random-button:active{
-  box-shadow: 0.1rem 0.1rem #000000;
+  box-shadow: 0.1rem 0.1rem var(--shadow-color2);
   transform: translateY(0.1rem);
 }