[Enhancement] Slightly improve the challenge selection UI, achievement UI, and achievement message window. (#3731)

* resize achv box default width

* add language font size option. DE font size 80px

* resize challenge desc window width. fix cursor width. shrink font size of desc. set middle align start label

src/ui/achv-bar.ts

@@ -25,7 +25,7 @@ export default class AchvBar extends Phaser.GameObjects.Container {
   }
 
   setup(): void {
-    this.defaultWidth = 160;
+    this.defaultWidth = 200;
     this.defaultHeight = 40;
 
     this.bg = this.scene.add.nineslice(0, 0, "achv_bar", undefined, this.defaultWidth, this.defaultHeight, 41, 6, 16, 4);

src/ui/achvs-ui-handler.ts

@@ -15,6 +15,16 @@ enum Page {
   VOUCHERS
 }
 
+interface LanguageSetting {
+  TextSize: string,
+}
+
+const languageSettings: { [key: string]: LanguageSetting } = {
+  "de":{
+    TextSize: "80px"
+  }
+};
+
 export default class AchvsUiHandler extends MessageUiHandler {
   private readonly ROWS = 4;
   private readonly COLS = 17;
@@ -105,8 +115,13 @@ export default class AchvsUiHandler extends MessageUiHandler {
     titleBg.setOrigin(0, 0);
 
     this.titleText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW);
+    const textSize = languageSettings[i18next.language]?.TextSize ?? this.titleText.style.fontSize;
+    this.titleText.setFontSize(textSize);
     this.titleText.setOrigin(0, 0);
-    this.titleText.setPositionRelative(titleBg, 8, 4);
+    const titleBgCenterX = titleBg.x + titleBg.width / 2;
+    const titleBgCenterY = titleBg.y + titleBg.height / 2;
+    this.titleText.setOrigin(0.5, 0.5);
+    this.titleText.setPosition(titleBgCenterX, titleBgCenterY);
 
     const scoreBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 46, 24);
     scoreBg.setOrigin(0, 0);

src/ui/challenges-select-ui-handler.ts

@@ -35,6 +35,8 @@ export default class GameChallengesUiHandler extends UiHandler {
 
   private startCursor: Phaser.GameObjects.NineSlice;
 
+  private optionsWidth: number;
+
   constructor(scene: BattleScene, mode: Mode | null = null) {
     super(scene, mode);
   }
@@ -74,18 +76,19 @@ export default class GameChallengesUiHandler extends UiHandler {
     // difficultyName.setOrigin(0, 0);
     // difficultyName.setPositionRelative(difficultyBg, difficultyBg.width - difficultyName.displayWidth - 8, 4);
 
-    this.optionsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 9), (this.scene.game.canvas.height / 6) - headerBg.height - 2);
+    this.optionsWidth = this.scene.scaledCanvas.width * 0.6;
+    this.optionsBg = addWindow(this.scene, 0, headerBg.height, this.optionsWidth, this.scene.scaledCanvas.height - headerBg.height - 2);
     this.optionsBg.setName("window-options-bg");
     this.optionsBg.setOrigin(0, 0);
 
-    const descriptionBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 18) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 26);
+    const descriptionBg = addWindow(this.scene, 0, headerBg.height, this.scene.scaledCanvas.width - this.optionsWidth, this.scene.scaledCanvas.height - headerBg.height - 26);
     descriptionBg.setName("window-desc-bg");
     descriptionBg.setOrigin(0, 0);
     descriptionBg.setPositionRelative(this.optionsBg, this.optionsBg.width, 0);
 
     this.descriptionText = new BBCodeText(this.scene, descriptionBg.x + 6, descriptionBg.y + 4, "", {
       fontFamily: "emerald",
-      fontSize: 96,
+      fontSize: 84,
       color: Color.ORANGE,
       padding: {
         bottom: 6
@@ -109,12 +112,12 @@ export default class GameChallengesUiHandler extends UiHandler {
     const startText = addTextObject(this.scene, 0, 0, i18next.t("common:start"), TextStyle.SETTINGS_LABEL);
     startText.setName("text-start");
     startText.setOrigin(0, 0);
-    startText.setPositionRelative(startBg, 8, 4);
+    startText.setPositionRelative(startBg, (startBg.width - startText.displayWidth) / 2, 4);
 
-    this.startCursor = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, (this.scene.game.canvas.width / 18) - 10, 16, 1, 1, 1, 1);
+    this.startCursor = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, descriptionBg.width - 8, 16, 1, 1, 1, 1);
     this.startCursor.setName("9s-start-cursor");
     this.startCursor.setOrigin(0, 0);
-    this.startCursor.setPositionRelative(startBg, 4, 4);
+    this.startCursor.setPositionRelative(startBg, 4, 3);
     this.startCursor.setVisible(false);
 
     this.valuesContainer = this.scene.add.container(0, 0);
@@ -355,7 +358,7 @@ export default class GameChallengesUiHandler extends UiHandler {
     let ret = super.setCursor(cursor);
 
     if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, (this.scene.game.canvas.width / 9) - 10, 16, 1, 1, 1, 1);
+      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, this.optionsWidth - 8, 16, 1, 1, 1, 1);
       this.cursorObj.setOrigin(0, 0);
       this.valuesContainer.add(this.cursorObj);
     }