make Label multiline

Author: Benur21

src/JSTools.ts

@@ -319,7 +319,7 @@ class Label extends Control {
   textHeight: number;
   fontFamily: string;
   xAlign: "start" | "center";
-  yAlign: CanvasTextBaseline;
+  yAlign: "middle" | "top";
   constructor(x: number, y: number, text: string, xAlign: "start" | "center") {
     super(x, y); //Inherit from Control
     this.text = text;
@@ -330,6 +330,9 @@ class Label extends Control {
     this.xAlign = xAlign; //Horizontal Aligning
     this.yAlign = "middle"; //Vertical Aligning
   }
+  /**
+   * Call before Lable.draw
+   */
   updateContext () {
     const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
 
@@ -342,20 +345,36 @@ class Label extends Control {
       ctx.font = "bold " + this.textHeight + "px " + this.fontFamily;
     }
   }
+  /**
+   * Call after Label.updateContext
+   */
   draw () {
     const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
 
     if (this.visible) {
-      /*
-      var something;
-      if (this.xAlign) {
-        something = this.x - c.measureText(this.text).width / 2;
+      // support multi-line text
+      const lines = this.text.split(/\r?\n/);
+      console.log("🚀 ~ lines:", lines);
+      const lineHeight = this.textHeight * 1.2;
+
+      // Use 'middle' baseline for consistent vertical centering per line
+      if (this.yAlign === "middle") ctx.textBaseline = "middle"
+      else if (this.yAlign === "top") ctx.textBaseline = "top";
+
+      // Compute starting Y so multi-line block is centered when yAlign === "middle"
+      let startY: number;
+      if (this.yAlign === "middle") {
+        startY = this.y - ((lines.length - 1) / 2) * lineHeight;
       } else {
-        something = this.x;
-      }*/ //Substituido por c.textAlign
-      
-      ctx.strokeText(this.text, this.x, this.y);
-      ctx.fillText(this.text, this.x, this.y);
+        // fallback: align first line at this.y
+        startY = this.y;
+      }
+
+      for (let i = 0; i < lines.length; i++) {
+        const lineY = startY + i * lineHeight;
+        ctx.strokeText(lines[i], this.x, lineY);
+        ctx.fillText(lines[i], this.x, lineY);
+      }
     }
   };
   updateLanguage () {

src/Monopoly/Main.ts

@@ -1,34 +1,36 @@
 import { canvasPadding } from './Initialization';
 import { Board } from './Classes';
-import { AnimationLOOP, GameState, JSWindow, TextButton } from '../JSTools';
+import { AnimationLOOP, GameState, JSWindow, Label, TextButton } from '../JSTools';
 
 const canvas = (window as any).globals.canvas;
 
 const game = new GameState();
 game.x = canvasPadding;
 game.y = canvasPadding;
-//Space 980x980
 game.width = canvas.width - canvasPadding * 2;
 game.height = canvas.height - canvasPadding * 2;
 game.color = "#B0B3B7";
 game.outlinePosition = "outer";
 game.showIndex = 1;
 game.visible = true;
 
-const startWindow = new JSWindow(game.width-40,game.height-40);
+const startWindow = new JSWindow(1300, 900);
 game.container.startWindow = startWindow;
 startWindow.color = "#263599";
 startWindow.showIndex = 100;
 startWindow.show();
 
 (window as any).globals.startWindow = startWindow;
 
-startWindow.container.closeButton = new TextButton(game.width-60, 20, "X", "center", 20, 5);
+startWindow.container.closeButton = new TextButton(startWindow.width-20, 20, "X", "center", 20, 5);
 startWindow.container.closeButton.updateLanguage = function() {this.text="X"};
 startWindow.container.closeButton.onclick = () => {
   startWindow.hide();
 }
 
+startWindow.container.welcomeText = new Label(650, 450, "Welcome! 😀", "center");
+startWindow.container.welcomeText.updateLanguage = function(){this.text="Bem vindo(a)\nao Monopólio!"};
+
 
 game.container.board = new Board(0, 0);
 AnimationLOOP(function(){

src/TheBallGame/Main.ts

@@ -74,7 +74,6 @@ var debugTimer: number;
 // }
 // mainMenu.container.w.container.welcomemsg = new Label(350, 250, "Welcome! 😀", "center");
 // mainMenu.container.w.container.welcomemsg.updateLanguage = function(){this.text="Welcome! 😀"};
-// mainMenu.container.w.visible = true;
 // mainMenu.container.w.show();
 
 // (window as any).globals.mainMenu = mainMenu;