Added starting zoom-out transition effect when starting a game

src/client/scripts/esm/game/chess/game.js

@@ -39,6 +39,7 @@ import spritesheet from '../rendering/spritesheet.js';
 import loadingscreen from '../gui/loadingscreen.js';
 import movepiece from '../../chess/logic/movepiece.js';
 import frametracker from '../rendering/frametracker.js';
+import area from '../rendering/area.js';
 // Import End
 
 /** 
@@ -248,6 +249,19 @@ async function loadGamefile(newGamefile) {
 	loadingscreen.close();
 	// Required so the first frame of the game & tiles is rendered once the animation page fades away
 	frametracker.onVisualChange();
+
+	startStartingTransition();
+}
+
+/**
+ * Sets the camera to the recentered position, plus a little zoomed in.
+ * THEN transitions to normal zoom.
+ */
+function startStartingTransition() {
+	const centerArea = area.calculateFromUnpaddedBox(gamefile.startSnapshot.box);
+	movement.setPositionToArea(centerArea);
+	movement.setBoardScale(movement.getBoardScale() * 1.75);
+	guinavigation.callback_Recenter();
 }
 
 /** The canvas will no longer render the current game */

src/client/scripts/esm/game/gui/guinavigation.js

@@ -426,4 +426,5 @@ export default {
 	lockRewind,
 	update,
 	isCoordinateActive,
+	callback_Recenter,
 };

src/client/scripts/esm/game/gui/guiplay.js

@@ -2,7 +2,6 @@
 // Import Start
 import websocket from '../websocket.js';
 import guigameinfo from './guigameinfo.js';
-import area from '../rendering/area.js';
 import onlinegame from '../misc/onlinegame.js';
 import localstorage from '../../util/localstorage.js';
 import style from './style.js';
@@ -387,9 +386,6 @@ function loadGame(gameOptions) {
 		clockValues: gameOptions.clockValues
 	});
 	game.loadGamefile(newGamefile);
-
-	const centerArea = area.calculateFromUnpaddedBox(newGamefile.startSnapshot.box);
-	movement.setPositionToArea(centerArea);
 
 	options.setNavigationBar(true);
 	sound.playSound_gamestart();