Last active
August 8, 2018 16:04
-
-
Save mstaples/66f6b67dcedc8b7b43e681d819de797c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class PuzzleDashboard extends React.Component { | |
state = { | |
tiles: [], | |
emptyId: "", | |
emptyCol: "", | |
emptyRow: "" | |
}; | |
componentDidMount() { | |
this.loadPuzzleTilesFromServer() | |
} | |
loadPuzzleTilesFromServer = () => { | |
client.getTiles((serverTiles) => ( | |
this.setState({ tiles: serverTiles }) | |
)); | |
}; | |
handleMakeMoveClick = (tileId) => { | |
this.makeMove(tileId); | |
}; | |
makeMove = (clickedTileId) => { | |
var emptyTile = this.state.tiles.filter(tile => tile.empty == true).pop(); | |
var clickedTile = this.state.tiles.filter(tile => tile.id == clickedTileId).pop(); | |
var tempState = { | |
tiles: this.state.tiles.map((tile) => { | |
if (tile.id === clickedTileId) { | |
return Object.assign({}, tile, { | |
col: emptyTile.col, | |
row: emptyTile.row, | |
}); | |
} else if (tile.id === emptyTile.id) { | |
return Object.assign({}, tile, { | |
col: clickedTile.col, | |
row: clickedTile.row, | |
}); | |
} else { | |
return tile; | |
} | |
}) | |
}; | |
console.log("clicked tile:"); | |
console.log(clickedTile); | |
tempState = tempState.tiles; | |
emptyTile = Object.assign({}, emptyTile, { | |
col: clickedTile.col, | |
row: clickedTile.row, | |
}); | |
var updatedMovesTiles = client.updateMoves(tempState, emptyTile); | |
console.log("moved empty tile:"); | |
console.log(emptyTile); | |
console.log("updatedMovesTiles"); | |
console.log(updatedMovesTiles); | |
this.setState((oldState) => { | |
return {tiles: updatedMovesTiles }; | |
}); | |
window.setTimeout(this.printState(), 5000); | |
}; | |
printState = () => { | |
console.log(this.state.tiles); | |
}; | |
render() { | |
return ( | |
<div className='ui four column centered grid'> | |
<Columns | |
tiles={this.state.tiles} | |
onMoveClick={this.handleMakeMoveClick} | |
/> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment