Hello!
I’ve just started the Dungeon Crawler project, and I’m having a strange problem.
I’ve just built the most simple setup to test some ideas I had about the project. Eventually, I will add functionality for spawning monsters/items, battling, and changing levels, but for now I’m just laying out a board my character (or my nameless white block) can move around.
Everything works as expected, except for one thing:
When I move my character from one cell to the other, the previous cell does not revert back to an empty cell. It continues to look like my character is there.
Here is the code from the relevant section:
constructor(props) {
super(props);
}
displayFromPOV = () => {
let visibleBoard = Object.assign({}, { level: LEVEL[this.props.level] });
visibleBoard['level'][this.props.pov.row][this.props.pov.column] = 5;
return visibleBoard;
};
handleArrow = (event) => {
switch (event.keyCode) {
case 37:
return this.props.newMove('left');
case 38:
return this.props.newMove('up');
case 39:
return this.props.newMove('right');
case 40:
return this.props.newMove('down');
default:
return '';
}
};
render() {
let board = this.displayFromPOV();
return (
<div className='board' onKeyDown={this.handleArrow} tabIndex='0'>
{board.level.map( (row) => {
return (
<div className="row" role="row">
{row.map( (cell) => {
return (
<Cell cell={cell} />
)
})}
</div>
)
})}
</div>
)
}
};
You can see a link to the full project here.
I feel like this is a simple mistake I’m making regarding state and the Redux store, but I can’t figure it out!
Any help would be hugely appreciated.