feat(client): exclamation system

packages/client/data/sprites.json

@@ -233,17 +233,17 @@
     { "id": "player/shield/shieldofliberty", "offsetY": -24 },
     { "id": "player/shield/shieldofglory", "width": 32, "height": 32, "offsetX": -8 },
 
-    { "id": "crowns/artist" },
-    { "id": "crowns/tier1" },
-    { "id": "crowns/tier2" },
-    { "id": "crowns/tier3" },
-    { "id": "crowns/tier4" },
-    { "id": "crowns/tier5" },
-    { "id": "crowns/tier6" },
-    { "id": "crowns/tier7", "width": 17 },
-    { "id": "crowns/bronzemedal", "width": 12, "height": 12 },
-    { "id": "crowns/goldmedal", "width": 12, "height": 12 },
-    { "id": "crowns/silvermedal", "width": 12, "height": 12 },
+    { "id": "crowns/artist", "preload": true },
+    { "id": "crowns/tier1", "preload": true },
+    { "id": "crowns/tier2", "preload": true },
+    { "id": "crowns/tier3", "preload": true },
+    { "id": "crowns/tier4", "preload": true },
+    { "id": "crowns/tier5", "preload": true },
+    { "id": "crowns/tier6", "preload": true },
+    { "id": "crowns/tier7", "preload": true, "width": 17 },
+    { "id": "crowns/bronzemedal", "preload": true, "width": 12, "height": 12 },
+    { "id": "crowns/goldmedal", "preload": true, "width": 12, "height": 12 },
+    { "id": "crowns/silvermedal", "preload": true, "width": 12, "height": 12 },
 
     { "id": "cursors/hand", "width": 14, "height": 14 },
     { "id": "cursors/axe", "width": 14, "height": 14 },
@@ -1583,19 +1583,6 @@
         },
         "offsetY": -22
     },
-    {
-        "id": "death",
-        "width": 24,
-        "height": 24,
-        "animations": {
-            "death": {
-                "length": 6,
-                "row": 0
-            }
-        },
-        "offsetX": -4,
-        "offsetY": -4
-    },
     { "id": "mobs/deathknight", "width": 42, "height": 42, "offsetX": -13, "offsetY": -17 },
     {
         "id": "mobs/desertscorpion",
@@ -4467,7 +4454,6 @@
         "offsetX": -24,
         "offsetY": -39
     },
-    { "id": "shadow16" },
     { "id": "mobs/shadowregion", "width": 42, "height": 42, "offsetX": -14, "offsetY": -21 },
     {
         "id": "effects/shieldbenef",
@@ -5148,7 +5134,6 @@
         },
         "offsetY": -30
     },
-    { "id": "sparks", "offsetX": 0, "offsetY": 0 },
     {
         "id": "mobs/spectre",
         "width": 34,
@@ -6365,6 +6350,37 @@
         "offsetY": -13
     },
 
+    {
+        "id": "death",
+        "width": 24,
+        "height": 24,
+        "preload": true,
+        "animations": {
+            "death": {
+                "length": 6,
+                "row": 0
+            }
+        },
+        "offsetX": -4,
+        "offsetY": -4
+    },
+    { "id": "shadow16", "preload": true },
+    { "id": "sparks", "preload": true, "offsetX": 0, "offsetY": 0 },
+    {
+        "id": "exclamation",
+        "idleSpeed": 360,
+        "animations": { "idle_down": { "length": 2, "row": 0 } },
+        "preload": true,
+        "offsetY": -24
+    },
+    {
+        "id": "exclamationblue",
+        "idleSpeed": 360,
+        "animations": { "idle_down": { "length": 2, "row": 0 } },
+        "preload": true,
+        "offsetY": -24
+    },
+
     { "id": "items/accuracypotion" },
     { "id": "items/adamantitesworth" },
     { "id": "items/adeptsrapier" },

packages/client/src/controllers/sprites.ts

@@ -1,17 +1,15 @@
-import spriteData from '../../data/sprites.json';
-import Animation from '../entity/animation';
-import Sprite from '../entity/sprite';
 import log from '../lib/log';
+import Sprite from '../entity/sprite';
+import spriteData from '../../data/sprites.json';
 
+import type Animation from '../entity/animation';
 import type { SpriteData } from '../entity/sprite';
 
 export default class SpritesController {
     public sprites: { [id: string]: Sprite } = {};
-    public sparksAnimation: Animation = new Animation('idle_down', 6, 0, 16, 16);
+    public preloadedAnimations: Animation[] = []; // Used for updating.
 
     public constructor() {
-        this.sparksAnimation.setSpeed(120);
-
         this.load();
     }
 
@@ -21,21 +19,27 @@ export default class SpritesController {
      */
 
     public load(): void {
-        // TS doesn't like this for some reason.
-        for (let data of spriteData as SpriteData[]) this.sprites[data.id] = new Sprite(data);
+        for (let data of spriteData as SpriteData[]) {
+            let sprite = new Sprite(data);
 
-        log.debug('Finished loading sprite data...');
+            this.sprites[sprite.key] = sprite;
 
-        this.preloadSprites();
-    }
+            // Some sprites are required to be preloaded.
+            if (sprite.preload) {
+                sprite.load();
 
-    /**
-     * Hardcoded function that preloads necessary sprites off the bat.
-     * Things like the death animation has to be loaded as soon as possible.
-     */
+                let idleDown = sprite.animations.idle_down;
 
-    public preloadSprites(): void {
-        this.get('death')?.load();
+                // Some of the preloaded sprites have animations that we can use.
+                if (idleDown?.length > 1) {
+                    this.preloadedAnimations.push(idleDown);
+
+                    idleDown.setSpeed(sprite.idleSpeed || 200);
+                }
+            }
+        }
+
+        log.debug('Finished loading sprite data...');
     }
 
     /**

packages/client/src/entity/entity.ts

@@ -44,6 +44,10 @@ export default abstract class Entity {
 
     private visible = true;
 
+    // Exclamation points display above.
+    public exclamation = false;
+    public blueExclamation = false;
+
     public fading = false;
     public hurt = false;
     public silhouette = false;

packages/client/src/entity/sprite.ts

@@ -14,6 +14,7 @@ export interface SpriteData {
     id: string;
     width?: number;
     height?: number;
+    preload?: boolean;
     idleSpeed?: number;
     animations?: AnimationData;
     offsetX?: number;
@@ -38,6 +39,7 @@ export default class Sprite {
     public idleSpeed = 250;
 
     public loaded = false;
+    public preload = false;
     public hasDeathAnimation = false;
 
     public animations: Animations = {};
@@ -60,6 +62,8 @@ export default class Sprite {
         this.width = this.data.width ?? dimensions;
         this.height = this.data.height ?? dimensions;
 
+        this.preload = this.data.preload ?? false;
+
         this.offsetX = this.data.offsetX ?? offset.x;
         this.offsetY = this.data.offsetY ?? offset.y;
 

packages/client/src/network/connection.ts

@@ -1325,6 +1325,14 @@ export default class Connection {
 
             if (update.colour) entity.nameColour = update.colour;
             if (update.scale) entity.customScale = update.scale;
+
+            // Display the exclamations if they're set onto the entity.
+            if (update.exclamation === 'achievement') entity.exclamation = true;
+            else if (update.exclamation === 'blue') entity.blueExclamation = true;
+            else {
+                entity.exclamation = false;
+                entity.blueExclamation = false;
+            }
         }
     }