Feat/room matchmaking logic

client/src/App.tsx

@@ -1,19 +1,29 @@
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import {
+  Navigate,
+  Route,
+  BrowserRouter as Router,
+  Routes,
+} from "react-router-dom";
 
 import { Creator } from "./pages/creator";
 import { Game } from "./pages/game";
 import { Intro } from "./pages/intro";
+import { Lobby } from "./pages/lobby";
 import { Playground } from "./pages/playground";
+import { Start } from "./pages/start";
 
 export function App() {
   return (
     <div className="arcade-font flex min-h-screen items-center justify-center bg-violet-950 text-white">
       <Router>
         <Routes>
           <Route path="/" element={<Intro />} />
+          <Route path="/start" element={<Start />} />
+          <Route path="/lobby" element={<Lobby />} />
           <Route path="/game" element={<Game />} />
           <Route path="/creator" element={<Creator />} />
           <Route path="/playground" element={<Playground />} />
+          <Route path="*" element={<Navigate to="/start" />} />
         </Routes>
       </Router>
     </div>

client/src/lib/room-provider.tsx

@@ -3,6 +3,7 @@ import type { Room } from "@colyseus/sdk";
 import React, { useEffect, useState } from "react";
 
 import { RoomContext } from "./use-room";
+import type { ConnectOptions } from "./use-room";
 
 const host = window.location.hostname;
 
@@ -23,20 +24,48 @@ export function RoomProvider({ children }: { children: React.ReactNode }) {
   const [isConnected, setIsConnected] = useState(false);
   const [joinError, setJoinError] = useState(false);
 
-  const connect = async (playerName: string) => {
+  const connect = async ({
+    playerName,
+    mode,
+    roomCode,
+    isPrivate,
+  }: ConnectOptions) => {
     try {
-      const newRoom = await client.joinOrCreate("game_room", {
-        name: playerName,
-      });
-      setRoom(newRoom);
+      setJoinError(false);
+      let joinedRoom: Room;
+
+      if (mode === "create") {
+        joinedRoom = await client.create("game_room", {
+          name: playerName,
+          isPrivate,
+        });
+      } else if (
+        mode === "join" &&
+        roomCode !== undefined &&
+        roomCode.length > 0
+      ) {
+        joinedRoom = await client.joinById(roomCode, {
+          name: playerName,
+        });
+      } else {
+        joinedRoom = await client.joinOrCreate("game_room", {
+          name: playerName,
+          isPrivate: false,
+        });
+      }
+
+      if (joinedRoom && joinedRoom.reconnectionToken) {
+        localStorage.setItem(
+          "reconnection",
+          JSON.stringify({
+            token: joinedRoom.reconnectionToken,
+            playerName,
+          }),
+        );
+      }
+
+      setRoom(joinedRoom);
       setIsConnected(true);
-      localStorage.setItem(
-        "reconnection",
-        JSON.stringify({
-          token: newRoom.reconnectionToken,
-          playerName,
-        }),
-      );
     } catch (error) {
       console.error("Join error", error);
       setJoinError(true);
@@ -64,7 +93,7 @@ export function RoomProvider({ children }: { children: React.ReactNode }) {
         isReconnecting = true;
         try {
           const parsed = JSON.parse(cached) as CachedReconnection;
-          const { token } = parsed;
+          const { token } = JSON.parse(cached);
 
           const reconnected = await client.reconnect(token, "game_room");
 

client/src/lib/use-room.ts

@@ -1,11 +1,18 @@
 import type { Room } from "@colyseus/sdk";
 import { createContext, useContext } from "react";
 
+export interface ConnectOptions {
+  playerName: string;
+  mode: "join" | "create" | "random";
+  roomCode?: string;
+  isPrivate?: boolean;
+}
+
 interface RoomContextType {
   room: Room | null;
   isConnected: boolean;
   joinError: boolean;
-  connect: (playerName: string) => Promise<void>;
+  connect: (options: ConnectOptions) => Promise<void>;
   disconnect: () => Promise<void>;
 }
 

client/src/pages/game.tsx

@@ -54,7 +54,7 @@ export function Game() {
         <Button
           disabled={false}
           onClick={async () => {
-            await navigate("/");
+            await navigate("/start");
           }}
         >
           Powrót do menu
@@ -68,12 +68,14 @@ export function Game() {
   }
 
   return (
-    <>
-      <div className="flex h-[560px] w-[800px] items-center justify-center overflow-hidden rounded-2xl bg-violet-950">
-        <PhaserGame room={room} />
+    <div className="flex h-[560px] w-[800px] items-center justify-center overflow-hidden rounded-2xl bg-violet-950">
+      <PhaserGame room={room} />
+      <div className="absolute top-4 left-4 rounded bg-black/50 p-2 text-white">
+        KOD POKOJU:{" "}
+        <span className="font-bold text-amber-400">{room.roomId}</span>
       </div>
 
       {isPaused && <PauseModal />}
-    </>
+    </div>
   );
 }

client/src/pages/intro.tsx

@@ -34,10 +34,13 @@ export function Intro() {
 
     setStatus("loading");
     try {
-      await connect(name.trim());
+      await connect({
+        playerName: name.trim(),
+        mode: "create",
+      });
       await navigate("/game");
     } catch {
-      setErrorMessage("Nie udało się dołaczyć do gry. Spróbuj ponownie.");
+      setErrorMessage("Nie udało się dołączyć do gry. Spróbuj ponownie.");
       setStatus("error");
     }
   }, [connect, name, navigate]);

client/src/pages/lobby.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { Navigate, useNavigate } from "react-router-dom";
+
+import { useRoom } from "../lib/use-room";
+
+export function Lobby() {
+  const { room, isConnected } = useRoom();
+  const navigate = useNavigate();
+  const [players, setPlayers] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!room) return;
+
+    const handleStateChange = (state: any) => {
+      if (state.playerState?.players) {
+        setPlayers(Array.from(state.playerState.players.values()));
+      }
+
+      if (state.gameStarted) {
+        navigate("/game");
+      }
+    };
+
+    room.onStateChange(handleStateChange);
+
+    handleStateChange(room.state);
+
+    return () => {
+      room.onStateChange.remove(handleStateChange);
+    };
+  }, [room, navigate]);
+
+  if (!isConnected || !room) return <Navigate to="/start" replace={true} />;
+
+  const myPlayer = players.find((p) => p.sessionId === room.sessionId);
+
+  return (
+    <div>
+      <h2>Pokój: {room.roomId}</h2>
+
+      <ul>
+        {players.map((p) => (
+          <li key={p.sessionId} style={{ margin: "10px 0", fontSize: "20px" }}>
+            <strong>{p.name || "Anonim"}</strong> - Postać:{" "}
+            {p.index === 0 ? "Sol" : "Vron"} -
+            {p.ready ? " ✅ GOTOWY" : " ❌ CZEKA"}
+          </li>
+        ))}
+      </ul>
+
+      <button
+        onClick={() => room.send("toggle_ready")}
+        style={{
+          padding: "15px 30px",
+          fontSize: "18px",
+          marginTop: "20px",
+          background: "green",
+        }}
+      >
+        {myPlayer?.ready ? "Cofnij gotowość" : "Daj gotowość"}
+      </button>
+    </div>
+  );
+}