1Marc · August 24, 2022 21:54 · Aug 24, 2022
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,82 @@
+let positions = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const player = "X";
+const computer = "O";
+let count = 1;
+let currentTurn = player;
+let winner;
+//Dom Elements
+let grid = document.createElement("div");
+grid.style.width = "200px";
+grid.style.display = "flex";
+grid.style.flexWrap = "wrap";
+grid.style.justifyContent = "center";
+grid.style.alignItem = "center";
+document.body.appendChild(grid);
+
+setupTicTacToe();
+
+// switch turns
+function switchTurn() {
+  if (count % 2 == 0) {
+    currentTurn = computer;
+  } else if (count % 2 != 0) {
+    currentTurn = player;
+  }
+  return currentTurn;
+}
+
+// output a clickable grid in a 3 x 3 grid
+function setupTicTacToe() {
+  for (let i = 0; i < positions.length; i++) {
+    let position = document.createElement("p");
+    position.setAttribute("id", `position${i + 1}`);
+    position.innerHTML = i + 1;
+    // apply style to resemble a grid
+    position.style.display = "flex";
+    position.style.justifyContent = "center";
+    position.style.alignItem = "center";
+    position.style.cursor = "pointer";
+    //position.style.border = "black solid 1px"
+    position.style.height = "32px";
+    position.style.flex = "0 32%";
+    grid.appendChild(position);
+    // TRYING TO MAKE THE GAME WORK WITH ONCLICK FUNCTIONS
+    /* UPDATE make the input function clickable */
+    position.onclick = function () {
+      let clicked = i + 1;
+      if (clicked == positions[i]) {
+        count++;
+        let clickedPosition = document.getElementById(`position${clicked}`);
+        clickedPosition.innerText = currentTurn;
+        positions.splice(i, 1, currentTurn);
+        switchTurn();
+      }
+
+      checkForWin();
+      console.log(clicked, positions, currentTurn);
+    }
+  }
+}
+
+
+// Check for win
+function checkForWin() {
+  if (currentTurn === 'X') {
+    console.log('current player is human');
+  } else {
+    console.log('current player is computer');
+  }
+  if (positions[0] === player) {
+    console.log("hi");
+  }
+}
+
+// End Game
+function endGame() {
+  let winnerOutput = document.createElement("p");
+  winnerOutput.innerText = `${winner.toUpperCase()} wins`;
+  document.body.appendChild(winnerOutput);
+  // document.body.removeChild(inputLabel);
+  // document.body.removeChild(playerInput);
+  // document.body.removeChild(submitInput);
+}
No results found