made improvements

tac.js

@@ -4,15 +4,59 @@ function initialise (player, choice) {
 	//choice == "X" ? this.turn = true : this.turn = false;
 }
 
+var arenaHTML = '<div id="col1"><div id="cell0" class="cell"></div><div id="cell1" class="cell"></div><div id="cell2" class="cell"></div></div><div id="col2"><div id="cell3" class="cell"></div><div id="cell4" class="cell"></div><div id="cell5" class="cell"></div></div><div id="col3"><div id="cell6" class="cell"></div><div id="cell7" class="cell"></div><div id="cell8" class="cell"></div></div>';
+
+
+// note: instead of using the traditional row definition to think of the cells, i am using columns.
+
 var arena = [0, 0, 0, 0, 0, 0, 0, 0, 0]; // 
 
+var winIf = [[arena[0], arena[1], arena[2]], 
+             [arena[3], arena[4], arena[5]],
+             [arena[6], arena[7], arena[8]],
+             [arena[0], arena[3], arena[6]],
+             [arena[1], arena[4], arena[7]],
+             [arena[2], arena[5], arena[8]],
+             [arena[0], arena[4], arena[8]],
+             [arena[2], arena[4], arena[6]],
+             ];
+
+
 $(document).ready(function() {
+
+	function evaluate() {
+		console.log("does this work");
+	}
+
 	$( "#bX" ).click(function() {
 		$("#contents").fadeOut("fast", function() {
-			$(this).html("Ok, let's begin your romantic journey").fadeIn('slow');
+			$(this).html(arenaHTML).fadeIn('slow', function() {
+				$( ".cell" ).click(function() {
+					var change = ($(this).attr("id")).substr(-1);
+					if(arena[change] != 1) {
+						$(this).text("X");
+						console.log("arena updated");
+						arena[change] = 1;
+					}
+				});
+				//}
+			});
 		});
 	});
+
 	$( "#bY" ).click(function() {
-		//alert( "Handler for .click() called." );
+		$("#contents").fadeOut("fast", function() {
+			$(this).html(arenaHTML).fadeIn('slow', function() {
+				$( ".cell" ).click(function() {
+					$(this).text("O");
+					var change = $(this).attr("id");
+					change = change.substr(-1);
+					console.log(change);
+					evaluate();
+				});
+			});
+		});
 	});
 });
+
+

tic.css

@@ -21,15 +21,45 @@ hr {
 }
 
 #arena {
-   background-color: #b7b7b7;
+   background-color: #dbdbdb;
    max-width: 400px;
    border-radius: 40px;
-   border: 25px solid #636363;
+   border: 10px solid #c4c5c6;
    padding: 125px;
    margin-top: 50px;
    margin: 0 auto;
    align-content:center;
    position: relative;
+   overflow: hidden;
+}
+
+.cell {
+	background-color: white;
+	max-width: 30px;
+	margin: 0px;
+	padding: 50px;
+	border: 2px solid #dbdbdb;
+	font-color: black;
+	position: center;
+	cursor: pointer;
+	height: 5px;
+	width: 5px;
+	font-size: 40px;
+	text-align: center;
+}
+
+#col1, #col2, #col3 {
+	display: inline-block;
+	left: -50%;
+	float: left;
+}
+
+#col1 {
+	margin-left: 40px;
+}
+
+#cell4, #cell5, #cell6 {
+	float: center;
 }
 
 .cButton {

toe.html

@@ -1,3 +1,11 @@
-<div class="perk">
-	<b>let's play then</b>
-</div>
+<div id="cell1" class="cell"></div>
+<div id="cell2" class="cell"></div>
+<div id="cell3" class="cell"></div>
+<br/>
+<div id="cell4" class="cell"></div>
+<div id="cell5" class="cell"></div>
+<div id="cell6" class="cell"></div>
+<br/>
+<div id="cell7" class="cell"></div>
+<div id="cell8" class="cell"></div>
+<div id="cell9" class="cell"></div>