From ae5e819d226dff494e9e64a2ef07899be0cd2013 Mon Sep 17 00:00:00 2001 From: jmwhitman7 Date: Thu, 24 Aug 2017 18:55:58 -0500 Subject: [PATCH 1/3] tictactoe working turn switch --- 06week/ticTacToe/script.js | 56 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 9a6b571df..62d9acbb8 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,5 +1,55 @@ 'use strict'; -document.addEventListener('DOMContentLoaded', () => { - // Your code here -}); +class TicTacToe extends React.Component { + + + constructor(props) { + super(props); + this.state = { + turn: 'X', + }; + this.message = ''; + } + handleClick=(cell)=>{ + const state = this.state; + if (!state[cell]) { + + state[cell] = this.state.turn; + + state['turn'] = this.state.turn === 'X'? 'O' : 'X'; + this.message = ''; + + } else { + this.message = 'HEY! That space is taken. Play on a different square!'; + } + + this.setState(state) + }; + + + + render() { + return ( +
+
+
this.handleClick('cell0')}>{this.state.cell0}>
+
this.handleClick('cell1')}>{this.state.cell1}>
+
this.handleClick('cell2')}>{this.state.cell2}>
+
+
+
this.handleClick('cell3')}>{this.state.cell3}>
+
this.handleClick('cell4')}>{this.state.cell4}>
+
this.handleClick('cell5')}>{this.state.cell5}>
+
+
+
this.handleClick('cell6')}>{this.state.cell6}>
+
this.handleClick('cell7')}>{this.state.cell7}>
+
this.handleClick('cell8')}>{this.state.cell8}>
+
+
{this.message}
+
+ ); + } +} + +ReactDOM.render(, document.getElementById('tic-tac-toe')); From 631cd36065ed25442fc56eba36b481174a0579dc Mon Sep 17 00:00:00 2001 From: jmwhitman7 Date: Tue, 29 Aug 2017 17:07:36 -0500 Subject: [PATCH 2/3] tic tac toe working --- 07week/ticTacToe/script.js | 45 +++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index d0bc4bd52..786065364 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -1,28 +1,53 @@ 'use strict'; class TicTacToe extends React.Component { + + constructor(props) { super(props); + this.state = { + turn: 'X', + board: ['','','','','','','','',''], + }; + this.message = ''; } + handleClick (cell) { + const state = this.state; + if (!state[cell]) { + + state[cell] = this.state.turn; + + state['turn'] = this.state.turn === 'X'? 'O' : 'X'; + this.message = ''; + + } else { + this.message = 'HEY! That space is taken. Play on a different square!'; + } + + this.setState(state) + }; + + render() { return (
-
-
-
+
this.handleClick('cell0')}>{this.state.cell0}
+
this.handleClick('cell1')}>{this.state.cell1}
+
this.handleClick('cell2')}>{this.state.cell2}
-
-
-
+
this.handleClick('cell3')}>{this.state.cell3}
+
this.handleClick('cell4')}>{this.state.cell4}
+
this.handleClick('cell5')}>{this.state.cell5}
-
-
-
-
+
this.handleClick('cell6')}>{this.state.cell6}
+
this.handleClick('cell7')}>{this.state.cell7}
+
this.handleClick('cell8')}>{this.state.cell8}
+
+
{this.message}
); } From af3695f2746d002c1c67ca5a89c8068b6b12a9dc Mon Sep 17 00:00:00 2001 From: jmwhitman7 Date: Tue, 29 Aug 2017 17:08:43 -0500 Subject: [PATCH 3/3] working tic tac toe 2 --- 07week/ticTacToe/script.js | 131 ++++++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 32 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index 786065364..b3a8e8c73 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -1,56 +1,123 @@ 'use strict'; +// Create TTT Component class TicTacToe extends React.Component { - - + // Because we start with a this.state, we have a constructor constructor(props) { super(props); + // Create properties to hold 'X' and 'O' this.state = { + cell0: '', + cell1: '', + cell2: '', + cell3: '', + cell4: '', + cell5: '', + cell6: '', + cell7: '', + cell8: '', + // Starting turn of 'X' turn: 'X', - board: ['','','','','','','','',''], + // Declare local var to TTT class, to be filled in later + message: '' }; - this.message = ''; } - handleClick (cell) { + // Click on cell and alternate 'X' and 'O' + handleClick = (cell) => { + // Create a local variable to lock in current state 0-8, turn, message const state = this.state; - if (!state[cell]) { - - state[cell] = this.state.turn; - - state['turn'] = this.state.turn === 'X'? 'O' : 'X'; - this.message = ''; + // Create a var to hold the turn + const playerTurn = this.state.turn; + // Label each cell with a state, here being the turn + state[cell] = playerTurn; + // Alternates player turn + state.turn = playerTurn === 'X' ? 'O' : 'X'; + // set the new, altered properties to a more current version of this.state + this.setState(state); + // Call the checkForWin function, pass in the current turn + this.checkForWin(playerTurn); + }; - } else { - this.message = 'HEY! That space is taken. Play on a different square!'; + checkForWin = (playerTurn) => { + // Create a local variable to lock in current state 0-8, turn, message + const state = this.state; + // Create arrays of winning positions, where each position is the same as the others + const winningPositions = [ + // Horizontal wins + ['cell0','cell1','cell2'], + ['cell3','cell4','cell5'], + ['cell6','cell7','cell8'], + // Vertical wins + ['cell0','cell3','cell6'], + ['cell1','cell4','cell7'], + ['cell2','cell5','cell8'], + // Diagonal wins + ['cell0','cell4','cell8'], + ['cell2','cell4','cell6'] + ]; + // Set iterator to loop over all winning scenario arrays + for (var i in winningPositions) { + // Starting at the first winning array and ending at the last arrays + // Check the first through thrid positions in the current array against the playerTurn + // If all 3 elements in the current array are equal to playerTurn 'X' or 'O' + if (state[winningPositions[i][0]] === playerTurn + && state[winningPositions[i][1]] === playerTurn + && state[winningPositions[i][2]] === playerTurn) { + // Use playerTurn variable to create a variable to hold the winningMessage + let winningMessage = `${playerTurn} is the winner!` + // Set the current state's message to the winningMessage var + this.setState({message: winningMessage}); + } } - - this.setState(state) + console.log('message', this.state.message); }; - + resetBoard = (state) => { + this.state = { + cell0: '', + cell1: '', + cell2: '', + cell3: '', + cell4: '', + cell5: '', + cell6: '', + cell7: '', + cell8: '', + // Starting turn of 'X' + turn: 'X', + // Declare local var to TTT class, to be filled in later + message: '' + }; + // Reset the state with empty cells, turn = 'X', no message + this.setState(state); + } render() { return (
-
-
this.handleClick('cell0')}>{this.state.cell0}
-
this.handleClick('cell1')}>{this.state.cell1}
-
this.handleClick('cell2')}>{this.state.cell2}
-
-
-
this.handleClick('cell3')}>{this.state.cell3}
-
this.handleClick('cell4')}>{this.state.cell4}
-
this.handleClick('cell5')}>{this.state.cell5}
-
-
-
this.handleClick('cell6')}>{this.state.cell6}
-
this.handleClick('cell7')}>{this.state.cell7}
-
this.handleClick('cell8')}>{this.state.cell8}
+

{this.state.message}

+
+ +
+
+
+
this.handleClick('cell0')}> {this.state.cell0}
+
this.handleClick('cell1')}> {this.state.cell1}
+
this.handleClick('cell2')}> {this.state.cell2}
-
{this.message}
+
+
this.handleClick('cell3')}> {this.state.cell3}
+
this.handleClick('cell4')}> {this.state.cell4}
+
this.handleClick('cell5')}> {this.state.cell5}
+
+
+
this.handleClick('cell6')}> {this.state.cell6}
+
this.handleClick('cell7')}> {this.state.cell7}
+
this.handleClick('cell8')}> {this.state.cell8}
+
+
); } } - ReactDOM.render(, document.getElementById('tic-tac-toe'));