adding mutations

Author: iLikeGrape

garden.css

@@ -10,11 +10,14 @@ body{
 #cellContainer{
     display: grid;
     grid-template-columns: repeat(3, auto);
-    width: 700px;
+    width: 450px;
+    margin: auto;
 }
 .cell{
     width: 150px;
     height: 150px;
     border-radius: 15px;
     border: 10px solid black;
+    font-family: "Trebuchet MS";
+    font-size: 150px;
 }

garden.html

@@ -24,6 +24,7 @@ <h1>Garden</h1>
         </div>
         <div id="list">    
             <h3><a href=/main/index.html>Home</h3>
+            <button id="tick">Grow</button>
         </div>
     </div>
     <script src="garden.js"></script>

garden.js

@@ -1,13 +1,22 @@
 const cells = document.querySelectorAll(".cell"); // cells becomes array with data of each element with id "cell"
+const btn = document.querySelector("#tick");
 
 let plants = ["", "", "", "", "", "", "", "", ""];
 
 const adjacentPlants = [
     ["1", "3", "4"],  //to cell 0
     ["0", "2", "3", "4", "5"],  //to cell 1
     ["1", "4", "5"],  //to cell 2
+    ["0", "1", "4", "6", "7"], //to cell 3
+    ["0", "1", "2", "3", "5", "6", "7", "8"], //to cell 4
+    ["1", "2", "4", "7", "8"], //to cell 5
+    ["3", "4", "7"], // to cell 6
+    ["3", "4", "5", "6", "8"], //to cell 7
+    ["4", "5", "7"], //to cell 8
 ]
 let adjacentPlaceholder = [];
+let adjacentAmount = null;
+
 
 startgame()
 
@@ -20,20 +29,41 @@ function startgame(){
         cell.addEventListener("click", cellClicked);  //ignore this cell it is placeholder for certain index in "cells"
     });
 
+    btn.addEventListener("click", tick())
+
 }
 
 function cellClicked(){
 
     const cellIndex = this.getAttribute("cellIndex");
-    plants[cellIndex] = "x";
-    this.textContent = "x";
+    if(plants[cellIndex] == "x" || this.textContent == "x"){
+        plants[cellIndex] = "";
+        this.textContent = "";
+    }
+    else {
+        plants[cellIndex] = "x";
+        this.textContent = "x";
+    }
     console.log("cellClicked")
-
-    updateCell(this, cellIndex);
-}
-function updateCell(cell, index){
-    plants[index] = currentPlayer;
-    cell.textContent = currentPlayer;
 }
 
+function tick(){
+    for(let i = 0; i < plants.length; i++){
+        let adjacentPlaceholder = adjacentPlants[i]
+        adjacentAmount = 0
+        
+        for(let i = 0; i < adjacentPlaceholder.length; i++){
+            
+            if(plants[adjacentPlaceholder[i]] == "x"){
+
+                adjacentAmount++
+            }
+        }
+
+        if(adjacentAmount >= 2 && plants[i] == "x"){
+            plants[i] = "o";
+            this.textContent = "o";
+        }
+    }
+}