tictactoe

03week/ticTacToe.css

@@ -0,0 +1,89 @@
+#row1 {
+  display: flex;
+
+  flex-direction: row;
+}
+
+#cell1 {
+  border-bottom: 2px solid black;
+
+  border-right: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#cell2 {
+  border-bottom: 2px solid black;
+
+  border-right: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#cell3 {
+  border-bottom: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#row2 {
+  display: flex;
+
+  flex-direction: row;
+}
+
+#cell4 {
+  border-right: 2px solid black;
+
+  border-bottom: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#cell5 {
+  border-right: 2px solid black;
+
+  border-bottom: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#cell6 {
+  border-bottom: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#row3 {
+  display: flex;
+
+  flex-direction: row;
+}
+
+#cell7 {
+  border-right: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}
+
+#cell8 {
+  border-right: 2px solid black;
+
+  height: 100px;
+
+  width: 100px;
+}

03week/ticTacToe.js

@@ -1,93 +1,170 @@
-'use strict';
+"use strict";
 
-const assert = require('assert');
-const readline = require('readline');
+const assert = require("assert");
+const readline = require("readline");
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
 });
-let board = [
-  [' ', ' ', ' '],
-  [' ', ' ', ' '],
-  [' ', ' ', ' ']
-];
+let board = [[" ", " ", " "], [" ", " ", " "], [" ", " ", " "]];
 
-let playerTurn = 'X';
+let playerTurn = "X";
 
 function printBoard() {
-  console.log('   0  1  2');
-  console.log('0 ' + board[0].join(' | '));
-  console.log('  ---------');
-  console.log('1 ' + board[1].join(' | '));
-  console.log('  ---------');
-  console.log('2 ' + board[2].join(' | '));
+  console.log("   0  1  2");
+  console.log("0 " + board[0].join(" | "));
+  console.log("  ---------");
+  console.log("1 " + board[1].join(" | "));
+  console.log("  ---------");
+  console.log("2 " + board[2].join(" | "));
 }
 
 function horizontalWin() {
-  // Your code here
+  if (
+    board[0][0] == board[0][1] &&
+    board[0][1] == board[0][2] &&
+    board[0][0] != " "
+  ) {
+    return true;
+  } else if (
+    board[1][0] == board[1][1] &&
+    board[1][1] == board[1][2] &&
+    board[1][0] != " "
+  ) {
+    return true;
+  } else if (
+    board[2][0] == board[2][1] &&
+    board[2][1] == board[2][2] &&
+    board[2][0] != " "
+  ) {
+    return true;
+  } else {
+    return false;
+  }
 }
 
 function verticalWin() {
-  // Your code here
+  if (
+    board[0][0] == board[1][0] &&
+    board[1][0] == board[2][0] &&
+    board[0][0] != " "
+  ) {
+    return true;
+  } else if (
+    board[0][1] == board[1][1] &&
+    board[1][1] == board[2][1] &&
+    board[0][1] != " "
+  ) {
+    return true;
+  } else if (
+    board[0][2] == board[1][2] &&
+    board[1][2] == board[2][2] &&
+    board[0][2] != " "
+  ) {
+    return true;
+  } else {
+    return false;
+  }
 }
 
 function diagonalWin() {
-  // Your code here
+  if (
+    board[0][0] == board[1][1] &&
+    board[1][1] == board[2][2] &&
+    board[0][0] != " "
+  ) {
+    return true;
+  } else if (
+    board[0][2] == board[1][1] &&
+    board[1][1] == board[2][0] &&
+    board[0][2] != " "
+  ) {
+    return true;
+  } else {
+    return false;
+  }
 }
 
 function checkForWin() {
-  // Your code here
+  if (horizontalWin() || verticalWin() || diagonalWin()) {
+    return true;
+  }
+  return false;
+}
+
+function switchPlayer() {
+  if (playerTurn == "X") {
+    playerTurn = "O";
+  } else if (playerTurn == "O") {
+    playerTurn = "X";
+  }
 }
 
 function ticTacToe(row, column) {
-  // Your code here
+  board[row][column] = playerTurn;
+  var tactic = checkForWin();
+  if (tactic) {
+    console.log("You Win!");
+  } else {
+    switchPlayer();
+  }
+}
+
+function placeMark(element) {
+  var cell = document.getElementById(element.id);
+
+  cell.innerText = playerTurn;
 }
 
+placeMark();
+
 function getPrompt() {
   printBoard();
   console.log("It's Player " + playerTurn + "'s turn.");
-  rl.question('row: ', (row) => {
-    rl.question('column: ', (column) => {
+  rl.question("row: ", row => {
+    rl.question("column: ", column => {
       ticTacToe(row, column);
       getPrompt();
     });
   });
-
 }
 
-
-
 // Tests
 
-if (typeof describe === 'function') {
-
-  describe('#ticTacToe()', () => {
-    it('should place mark on the board', () => {
+if (typeof describe === "function") {
+  describe("#ticTacToe()", () => {
+    it("should place mark on the board", () => {
       ticTacToe(1, 1);
-      assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+      assert.deepEqual(board, [
+        [" ", " ", " "],
+        [" ", "X", " "],
+        [" ", " ", " "]
+      ]);
     });
-    it('should alternate between players', () => {
+    it("should alternate between players", () => {
       ticTacToe(0, 0);
-      assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]);
+      assert.deepEqual(board, [
+        ["O", " ", " "],
+        [" ", "X", " "],
+        [" ", " ", " "]
+      ]);
     });
-    it('should check for vertical wins', () => {
-      board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ];
+    it("should check for vertical wins", () => {
+      board = [[" ", "X", " "], [" ", "X", " "], [" ", "X", " "]];
       assert.equal(verticalWin(), true);
     });
-    it('should check for horizontal wins', () => {
-      board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ];
+    it("should check for horizontal wins", () => {
+      board = [["X", "X", "X"], [" ", " ", " "], [" ", " ", " "]];
       assert.equal(horizontalWin(), true);
     });
-    it('should check for diagonal wins', () => {
-      board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ];
+    it("should check for diagonal wins", () => {
+      board = [["X", " ", " "], [" ", "X", " "], [" ", " ", "X"]];
       assert.equal(diagonalWin(), true);
     });
-    it('should detect a win', () => {
+    it("should detect a win", () => {
       assert.equal(checkForWin(), true);
     });
   });
 } else {
-
   getPrompt();
-
 }

03week/tictacToe.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>TicTacToe</title>
+    <link rel="stylesheet" href="ticTacToe.css" />
+    <script src="ticTacToe.js"></script>
+  </head>
+  <body>
+    <h1>Tic Tac Toe</h1>
+    <container id="board">
+      <section id="row1">
+        <div id="cell1" onclick="placeMark(this)"></div>
+        <div id="cell2" onclick="placeMark(this)"></div>
+        <div id="cell3" onclick="placeMark(this)"></div>
+      </section>
+      <section id="row2">
+        <div id="cell4" onclick="placeMark(this)"></div>
+        <div id="cell5" onclick="placeMark(this)"></div>
+        <div id="cell6" onclick="placeMark(this)"></div>
+      </section>
+      <section id="row3">
+        <div id="cell7" onclick="placeMark(this)"></div>
+        <div id="cell8" onclick="placeMark(this)"></div>
+        <div id="cell9" onclick="placeMark(this)"></div>
+      </section>
+    </container>
+    <div id="result"></div>
+  </body>
+</html>