fix: Play button position on window resize

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 -
 ### Fixed
 
+- Fixed loader button position on window resize
 - Fixed issue with setting `ex.TileMap.z` to a value
 - Fixed crash in debug system if there is no collider geometry
 - Fixed ImageSource loading error message [#2049]

sandbox/tests/gif/animatedGif.ts

@@ -4,7 +4,8 @@
 var game = new ex.Engine({
   canvasElementId: 'game',
   width: 600,
-  height: 400
+  height: 400,
+  displayMode: ex.DisplayMode.FitScreen
 });
 
 var gif: ex.Gif = new ex.Gif('./sword.gif', ex.Color.Black);

src/engine/Loader.css

@@ -16,6 +16,7 @@ button#excalibur-play {
   color: #ffffff;
   font-family: sans-serif;
   font-size: 2rem;
+  white-space: nowrap;
   line-height: 1;
   cursor: pointer;
   text-align: center;

src/engine/Loader.ts

@@ -245,6 +245,12 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
       this.hidePlayButton();
       return Promise.resolve();
     } else {
+      const resizeHandler = () => {
+        this._positionPlayButton();
+      };
+      if (this._engine?.browser) {
+        this._engine.browser.window.on('resize', resizeHandler);
+      }
       this._playButtonShown = true;
       this._playButton.style.display = 'block';
       document.body.addEventListener('keyup', (evt: KeyboardEvent) => {
@@ -258,6 +264,9 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
           e.stopPropagation();
           // Hide Button after click
           this.hidePlayButton();
+          if (this._engine?.browser) {
+            this._engine.browser.window.off('resize', resizeHandler);
+          }
           resolve();
         };
         this._playButton.addEventListener('click', startButtonHandler);
@@ -330,15 +339,9 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
     return this._resourceCount > 0 ? clamp(this._numLoaded, 0, this._resourceCount) / this._resourceCount : 1;
   }
 
-  /**
-   * Loader draw function. Draws the default Excalibur loading screen.
-   * Override `logo`, `logoWidth`, `logoHeight` and `backgroundColor` properties
-   * to customize the drawing, or just override entire method.
-   */
-  public draw(ctx: CanvasRenderingContext2D) {
-    const canvasHeight = this._engine.canvasHeight / this._engine.pixelRatio;
-    const canvasWidth = this._engine.canvasWidth / this._engine.pixelRatio;
-
+  private _positionPlayButton() {
+    const screenHeight = this._engine.screen.viewport.height;
+    const screenWidth = this._engine.screen.viewport.width;
     if (this._playButtonRootElement) {
       const left = this._engine.canvas.offsetLeft;
       const top = this._engine.canvas.offsetTop;
@@ -348,10 +351,22 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
         this._playButtonRootElement.style.left = `${this.playButtonPosition.x}px`;
         this._playButtonRootElement.style.top = `${this.playButtonPosition.y}px`;
       } else {
-        this._playButtonRootElement.style.left = `${left + canvasWidth / 2 - buttonWidth / 2}px`;
-        this._playButtonRootElement.style.top = `${top + canvasHeight / 2 - buttonHeight / 2 + 100}px`;
+        this._playButtonRootElement.style.left = `${left + screenWidth / 2 - buttonWidth / 2}px`;
+        this._playButtonRootElement.style.top = `${top + screenHeight / 2 - buttonHeight / 2 + 100}px`;
       }
     }
+  }
+
+  /**
+   * Loader draw function. Draws the default Excalibur loading screen.
+   * Override `logo`, `logoWidth`, `logoHeight` and `backgroundColor` properties
+   * to customize the drawing, or just override entire method.
+   */
+  public draw(ctx: CanvasRenderingContext2D) {
+    const canvasHeight = this._engine.canvasHeight / this._engine.pixelRatio;
+    const canvasWidth = this._engine.canvasWidth / this._engine.pixelRatio;
+
+    this._positionPlayButton();
 
     ctx.fillStyle = this.backgroundColor;
     ctx.fillRect(0, 0, canvasWidth, canvasHeight);

src/spec/LoaderSpec.ts

@@ -233,4 +233,33 @@ describe('A loader', () => {
       done();
     }, 1000);
   });
+
+  it('updates the play button postion on resize', () => {
+    const engine = new ex.Engine({width: 1000, height: 1000});
+    const loader = new ex.Loader([, , , ,]);
+    loader.wireEngine(engine);
+    loader.markResourceComplete();
+    loader.markResourceComplete();
+    loader.markResourceComplete();
+    loader.markResourceComplete();
+    loader.showPlayButton();
+
+    expect(loader.playButtonRootElement).toBeTruthy();
+
+    engine.browser.window.nativeComponent.dispatchEvent(new Event('resize'));
+
+    const oldPos = [
+      loader.playButtonRootElement.style.left,
+      loader.playButtonRootElement.style.top];
+
+    engine.screen.viewport = {width: 100, height: 100};
+
+    engine.browser.window.nativeComponent.dispatchEvent(new Event('resize'));
+
+    const newPos = [
+      loader.playButtonRootElement.style.left,
+      loader.playButtonRootElement.style.top];
+
+    expect(oldPos).not.toEqual(newPos);
+  });
 });