Limit maximum character name

lorgan3 · Sep 8, 2024 · 326ecb8 · 326ecb8
1 parent de71b8b
commit 326ecb8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/organisms/TeamDisplay.vue b/src/components/organisms/TeamDisplay.vue
@@ -57,6 +57,7 @@ const handleDelete = (event: Event) => {
   flex-grow: 0;
   background: var(--background);
   overflow: hidden;
+  white-space: nowrap;
 
   &.interactive {
     cursor: pointer;

diff --git a/src/data/entity/character.ts b/src/data/entity/character.ts
@@ -48,6 +48,8 @@ const PAGE_READ_DURATION = 60;
 
 const MELEE_POWER = 20;
 
+const MAX_NAME_LENGTH = 30;
+
 enum AnimationState {
   Idle = "elf_idle",
   Walk = "elf_walk",
@@ -183,6 +185,7 @@ export class Character extends Container implements HurtableEntity, Syncable {
   private spellSource: any | null = null;
   private lookDirection = 1;
   private wings?: Wings;
+  private namePlateName: string;
 
   private animator: Animator<AnimationState>;
 
@@ -194,6 +197,11 @@ export class Character extends Container implements HurtableEntity, Syncable {
   ) {
     super();
 
+    this.namePlateName =
+      characterName.length > MAX_NAME_LENGTH
+        ? characterName.slice(0, MAX_NAME_LENGTH - 3) + "..."
+        : characterName;
+
     this.body = new Body(Level.instance.terrain.characterMask, {
       mask: rectangle6x16,
       onCollide: this.onCollide,
@@ -303,7 +311,7 @@ export class Character extends Container implements HurtableEntity, Syncable {
     sprite2.alpha = 0.5;
 
     this.namePlate = new BitmapText({
-      text: `${characterName} ${this._hp}`,
+      text: `${this.namePlateName} ${this._hp}`,
       style: {
         fontFamily: "Eternal",
         fontSize: 32,
@@ -347,7 +355,7 @@ export class Character extends Container implements HurtableEntity, Syncable {
         this.lastReportedHp - this._hp,
         ...this.getCenter()
       );
-      this.namePlate.text = `${this.characterName} ${Math.max(
+      this.namePlate.text = `${this.namePlateName} ${Math.max(
         0,
         Math.ceil(this._hp)
       )}`;
@@ -564,7 +572,7 @@ export class Character extends Container implements HurtableEntity, Syncable {
         this.lastReportedHp - this._hp,
         ...this.getCenter()
       );
-      this.namePlate.text = `${this.characterName} ${Math.max(
+      this.namePlate.text = `${this.namePlateName} ${Math.max(
         0,
         Math.ceil(this._hp)
       )}`;
@@ -642,7 +650,7 @@ export class Character extends Container implements HurtableEntity, Syncable {
     if (diff > 0) {
       Level.instance.numberContainer.heal(diff, ...this.getCenter());
       this.lastReportedHp += diff;
-      this.namePlate.text = `${this.characterName} ${Math.max(
+      this.namePlate.text = `${this.namePlateName} ${Math.max(
         0,
         Math.ceil(this.lastReportedHp)
       )}`;

diff --git a/src/util/assets/assetsContainer.ts b/src/util/assets/assetsContainer.ts
@@ -25,7 +25,7 @@ export class AssetsContainer {
           fontSize: 32,
           fill: "#fff",
           dropShadow: {
-            distance: 4,
+            distance: 2,
             angle: 45,
           },
         },