Added changes to the score board so that players know who's turn it i…

…s. Also added a delay to the computer's moves.
shinellm · Feb 1, 2020 · 50a2395 · 50a2395
1 parent 9116ca5
commit 50a2395
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -96,9 +96,9 @@ <h5 class="modal-title" id="gameStatusModalLabel">Game Over</h5>
                 </div>
                 <!-- Gameboard -->
                 <div class="game-board" ng-class="{'hide' : !gameStarted}">
-                    <div class="players row" ng-model="players">
+                    <div class="players row">
                         <div class="player-container col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-repeat="player in players">
-                            <div class="player {{player.player}}" title="{{player.title}}">
+                            <div class="player {{player.player}}" title="{{player.title}}" ng-class="{'selected': (player1Move && player.player === 'one') || (player2Move && player.player === 'two')}">
                                 <div class="player-title text-center" title="{{player.title}}">{{player.title}}
                                     <hr>
                                     <span class="text-center {{player.name}}"></span>
@@ -108,7 +108,7 @@ <h5 class="modal-title" id="gameStatusModalLabel">Game Over</h5>
                             </div>
                         </div>
                     </div>
-                    <div class="board row" ng-model="gameBoard">
+                    <div class="board row">
                         <div class="board-row" title="{{$index}}" ng-repeat="row in gameBoard">
                             <div class="board-col playIcon {{col.symbol}} col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4" title="{{$index}}" ng-repeat="col in row" ng-click="playersMove($event)">
                                 <div></div>

diff --git a/js/app.js b/js/app.js
@@ -4,9 +4,9 @@
     angular.module('TicTacToe', [])
         .controller('TicTacToeController', TicTacToeController);
 
-        TicTacToeController.$inject = ['$scope'];
+        TicTacToeController.$inject = ['$scope', '$timeout'];
 
-        function TicTacToeController($scope) {
+        function TicTacToeController($scope, $timeout) {
             $scope.modes = [
                 {name: "icon-single-player", title: "single-player"},
                 {name: "icon-two-player", title: "two-player"}
@@ -64,8 +64,6 @@
 
             $scope.setGameMode = function(event) {
                 $scope.modeSelected = true;
-                console.log(event.target);
-                console.log(event.target.title);
                 $scope.gameMode = event.target.title;
             };
 
@@ -94,10 +92,6 @@
                         $scope.players[0].name = $scope.playerIcon;
                         $scope.players[1].name = $scope.cpuPlayerIcon;
                 }
-                console.log('player symbol: ', $scope.playerIcon);
-                console.log('cpu: ' + $scope.cpuPlayerIcon);
-                console.log('player 1 symbol: ', $scope.player1Icon);
-                console.log('player 2 symbol: ', $scope.player2Icon);
             };
 
             $scope.startGame = function() {
@@ -115,11 +109,10 @@
 
             $scope.playersMove = function(event) {
                 if ($scope.gameStatus === "in progress") {
-                    console.log('player move: ', event.target);
-                    if ($scope.gameMode === 'single-player') {
+                    if ($scope.gameMode === 'single-player' && $scope.player1Move === true) {
                         updateGameBoard(event.target.parentNode.title, event.target.title, $scope.playerIcon);
                         if ($scope.gameStatus !== "game over" && $scope.player2Move === true) {
-                            cpuMove();
+                            $timeout(function() {cpuMove()}, 1000);
                         }
                     }
                     else if ($scope.gameMode === 'two-player') {
@@ -211,7 +204,6 @@
                     $scope.gameBoard[row].splice(col, 1, {symbol: symbol});
 
                     decreaseMovesLeft();
-                    console.log($scope.movesLeft)
                     if ($scope.movesLeft >= 0) {
                         checkForWin(row, col, symbol);
                         if ($scope.movesLeft === 0 && $scope.gameStatus !== "game over") {
@@ -235,18 +227,13 @@
             }
 
             function checkForWin(row, col, symbol) {
-                console.log($scope.gameBoard)
-                console.log('row win: ' + checkRowsForWin(row, symbol))
-                console.log('col win: ' + checkColumnsForWin(col, symbol))
-                console.log('diag win: ' + checkDiagonalsForWin(symbol))
                 if (checkRowsForWin(row, symbol) || checkColumnsForWin(col, symbol) || checkDiagonalsForWin(symbol)) {
                     showStatusMsg(symbol);
                 }
             }
 
             function showStatusMsg(symbol) {
                 $scope.gameStatus = "game over";
-                console.log(symbol)
 
                 switch(symbol) {
                     case $scope.playerIcon:
@@ -268,7 +255,6 @@
                     default:
                         $scope.gameStatusMsg = "It's a draw! Play again?"
                 }
-                console.log($scope.gameStatusMsg)
             }
 
             function checkRowsForWin(row, symbol) {

diff --git a/style.css b/style.css
@@ -142,12 +142,15 @@
 }
 
 /************ Tic-tac-toe ************/
-html, body {
+/* html, body {
     height: 100%;
 }
 .tic-tac-toe {
     height: 100%;
 }
+.container {
+    height: 100%;
+} */
 h1 {
     font-size: 5rem;
     margin-bottom: 15px;
@@ -156,9 +159,6 @@ h2 {
     font-size: 2.75rem;
     margin-bottom: 40px;
 }
-.container {
-    height: 100%;
-}
 .row {
     width: 100%;
     margin: auto;