From ef464ae4d8906114d7f79ac4b7cac7fb72c46b41 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Thu, 24 Aug 2017 05:39:07 -0500 Subject: [PATCH 1/4] Initial push. Controlling turns. Added message. --- 07week/ticTacToe/script.js | 38 +++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index d0bc4bd52..0ced0dd1c 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -1,28 +1,48 @@ 'use strict'; class TicTacToe extends React.Component { + constructor(props) { super(props); + this.state = { + turn: 'X', + }; + this.message = ''; } + handleClick=(cell)=>{ + const state = {...this.state}; + const // this.state.turn? 'X' : 'O'; + if (!state[cell]) { + state[cell] = this.state.turn; + state['turn'] = this.state.turn === 'X'? 'O' : 'X'; // Switch between X and O + this.message = ''; + } else { + this.message = 'Square occupied. Please select a different square'; + } + // toggleTurn(); + // this.state.turn? 'X' : 'O'; + 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 e8e6e8f35a8b451baeed216e9935951ef0ffb876 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Fri, 25 Aug 2017 19:09:26 -0500 Subject: [PATCH 2/4] working on checkForWin. Saving what I have. --- 07week/ticTacToe/script.js | 67 +++++++++++++++++++++++++++++++++----- 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index 0ced0dd1c..adfd72d64 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -7,21 +7,64 @@ class TicTacToe extends React.Component { this.state = { turn: 'X', }; - this.message = ''; + // this.message = ''; } + + checkForWin = (myObj) => { + // wins array stores all the win combinations. wincombo array is one of the wins. + // wins.some ... at least one of these win combos needs to be true. + // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) + const wins = [ + ['cell0','cell1','cell2'] + // , ['cell3','cell4','cell5'], ['cell6','cell7','cell8'], // horizontal wins + // ['cell0','cell3','cell6'], ['cell1','cell4','cell7'], ['cell2','cell5','cell8'], // vertical wins + // ['cell0','cell4','cell8'], ['cell2','cell4','cell6'] // diagonal wins + ]; + + const stateKeys = Object.keys(myObj).splice(1); + console.log(stateKeys, myObj); + // if (wins[0].every(mykey => { + // // console.log('In every'); + // // console.log('here', key, myObj[key], myObj['cell1'], myObj['cell2']); + // // console.log(wins[0]); + // this.state[mykey] === 'X'; //myObj['turn']; + // }) + // ) { return true; } + // else { + // return false; + // } + // } + // ); + return wins.some(winCombo => {winCombo.every((key) => { + console.log('In every'); + console.log(winCombo); + console.log('here', key, myObj[key], myObj['turn']); + myObj[key] === myObj['turn']; + }) + } + ); + + // return false; +} + handleClick=(cell)=>{ const state = {...this.state}; - const // this.state.turn? 'X' : 'O'; if (!state[cell]) { state[cell] = this.state.turn; - state['turn'] = this.state.turn === 'X'? 'O' : 'X'; // Switch between X and O - this.message = ''; - + // console.log(state); + // console.log(Object.values(state).splice(1).length); + console.log(this.checkForWin(state)); + if (this.checkForWin(state)) { //checkForWin returns TRUE if someone won. It returns FALSE if no win yet. + this.message = `Congratulations ${this.state.turn}. You won! Start a new game by refreshing`; + } else if (Object.values(state).splice(1).length == 9) { // If there have been 9 turns but no winner. It is a tie. + this.message = `We have a tie folks. Start a new game by refreshing`; + } else { + state['turn'] = this.state.turn === 'X'? 'O' : 'X'; // Switch between X and O + this.message = ''; + } } else { - this.message = 'Square occupied. Please select a different square'; + this.message = 'Try again please. That square is taken.'; } - // toggleTurn(); - // this.state.turn? 'X' : 'O'; this.setState(state) }; render() { @@ -46,6 +89,14 @@ class TicTacToe extends React.Component { ); } + // checkForWin(myObj) { + // // wins array stores all the win combinations. wincombo array is one of the wins. + // // wins.some ... at least one of these win combos needs to be true. + // // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) + // const stateKeys = Object.keys(state).splice(0,1); + // return wins.some(winCombo => winCombo.every(key => stateKeys[key] === state['turn'])); + // } + } ReactDOM.render(, document.getElementById('tic-tac-toe')); From 755bf3f0c59d5706abdd7e8b9e378b6de7021ffa Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Mon, 28 Aug 2017 00:28:16 -0500 Subject: [PATCH 3/4] Fixed checkForWin. Ran Linter. There is only 1 linting error. It doesn't like the spread operator on line 29. Keeping the code as is. --- 07week/ticTacToe/script.js | 92 ++++++++++++++------------------------ 1 file changed, 33 insertions(+), 59 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index adfd72d64..02054d83b 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -7,66 +7,47 @@ class TicTacToe extends React.Component { this.state = { turn: 'X', }; - // this.message = ''; - } + } - checkForWin = (myObj) => { + checkForWin(myObj) { // wins array stores all the win combinations. wincombo array is one of the wins. // wins.some ... at least one of these win combos needs to be true. - // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) - const wins = [ - ['cell0','cell1','cell2'] - // , ['cell3','cell4','cell5'], ['cell6','cell7','cell8'], // horizontal wins - // ['cell0','cell3','cell6'], ['cell1','cell4','cell7'], ['cell2','cell5','cell8'], // vertical wins - // ['cell0','cell4','cell8'], ['cell2','cell4','cell6'] // diagonal wins - ]; + // aWin.every ... for a win, all the squares in the particular win must equal the players token (X or O) + const wins = [ + [0,1,2], [3,4,5], [6,7,8], // horizontal wins + [0,3,6], [1,4,7], [2,5,8], // vertical wins + [0,4,8], [2,4,6] // diagonal wins + ]; - const stateKeys = Object.keys(myObj).splice(1); - console.log(stateKeys, myObj); - // if (wins[0].every(mykey => { - // // console.log('In every'); - // // console.log('here', key, myObj[key], myObj['cell1'], myObj['cell2']); - // // console.log(wins[0]); - // this.state[mykey] === 'X'; //myObj['turn']; - // }) - // ) { return true; } - // else { - // return false; - // } - // } - // ); - return wins.some(winCombo => {winCombo.every((key) => { - console.log('In every'); - console.log(winCombo); - console.log('here', key, myObj[key], myObj['turn']); - myObj[key] === myObj['turn']; - }) - } - ); + return wins.some(aWin => aWin.every(index => myObj[`cell${index}`] === myObj['turn'])); + } // checkForWin() - // return false; -} - - handleClick=(cell)=>{ - const state = {...this.state}; - if (!state[cell]) { - state[cell] = this.state.turn; - // console.log(state); - // console.log(Object.values(state).splice(1).length); - console.log(this.checkForWin(state)); - if (this.checkForWin(state)) { //checkForWin returns TRUE if someone won. It returns FALSE if no win yet. - this.message = `Congratulations ${this.state.turn}. You won! Start a new game by refreshing`; - } else if (Object.values(state).splice(1).length == 9) { // If there have been 9 turns but no winner. It is a tie. - this.message = `We have a tie folks. Start a new game by refreshing`; - } else { - state['turn'] = this.state.turn === 'X'? 'O' : 'X'; // Switch between X and O - this.message = ''; - } + // handleClick. Method is called when a square is clicked. Based on onClick + // event in each div data-cell below. + // The TTT logic is in here. a) Making sure it is valid move b) validating win c) messaging. + handleClick(cell) { + const state = { ...this.state }; + if (!state[cell]) { + state[cell] = this.state.turn; + // console.log('value of checkForWin', this.checkForWin(state)); + if (this.checkForWin(state)) { //checkForWin returns TRUE if someone won. It returns FALSE if no win yet. + this.message = `Congratulations ${this.state.turn}. You won! Start a new game by refreshing`; + // If there have been 9 turns but no winner. It is a tie. + // Splicing to get rid of turn key value pair. That will give me the + // correct number of cells populated so far. + } else if (Object.values(state).splice(1).length == 9) { + this.message = `We have a tie folks. Start a new game by refreshing`; } else { - this.message = 'Try again please. That square is taken.'; + state['turn'] = this.state.turn === 'X'? 'O' : 'X'; // Switch between X and O + this.message = ''; } - this.setState(state) + } else { + this.message = 'Try again please. That square is taken.'; + } + this.setState(state) }; + + // render method displays the TTT board. render() { return (
@@ -89,13 +70,6 @@ class TicTacToe extends React.Component {
); } - // checkForWin(myObj) { - // // wins array stores all the win combinations. wincombo array is one of the wins. - // // wins.some ... at least one of these win combos needs to be true. - // // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) - // const stateKeys = Object.keys(state).splice(0,1); - // return wins.some(winCombo => winCombo.every(key => stateKeys[key] === state['turn'])); - // } } From 879d094f74f4827548ea457e8d3b22be5e16e204 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Tue, 29 Aug 2017 17:39:18 -0500 Subject: [PATCH 4/4] added reset button (after nearly 2 hours ugh) --- 07week/ticTacToe/script.js | 44 +++++++++++++++++++++++++++++++++++++- 07week/ticTacToe/style.css | 4 +++- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index 02054d83b..fe2febd18 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -1,12 +1,18 @@ 'use strict'; + + class TicTacToe extends React.Component { + constructor(props) { super(props); this.state = { turn: 'X', }; + this.initialState = { + turn: 'X', + }; } checkForWin(myObj) { @@ -47,6 +53,40 @@ class TicTacToe extends React.Component { this.setState(state) }; + resetBoard () { + console.log('Button clicked', this.state, this.initialState); + // const state = { ...this.state }; + // this.state = state; + // const myState = this.initialState.turn; + const keyArr = Object.keys(this.state); + console.log(keyArr); + keyArr.forEach(key => { + if (key === 'turn') { + console.log('in the if.true', key); + this.state[key] = 'X'; + } else { + console.log('in the if.false', key); + delete this.state[key]; + } + this.message = ''; + }); + + // for (let i=0; i < keyArr.length; i++) { + // console.log('in the for', keyArr[i]) + // if (keyArr[i] === 'turn') { + // this.state[keyArr[i]] = 'X'; + // } else { + // delete this.state[keyArr[i]]; + // } + // } + + // keyArr.map((key) => { + // + // }); + this.setState(this.state) + console.log(this.state); + // this.render(); + } // render method displays the TTT board. render() { return ( @@ -66,7 +106,9 @@ class TicTacToe extends React.Component {
this.handleClick('cell7')}>{this.state.cell7}
this.handleClick('cell8')}>{this.state.cell8}
-
{this.message}
+
{this.message}
+ + ); } diff --git a/07week/ticTacToe/style.css b/07week/ticTacToe/style.css index d550b6372..26d60aa24 100644 --- a/07week/ticTacToe/style.css +++ b/07week/ticTacToe/style.css @@ -14,5 +14,7 @@ div[data-cell] { #announce-winner { clear: both; - font-size: 50px; + font-size: 24px; + font-family: Arial; + }