feat: add Game Room feature with loading and settings component

package.json

@@ -15,7 +15,8 @@
     "lucide-react": "^0.507.0",
     "next": "15.3.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "starknet": "^6.24.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/components/game-room/GameLoading.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import board from "@/app/assets/board.png";
+// import { useGameRoom } from "@/app/contexts/GameRoomContext";
+
+export default function GameLoading() {
+  const [dots, setDots] = useState("");
+
+  useEffect(() => {
+    const dotInterval = setInterval(() => {
+      setDots((prev) => (prev.length < 5 ? prev + "A" : ""));
+    }, 300);
+
+    return () => clearInterval(dotInterval);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-[#010f10] flex items-center justify-center text-center p-4 text-white">
+      <Image
+        src={board}
+        alt="board"
+        className="absolute inset-0 w-full h-full object-cover opacity-30 blur-xs pointer-events-none z-0"
+        style={{ clipPath: "inset(50% 0 0 0)" }}
+      />
+
+      <div className="max-w-xl">
+        <h2 className="text-3xl md:text-4xl font-bold mb-6">Loading Game</h2>
+        <p className="text-lg md:text-xl">
+          Always remember to strategize properly and...
+          <br />
+          <span className="font-semibold">show no mercy!</span>
+        </p>
+        <p className="mt-8 text-xl md:text-3xl animate-pulse">
+          😈MUAHAHAHAHAHA{dots}😈
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/components/game-room/GameRoomContent.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import Navbar from "../../components/navbar";
+import { useGameRoom } from "@/app/contexts/GameRoomContext";
+import GameSettings from "./GameSettings";
+import GameLoading from "./GameLoading";
+
+export default function GameRoomContent() {
+  const { state } = useGameRoom();
+
+  return (
+    <div className="relative min-h-screen ">
+      {/* Board Background - Fixed positioning */}
+
+      {/* Content with proper spacing */}
+      <div className="relative">
+        <Navbar />
+
+        <div className="pt-16"> {/* Add padding to prevent navbar overlap */}
+          {!state?.settings ? (
+            <div className="flex items-center justify-center min-h-[50vh]">
+              <div className="text-xl bg-white/90 px-6 py-4 rounded-lg shadow-md">
+                Loading settings...
+              </div>
+            </div>
+          ) : state.gameStarted ? (
+            // Simplified condition - if game is started, always show loading
+            // No check for isLoading since we want to stay in loading permanently
+            <GameLoading />
+          ) : (
+            <GameSettings />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}