fix: disable scrolling on typing game screen

2 files changed, 37 insertions, 21 deletions

diff --git a/src/app/game/page.styles.ts b/src/app/game/page.styles.ts
index fdb743e..a1c6cc8 100644
--- a/src/app/game/page.styles.ts
+++ b/src/app/game/page.styles.ts
@@ -1,4 +1,4 @@
-import styled, { keyframes, css } from "styled-components";
+import styled, { keyframes, css, createGlobalStyle } from "styled-components";
 
 /* ----- ANIMATIONS ----- */
 
@@ -40,6 +40,14 @@ export const glowAnim = keyframes`
   100% { box-shadow: 0 0 4px 0px rgba(124, 58, 237, 0.4); }
 `;
 
+export const GameGlobalStyle = createGlobalStyle`
+  html,
+  body {
+    height: 100%;
+    overflow: hidden;
+  }
+`;
+
 /* ----- LAYOUT ----- */
 
 export const GameRoot = styled.div`
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index fa5f6b1..02ea319 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -17,6 +17,7 @@ import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import {
   GameRoot,
+  GameGlobalStyle,
   GameNavbar,
   GameContent,
   HUD,
@@ -90,6 +91,10 @@ function GameInner() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+  }, []);
+
   const audioRef = useRef<HTMLAudioElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const gameStartTimeRef = useRef<number>(0);
@@ -860,25 +865,28 @@ function GameInner() {
 
 export default function GamePage() {
   return (
-    <Suspense
-      fallback={
-        <GameRoot>
-          <div
-            style={{
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 18,
-              color: "rgba(255,255,255,0.5)",
-            }}
-          >
-            Loading...
-          </div>
-        </GameRoot>
-      }
-    >
-      <GameInner />
-    </Suspense>
+    <>
+      <GameGlobalStyle />
+      <Suspense
+        fallback={
+          <GameRoot>
+            <div
+              style={{
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 18,
+                color: "rgba(255,255,255,0.5)",
+              }}
+            >
+              Loading...
+            </div>
+          </GameRoot>
+        }
+      >
+        <GameInner />
+      </Suspense>
+    </>
   );
 }