feat: tree entities

packages/client/components/game.astro

@@ -3,6 +3,7 @@
         <div id="canvas">
             <canvas id="background"></canvas>
             <canvas id="entities"></canvas>
+            <canvas id="entities-fore"></canvas>
             <canvas id="foreground"></canvas>
             <canvas id="entities-mask"></canvas>
             <canvas id="cursor"></canvas>

packages/client/data/sprites.json

@@ -502,6 +502,7 @@
         },
         "offsetY": -24
     },
+
     { "id": "mobs/angel", "width": 32, "height": 32, "offsetX": -8, "offsetY": -13 },
     { "id": "mobs/card", "width": 32, "height": 32, "offsetX": -8, "offsetY": -13 },
     { "id": "mobs/card2", "width": 32, "height": 32, "offsetX": -8, "offsetY": -13 },
@@ -1164,6 +1165,27 @@
         "offsetX": 0,
         "offsetY": 0
     },
+    {
+        "id": "objects/sprucetree",
+        "width": 64,
+        "height": 80,
+        "animations": {
+            "idle": {
+                "length": 1,
+                "row": 0
+            },
+            "shake": {
+                "length": 5,
+                "row": 1
+            },
+            "stump": {
+                "length": 1,
+                "row": 2
+            }
+        },
+        "offsetX": -24,
+        "offsetY": -56
+    },
     {
         "id": "mobs/clam",
         "width": 32,

packages/client/scss/game/impl/_container.scss

@@ -15,6 +15,7 @@
 
 #background,
 #entities,
+#entities-fore,
 #foreground,
 #cursor,
 #text-canvas,

packages/client/src/controllers/entities.ts

@@ -7,6 +7,7 @@ import Pet from '../entity/character/pet/pet';
 import Player from '../entity/character/player/player';
 import Projectile from '../entity/objects/projectile';
 import Effect from '../entity/objects/effect';
+import Tree from '../entity/objects/tree';
 
 import { Modules } from '@kaetram/common/network';
 
@@ -127,13 +128,17 @@ export default class EntitiesController {
                 prefix = 'effectentity';
                 break;
             }
+
+            case Modules.EntityType.Tree: {
+                entity = this.createTree(info as EntityData);
+
+                prefix = 'objects';
+                break;
+            }
         }
 
         // Something went wrong creating the entity.
-        if (!entity) {
-            console.log(info);
-            return log.error(`Failed to create entity ${info.instance}`);
-        }
+        if (!entity) return log.error(`Failed to create entity ${info.instance}`);
 
         let sprite = entity.sprite || this.game.sprites.get(`${prefix}/${info.key}`);
 
@@ -336,6 +341,16 @@ export default class EntitiesController {
         return new Effect(info.instance);
     }
 
+    /**
+     * Creates a new tree object based on the info provided.
+     * @param info Contains the key and instance of the tree.
+     * @returns A new tree object.
+     */
+
+    private createTree(info: EntityData): Entity {
+        return new Tree(info.instance);
+    }
+
     /**
      * Checks if the instance provided is the same as the main player.
      * @param instance The instance we are checking.
@@ -446,6 +461,9 @@ export default class EntitiesController {
      */
 
     public registerPosition(entity: Entity): void {
+        // Tree entities are registered as colliding on the rendering grid.
+        if (entity.isTree()) this.game.map.grid[entity.gridY][entity.gridX] = 2;
+
         this.grids.addToRenderingGrid(entity);
     }
 

packages/client/src/controllers/input.ts

@@ -560,6 +560,12 @@ export default class InputController {
                 break;
             }
 
+            case Modules.EntityType.Tree: {
+                this.setCursor(this.cursors.axe);
+                this.hovering = Modules.Hovering.Tree;
+                break;
+            }
+
             case Modules.EntityType.Player: {
                 if (this.game.pvp) {
                     this.setCursor(this.getAttackCursor());
@@ -750,7 +756,7 @@ export default class InputController {
      */
 
     private isTargetable(entity: Entity): boolean {
-        return this.isAttackable(entity) || entity.isNPC() || entity.isChest();
+        return this.isAttackable(entity) || entity.isNPC() || entity.isChest() || entity.isTree();
     }
 
     /**

packages/client/src/entity/character/player/handler.ts

@@ -44,10 +44,11 @@ export default class Handler extends CharacterHandler {
         // Prevent calculating pathing when we target a mob that is within range.
         if (this.character.canAttackTarget() && !this.character.trading) return [];
 
-        let isObject = this.map.isObject(x, y);
+        let isObject = this.map.isObject(x, y),
+            isTree = this.character.target?.isTree();
 
         // Ignore requests into colliding tiles but allow targetable objects.
-        if (this.map.isColliding(x, y) && !isObject) return [];
+        if (this.map.isColliding(x, y) && !isObject && !isTree) return [];
 
         // Sends the packet to the server with the request.
         this.game.socket.send(Packets.Movement, {
@@ -74,6 +75,8 @@ export default class Handler extends CharacterHandler {
                 ignores.push({ x: x + 1, y }, { x: x - 1, y }, { x, y: y + 1 }, { x, y: y - 1 });
         }
 
+        if (isTree) ignores.push({ x, y });
+
         return this.game.findPath(this.character, x, y, ignores, cursor);
     }
 

packages/client/src/entity/entity.ts

@@ -225,7 +225,8 @@ export default abstract class Entity {
         name: string,
         speed = this.sprite.idleSpeed,
         count = 1,
-        onEndCount?: () => void
+        onEndCount?: () => void,
+        withStop = false
     ): void {
         // Prevent setting animation if no sprite or it's the same animation.
         if (this.animation?.name === name) return;
@@ -234,7 +235,7 @@ export default abstract class Entity {
         let { length, row, width, height } = this.sprite.animations[name];
 
         // Create a new animation instance to prevent pointer issues.
-        this.animation = new Animation(name, length, row, width, height);
+        this.animation = new Animation(name, length, row, width, height, withStop);
 
         // Restart the attack animation if it's already playing.
         if (name.startsWith('atk')) this.animation.reset();
@@ -432,6 +433,14 @@ export default abstract class Entity {
         return this.type === Modules.EntityType.Object;
     }
 
+    /**
+     * @returns Whether or not the entity is a tree type.
+     */
+
+    public isTree(): boolean {
+        return this.type === Modules.EntityType.Tree;
+    }
+
     /**
      * Default implementation for `isModerator()`
      * @returns False by default.

packages/client/src/entity/objects/effect.ts

@@ -6,4 +6,16 @@ export default class Effect extends Entity {
     public constructor(instance: string) {
         super(instance, Modules.EntityType.Effect);
     }
+
+    public override idle(): void {
+        this.setAnimation(
+            'idle',
+            150,
+            1,
+            () => {
+                //
+            },
+            true
+        );
+    }
 }

packages/client/src/entity/objects/tree.ts

@@ -0,0 +1,17 @@
+import Entity from '../entity';
+
+import { Modules } from '@kaetram/common/network';
+
+export default class Tree extends Entity {
+    public cut = false;
+
+    public constructor(instance: string) {
+        super(instance, Modules.EntityType.Tree);
+    }
+
+    public override idle(): void {
+        this.setAnimation(this.cut ? 'stump' : 'idle', 150, 1, () => {
+            //
+        });
+    }
+}

packages/client/src/entity/sprite.ts

@@ -103,7 +103,7 @@ export default class Sprite {
 
     public loadHurtSprite(): void {
         // Hurt sprite already exists or there's not hurt effect, no need to load.
-        if (this.hurtSprite || !this.hasHurtSprite()) return;
+        if (this.hurtSprite || !this.hasHurtSprite() || !this.loaded) return;
 
         this.hurtSprite = Utils.getHurtSprite(this);
     }
@@ -115,7 +115,7 @@ export default class Sprite {
 
     public loadSilhouetteSprite(): void {
         // Silhouette sprite already exists or there's no silhouette, no need to load.
-        if (this.silhouetteSprite || !this.hasSilhouette() || isMobile()) return;
+        if (this.silhouetteSprite || !this.hasSilhouette() || isMobile() || !this.loaded) return;
 
         this.silhouetteSprite = Utils.getSilhouetteSprite(this);
     }
@@ -197,7 +197,7 @@ export default class Sprite {
     public hasSilhouette(): boolean {
         let type = this.getType();
 
-        return type === 'mobs' || type === 'player' || type === 'npcs';
+        return type === 'mobs' || type === 'player' || type === 'npcs' || type === 'objects';
     }
 
     /**

packages/client/src/menu/guilds.ts

@@ -20,7 +20,6 @@ export default class Guilds extends Menu {
 
     // Container for creating a new guild.
     private create: HTMLElement = document.querySelector('#guilds-create')!;
-
     private createError: HTMLElement = document.querySelector('#guilds-create-error')!;
 
     private backButton: HTMLElement = document.querySelector('#guilds-back-button')!;
@@ -904,6 +903,6 @@ export default class Guilds extends Menu {
      */
 
     private setError(text = ''): void {
-        this.createError.innerHTML = text;
+        this.createError.innerHTML = Util.parseMessage(Util.formatNotification(text));
     }
 }