fix: Update level spatial map when tiles are moved

[mgmarlow]

Description

• Expose removeFromSpatialMap and insertIntoSpatialMap from level so they can be called from the tile component.
• When calling a move function from tile, remove the current component from the spatial map and add them back with the new position.
• Contribute a Sokoban example that showcases using tile movement to create a tile-based puzzle game.

Here's what the example looks like:

Related issues

• Closes bug: level spatialMap ignores changes to component tilePos #503

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kaplayjs/kaplay@539

commit: 71da333

[mflerackers]

While this fixes one particular use case, it breaks others (for example navigation) and is very costly when the map is large. What should happen is

• level.removeFromSpatialMap(this); // This removes the object from the spatial map at the old tilePos
• update tilePos
• level.insertIntoSpatialMap(this); // This places the object at the correct position in the spatial map at the new tilePos
• level.trigger("spatialMapChanged"); // This makes sure navigation and games that make use of it get notified that the spatial map has changed

[mgmarlow]

While this fixes one particular use case, it breaks others (for example navigation) and is very costly when the map is large.

Ah, fair enough. I wasn't sure whether you preferred exposing both add/remove from the level object as opposed to an invalidate, similar to the navigation API. But I follow the reasoning. Will update it accordingly.

[mflerackers]

Best would be to have tile a friend of level, but JavaScript/TypeScript doesn't have any granularity in what's private/public.

[mgmarlow]

One thing that's a little ugly in this case is the type cast from TileComp to GameObj to satisfy the arguments for spatialMap insert/remove:

level.removeFromSpatialMap(this as unknown as GameObj<TileComp>);

I saw the sprite component doing similar so I assumed this is the way to go.