Skip to content

Towers of Hanoi... React style! #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
copelandhouse2 wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

Towers of Hanoi... React style! #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef464ae
Initial push. Controlling turns. Added message.
copelandhouse2 Aug 24, 2017
cf0a06e
Ability to click and control stacks internally via object of 3 arrays.
copelandhouse2 Aug 27, 2017
871696b
TOH react COMPLETE! It is broken up more React like with components,…
copelandhouse2 Aug 28, 2017
772112e
moving click code directly to stack element
copelandhouse2 Aug 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 29 additions & 9 deletions 07week/ticTacToe/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<div className="row">
<div data-cell="0"></div>
<div data-cell="1"></div>
<div data-cell="2"></div>
<div data-cell="0" onClick={() => this.handleClick('cell0')}>{this.state.cell0}</div>
<div data-cell="1" onClick={() => this.handleClick('cell1')}>{this.state.cell1}</div>
<div data-cell="2" onClick={() => this.handleClick('cell2')}>{this.state.cell2}</div>
</div>
<div className="row">
<div data-cell="3"></div>
<div data-cell="4"></div>
<div data-cell="5"></div>
<div data-cell="3" onClick={() => this.handleClick('cell3')}>{this.state.cell3}</div>
<div data-cell="4" onClick={() => this.handleClick('cell4')}>{this.state.cell4}</div>
<div data-cell="5" onClick={() => this.handleClick('cell5')}>{this.state.cell5}</div>
</div>
<div className="row">
<div data-cell="6"></div>
<div data-cell="7"></div>
<div data-cell="8"></div>
<div data-cell="6" onClick={() => this.handleClick('cell6')}>{this.state.cell6}</div>
<div data-cell="7" onClick={() => this.handleClick('cell7')}>{this.state.cell7}</div>
<div data-cell="8" onClick={() => this.handleClick('cell8')}>{this.state.cell8}</div>
</div>
<div id='announce-winner'>{this.message}</div>
</div>
);
}
Expand Down
11 changes: 11 additions & 0 deletions 07week/towersOfHanoi/Block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// import React from 'react';

// This functional component renders a block. We pass the size
// of the block in props.
const Block = (props) => {
return (
<div data-block={props.size} />
);
};

// export default Block;
9 changes: 9 additions & 0 deletions 07week/towersOfHanoi/Pop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// This functional component renders the Popped block line.
const Pop = (props) => {
return (
<div id="pop">
<div>Popped Block:&nbsp;</div>
<div data-block={props.block} />
</div>
);
};
28 changes: 28 additions & 0 deletions 07week/towersOfHanoi/Stack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// import React from 'react';
// import Block from './Block.js';

// This functional component renders the Stacks. It uses an array map to display
// all the blocks assigned in stacks arrays.
const Stack = (props) => {

// const updateMe = ;

return (
<div
data-stack={props.id}
onClick={() => props.handleStackClick(props.id)}
>
{
props.blocks.map((blockSize,index) =>
<Block
size={blockSize}
key={index}
/>
)
}
</div>
);

};

// export default Stack;
5 changes: 5 additions & 0 deletions 07week/towersOfHanoi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
<!-- React objects... Pop, Block, Stack -->
<script type="text/babel" src="./Pop.js"></script>
<script type="text/babel" src="./Block.js"></script>
<script type="text/babel" src="./Stack.js"></script>
<script type="text/babel" src="./script.js"></script>

</body>
</html>
158 changes: 149 additions & 9 deletions 07week/towersOfHanoi/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,166 @@
'use strict';

/****************** WHITE BOARD NOTES **********************
// Given: the board, stacks and blocks. Board Display.
//
// create object with 3 arrays?
//
// Create functional components: Stack and Block
//
// Click on a stack
// Test for popped block.
// If popped block then
// If validMove() then
// *** Comparing last block in current stack, test
// movePiece()
// if checkForWin() then
// Announce winner!
// else
// Continue playing the game.
// else
// alert user, 'Cannot move larger block onto smaller one'
// end if
// else
// If !popOffBlock() then
// alert user, 'select a stack with a block'
// End if
//
// validMove(sourceStack, targetStack) // the tests expect this function to take in 2 values.
// if source stack array.last < target stack array.last then
// return true
// end if
// return false
//
// movePiece()
// target stack array.push(source stack array.pop)
// return
//
// checkForWin()
// if b.array.length === 4 || c.array.length === 4 then
// return true
// end if
// return false
//
// popOffBlock(sourceStack)
// if sourceStack > 0 // has blocks
// Pop off top block.
// return true;
// else
// return false;
// end if

***********************************************************/

// Main driver class.
class TowersOfHanoi extends React.Component {
constructor(props) {
super(props);
constructor() {
super();
const startArr = [100,75,50,25];
const winCount = startArr.length;
this.state = {
stacks: { // My stacks object has 3 arrays for each stack
1: startArr.slice(), // a place to store the popped block and the
2: [], // winning count.
3: [],
popped: null,
winCount: winCount
},
message: '', // message used to display messages to the user.
youWon: false // Used to shut game down after win.
}
} // Constructor

// Need to ensure player is not placing a larger block on top of a smaller one.
validMove(popped, stack) {
if (stack.length === 0 || popped < stack[stack.length - 1]) {
return true;
}
return false;
}

// Check for a win. If stack 2 or 3 has all the blocks, then WIN.
checkForWin(stacks) {
// console.log('in checkForWin');
// console.log('Win criteria',stacks.winCount, stacks[2].length, stacks[3].length);
if (stacks[2].length === stacks.winCount || stacks[3].length === stacks.winCount) {
return true;
}
return false;
} // checkForWin()

// All the TOH logic is in here.
handleClick(sKey) {
console.log('In handleClick!');
// Creating an exact copy of stacks... one that is not by reference.
const stacks = {1:[],2:[],3:[],popped:null,winCount:null};
stacks[1] = this.state.stacks[1].slice();
stacks[2] = this.state.stacks[2].slice();
stacks[3] = this.state.stacks[3].slice();
stacks['popped'] = this.state.stacks['popped'];
stacks['winCount'] = this.state.stacks['winCount'];

let message = this.state.message;
let youWon = this.state.youWon;

if(stacks['popped']) { // We have a popped block. Need to push block
if (this.validMove(stacks['popped'], stacks[sKey])) {
stacks[sKey].push(stacks['popped']);
stacks['popped'] = null;
message = '';
if (this.checkForWin(stacks) && !youWon) {
message = 'Congratulations, you solved Towers of Hanoi!';
youWon = true;
this.setState({stacks: stacks, message: message, youWon: youWon});
}
} else {
message = 'Invalid move. Cannot place larger block on smaller one';
}
} else { // We need to pop a block off the selected stack.
if (stacks[sKey].length > 0) {
stacks['popped'] = stacks[sKey].pop();
message = '';
} else {
message = 'You selected an empty stack. Please try again.';
}
}
youWon? null : this.setState({stacks: stacks, message: message, youWon: youWon});

} // handleClick()

// This is the main display for the game. I display a Stack object.
// The stack objects display the block objects.
render() {
return (
<div>
<div data-stack="1">
<div data-block="100"></div>
<div data-block="75"></div>
<div data-block="50"></div>
<div data-block="25"></div>
<div>
<h2>Towers of Hanoi by Craig... React version!</h2>
<Pop block={this.state.stacks['popped']} />
</div>
<div data-stack="2">
<div id="board">
<Stack
id="1"
blocks={this.state.stacks[1]}
handleStackClick={this.handleClick.bind(this)}
/>
<Stack
id="2"
blocks={this.state.stacks[2]}
handleStackClick={this.handleClick.bind(this)}
/>
<Stack
id="3"
blocks={this.state.stacks[3]}
handleStackClick={this.handleClick.bind(this)}
/>
</div>
<div data-stack="3">
<div>
<h2>{this.state.message}</h2>
</div>

</div>
);
}
}

// Rendering TowersOfHanoi class within div id=towers-of-hanoi
ReactDOM.render(<TowersOfHanoi />, document.getElementById('towers-of-hanoi'));
33 changes: 26 additions & 7 deletions 07week/towersOfHanoi/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,53 @@
[data-stack] {
#towers-of-hanoi {
display: flex;
font-family: Arial;
}

#board {
display: flex;

}

#pop {
display: flex;
flex-wrap: nowrap;
justify-content: center;
height: 30px;
align-items: center;
}
[data-stack] {
display: flex;
justify-content: flex-start;
align-items: center;
height: 101px;
height: 150px;
width: 200px;
background-color: aliceblue;
margin: 25px;
flex-direction: column-reverse;
}

[data-block] {
width: 25px;
height: 25px;
float: left;
}

[data-block="25"] {
height: 25px;
width: 25px;
background-color: blue;
}

[data-block="50"] {
height: 50px;
width: 50px;
background-color: green;
}

[data-block="75"] {
height: 75px;
width: 75px;
background-color: red;
}

[data-block="100"] {
height: 100px;
width: 100px;
background-color: yellow;
}

Expand Down