Merge pull request #94 from shammy642/refactor-pages

Refactor pages

api/index.js

@@ -17,13 +17,14 @@ io.on("connection", (socket) => {
     console.log("User disconnected!");
     console.log(`Users Connected: ${io.engine.clientsCount}`);
     console.log(io.sockets.adapter.rooms)
+    console.log(games)
   });
 
   socket.on("disconnecting", () => {
     socket.rooms.forEach((gameId) => {
       if (games[gameId]) {
         games[gameId].removePlayer(socket.id);
-        io.to(gameId).emit("receive_players", games[gameId].players);
+        io.to(gameId).emit("receive_game", games[gameId]);
       }
     });
   });
@@ -35,8 +36,9 @@ io.on("connection", (socket) => {
     socket.emit("receive_link", gameId);
     socket.join(gameId);
     games[gameId] = new Game(gameId);
-    games[gameId].addPlayer(new Player(socket.id, `${name}(Host)`, avatar));
-    io.to(gameId).emit("receive_players", games[gameId].players);
+    games[gameId].addPlayer(new Player(socket.id, `${name} (Host)`, avatar));
+    socket.emit('is_host')
+    io.to(gameId).emit("receive_game", games[gameId]);
   });
 
   socket.on("join_room", (gameId, data) => {
@@ -45,7 +47,7 @@ io.on("connection", (socket) => {
     console.log("Room ID:", gameId);
     socket.join(gameId);
     games[gameId].addPlayer(new Player(socket.id, name, avatar));
-    io.to(gameId).emit("receive_players", games[gameId].players);
+    io.to(gameId).emit("receive_game", games[gameId]);
   });
 
   socket.on("start_game", () => {
@@ -62,7 +64,7 @@ io.on("connection", (socket) => {
         games[gameId].players.forEach((player) => {
           if (player.id === socket.id) {
             player.guess(number);
-            io.to(gameId).emit("receive_players", games[gameId].players);
+            io.to(gameId).emit("receive_game", games[gameId]);
           }
         });
       }
@@ -94,15 +96,15 @@ io.on("connection", (socket) => {
         socket.rooms.delete(gameId)
       }
       else {
-        io.to(gameId).emit("receive_players", games[gameId].players);
+        io.to(gameId).emit("receive_game", games[gameId]);
       }
     }
   })
 
 
   async function startGameTimer(gameId) {
     await games[gameId].resetGame();
-    io.to(gameId).emit("receive_players", games[gameId].players);
+    io.to(gameId).emit("receive_game", games[gameId]);
     io.to(gameId).emit("redirect", "/in-game");
     io.to(gameId).emit("pokemon", games[gameId].pokemonStats);
 
@@ -117,7 +119,6 @@ io.on("connection", (socket) => {
         clearInterval(timer);
         games[gameId].checkGuesses();
         io.to(gameId).emit("redirect", "/round-end");
-        io.to(gameId).emit("receive_players", games[gameId].players);
         io.to(gameId).emit("receive_game", games[gameId]);
         startNextRoundTimer(gameId);
       }

api/numberGame/Player.js

@@ -25,5 +25,9 @@ class Player {
   setAvatar(avatar) {
     this.avatar = avatar;
   }
+
+  setIsHost() {
+    this.host = true
+  }
 }
 module.exports = Player

frontend/src/App.jsx

@@ -5,36 +5,26 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./App.css";
 
 import { InGame } from "./pages/InGame";
-import { LobbyHost } from "./pages/LobbyHost";
 import { RoundEnd } from "./pages/RoundEnd";
-import { LandingPlayer } from "./pages/LandingPlayer";
-import { LobbyPlayer } from "./pages/LobbyPlayer";
-import { LandingHost } from "./pages/LandingHost";
-
+import { Lobby } from "./pages/Lobby";
+import { Landing } from "./pages/Landing";
 // router
 
 function App() {
   const [isConnected, setIsConnected] = useState(socket.connected);
-  const [gameRoom, setGameRoom] = useState("");
-  const [players, setPlayers] = useState([]);
   const [gameState, setGameState] = useState([]);
   const [redirect, setRedirect] = useState("");
-  const [remainingTime, setRemainingTime] = useState("")
-  const [pokemon, setPokemon] = useState({})
-
+  const [remainingTime, setRemainingTime] = useState("");
+  const [pokemon, setPokemon] = useState({});
+  const [isHost, setIsHost] = useState(false);
+
   useEffect(() => {
     const onConnect = () => {
       setIsConnected(true);
     };
     const onDisconnect = () => {
       setIsConnected(false);
     };
-    const onReceiveLink = (data) => {
-      setGameRoom(data);
-    };
-    const onReceivePlayers = (data) => {
-      setPlayers(data);
-    };
     const onReceiveGame = (data) => {
       setGameState(data);
     };
@@ -45,77 +35,72 @@ function App() {
       setRemainingTime(data);
     };
     const onReceivePokemon = (data) => {
-      console.log("App, onReceivePokemon:", data)
-      setPokemon(data)
-    }
+      console.log("App, onReceivePokemon:", data);
+      setPokemon(data);
+    };
+    const onReceiveIsHost = () => {
+      setIsHost(true);
+    };
 
     socket.on("connect", onConnect);
     socket.on("disconnect", onDisconnect);
-    socket.on("receive_link", (data) => onReceiveLink(data));
-    socket.on("receive_players", (data) => onReceivePlayers(data));
-    socket.on("receive_game", (data) => onReceiveGame(data));
-    socket.on("redirect", (data) => onReceiveRedirect(data));
-    socket.on("start_timer", (data) => onReceiveRemainingTime(data))
-    socket.on("pokemon", (data) => onReceivePokemon(data));
+    socket.on("receive_game", onReceiveGame);
+    socket.on("redirect", onReceiveRedirect);
+    socket.on("start_timer", onReceiveRemainingTime);
+    socket.on("pokemon", onReceivePokemon);
+    socket.on("is_host", onReceiveIsHost);
 
     return () => {
       socket.off("connect", onConnect);
       socket.off("disconnect", onDisconnect);
-      socket.off("receive_link", () => onReceiveLink(""));
-      socket.off("receive_players", () => onReceivePlayers([]));
-      socket.off("receive_game", () => onReceiveGame([]));
-      socket.off("redirect", () => onReceiveRedirect(""));
-      socket.off("remaining_time", () => onReceiveRemainingTime(""))
-      socket.off("pokemon", (data) => onReceivePokemon(data));
+      socket.off("receive_game", onReceiveGame);
+      socket.off("redirect", onReceiveRedirect);
+      socket.off("start_timer", onReceiveRemainingTime);
+      socket.off("pokemon", onReceivePokemon);
+      socket.off("is_host", onReceiveIsHost);
     };
   });
 
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <LandingHost />,
+      element: <Landing />,
     },
     {
-      path: "/lobby/player",
+      path: "/join/:roomId",
+      element: <Landing />,
+    },
+    {
+      path: "/lobby",
       element: (
-        <LobbyPlayer
-          gameRoom={gameRoom}
-          players={players}
+        <Lobby
+          gameState={gameState}
           redirect={redirect}
           setRedirect={setRedirect}
+          isHost={isHost}
         />
       ),
     },
-
-    {
-      path: "/join/:roomId",
-      element: <LandingPlayer />,
-    },
-
     {
       path: "/in-game",
       element: (
         <InGame
-          players={players}
-          redirect={redirect}
+          gameState={gameState}
           pokemon={pokemon}
+          redirect={redirect}
           setRedirect={setRedirect}
           remainingTime={remainingTime}
         />
       ),
     },
-    {
-      path: "/lobby/host",
-      element: <LobbyHost gameRoom={gameRoom} players={players} />,
-    },
     {
       path: "/round-end",
       element: (
         <RoundEnd
           gameState={gameState}
+          pokemon={pokemon}
           redirect={redirect}
           setRedirect={setRedirect}
-          pokemon={pokemon}
           remainingTime={remainingTime}
         />
       ),

frontend/src/pages/InGame.jsx

@@ -16,7 +16,7 @@ import { H1 } from "../components/H1";
 
 // in game page function
 export function InGame({
-  players,
+  gameState,
   redirect,
   pokemon,
   setRedirect,
@@ -34,7 +34,6 @@ export function InGame({
     //setButtonText("Good luck!")
     setShowCheck(true);
   };
-  console.log(players);
 
   useEffect(() => {
     if (redirect) {
@@ -49,7 +48,7 @@ export function InGame({
       <Card>
         <H1>Poké Poké Guess Weight!</H1>
         <div className="players_list m-3">
-          <ListPlayers players={players} />
+          <ListPlayers players={gameState.players} />
         </div>
         <div className="flex justify-center">
           <img src={pokemon.pictureURL} />

frontend/src/pages/LandingHost.jsx → frontend/src/pages/Landing.jsx

@@ -3,45 +3,51 @@
 //imports needed
 import { socket } from "../socket";
 import { Button } from "../components/Button";
-import { useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
 import { UsernameForm } from "../components/UsernameForm";
-import { 
-
-} from "../components/CardText";
+import {} from "../components/CardText";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
 import { H1 } from "../components/H1";
 
-
 // page function
-export function LandingHost() {
+export function Landing() {
+  const [isJoining, setIsJoining] = useState(false);
+  const params = useParams();
   //states
   const [input, setInput] = useState("");
   const [avatar, setAvatar] = useState(null);
   const navigate = useNavigate();
   const [error, setError] = useState("");
+  console.log("Landing params", params);
+  useEffect(() => {
+    if (params.roomId) {
+      setIsJoining(true);
+    }
+  }, [params]);
 
-
-  //click should redirect the user to the lobby
-  const handleClick = (e) => {
-    e.preventDefault();
-
+  const handleClick = () => {
     // Validate if the input is not empty
     if (!input.trim()) {
       setError("Please enter a username.");
     } else {
       setError("");
       // what should happen on click if there is no error
-      socket.emit("create_room", { name: input, avatar });
-      navigate("/lobby/host");
+      if (isJoining) {
+        socket.emit("join_room", params.roomId, { name: input, avatar });
+        navigate(`/lobby`);
+      } else {
+        socket.emit("create_room", { name: input, avatar });
+        navigate("/lobby");
+      }
     }
   };
 
   return (
     <div className="full-page">
-      <Header/>
+      <Header />
       <Card>
         <H1>Poké Poké Guess Weight!</H1>
         <p>A quick-fire multiplayer game</p>
@@ -62,9 +68,10 @@ export function LandingHost() {
           setAvatar={setAvatar}
         ></UsernameForm>
         <br></br>
-        <Button handleClick={handleClick} buttonText="Create Game"></Button>
+        {!isJoining && (<Button handleClick={handleClick} buttonText="Create Game"></Button>)}
+        {isJoining && <Button handleClick={handleClick} buttonText="Join Game"></Button>}
       </Card>
-      <Footer/>
+      <Footer />
     </div>
   );
 }