tictactoe

unit_01/w02d05/homework/tic_tac_toe.md

@@ -35,7 +35,6 @@ And remember, at the end of this process your code should be your own.
 - The gameboard should be responsive, both horizontally and vertically
 - A user should be able to click on different squares to make a move
 - Each click will alternate between marking an `X` and `O` in turn
-- Upon marking of an individual cell, use JavaScript to add a class to each cell to display separate colors
 - A cell should not be able to be replayed once marked
 - Add a reset button that will clear the contents of the board
 
@@ -51,7 +50,9 @@ And remember, at the end of this process your code should be your own.
  gameboard. The gameboard page should include the 3x3 grid and at minimum, a reset button. Using `id` and `class` on clickable
  elements will help you wire this up in JavaScript afterwards.
  
- - Using what you know about responsive design, make sure the gameboard will resize with the browser window, maintaining the right proportions
+ - Using what you know about responsive design, make sure the gameboard will resize with the browser window. The board can skew if you like.
+ 
+ - Make your board look nice! Try to use at least one of the advanced CSS pseudo selectors. But be careful! Don't get sucked in to tinkering with the look of your board for too long . . . 
  
 <hr>
 ** Commit your work.** <br>
@@ -61,16 +62,13 @@ The commit message should read: <br>
 
  - JavaScript portion will be next:
 
-   * Locate the element or elements first to use within your app. Think about
-      using `document.getElementById`, `document.getElementsByClassName` or something similar to locate your target elements. Try this in your console to make sure your selection works.
+   * Locate the element or elements first to use within your app. Think about using `document.getElementById`, `document.getElementsByClassName` or something similar to locate your target elements. Try this in your console to make sure your selection works.
 
    * After finding the elements, start writing logic to listen for `click` events on those elements.
 
-   * You will also need a variable to keep track of moves - this
-      will be used to indicate whether or not to draw an `X` or an `O`.
-
-
-- Display a message to indicate which turn is about to be played
+   * You will also need a variable to keep track of moves - this will be used to indicate whether or not to draw an `X` or an `O`.
+      
+   * Display an X or an O inside the clicked element, depending on whose move it is. Note: to make the X or O responsive to the size of the board, look into using images or icon fonts instead of text.
 
 
 <hr>
@@ -79,23 +77,36 @@ The commit message should read: <br>
 "Commit 2. Board is clickable and tracks moves".
 <hr>
 
-- Determine a set of winning combinations. Check those
-  combinations on the board contents after every move.
-  
+
+- Make it so that nothing happens if an already-clicked square is clicked
+- Hint: check if the className _includes_ what you are looking for
+
 <hr>
 ** Commit your work.** <br>
 The commit message should read: <br> 
-"Commit 3. Winning conditions established".
+"Commit 3. Clicked squares do not respond to additional clicks".
 <hr>
 
 
+- This is the tricky part: Determine a set of winning combinations. Check those combinations on the board contents after every move.
+
+- There are many ways to do this, and figuring out how to do it is challenging. The important part is that you try to work your way through the problem, even if it doesn't work in your game. Give it your best shot, and have fun.
+
+ 
+
+<hr>
+** Commit your work.** <br>
+The commit message should read: <br> 
+"Commit 4. Established a set of winning conditions".
+<hr>
+
 - After the necessary moves have been played, stop the game and display the winner if one player ends up winning with three in a row
 - When the user clicks the 'reset' button, they can play a fresh game
 
 <hr>
 ** Commit your work.** <br>
 The commit message should read: <br> 
-"Commit 4. Game is complete".
+"Commit 5. Game is complete".
 <hr>
 
   
@@ -105,7 +116,7 @@ The commit message should read: <br>
 <hr>
 ** Commit your work.** <br>
 The commit message should read: <br> 
-"Commit 5. Game is playable against AI".
+"Commit 6000. Game is playable against AI".
 <hr>
 
 

unit_01/w02d05/homework/tic_tac_toe_solution/app.js

@@ -0,0 +1,88 @@
+window.onload = function() {
+
+	console.log('app.js');
+
+	var turn = true;
+
+	var Xpositions = [];
+	var Opositions = [];
+
+	var windex = [
+	              [0, 1, 2], [3, 4, 5], [6, 7, 8],
+	              [0, 3, 6], [1, 4, 7], [2, 5, 8],
+	              [0, 4, 8], [2, 4, 6]
+	             ];
+
+	var squares = document.getElementsByClassName('square');
+
+	var play = function() {
+
+		if (!this.className.includes("x") && !this.className.includes("o")) {
+			
+			if (turn) {
+				this.innerHTML = '<img src="x.png"/>';
+				this.className += ' x';
+				Xpositions.push(this.id);
+			} else {
+				this.innerHTML = '<img src="o.png"/>';
+				this.className += ' o';
+				Opositions.push(this.id);
+			}
+			turn = !turn;
+			checkWin();
+
+		}
+	}
+
+	for (var i=0; i < squares.length; i++) {
+		squares[i].addEventListener('click', play);
+	}
+
+
+
+	var checkWin = function() {
+		var squares = document.getElementsByClassName('square');
+		if (checkX()) {
+			console.log('X WON!!!!!');
+			for (var i=0; i < squares.length; i++) {
+				squares[i].innerHTML = '<img src="egg.png"/>'
+			}
+		} else if (checkO()) {
+			console.log('O WON!!!!!');
+			for (var j=0; j < squares.length; j++) {
+				squares[j].innerHTML = '<img src="depression.png"/>'
+			}
+		}
+	}
+
+	var checkX = function() {
+		for (var i=0; i < windex.length; i++) {
+			var hits = 0;
+			for (var j=0; j < windex[i].length; j++) {				
+				for (var k=0; k < Xpositions.length; k++) {
+					if (windex[i][j] == Xpositions[k]) {
+						hits++;
+					}
+				}				
+			}
+			if (hits == 3) { return true };
+		}
+		return false
+	}
+
+	var checkO = function() {
+		for (var i=0; i < windex.length; i++) {
+			var hits = 0;
+			for (var j=0; j < windex[i].length; j++) {				
+				for (var k=0; k < Opositions.length; k++) {
+					if (windex[i][j] == Opositions[k]) {
+						hits++;
+					}
+				}				
+			}
+			if (hits == 3) { return true };
+		}
+		return false
+	}	
+
+}

unit_01/w02d05/homework/tic_tac_toe_solution/index.html

@@ -0,0 +1,22 @@
+<html>
+<head>
+	<title>tic tac toe</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<div id="container">
+		<div id="board">
+			<div class="square" id="0"></div>
+			<div class="square" id="1"></div>
+			<div class="square" id="2"></div>
+			<div class="square" id="3"></div>
+			<div class="square" id="4"></div>
+			<div class="square" id="5"></div>
+			<div class="square" id="6"></div>
+			<div class="square" id="7"></div>
+			<div class="square" id="8"></div>
+		</div>
+	</div>
+	<script type="text/javascript" src="app.js"></script>
+</body>
+</html>

unit_01/w02d05/homework/tic_tac_toe_solution/style.css

@@ -0,0 +1,27 @@
+#board {
+	min-width: 300px;
+	max-width: 800px;
+	min-height: 300px;
+	max-height: 800px;
+	background-color: pink;
+	border-radius: 5%;
+}
+
+.square {
+	position: relative;
+	display: inline-block;
+	left: 1.5%; 
+	top: 2px;
+	height: 32%; width: 32%;
+	border-radius: 10%;
+	overflow: hidden;
+	background-color: white;
+}
+
+img {
+	height: 100%; width: 100%;
+}
+
+h1 {
+
+}