center game once and for all

Author: rjoken

src/App.css

@@ -52,29 +52,29 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
 }
 
-main {
+.app-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
   width: 100%;
   height: 100%;
-  flex-grow: 1;
+}
+
+main {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  overflow: hidden;
-  position: relative;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
 }
 
 footer {
@@ -84,8 +84,8 @@ footer {
 }
 
 .game-container {
-  width: 100% !important;
-  height: 100% !important;
+  width: 640px;
+  height: 576px;
   border-radius: 0;
   overflow: hidden;
   box-shadow: none;
@@ -97,6 +97,24 @@ footer {
   display: block;
 }
 
+.game-root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.game-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 640px;
+  height: 576px;
+  margin: 0 auto;
+}
+
 .game-container canvas {
   display: block !important;
 }

src/App.tsx

@@ -4,7 +4,7 @@ import Game from "./components/Game";
 function App() {
   return (
     <div className="app-container">
-      <main style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <main className="app-main">
         <Game />
       </main>
     </div>

src/components/Game.tsx

@@ -114,33 +114,17 @@ const Game = () => {
   }, []);
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        height: "100%",
-        gap: "1rem",
-      }}
-    >
+    <div className="game-root">
       <ConnectDevice
         onConnect={onDeviceConnect}
         onDisconnect={onDeviceDisconnect}
         device={device}
       />
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          position: "relative",
-          display: "flex",
-        }}
-      >
+      <div className="game-wrapper">
         <div
           ref={containerRef}
           id="game-container"
           className="game-container"
-          style={{ width: "100%", height: "100%" }}
           tabIndex={0}
           onClick={() => containerRef.current?.focus()}
         />

src/game/config.ts

@@ -21,6 +21,10 @@ export const gameConfig: Phaser.Types.Core.GameConfig = {
   scene: [MenuScene, GameScene, GameOverScene, NameEntryScene, HighScoresScene],
   scale: {
     parent: "game-container",
+    mode: Phaser.Scale.FIT, // scale up to fit the parent
+    autoCenter: Phaser.Scale.CENTER_BOTH, // center horizontally & vertically
+    width: 160,
+    height: 144,
   },
   input: {
     activePointers: 3,