From da6f042cb20bfaa91de11719550af9be70b730be Mon Sep 17 00:00:00 2001
From: gormangit <contact@jongorman.top>
Date: Wed, 15 Nov 2017 23:19:15 -0600
Subject: [PATCH 1/4] some work

---
 07week/ticTacToe/script.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index d0bc4bd52..1a6e20966 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -1,13 +1,21 @@
 'use strict';
 
+
 class TicTacToe extends React.Component {
   constructor(props) {
     super(props);
   }
-
+  handleClick(){
+      this.playerTurn = 'X';
+      this.changePlayer = () => {
+          this.playerTurn=this.playerTurn ==='X' ? 'O' : 'X'
+      };
+      console.log("PlayerTurn");
+  }
   render() {
     return (
-      <div>
+      <div onClick={() => this.handleClick()}className="row">
+
         <div className="row">
           <div data-cell="0"></div>
           <div data-cell="1"></div>
@@ -23,6 +31,7 @@ class TicTacToe extends React.Component {
           <div data-cell="7"></div>
           <div data-cell="8"></div>
         </div>
+
       </div>
     );
   }

From 06a8f9bb240ca411ad4f3cc2129975ad0b986f23 Mon Sep 17 00:00:00 2001
From: gormangit <contact@jongorman.top>
Date: Thu, 16 Nov 2017 17:38:27 -0600
Subject: [PATCH 2/4] works

---
 07week/ticTacToe/script.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index 1a6e20966..96f15322d 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -4,11 +4,15 @@
 class TicTacToe extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+        playerTurn = 'X' //if in state no need for this....
+    };
   }
+
   handleClick(){
-      this.playerTurn = 'X';
+
       this.changePlayer = () => {
-          this.playerTurn=this.playerTurn ==='X' ? 'O' : 'X'
+          this.playerTurn = this.playerTurn ==='X' ? 'O' : 'X'
       };
       console.log("PlayerTurn");
   }

From 59ce464bee23373c2073dd01444680a89edab0a6 Mon Sep 17 00:00:00 2001
From: gormangit <contact@jongorman.top>
Date: Wed, 22 Nov 2017 08:00:08 -0600
Subject: [PATCH 3/4] react tutorial

---
 07week/ticTacToe/script.js | 66 ++++++++++++++++++++++++++++----------
 07week/ticTacToe/style.css |  2 +-
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index 96f15322d..fad80fb9b 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -1,39 +1,71 @@
 'use strict';
 
+class Square extends React.Component{
+  render() {
+    return (
+   <button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>
+    );
+  }
+}
 
 class TicTacToe extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-        playerTurn = 'X' //if in state no need for this....
+                     //if in state no need for this.something...Player turn goes in the state because the state is changeing
+      // players1: null,
+      squares: [
+        "", "", "", "", "", "", "", "", ""
+      ],
+
     };
   }
 
-  handleClick(){
+  handleClick(i){
 
-      this.changePlayer = () => {
-          this.playerTurn = this.playerTurn ==='X' ? 'O' : 'X'
-      };
-      console.log("PlayerTurn");
+    const squares = this.state.squares.slice();
+    squares[i] = 'X';
+    this.setState({squares: squares})
+    // this.playerTurn = this.playerTurn === 'X' ? 'O' : 'X'
+    // return div[data-cell] = playerTurn
+    console.log(this.renderSquare(0));
+  }
+  renderSquare(i) {
+    return (
+          <Square
+              value={this.state.squares[i]}
+              onClick={() => this.handleClick(i)}
+              />
+    );
   }
   render() {
     return (
-      <div onClick={() => this.handleClick()}className="row">
-
+        <div>
         <div className="row">
-          <div data-cell="0"></div>
-          <div data-cell="1"></div>
-          <div data-cell="2"></div>
+           {/*<div data-cell="0"></div>*/}
+            {this.renderSquare(0)}
+          {/*<div data-cell="0" onClick={() => this.setState({players1: this.handleClick()})}>*/}
+              {/*{this.playerTurn}</div>*/}
+          {/*<div data-cell="1"></div>*/}
+            {this.renderSquare(1)}
+          {/*<div data-cell="2"></div>*/}
+            {this.renderSquare(2)}
         </div>
         <div className="row">
-          <div data-cell="3"></div>
-          <div data-cell="4"></div>
-          <div data-cell="5"></div>
+          {/*<div data-cell="3"></div>*/}
+            {this.renderSquare(3)}
+          {/*<div data-cell="4"></div>*/}
+            {this.renderSquare(4)}
+          {/*<div data-cell="5"></div>*/}
+            {this.renderSquare(5)}
         </div>
         <div className="row">
-          <div data-cell="6"></div>
-          <div data-cell="7"></div>
-          <div data-cell="8"></div>
+          {/*<div data-cell="6"></div>*/}
+            {this.renderSquare(6)}
+          {/*<div data-cell="7"></div>*/}
+            {this.renderSquare(7)}
+          {/*<div data-cell="8"></div>*/}
+            {this.renderSquare(8)}
         </div>
 
       </div>
diff --git a/07week/ticTacToe/style.css b/07week/ticTacToe/style.css
index d550b6372..0938b9258 100644
--- a/07week/ticTacToe/style.css
+++ b/07week/ticTacToe/style.css
@@ -1,4 +1,4 @@
-div[data-cell] {
+.square {
   width: 100px;
   height: 100px;
   background-color: #f2f2f2;

From 4d99d0160b02afcd54d390ad49e844a0ef568570 Mon Sep 17 00:00:00 2001
From: gormangit <contact@jongorman.top>
Date: Sat, 25 Nov 2017 10:28:27 -0600
Subject: [PATCH 4/4] working

---
 07week/ticTacToe/script.js | 43 ++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index fad80fb9b..ec2868982 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -17,18 +17,24 @@ class TicTacToe extends React.Component {
       squares: [
         "", "", "", "", "", "", "", "", ""
       ],
-
+     xNext: true,
     };
   }
 
   handleClick(i){
 
     const squares = this.state.squares.slice();
-    squares[i] = 'X';
-    this.setState({squares: squares})
+    if(calculateWin(squares) || squares[i]) {
+        return;
+    }
+    squares[i] = this.state.xNext ? 'X' : 'O';
+    this.setState({
+      squares: squares,
+      xNext: !this.state.xNext,
+    })
     // this.playerTurn = this.playerTurn === 'X' ? 'O' : 'X'
     // return div[data-cell] = playerTurn
-    console.log(this.renderSquare(0));
+    // console.log(this.renderSquare());
   }
   renderSquare(i) {
     return (
@@ -39,8 +45,17 @@ class TicTacToe extends React.Component {
     );
   }
   render() {
+      const winner = calculateWin(this.state.squares);
+      let status;
+      if(winner) {
+          status = 'Winner: ' + winner;
+      } else {
+          status = 'Next Player: ' + (this.state.xNext ? 'X' : 'O');
+      }
+
     return (
         <div>
+            <div className="status">{status}</div>
         <div className="row">
            {/*<div data-cell="0"></div>*/}
             {this.renderSquare(0)}
@@ -74,3 +89,23 @@ class TicTacToe extends React.Component {
 }
 
 ReactDOM.render(<TicTacToe />, document.getElementById('tic-tac-toe'));
+
+function calculateWin(squares){
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [6, 4, 2],
+    ];
+  for(let i = 0; i <lines.length; i ++) {
+     const [a, b, c] = lines[i];
+     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+         return squares[a];
+     }
+ }
+  return null;
+}
\ No newline at end of file