feat: buttons to clear and randomize the grid added

EternoSeeker · Feb 27, 2024 · c772339 · c772339
1 parent 43bd2d8
commit c772339
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/app.js b/app.js
@@ -1,5 +1,5 @@
-const WIDTH = 72;
-const HEIGHT = 36;
+const WIDTH = 70;
+const HEIGHT = 35;
 
 const ALIVE_COLOR = "#c6e6ee";
 const DEAD_COLOR = "#000000";
@@ -14,6 +14,7 @@ let animationInterval;
 let animationSpeed = 400;
 
 let isAnimating = false;
+let isStarted = false;
 
 document.addEventListener("DOMContentLoaded", function () {
   // Generate the grid
@@ -70,6 +71,10 @@ function startAnimation() {
   }
 }
 
+//randomGrid()
+//clearGrid()
+
+
 function animate() {
   const nextGeneration = [];
 

diff --git a/index.html b/index.html
@@ -19,33 +19,38 @@
     ></script>
   </head>
   <body>
-    <h1 class="heading">Conway's Game of Life</h1>
+    <div class="heading"><h1>Conway's Game of Life</h1></div>
     <div class="game">
       <div class="grid-container">
         <div id="main-grid" class="main-grid"></div>
       </div>
-      <div id="controls">
+      <div class="controls">
+        <button class="clear-button" id="clear-button" onclick="clearGrid()">Clear</button>
         <button id="fast-reverse-button" onclick="decreaseSpeed()">
           <img
+            class="icon"
             id="fast-reverse-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Fast-Reverse-Button.svg"
             alt="Play"
           />
         </button>
         <button id="play-pause-button" onclick="startAnimation()">
           <img
+            class="icon"
             id="play-pause-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Play-Button.svg"
             alt="Slow"
           />
         </button>
         <button id="fast-forward-button" onclick="increaseSpeed()">
           <img
+            class="icon"
             id="fast-forward-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Fast-Forward-Button.svg"
             alt="Fast"
           />
         </button>
+        <button class="random-button" id="random-button" onclick="randomGrid()">Random</button>
       </div>
     </div>
   </body>

diff --git a/style.css b/style.css
@@ -45,6 +45,8 @@
 .controls {
   display: flex;
   flex-direction: row;
+  max-width: 40vw;
+  height: 5rem;
   justify-content: center;
   align-items: center;
   margin: 1rem;
@@ -53,18 +55,42 @@
 button {
   border: none;
   background: none;
-  margin: 0.5rem;
   padding: 1rem;
   cursor: pointer;
   outline: none;
 }
 
-/* button:hover {
-  background-color: #d8edff;
-  box-shadow: 0.05rem 0.05rem 0.05rem #a5a5a5;
+.icon{
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.clear-button, .random-button{
+  border: solid 0.1rem #000000;
+  border-radius: 0.6rem;
+  height: calc((100%)/2);
+  text-align: center;
+  padding: 0.4rem;
+}
+
+.clear-button{
+  margin-right: 1rem;
+}
+
+.random-button{
+  margin-left: 1rem;
+}
+
+.clear-button:hover, .random-button:hover {
+  box-shadow: 0.1rem 0.1rem #4e4e4e;
+}
+
+.clear-button:active, .random-button:active{
+  box-shadow: 0.1rem 0.1rem #000000;
+  transform: translateY(0.1rem);
+}
+
+.icon:active{
+  transform: translateY(0.1rem);
 }
 
-button:active{
-  box-shadow: 0.05rem 0.05rem 0.05rem #151515;
-  transform: translateY(0.2rem);
-} */