Skip to content

Commit a32af33

Browse files
blopablopa
committed
fix screen resize
1 parent 6169369 commit a32af33

File tree

9 files changed

+92
-26
lines changed

9 files changed

+92
-26
lines changed

‎src/Game.jsx‎

Lines changed: 56 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
MIN_GAME_WIDTH,
1616
MIN_GAME_HEIGHT,
1717
RESIZE_THRESHOLD,
18+
RE_RESIZE_THRESHOLD,
1819
} from './constants';
1920

2021
// Game Scenes
@@ -39,7 +40,7 @@ import GameText from './components/GameText';
3940
import { selectDialogMessages } from './redux/selectors/selectDialog';
4041
import { selectMenuItems } from './redux/selectors/selectMenu';
4142
import { selectTexts } from './redux/selectors/selectText';
42-
import { selectGameLocale } from './redux/selectors/selectGameData';
43+
import { selectGameCameraSizeUpdateCallback, selectGameLocale } from './redux/selectors/selectGameData';
4344

4445
const Game = () => {
4546
const isDevelopment = process?.env?.NODE_ENV !== 'production';
@@ -49,6 +50,7 @@ const Game = () => {
4950
const menuItems = useSelector(selectMenuItems);
5051
const gameTexts = useSelector(selectTexts);
5152
const locale = useSelector(selectGameLocale);
53+
const cameraSizeUpdateCallback = useSelector(selectGameCameraSizeUpdateCallback);
5254

5355
const [messages, setMessages] = useState({});
5456

@@ -127,40 +129,73 @@ const Game = () => {
127129
});
128130

129131
updateGameReduxState(width, height, zoom);
132+
setGame(phaserGame);
133+
134+
if (isDevelopment) {
135+
window.phaserGame = phaserGame;
136+
}
137+
}, [
138+
game,
139+
dispatch,
140+
isDevelopment,
141+
updateGameReduxState,
142+
]);
143+
144+
useEffect(() => {
145+
if (!game) {
146+
return () => {};
147+
}
148+
149+
if (game.canvas) {
150+
dispatch(setGameCanvasElementAction(game.canvas));
151+
}
130152

131153
// Create listener to resize the game
132154
// when the window is resized
133155
let timeOutFunctionId;
134156
const workAfterResizeIsDone = () => {
135-
const gameSize = calculateGameSize(
136-
MIN_GAME_WIDTH,
137-
MIN_GAME_HEIGHT,
138-
TILE_WIDTH,
139-
TILE_HEIGHT
140-
);
141-
142-
// TODO needs to re-run this function to: handleConfigureCamera
143-
phaserGame.scale.setZoom(gameSize.zoom);
144-
phaserGame.scale.resize(gameSize.width, gameSize.height);
145-
updateGameReduxState(gameSize.width, gameSize.height, gameSize.zoom);
157+
const scaleGame = () => {
158+
const gameSize = calculateGameSize(
159+
MIN_GAME_WIDTH,
160+
MIN_GAME_HEIGHT,
161+
TILE_WIDTH,
162+
TILE_HEIGHT
163+
);
164+
165+
// console.log(JSON.stringify(gameSize));
166+
game.scale.setZoom(gameSize.zoom);
167+
game.scale.resize(gameSize.width, gameSize.height);
168+
// game.scale.setGameSize(gameSize.width, gameSize.height);
169+
// game.scale.displaySize.resize(gameSize.width, gameSize.height);
170+
// game.scale.resize(gameSize.width, gameSize.height).getParentBounds();
171+
updateGameReduxState(gameSize.width, gameSize.height, gameSize.zoom);
172+
// game.canvas.style.width = `${gameSize.width}px`;
173+
// game.canvas.style.height = `${gameSize.height}px`;
174+
cameraSizeUpdateCallback?.();
175+
};
176+
177+
scaleGame();
178+
179+
// re-run function after resize is done to re-trigger css calculations
180+
setTimeout(scaleGame, RE_RESIZE_THRESHOLD);
146181
};
147182

148-
// TODO move to the ResizeObserver https://jsfiddle.net/rudiedirkx/p0ckdcnv/
149-
window.addEventListener('resize', () => {
183+
const canvasResizeCallback = () => {
150184
clearTimeout(timeOutFunctionId);
151185
timeOutFunctionId = setTimeout(workAfterResizeIsDone, RESIZE_THRESHOLD);
152-
});
186+
};
153187

154-
setGame(phaserGame);
155-
dispatch(setGameCanvasElementAction(phaserGame.canvas));
156-
if (isDevelopment) {
157-
window.phaserGame = phaserGame;
158-
}
188+
// TODO move to the ResizeObserver https://jsfiddle.net/rudiedirkx/p0ckdcnv/
189+
window.addEventListener('resize', canvasResizeCallback);
190+
191+
return () => {
192+
window.removeEventListener('resize', canvasResizeCallback);
193+
};
159194
}, [
160195
game,
161196
dispatch,
162-
isDevelopment,
163197
updateGameReduxState,
198+
cameraSizeUpdateCallback,
164199
]);
165200

166201
return (

‎src/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export const MIN_GAME_WIDTH = 25 * TILE_WIDTH; // 400
55
export const MIN_GAME_HEIGHT = 14 * TILE_HEIGHT; // 224
66

77
export const RESIZE_THRESHOLD = 500;
8+
export const RE_RESIZE_THRESHOLD = 10;
89

910
export const HERO_SPRITE_NAME = 'hero';
1011
export const ENEMY_SPRITE_NAME = 'enemy';

‎src/game/scenes/GameScene.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,20 @@ import {
1414
handleCreateCharactersMovements,
1515
} from '../../utils/sceneHelpers';
1616

17+
// Utils
18+
import { getDispatch } from '../../utils/utils';
19+
20+
// Actions
21+
import setGameCameraSizeUpdateCallbackAction from '../../redux/actions/game/setGameCameraSizeUpdateCallbackAction';
22+
1723
export default class GameScene extends Scene {
1824
constructor() {
1925
super('GameScene');
2026
}
2127

2228
create() {
29+
const dispatch = getDispatch();
30+
2331
// All of these functions need to be called in order
2432

2533
// Create controls
@@ -42,15 +50,15 @@ export default class GameScene extends Scene {
4250

4351
// Configure the main camera
4452
handleConfigureCamera(this);
53+
dispatch(setGameCameraSizeUpdateCallbackAction(() => {
54+
handleConfigureCamera(this);
55+
}));
4556

4657
// Hero animations
4758
handleCreateHeroAnimations(this);
4859

4960
// Handle characters movements
5061
handleCreateCharactersMovements(this);
51-
52-
// Handle collisions
53-
// this.physics.add.collider(this.heroSprite, customColliders);
5462
}
5563

5664
update(time, delta) {

‎src/redux/actions/game/setGameCameraSizeUpdateCallbackAction.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { SET_GAME_CAMERA_SIZE_CALLBACK } from '../../constants';
2+
3+
const setGameCameraSizeUpdateCallbackAction = (payload) => (dispatch) => dispatch({
4+
type: SET_GAME_CAMERA_SIZE_CALLBACK,
5+
payload,
6+
});
7+
8+
export default setGameCameraSizeUpdateCallbackAction;

‎src/redux/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const SET_GAME_HEIGHT = 'SET_GAME_HEIGHT';
2121
export const SET_GAME_ZOOM = 'SET_GAME_ZOOM';
2222
export const SET_GAME_CANVAS = 'SET_GAME_CANVAS';
2323
export const SET_GAME_LOCALE = 'SET_GAME_LOCALE';
24+
export const SET_GAME_CAMERA_SIZE_CALLBACK = 'SET_GAME_CAMERA_SIZE_CALLBACK';
2425

2526
// Dialog
2627
export const SET_DIALOG_MESSAGES = 'SET_DIALOG_MESSAGES';

‎src/redux/reducers/gameDataReducer.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
SET_GAME_HEIGHT,
66
SET_GAME_CANVAS,
77
SET_GAME_LOCALE,
8+
SET_GAME_CAMERA_SIZE_CALLBACK,
89
} from '../constants';
910

1011
const defaultState = {
@@ -44,6 +45,13 @@ const gameDataReducer = (state = defaultState, action) => {
4445
};
4546
}
4647

48+
case SET_GAME_CAMERA_SIZE_CALLBACK: {
49+
return {
50+
...state,
51+
cameraSizeUpdateCallback: action.payload,
52+
};
53+
}
54+
4755
case SET_GAME_LOCALE: {
4856
return {
4957
...state,

‎src/redux/selectors/selectGameData.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ export const selectGameZoom = (state) => state.game.zoom;
77
export const selectGameCanvasElement = (state) => state.game.canvas;
88

99
export const selectGameLocale = (state) => state.game.locale;
10+
11+
export const selectGameCameraSizeUpdateCallback = (state) => state.game.cameraSizeUpdateCallback;

‎src/utils/phaser.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { GameObjects } from 'phaser';
2-
31
export const calculateGameSize = (
42
width,
53
height,

‎src/utils/sceneHelpers.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ export const handleCreateGroups = (scene) => {
139139
scene.mapLayers = scene.add.group();
140140
};
141141

142+
/**
143+
* @param scene
144+
* @returns Phaser.GameObjects.Group
145+
*/
142146
export const handleCreateMap = (scene) => {
143147
const mapKey = getSelectorData(selectMapKey);
144148
const tilesets = getSelectorData(selectTilesets);
@@ -409,6 +413,7 @@ export const handleObjectsLayer = (scene) => {
409413
export const handleConfigureCamera = (scene) => {
410414
const { game } = scene.sys;
411415
const camera = scene.cameras.main;
416+
// console.log(JSON.stringify(game.scale.gameSize));
412417

413418
// Configure the main camera
414419
camera.startFollow(scene.heroSprite, true);

0 commit comments

Comments
 (0)