Solid Tiles

On the last chapter we created a simple background tile, but now let's create something a little more complex, a solid tile.

Solid tiles, are tiles you can't walk past it, everything that has a rule, like "blocking a path", must be validated server side.

Why validate it on the server

You can validate a solid block on the client, but always do a check on the server. Why? The server can't trust the client, because anyone with some knowlege of javascript, could manipulate the client code.
Imagine we only checked if there's a collision happening on the client (by client you can always think, the computer that has the js bundle of the game). Imagine some code like

if (collision)
  blockPlayer()
else
  sendMovementToServer(x,y)

This code is in the player's machine, they can access it and they can do something like this:

if (collision)
  sendMovementToServer(x,y)
else
  sendMovementToServer(x,y)

If there is no check of collision on the server, this player now has "noclip" powers. No solid tiles stop him from going anywhere.
But the server code is untouchable, no player can access the server machine, change the code, build and deploy. That's why this code must be on the server too.
The only reason you would want to check it on the client would be to prevent sending useless commands to the server, you just do a pre-collision check, to avoid sending useless movement data, but that pre-check is not that important. The important checks are always server-sided.

Creating the tile

Okay, with that in mind, lets create our solid tile.
Different from background tiles, solid ones can have "0" values in it, because there's another layer behind the solid layer. Let's make a dead tree using Tiny Tools

DeadTree: [[0,0,Color.Brown,0,0,0,0,0],
	[0,0,0,Color.Brown,0,0,0,0],
	[0,0,0,Color.Brown,0,0,0,Color.Brown],
	[Color.Brown,0,0,Color.Brown,0,Color.Brown,Color.Brown,0],
	[0,Color.Brown,0,Color.Brown,Color.Brown,Color.Brown,0,0],
	[0,Color.Brown,Color.Brown,Color.Brown,Color.Brown,0,0,0],
	[0,0,0,Color.Brown,Color.Brown,0,0,0],
	[0,0,0,Color.Brown,Color.Brown,0,0,0],],

Server Side

Remember last chapter we didn't have to anything on the server for a background tile, this time we do. But it's as simple as doing it on the client. Just go to ./shared/solidLayers.ts. You'll find 2 objects there:

• Tiles: an enum of solid tiles
• SolidLayers: an object with all rooms' solid layers

You'll need to append an entry to the "Tiles" enum, with the name of your tile, like:

const enum Tiles {
    Tree = 1,
    ...
    ...
    DeadTree
}

And now chose a room to change a tile for your new tile.
Done that's all for the server part.

Client side

We have not used our matrix of colors anywhere on the server, that's because the server doesn't handles anything visual. This is a client's business.
Let's go to ./client/src/board/map/tiles/Tiles.ts and add our new tile. This time we're going to append our tile's matrix on the "SolidTiles" object, like this:

export const SolidTiles = {
    Tree: [[ ........
    ...
    ...
    DeadTree: [[0,0,Color.Brown,0,0,0,0,0],
	[0,0,0,Color.Brown,0,0,0,0],
	[0,0,0,Color.Brown,0,0,0,Color.Brown],
	[Color.Brown,0,0,Color.Brown,0,Color.Brown,Color.Brown,0],
	[0,Color.Brown,0,Color.Brown,Color.Brown,Color.Brown,0,0],
	[0,Color.Brown,Color.Brown,Color.Brown,Color.Brown,0,0,0],
	[0,0,0,Color.Brown,Color.Brown,0,0,0],
	[0,0,0,Color.Brown,Color.Brown,0,0,0],],

Attention: keep all tiles in this object in the same order as the enum on the "SolidLayers" file at the shared folder!

Final product

Now let's run yarn start on the client and deno run --allow-net --allow-read --allow-env main.ts on the server once again, then go to http://localhost:3000 :

There it is!!! Cool thing is that if you want to walk past it, you can't, and it's all being valided server side!

Just for the sake of curiosity let's add our background tiles and this new solid tiles all togheter in the InitialRoom!

Next steps

Now that you know all about the tiles that make up a basic room, why don't we try creating a whole room?