RichardBronosky · salambolog · Mar 30, 2011 · Apr 1, 2011 · Apr 1, 2011 · Jun 15, 2011
diff --git a/.DS_Store b/.DS_Store
diff --git a/README b/README
diff --git a/README.rst b/README.rst
@@ -0,0 +1,28 @@
+Story
+======
+
+As a CMG manager, I want to see how you code a game of Tic Tac Toe, so that I can get a feel for a candidate's skills and strengths.
+
+Acceptance criteria
+=======================
+* Application is a stand alone, static web page game of tic tac toe.
+* Computer (AI)  will never lose a game.
+* Application should be able to run based on HTML, CSS and Javascript.
+* Game will let player choose to be either X or O, computer will take other choice.
+* Game will let player go first.
+
+Submission Tips
+========================
+* Quality counts! A good submission that takes a while is better than a poor submission quickly. 
+* Make sure your submission accurately reflects your development style.
+* Commit early and often, with good messages.
+* Comments and Unit tests are appreciated but not required, if you know good practice, then show us.
+* Research the AI, there are multiple well known algorithms available, show us your implementation.
+* Plagarism will not be tolerated.
+
+
+Submissions
+---------------
+* Fork this repo and send us a pull request.
+* if you prefer you can send us a ZIP of your submission, due to email filters, rename the file to *.txt and mention it is a ZIP in your email.
+
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,106 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    background: rgb(92, 255, 189);
+    text-transform: uppercase;
+    color: #95a5a6;
+    font-size: 1.5vh;
+}
+
+* {
+    color: white;
+    font-family: 'Open Sans', sans-serif;
+}
+
+h1 {
+    color: rgb(250,128,114);
+    margin: 0 auto;
+    margin-bottom: 1vh;
+    text-align: center;
+    font-size: 5vh;
+}
+
+hr {
+    border: 2px solid #e74c3c;
+    opacity: .3;
+    margin-bottom: 3vh;
+}
+
+#wrapper {
+    background: #fff;
+    width: 700px;
+    margin: 0 auto;
+    height: 830px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+#main {
+    padding: 0;
+    margin: 0;
+    padding-top: 25vh;
+    height: auto;
+    width: 100%;
+}
+
+#board {
+    padding: 0;
+    margin: auto;
+    width: 33vh;
+    height: 33vh;
+}
+
+.myCube {
+    padding: 0;
+    margin: 0.2vh;
+    width: 10vh;
+    height: 10vh;
+    border-radius: 1px;
+    cursor: pointer;
+    float: left;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+// .myCube:hover {
+//     background: #ffa31a;
+//     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+// }
+
+.myButton {
+    background: rgb(3, 169, 244);
+    display: inline-block;
+    margin: 1.2vh;
+    padding: 1.2vh 4.3vh;
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+    text-transform: uppercase;
+    border-radius: 3px;
+    -webkit-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+    border: none;
+    text-align: center;
+    float: left;
+}
+
+.cross {
+    // font-size: 5vh;
+    // color: rgb(250,128,114);
+    // content: "x";
+    background-image: url('X.png');
+}
+
+.circle {
+    font-size: 5vh;
+    color: rgb(250,128,114);
+    content: "o";
+}
+
+// .myButton:hover {
+//     box-shadow: 1px 6px 15px rgba(0, 0, 0, 0.5);
+// }
diff --git a/img/Circle.png b/img/Circle.png
diff --git a/img/X.png b/img/X.png
diff --git a/img/cross.png b/img/cross.png
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>
+        You can't win.
+    </title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="main">
+            <h1>You Can't Win</h1>
+            <hr>
+            <div id="board">
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myCube" onclick="myVar(this)"></div>
+                <div class="myButton" onclick="computerBehavior()">Play</div>
+                <div class="myButton" onclick="restartMyGame()">Restart</div>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="js/toe.js"></script>
+</body>
+
+</html>
diff --git a/js/.DS_Store b/js/.DS_Store
diff --git a/js/toe.js b/js/toe.js
@@ -0,0 +1,166 @@
+// Setting my Globals, seeing what I need and what I don't
+
+// First I grab my DOM elements
+var cubes = document.getElementsByClassName("myCube");
+var state = [0,0,0,0,0,0,0,0,0];
+var game = true;
+
+var myButtons = document.getElementsByClassName("myButton");
+var board = document.getElementsByClassName("board");
+
+
+
+// Setting up my 'light switches'
+var humanPlayer = false;
+var computerPlayer = true;
+var humanPlayerTurn = -1;
+var computerPlayerTurn = 1;
+
+var playerWins = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+];
+
+function restartMyGame() {
+    for (var x = 0; x < 9; x++) {
+        cubes[x].style.background = "#fff";
+        state[x] = 0;
+    }
+
+    for (var x = 0; x < 2; x++) {
+        myButtons[x].style.margin = "0.2vh";
+        myButtons[x].style.opacity = "1";
+        myButtons[x].style.width = "15.5vh";
+    }
+
+    game = true;
+}
+
+function myVar(clicked)
+{
+    if (!game)
+        return;
+
+    for (var x = 0; x < 9; x++)
+    {
+        if (cubes[x] == clicked && state[x] == 0)
+        {
+            play(x, humanPlayer);
+            computerBehavior();
+        }
+    }
+}
+
+// Winning matrix (I had to look this up), all possible
+// winning positions
+
+function play(index, player)
+{
+    if (!game)
+        return;
+
+    if (state[index] == 0)
+    {
+        myButtons[0].style.width = "0";
+        myButtons[0].style.margin = "0";
+        myButtons[0].style.opacity = "0";
+
+        myButtons[1].style.width = "32vh";
+        if (player == humanPlayer)
+        {
+            cubes[index].style.backgroundImage = "url('img/cross.png')";
+            cubes[index].style.backgroundRepeat = "no-repeat";
+            state[index] = humanPlayerTurn;
+        }
+        else
+        {
+            cubes[index].style.backgroundImage = "url('img/Circle.png')";
+            cubes[index].style.backgroundRepeat = "no-repeat";
+            state[index] = computerPlayerTurn;
+        }
+
+        if (checkWin(state, player))
+            game = false;
+    }
+}
+
+function checkWin(board, player)
+{
+    var value = player = humanPlayer ? humanPlayerTurn : computerPlayerTurn;
+
+    for (var x = 0; x < 8; x++)
+    {
+        var win = true;
+
+        for (var y = 0; y < 3; y++)
+        {
+            if (board[playerWins[x][y]] != value)
+            {
+                win = false;
+                break;
+            }
+        }
+
+        if (win)
+            return true;
+    }
+
+    return false;
+}
+
+function checkFull(board)
+{
+    for (var x = 0; x < 9; x++)
+    {
+        if (board[x] == 0)
+            return false;
+
+    }
+    return true;
+}
+
+function computerBehavior() {
+    callComputer(state, 0, computerPlayer);
+}
+
+function callComputer(board, depth, player)
+{
+    if (checkWin(board, !player))
+        return -10 + depth;
+
+    if (checkFull(board))
+        return 0;
+
+    var value = player == humanPlayer ? humanPlayerTurn : computerPlayerTurn;
+
+    var max = -Infinity;
+    var index = 0;
+
+    for (var x = 0; x < 9; x++)
+    {
+        if (board[x] == 0)
+        {
+            var newboard = board.slice();
+            newboard[x] = value;
+
+            var moveval = -callComputer(newboard, depth + 1, !player);
+
+            if (moveval > max)
+            {
+                max = moveval;
+                index = x;
+            }
+        }
+    }
+
+    if(depth == 0)
+        play(index, computerPlayer);
+
+        return max;
+}