BurlingtonCodeAcademy · DevonSmith91 · Nov 20, 2020 · Dec 2, 2020 · Dec 5, 2020 · Dec 8, 2020
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/index.css b/index.css
@@ -0,0 +1,6 @@
+#board {
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin: 10%;
+}
diff --git a/index.html b/index.html
@@ -1,23 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tic Tac Toe</title>
-</head>
-<body>
-  <h1>Tic Tac Toe!</h1>
-  <div id='board'>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-    <div class='cell'></div>
-  </div>
-  <button id='start'>Start Game</button>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Tic Tac Toe</title>
+  </head>
+  <body>
+    <div><h1>Tic Tac Toe!</h1></div>
+    <div><p id="turn-count">Turn: 0</p></div>
+    <div id="board">
+      <div id="cellone" class="cell"></div>
+      <div id="celltwo" class="cell"></div>
+      <div id="cellthree" class="cell"></div>
+      <div id="cellfour" class="cell"></div>
+      <div id="cellfive" class="cell"></div>
+      <div id="cellsix" class="cell"></div>
+      <div id="cellseven" class="cell"></div>
+      <div id="celleight" class="cell"></div>
+      <div id="cellnine" class="cell"></div>
+    </div>
+    <div id="status-area">
+      <div><h2 class="status-title">Status Area</h2></div>
+      <div><p id="playerStatus">Player Status</p></div>
+    </div>
+    <div id="flex-button">
+      <button onclick="startGame(this)" id="start">Start Game</button>
+    </div>
+    <script src="ticTacToe.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,81 @@
+body {
+  background-color: #d1f3de;
+}
+
+/*Game Board*/
+#board {
+  display: grid;
+  grid-template-rows: repeat(3, 150px);
+  grid-template-columns: repeat(3, 150px);
+  margin: 10%;
+}
+
+.cell {
+  text-align: center;
+  padding-top: 25px;
+  font-size: 5em;
+  color: white;
+  background-color: #571032;
+  border: 1px solid #b07289;
+  border-radius: 7%;
+}
+
+/*Start Button*/
+#flex-button {
+  display: flex;
+  align-items: center;
+}
+
+#start {
+  border: 0;
+  line-height: 2;
+  padding: 2px 20px;
+  font-size: 0.8rem;
+  text-align: center;
+  color: black;
+  background-color: rgb(255, 201, 121);
+  border-radius: 10%;
+  background-image: linear-gradient(
+    to top left,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.2) 30%,
+    rgba(0, 0, 0, 0)
+  );
+  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6) inset -2px -2px 3px
+    rgba(0, 0, 0, 0.6);
+}
+#start:hover {
+  background-color: rgb(235, 208, 121);
+}
+
+#start:active {
+  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6) inset 2px 2px 3px
+    rgba(0, 0, 0, 0.6);
+}
+
+#start:disabled {
+  background-color: grey;
+}
+
+/*Count Box*/
+#turn-count {
+  border-style: solid;
+  border-width: 1px;
+  border-color: black;
+  padding: 15px 15px 15px 15px;
+}
+
+/*Status Area*/
+#status-area {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+}
+
+.status-title {
+  align-items: flex-end;
+}
+
+#playerStatus {
+  align-self: center;
+}
diff --git a/ticTacToe.js b/ticTacToe.js
@@ -0,0 +1,129 @@
+let allCells = document.querySelectorAll(".cell");
+console.log({ allCells });
+let gameBoard = document.getElementById("board").textContent;
+let currentPlayer = " ";
+/*
+let count = 0;
+let boardCount = document.getElementById("board");
+boardCount.onclick = function () {
+  count++;
+  document.getElementById("turn-count").innerHTML = "Turn: " + count;
+};
+*/
+
+//let board = document.getElementById("board");
+//board.addEventListener("click", () => {
+//when cell is clicked flip player unless cell is already full
+
+//document.getElementById("totalCount").textContent = count;
+//});
+
+class Player {
+  constructor(defaultState = " ", possibleStates = ["X", "O"]) {
+    this.state = possibleStates[0];
+    this.possibleStates = possibleStates;
+    this.defaultState = defaultState;
+  }
+
+  rules() {
+    if (gameBoard != "X" && gameBoard != "O") {
+      return this.flip();
+    } else {
+      console.log(alert("Please select an empty cell"));
+      return false;
+    }
+  }
+
+  flip() {
+    //switch players
+    if (
+      gameBoard != this.possibleStates[0] &&
+      gameBoard != this.possibleStates[1]
+    ) {
+      if (this.state === this.possibleStates[0]) {
+        this.state = this.possibleStates[1];
+      } else {
+        this.state = this.possibleStates[0];
+      }
+      console.log(alert("player flips"));
+      return this.state;
+    }
+    console.log(alert("Please select an empty cell"));
+    return false;
+  }
+}
+
+const player = new Player();
+//when user clicks on a cell that already has an X or O
+//then nothing happens and an alert pops up that asks the user
+//to please select an empty cell
+//after the user selects an empty cell it switches to the other user until
+//three Xs or Os are linked and then the games ends with a winner
+function startGame() {
+  document.getElementById("start").disabled = true;
+  /*
+  if (
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("celltwo").textContent &&
+      document.getElementById("cellthree").textContent === "X") ||
+    (document.getElementById("cellfour").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellsix").textContent === "X") ||
+    (document.getElementById("cellseven").textContent &&
+      document.getElementById("celleight").textContent &&
+      document.getElementById("cellnine").textContent === "X") ||
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("cellfour").textContent &&
+      document.getElementById("cellseven").textContent === "X") ||
+    (document.getElementById("celltwo").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("celleight").textContent === "X") ||
+    (document.getElementById("cellthree").textContent &&
+      document.getElementById("cellsix").textContent &&
+      document.getElementById("cellnine").textContent === "X") ||
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellnine").textContent === "X") ||
+    (document.getElementById("cellthree").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellseven").textContent === "X")
+  ) {
+    console.log("winner");
+    alert(`Congratulations! Player X wins`);
+  } else if (
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("celltwo").textContent &&
+      document.getElementById("cellthree").textContent === "O") ||
+    (document.getElementById("cellfour").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellsix").textContent === "O") ||
+    (document.getElementById("cellseven").textContent &&
+      document.getElementById("celleight").textContent &&
+      document.getElementById("cellnine").textContent === "O") ||
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("cellfour").textContent &&
+      document.getElementById("cellseven").textContent === "O") ||
+    (document.getElementById("celltwo").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("celleight").textContent === "O") ||
+    (document.getElementById("cellthree").textContent &&
+      document.getElementById("cellsix").textContent &&
+      document.getElementById("cellnine").textContent === "O") ||
+    (document.getElementById("cellone").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellnine").textContent === "O") ||
+    (document.getElementById("cellthree").textContent &&
+      document.getElementById("cellfive").textContent &&
+      document.getElementById("cellseven").textContent === "O")
+  ) {
+    console.log("winner");
+    alert(`Congratulations! Player O wins`);
+  }
+*/
+  for (let cell of allCells) {
+    cell.addEventListener("click", function (theEvent) {
+      console.log({ theEvent });
+      return (theEvent.target.textContent = player.flip());
+    });
+  }
+}