fixed firebase problem and added match making

Author: PriyanshuPz

src/App.tsx

@@ -2,13 +2,15 @@ import { Route, Routes } from "react-router-dom";
 import Home from "./components/Home";
 import MultiplayerRoom from "./components/MultiplayerRoom";
 import { SinglePlayerRoom } from "./singleplayer";
+import { MultiplayerRoom as MatchmakingRoom } from "./multiplayer/matchmaking";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/room/:roomId" element={<MultiplayerRoom />} />
       <Route path="/room" element={<SinglePlayerRoom />} />
+      <Route path="/multiplayer/:roomId" element={<MatchmakingRoom />} />
     </Routes>
   );
 }

src/components/Home.tsx

@@ -7,13 +7,17 @@ import OnlineLobbyDialog from "./OnlineLobby";
 import { useGameStore } from "../store/gameStore";
 import { handleOnlinePlay } from "../services/gameService";
 import SinglePlayerRoomConfigDialog from "../singleplayer/components/SinglePlayerRoomConfigDialog";
+import { MatchmakingLobby } from "../multiplayer/matchmaking";
+import { Dialog } from "./ui";
 import { useState } from "react";
+import { loginWithGoogle } from "../services/firebase";
 
 export default function Home() {
   const navigate = useNavigate();
   const { user } = useAuth();
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isQuickMatchOpen, setIsQuickMatchOpen] = useState(false);
 
   const { isOnlineDialogOpen, isOnboarded, setIsOnlineDialogOpen } =
     useGameStore();
@@ -26,6 +30,18 @@ export default function Home() {
     handleOnlinePlay(user);
   };
 
+  const handleQuickMatchClick = async () => {
+    if (!user) {
+      const { user: newUser } = await loginWithGoogle();
+      if (newUser) {
+        setIsQuickMatchOpen(true);
+      } else {
+        // Login failed
+      }
+    }
+    setIsQuickMatchOpen(true);
+  };
+
   const handleConfirm = () => {
     setIsDialogOpen(false);
     navigate("/room");
@@ -84,7 +100,10 @@ export default function Home() {
         <Button variant="blue" onClick={handlePlayClick}>
           Play
         </Button>
-        <Button onClick={handleOnlinePlayClick}>Online</Button>
+        <Button variant="green" onClick={handleQuickMatchClick}>
+          Quick Match
+        </Button>
+        <Button onClick={handleOnlinePlayClick}>Online Rooms</Button>
       </div>
 
       <SinglePlayerRoomConfigDialog
@@ -98,6 +117,14 @@ export default function Home() {
         isOpen={isOnlineDialogOpen}
         onClose={() => setIsOnlineDialogOpen(false)}
       />
+
+      <Dialog
+        isOpen={isQuickMatchOpen}
+        onClose={() => setIsQuickMatchOpen(false)}
+        title="Quick Match"
+      >
+        <MatchmakingLobby onClose={() => setIsQuickMatchOpen(false)} />
+      </Dialog>
     </div>
   );
 }

src/lib/firebase.ts

@@ -3,12 +3,12 @@ import { getFirestore } from "firebase/firestore";
 import { getAuth } from "firebase/auth";
 
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  apiKey: "AIzaSyCFfB-OFucl6TY67X0BTMhGGEYSJu4NKXE",
+  authDomain: "handwar-pz.firebaseapp.com",
+  projectId: "handwar-pz",
+  storageBucket: "handwar-pz.firebasestorage.app",
+  messagingSenderId: "829667112715",
+  appId: "1:829667112715:web:b276faa05ee963e99d140e",
 };
 
 const app = initializeApp(firebaseConfig);