Fix: bubbo-bubbo screen shake while resizing (#9)

bubbo-bubbo/src/game/Game.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import type { DisplayObject } from 'pixi.js';
+import { DisplayObject, Point } from 'pixi.js';
 import { Container, Rectangle } from 'pixi.js';
 
 import { navigation } from '../navigation';
@@ -24,6 +24,8 @@ export class Game {
     public stage = new Container();
     /** Container to hold gameplay elements like bubbles. */
     public gameContainer = new Container();
+    /** Original game container position to use as reset for screen shake effects. */
+    public gameContainerPosition = new Point();
     /** Container to handle user interaction. */
     public hitContainer = new Container();
     /** A system manager to handle the common functions found in systems. */
@@ -165,8 +167,11 @@ export class Game {
     public resize(w: number, h: number) {
         // Sets game container to the bottom of the screen,
         // since the game should be anchor there
-        this.gameContainer.x = w * 0.5;
-        this.gameContainer.y = h;
+        this.gameContainerPosition.x = w * 0.5;
+        this.gameContainerPosition.y = h;
+
+        this.gameContainer.x = this.gameContainerPosition.x;
+        this.gameContainer.y = this.gameContainerPosition.y;
 
         // Offsets the hit area position back to top left of the screen,
         // it then sets the dimensions of the hit area to match the screen dimensions

bubbo-bubbo/src/game/systems/EffectsSystem.ts

@@ -1,4 +1,3 @@
-import { Point } from 'pixi.js';
 import { ShockwaveFilter } from 'pixi-filters';
 
 import { sfx } from '../../audio';
@@ -26,11 +25,6 @@ export class EffectsSystem implements System {
     private _activeShockwave = false;
     /** The speed modification for the shockwave effect. */
     private _shockwaveSpeedMod = 1;
-    /**
-     * The last position of the game container before the shockwave effect was applied.
-     * This is used to restore the position of the container after the effect has completed.
-     */
-    private readonly _lastContainerPos = new Point();
     /** The intensity of the shockwave effect. */
     private _shockIntensity!: number;
 
@@ -41,9 +35,6 @@ export class EffectsSystem implements System {
      * @param intense Indicates whether the effect should be intense (default: false).
      */
     public shockwave(x: number, y: number, intense = false) {
-        // Store the last position of the game container
-        this._lastContainerPos.set(this.game.gameContainer.x, this.game.gameContainer.y);
-
         const { shockwaveFilter } = this;
 
         this._activeShockwave = true;
@@ -96,8 +87,8 @@ export class EffectsSystem implements System {
         }
 
         // Set the game container position back to its original position
-        this.game.gameContainer.x = this._lastContainerPos.x;
-        this.game.gameContainer.y = this._lastContainerPos.y;
+        this.game.gameContainer.x = this.game.gameContainerPosition.x;
+        this.game.gameContainer.y = this.game.gameContainerPosition.y;
     }
 
     /**
@@ -109,8 +100,10 @@ export class EffectsSystem implements System {
         if (!this._activeShockwave) return;
 
         // Update the position of the game container to simulate screen shake.
-        this.game.gameContainer.x = this._lastContainerPos.x + Math.random() * this._shockIntensity;
-        this.game.gameContainer.y = this._lastContainerPos.y + Math.random() * this._shockIntensity;
+        this.game.gameContainer.x =
+            this.game.gameContainerPosition.x + Math.random() * this._shockIntensity;
+        this.game.gameContainer.y =
+            this.game.gameContainerPosition.y + Math.random() * this._shockIntensity;
 
         // Stop the shockwave effect if the time has exceeded a certain threshold.
         if (this.shockwaveFilter.time > 0.4) this.stopShockwave();