Commit 30dc12a5 authored by Alexander Kotov's avatar Alexander Kotov

move disks between towers

parent 7dcbc3d8
......@@ -7,29 +7,80 @@ class App extends Component {
constructor() {
super()
this.state = {
towers: {
left: [
{ color: '#F3A712', width: 60 },
{ color: '#29335C', width: 80 },
{ color: '#E4572E', width: 100 }
],
center: [
{ color: '#669BBC', width: 20 }],
right: [
{ color: '#A8C686', width: 40 }
]
}
left: [
{ color: '#F3A712', width: 60 },
{ color: '#29335C', width: 80 },
{ color: '#E4572E', width: 100 }
],
center: [
{ color: '#669BBC', width: 20 }
],
right: [
{ color: '#A8C686', width: 40 }
],
move: null
}
}
startMove(tower) {
let disks = [...this.state[tower]]
if (disks.length) {
let disk = disks.shift()
this.setState({
[tower]: disks,
move: { disk, from: tower }
})
}
}
updateMove = tower => () => {
if (this.state.move) {
let move = { ...this.state.move, to: tower }
this.setState({ move })
}
}
completeMove() {
let move = this.state.move
let disks = [...this.state[move.to]]
disks.unshift(move.disk)
this.setState({
[move.to]: disks,
move: null
})
}
performMove = tower => () => {
if (this.state.move) {
this.completeMove()
} else {
this.startMove(tower)
}
}
render() {
const {left, center, right} = this.state.towers
const {left, center, right} = this.state
return (
<div className="Board">
<Tower disks={left}></Tower>
<Tower disks={center}></Tower>
<Tower disks={right}></Tower>
<Tower
disks={left}
onClick={this.performMove('left')}
onEnter={this.updateMove('left')}
>
</Tower>
<Tower
disks={center}
onClick={this.performMove('center')}
onEnter={this.updateMove('center')}
>
</Tower>
<Tower
disks={right}
onClick={this.performMove('right')}
onEnter={this.updateMove('right')}
>
</Tower>
</div>
);
}
......
......@@ -12,10 +12,10 @@ const diskStyle = d => {
export default class Tower extends Component {
render() {
const disks = this.props.disks
const {disks, onClick, onEnter} = this.props
return (
<div className="Tower">
<div className="Tower" onClick={onClick} onMouseEnter={onEnter}>
{disks.map(d => {
return <div className="Disk" style={diskStyle(d)}></div>
})}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment