puzzle-app.js

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>
        );
    }
}