Tic-Tac-Toe

index.html

h1 Tic-Tac-Toe
.tic-tac-toe-wrapper
  .tic-tac-toe-board
    button.square 
    button.square 
    button.square 
    button.square
    button.square 
    button.square 
    button.square 
    button.square 
    button.square 

.tic-tac-toe-action
  

script.js

// Resources

// http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

// https://www.youtube.com/watch?v=vdxW69sIIFo

var Display = function(displayElement) {
  var display = displayElement;
  function setText (message) {
    display.innerText = message
  }
  return {setMessage: setText};
};

// If it is 0, its valid.
function isValid (btn) {
  return btn.innerText.length === 0;
}

function setMark (btn, players, playerTurn) {
  console.log(btn);
  console.log(players);
  console.log(playerTurn);
  btn.innerText = players[playerTurn];
}

function isBoardFull(squares) {
  for (var i = 0; i < squares.length; i++) {
    if (squares[i].innerText.length === 0) {
      return false;
    }
  }
  // Board is full
  return true;
}

function checkForWinner (squares, players, playerTurn) {
  // If row is all player's current turn
  if (squares[0].innerText == players[playerTurn]  && 
      squares[1].innerText == players[playerTurn]  &&
      squares[2].innerText == players[playerTurn])   {
        console.log('A WIN');
        return true;
      }
  
  if (squares[3].innerText == players[playerTurn]  && 
      squares[4].innerText == players[playerTurn]  &&
      squares[5].innerText == players[playerTurn])   {
    console.log('B WIN');    
    return true;
      }
  
  if (squares[6].innerText == players[playerTurn]  && 
      squares[7].innerText == players[playerTurn]  &&
      squares[8].innerText == players[playerTurn])   {
    console.log('C WIN');     
    return true;
      }
  
  if (squares[0].innerText == players[playerTurn]  && 
      squares[3].innerText == players[playerTurn]  &&
      squares[6].innerText == players[playerTurn])   {
    console.log('D WIN');     
    return true;
      }
  
  if (squares[1].innerText == players[playerTurn]  && 
      squares[4].innerText == players[playerTurn]  &&
      squares[7].innerText == players[playerTurn])   {
    console.log('E WIN');     
    return true;
      }
  
  if (squares[2].innerText == players[playerTurn]  && 
      squares[5].innerText == players[playerTurn]  &&
      squares[8].innerText == players[playerTurn])   {
    console.log('F WIN');     
    return true;
      }
  
  if (squares[0].innerText == players[playerTurn]  && 
      squares[4].innerText == players[playerTurn]  &&
      squares[8].innerText == players[playerTurn])   {
    console.log('G WIN');     
    return true;
      }
  
  if (squares[2].innerText == players[playerTurn]  && 
      squares[4].innerText == players[playerTurn]  &&
      squares[6].innerText == players[playerTurn])   {
    console.log('H WIN');     
    return true;
      }
}

(function ticTacToe () {
  var squares = document.querySelectorAll(".square");
  var players = ["X", "O"];
  var playerTurn = 0;
  var gameOver = false;
  var display = new Display(document.querySelector(".tic-tac-toe-action"));

  display.setMessage("Game on. Player " + players[playerTurn] + ", you should go, dude.");
  
  for (var i = 0; i < squares.length; i++) {
    squares[i].addEventListener("click", function() {
      if (gameOver) {
        // Tell the user the game is over
        return;
      }
      if (!isValid(this)) {
        display.setMessage("You can't make that move.")
      } else {
        setMark(this, players, playerTurn);
        gameOver = checkForWinner(squares, players, playerTurn);
        
       // Game is over (someone one)
        if (gameOver) {
          display.setMessage("Player " + players[playerTurn] + " wins!");
          return;
        }
        
        // Game is over (draw)
        if (isBoardFull(squares)) {
          display.setMessage("Draw!");
        }
        
        // Game is not over yet. Keep playing
        playerTurn++;
        if (playerTurn > 1) {
          playerTurn = 0;
        }
        
        display.setMessage("Player " + players[playerTurn])
      }
      
    })
  }
    
  
  
})();

style.css

@import 'lesshat';

/* Color vars */
@fever: #e34c37;
@frozen-LIGHT: #efefef;
@frozen: #cccccc;
@white: #ffffff;

body {
  background: #4a4a4a;
  border-top: 2px solid solid; 
  font-family: 'Source Sans Pro', sans-serif;
    padding: 40px;
}
h1 {
  color: @white;
  font-weight: 300;
  text-align: center;
}
.tic-tac-toe-action {
  color: @white;
  overflow: hidden;
  padding-top: 20px;
  text-align: center;
}
.tic-tac-toe-wrapper {
  margin: 0 auto;
  max-width: 600px;
}
.tic-tac-toe-board {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
  .square {
    background: @frozen-LIGHT;
    border: 1px solid @frozen;
    box-shadow: 1px 1px 1px #333;
    color: #4a4a4a;
    float: left;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 125px;
    font-weight: 300;
    width: 33.33333%;
    height: 200px;
    text-align: center;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />

Tic-Tac-Toe.markdown

Tic-Tac-Toe

A Pen by bkrall on CodePen.

License.