Merge pull request #1 from Benur21/test2

Prevent clicking behind window

Author: Benur21

src/JSTools.ts

@@ -165,6 +165,7 @@ class Control {
   outlineWidth: number;
   visible: boolean;
   showIndex: number;
+  parent?: Control;
   constructor(x: number, y: number) {
     this.x = x;
     this.y = y;

src/Monopoly/Main.ts

@@ -5,7 +5,7 @@ import { AnimationLOOP, Control, Rectangle } from '../JSTools';
 const canvas = (window as any).globals.canvas;
 
 var gameBoard = new Rectangle(canvasPadding, canvasPadding, canvas.width-canvasPadding*2, canvas.height-canvasPadding*2);
-gameBoard.doTranslate = true; //Space 980x980
+//Space 980x980
 gameBoard.color = "#B0B3B7";
 gameBoard.outlinePosition = "outer";
 gameBoard.showIndex = 1;

src/TheBallGame/Classes.ts

@@ -28,6 +28,10 @@ class TextButton extends Label {
   }
 
   onhover() { /*collapseit*/
+    if (!this.isFocused()) {
+      return;
+    }
+    
     // Map global mouse coords into the current canvas transform's local space so
     // hit-testing matches where the control is actually drawn (considering translate). (Copilot code)
     let localMouseX = mouseX;
@@ -77,6 +81,10 @@ class TextButton extends Label {
   };
 
   onClickEvent () { /*collapseit*/
+    if (!this.isFocused()) {
+      return;
+    }
+    
     if (this.internal_hovered) {
       if (mouseIsDown) { //Se isto for verdade, ou seja está-se clicando em cima do botão, só falta largar para a...
         this.internal_waitingForRelease = true; //...condição seguinte ser executada.
@@ -98,6 +106,26 @@ class TextButton extends Label {
     this.onClickEvent();
     this.updateLanguage();
   };
+  
+  isFocused(): boolean {
+    // To prevent clicks and hover effects when it's not on the top window or
+    // on a GameState when there's no window open
+    if (this.parent instanceof JSWindow) {
+      return this.parent.isTopWindow();
+    } else if (this.parent instanceof GameState) {
+      // Check if an window is open
+      const jsWindows = JSWindow.getAllInstances() as Array<JSWindow>;
+      for (let i = 0; i < jsWindows.length; i++) {
+        if (jsWindows[i].visible) {
+          // If it's on a GameState and there's a window open, it's not focused
+          return false;
+        }
+      }
+      return true;
+    } else {
+      return true;
+    }
+  }
 }
 
 class PlayerInfo extends Label {/*collapseit*/
@@ -574,19 +602,27 @@ class JSWindow extends Rectangle { /*collapseit*/
   showing: boolean;
   hiding: boolean;
   container: { [key: string]: any };
-  parent: JSWindow | GameState | null;
+  parent?: JSWindow | GameState;
   constructor(width: number, height: number) {
     // By default the JSWindow is centered in the canvas. If a parent is
     // supplied we'll initialize relative to the parent's coordinates.
     super(canvas.width/2 - width/2, -height, width, height);
     this.color = "#1062e8";
     this.outlinePosition = "inner";
-    this.showIndex = 100;
     this.maxYMoveSpeed = 40;
     this.showing = false;
     this.hiding = false;
-    this.container = new Object();
-    this.parent = null;
+    this.container = new Proxy({}, {
+      // Add parent to any object added to the container
+      set: (target: any, prop: string | symbol, value: any) => {
+        target[prop as any] = value;
+        if (value && typeof value === "object" && "parent" in value) {
+          try { value.parent = this; } catch (e) { /* ignore readonly */ }
+        }
+        return true;
+      }
+    });
+    this.parent = undefined;
   }
   draw() { /*collapseit*/
     super.draw();
@@ -654,6 +690,7 @@ class JSWindow extends Rectangle { /*collapseit*/
                          distance(0, targetShowY, 0, targetHideY) /*Total*/;
 
     if (this.showing) {
+      this.visible = true;
       this.y += this.maxYMoveSpeed * showProgress;
       if (Math.round(this.y) === Math.round(targetShowY)) {
         this.showing = false;
@@ -663,25 +700,41 @@ class JSWindow extends Rectangle { /*collapseit*/
       this.y += this.maxYMoveSpeed * (1 - hideProgress) + 1;
       if (this.y > targetHideY) {
         this.hiding = false;
+        this.visible = false;
       }
     }
   };
 
   show() { /*collapseit*/
-    this.visible = true;
+    // Starting position
     this.x = this.parent ? (-this.parent.x + canvas.width / 2 - this.width / 2) : (canvas.width / 2 - this.width / 2);
     this.y = this.parent ? (-this.parent.y - this.height) : -this.height;
     this.showing = true;
     this.hiding = false;
   };
 
   hide() { /*collapseit*/
-    this.visible = true;
+    // Starting position
     this.x = this.parent ? (-this.parent.x + canvas.width / 2 - this.width / 2) : (canvas.width / 2 - this.width / 2);
     this.y = this.parent ? (-this.parent.y + canvas.height / 2 - this.height / 2) : (canvas.height / 2 - this.height / 2);
     this.showing = false;
     this.hiding = true;
   };
+  /**
+   * @returns Returns true if this window is the topmost visible window.
+   */
+  isTopWindow(): boolean {
+    const jsWindows = JSWindow.getAllInstances() as Array<JSWindow>;
+    let topWindow: JSWindow | null = null;
+    let topShowIndex = -Infinity;
+    for (let i = 0; i < jsWindows.length; i++) {
+      if (jsWindows[i].visible && jsWindows[i].showIndex > topShowIndex) {
+        topShowIndex = jsWindows[i].showIndex;
+        topWindow = jsWindows[i];
+      }
+    }
+    return topWindow === this;
+  }
 }
 
 export { TextButton, PlayerInfo, Ball, GameState, JSWindow };

src/TheBallGame/Main.ts

@@ -1,7 +1,7 @@
 import "../languages/TheBallGame";
 import { AnimationLOOP, download, Label, Rectangle } from "../JSTools";
 import { setKeyStates } from "./Events";
-import { Ball, GameState, TextButton } from "./Classes";
+import { Ball, GameState, JSWindow, TextButton } from "./Classes";
 
 const c = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
 
@@ -66,16 +66,18 @@ var debugTax = 6;
 var debugFrameRate: number;
 var debugTimer: number;
 
-// (window as any).globals.w = new JSWindow(700, 500);
-// (window as any).globals.w.container.closeButton = new TextButton(680, 20, "X", "center", 20, 5);
-// (window as any).globals.w.container.closeButton.updateLanguage = function(){this.text="X"};
-// (window as any).globals.w.container.closeButton.onclick = () => {
-//   (window as any).globals.w.hide();
-// }
-// (window as any).globals.w.container.welcomemsg = new Label(350, 250, "Welcome! 😀", "center");
-// (window as any).globals.w.container.welcomemsg.updateLanguage = function(){this.text="Welcome! 😀"};
-// (window as any).globals.w.visible = true;
-// (window as any).globals.w.show();
+mainMenu.container.w = new JSWindow(700, 500);
+mainMenu.container.w.container.closeButton = new TextButton(680, 20, "X", "center", 20, 5);
+mainMenu.container.w.container.closeButton.updateLanguage = function(){this.text="X"};
+mainMenu.container.w.container.closeButton.onclick = () => {
+  mainMenu.container.w.hide();
+}
+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;
 
 //var gameState = "mainMenu"; /*	'mainMenu'	'game'	'options'	*/
 /*------------------------------------LOOP-----------------------------------------*/  
@@ -84,8 +86,6 @@ AnimationLOOP(function(){
   game.draw();
   mainMenu.draw();
   options.draw();
-  // (window as any).globals.w.draw();
-  // (window as any).globals.w.updatePos();
   /*switch (gameState) {
   case 'game':
     lava.draw();