From b10102b52af9c72360a8dd17ba63668e2bd07be6 Mon Sep 17 00:00:00 2001
From: Dakurei <maxime.palanchini@gmail.com>
Date: Wed, 29 May 2024 10:02:41 +0200
Subject: [PATCH] [QoL] [Localization] Make achv-bar ui resize dynamically
 based on content (#1520)

* Make achv-bar ui 'responsive'

  To facilitate translation, among other things

* Apply suggestions on PR
---
 src/ui/achv-bar.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/ui/achv-bar.ts b/src/ui/achv-bar.ts
index fa5d02416c0..e28de4e7869 100644
--- a/src/ui/achv-bar.ts
+++ b/src/ui/achv-bar.ts
@@ -4,6 +4,9 @@ import { Voucher } from "../system/voucher";
 import { TextStyle, addTextObject } from "./text";
 
 export default class AchvBar extends Phaser.GameObjects.Container {
+  private defaultWidth: number;
+  private defaultHeight: number;
+
   private bg: Phaser.GameObjects.NineSlice;
   private icon: Phaser.GameObjects.Sprite;
   private titleText: Phaser.GameObjects.Text;
@@ -19,7 +22,10 @@ export default class AchvBar extends Phaser.GameObjects.Container {
   }
 
   setup(): void {
-    this.bg = this.scene.add.nineslice(0, 0, "achv_bar", null, 160, 40, 41, 6, 16, 4);
+    this.defaultWidth = 160;
+    this.defaultHeight = 40;
+
+    this.bg = this.scene.add.nineslice(0, 0, "achv_bar", null, this.defaultWidth, this.defaultHeight, 41, 6, 16, 4);
     this.bg.setOrigin(0, 0);
 
     this.add(this.bg);
@@ -66,11 +72,22 @@ export default class AchvBar extends Phaser.GameObjects.Container {
       this.scoreText.setText(`+${(achv as Achv).score}pt`);
     }
 
+    // Take the width of the default interface or the title if longest
+    this.bg.width = Math.max(this.defaultWidth, this.icon.displayWidth + this.titleText.displayWidth + this.scoreText.displayWidth + 16);
+
+    this.scoreText.x = this.bg.width - 2;
+    this.descriptionText.width = this.bg.width - this.icon.displayWidth - 16;
+    this.descriptionText.setWordWrapWidth(this.descriptionText.width * 6);
+
+    // Take the height of the default interface or the description if longest
+    this.bg.height = Math.max(this.defaultHeight, this.titleText.displayHeight + this.descriptionText.displayHeight + 8);
+    this.icon.y = (this.bg.height / 2) - (this.icon.height / 2);
+
     (this.scene as BattleScene).playSound("achv");
 
     this.scene.tweens.add({
       targets: this,
-      x: (this.scene.game.canvas.width / 6) - 76,
+      x: (this.scene.game.canvas.width / 6) - (this.bg.width / 2),
       duration: 500,
       ease: "Sine.easeOut"
     });