Rendering

When an item comes into range (it's like 20 tiles away), the server sends a packet with the item's description and it's X & Y & Z coordinates. And since we know the coordinates of the player, we can draw it relative to the player. After an item goes out of range on the client side, it gets destroyed completely from the state.

So for converting a game location to a pixel location (like for drawing on a canvas2d element):

1. You'd compare it to the user's location:

    const diffX = (item.x - user.x);
   
    const diffY = (item.y - user.y);
   

2. Since every tile is 44px wide at a 45-degree angle, we can just multiply each X & Y by 22px (half of the tile width).

     const pixelX = diffX  * 22 - diffY * 22;
   
     const pixelY = diffY * 22 + diffX * 22;
   

3. Subtract the item's Z value (each +1 on the Z axis represents moving the item up one pixel)

    pixelY -= item.z;
   

4. Center the item on the coordinate by subtracting half the item's width from the X axis:

    pixelX -= item.width / 2;
   

Things like castles are different because they're "multis", so the server sends a single number that represents a castle. So instead of sending each item/part/section of the castle, the server sends something like "draw a castle at (X, Y)"