fix screen resize

blopa · Apr 16, 2022 · a32af33 · a32af33
1 parent 6169369
commit a32af33
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 26 deletions.
diff --git a/src/Game.jsx b/src/Game.jsx
@@ -15,6 +15,7 @@ import {
     MIN_GAME_WIDTH,
     MIN_GAME_HEIGHT,
     RESIZE_THRESHOLD,
+    RE_RESIZE_THRESHOLD,
 } from './constants';
 
 // Game Scenes
@@ -39,7 +40,7 @@ import GameText from './components/GameText';
 import { selectDialogMessages } from './redux/selectors/selectDialog';
 import { selectMenuItems } from './redux/selectors/selectMenu';
 import { selectTexts } from './redux/selectors/selectText';
-import { selectGameLocale } from './redux/selectors/selectGameData';
+import { selectGameCameraSizeUpdateCallback, selectGameLocale } from './redux/selectors/selectGameData';
 
 const Game = () => {
     const isDevelopment = process?.env?.NODE_ENV !== 'production';
@@ -49,6 +50,7 @@ const Game = () => {
     const menuItems = useSelector(selectMenuItems);
     const gameTexts = useSelector(selectTexts);
     const locale = useSelector(selectGameLocale);
+    const cameraSizeUpdateCallback = useSelector(selectGameCameraSizeUpdateCallback);
 
     const [messages, setMessages] = useState({});
 
@@ -127,40 +129,73 @@ const Game = () => {
         });
 
         updateGameReduxState(width, height, zoom);
+        setGame(phaserGame);
+
+        if (isDevelopment) {
+            window.phaserGame = phaserGame;
+        }
+    }, [
+        game,
+        dispatch,
+        isDevelopment,
+        updateGameReduxState,
+    ]);
+
+    useEffect(() => {
+        if (!game) {
+            return () => {};
+        }
+
+        if (game.canvas) {
+            dispatch(setGameCanvasElementAction(game.canvas));
+        }
 
         // Create listener to resize the game
         // when the window is resized
         let timeOutFunctionId;
         const workAfterResizeIsDone = () => {
-            const gameSize = calculateGameSize(
-                MIN_GAME_WIDTH,
-                MIN_GAME_HEIGHT,
-                TILE_WIDTH,
-                TILE_HEIGHT
-            );
-
-            // TODO needs to re-run this function to: handleConfigureCamera
-            phaserGame.scale.setZoom(gameSize.zoom);
-            phaserGame.scale.resize(gameSize.width, gameSize.height);
-            updateGameReduxState(gameSize.width, gameSize.height, gameSize.zoom);
+            const scaleGame = () => {
+                const gameSize = calculateGameSize(
+                    MIN_GAME_WIDTH,
+                    MIN_GAME_HEIGHT,
+                    TILE_WIDTH,
+                    TILE_HEIGHT
+                );
+
+                // console.log(JSON.stringify(gameSize));
+                game.scale.setZoom(gameSize.zoom);
+                game.scale.resize(gameSize.width, gameSize.height);
+                // game.scale.setGameSize(gameSize.width, gameSize.height);
+                // game.scale.displaySize.resize(gameSize.width, gameSize.height);
+                // game.scale.resize(gameSize.width, gameSize.height).getParentBounds();
+                updateGameReduxState(gameSize.width, gameSize.height, gameSize.zoom);
+                // game.canvas.style.width = `${gameSize.width}px`;
+                // game.canvas.style.height = `${gameSize.height}px`;
+                cameraSizeUpdateCallback?.();
+            };
+
+            scaleGame();
+
+            // re-run function after resize is done to re-trigger css calculations
+            setTimeout(scaleGame, RE_RESIZE_THRESHOLD);
         };
 
-        // TODO move to the ResizeObserver https://jsfiddle.net/rudiedirkx/p0ckdcnv/
-        window.addEventListener('resize', () => {
+        const canvasResizeCallback = () => {
             clearTimeout(timeOutFunctionId);
             timeOutFunctionId = setTimeout(workAfterResizeIsDone, RESIZE_THRESHOLD);
-        });
+        };
 
-        setGame(phaserGame);
-        dispatch(setGameCanvasElementAction(phaserGame.canvas));
-        if (isDevelopment) {
-            window.phaserGame = phaserGame;
-        }
+        // TODO move to the ResizeObserver https://jsfiddle.net/rudiedirkx/p0ckdcnv/
+        window.addEventListener('resize', canvasResizeCallback);
+
+        return () => {
+            window.removeEventListener('resize', canvasResizeCallback);
+        };
     }, [
         game,
         dispatch,
-        isDevelopment,
         updateGameReduxState,
+        cameraSizeUpdateCallback,
     ]);
 
     return (

diff --git a/src/constants.js b/src/constants.js
@@ -5,6 +5,7 @@ export const MIN_GAME_WIDTH = 25 * TILE_WIDTH; // 400
 export const MIN_GAME_HEIGHT = 14 * TILE_HEIGHT; // 224
 
 export const RESIZE_THRESHOLD = 500;
+export const RE_RESIZE_THRESHOLD = 10;
 
 export const HERO_SPRITE_NAME = 'hero';
 export const ENEMY_SPRITE_NAME = 'enemy';

diff --git a/src/game/scenes/GameScene.js b/src/game/scenes/GameScene.js
@@ -14,12 +14,20 @@ import {
     handleCreateCharactersMovements,
 } from '../../utils/sceneHelpers';
 
+// Utils
+import { getDispatch } from '../../utils/utils';
+
+// Actions
+import setGameCameraSizeUpdateCallbackAction from '../../redux/actions/game/setGameCameraSizeUpdateCallbackAction';
+
 export default class GameScene extends Scene {
     constructor() {
         super('GameScene');
     }
 
     create() {
+        const dispatch = getDispatch();
+
         // All of these functions need to be called in order
 
         // Create controls
@@ -42,15 +50,15 @@ export default class GameScene extends Scene {
 
         // Configure the main camera
         handleConfigureCamera(this);
+        dispatch(setGameCameraSizeUpdateCallbackAction(() => {
+            handleConfigureCamera(this);
+        }));
 
         // Hero animations
         handleCreateHeroAnimations(this);
 
         // Handle characters movements
         handleCreateCharactersMovements(this);
-
-        // Handle collisions
-        // this.physics.add.collider(this.heroSprite, customColliders);
     }
 
     update(time, delta) {

diff --git a/src/redux/actions/game/setGameCameraSizeUpdateCallbackAction.js b/src/redux/actions/game/setGameCameraSizeUpdateCallbackAction.js
@@ -0,0 +1,8 @@
+import { SET_GAME_CAMERA_SIZE_CALLBACK } from '../../constants';
+
+const setGameCameraSizeUpdateCallbackAction = (payload) => (dispatch) => dispatch({
+    type: SET_GAME_CAMERA_SIZE_CALLBACK,
+    payload,
+});
+
+export default setGameCameraSizeUpdateCallbackAction;
diff --git a/src/redux/constants.js b/src/redux/constants.js
@@ -21,6 +21,7 @@ export const SET_GAME_HEIGHT = 'SET_GAME_HEIGHT';
 export const SET_GAME_ZOOM = 'SET_GAME_ZOOM';
 export const SET_GAME_CANVAS = 'SET_GAME_CANVAS';
 export const SET_GAME_LOCALE = 'SET_GAME_LOCALE';
+export const SET_GAME_CAMERA_SIZE_CALLBACK = 'SET_GAME_CAMERA_SIZE_CALLBACK';
 
 // Dialog
 export const SET_DIALOG_MESSAGES = 'SET_DIALOG_MESSAGES';

diff --git a/src/redux/reducers/gameDataReducer.js b/src/redux/reducers/gameDataReducer.js
@@ -5,6 +5,7 @@ import {
     SET_GAME_HEIGHT,
     SET_GAME_CANVAS,
     SET_GAME_LOCALE,
+    SET_GAME_CAMERA_SIZE_CALLBACK,
 } from '../constants';
 
 const defaultState = {
@@ -44,6 +45,13 @@ const gameDataReducer = (state = defaultState, action) => {
             };
         }
 
+        case SET_GAME_CAMERA_SIZE_CALLBACK: {
+            return {
+                ...state,
+                cameraSizeUpdateCallback: action.payload,
+            };
+        }
+
         case SET_GAME_LOCALE: {
             return {
                 ...state,

diff --git a/src/redux/selectors/selectGameData.js b/src/redux/selectors/selectGameData.js
@@ -7,3 +7,5 @@ export const selectGameZoom = (state) => state.game.zoom;
 export const selectGameCanvasElement = (state) => state.game.canvas;
 
 export const selectGameLocale = (state) => state.game.locale;
+
+export const selectGameCameraSizeUpdateCallback = (state) => state.game.cameraSizeUpdateCallback;
diff --git a/src/utils/phaser.js b/src/utils/phaser.js
@@ -1,5 +1,3 @@
-import { GameObjects } from 'phaser';
-
 export const calculateGameSize = (
     width,
     height,

diff --git a/src/utils/sceneHelpers.js b/src/utils/sceneHelpers.js
@@ -139,6 +139,10 @@ export const handleCreateGroups = (scene) => {
     scene.mapLayers = scene.add.group();
 };
 
+/**
+ * @param scene
+ * @returns Phaser.GameObjects.Group
+ */
 export const handleCreateMap = (scene) => {
     const mapKey = getSelectorData(selectMapKey);
     const tilesets = getSelectorData(selectTilesets);
@@ -409,6 +413,7 @@ export const handleObjectsLayer = (scene) => {
 export const handleConfigureCamera = (scene) => {
     const { game } = scene.sys;
     const camera = scene.cameras.main;
+    // console.log(JSON.stringify(game.scale.gameSize));
 
     // Configure the main camera
     camera.startFollow(scene.heroSprite, true);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ export const selectGameZoom = (state) => state.game.zoom;
		export const selectGameCanvasElement = (state) => state.game.canvas;

		export const selectGameLocale = (state) => state.game.locale;

		export const selectGameCameraSizeUpdateCallback = (state) => state.game.cameraSizeUpdateCallback;