updated page file names and added links between pages

frontend/src/App.jsx

@@ -4,10 +4,13 @@ import { socket } from "./socket";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./App.css";
 
-import { HomePage } from "./pages/HomePage";
+
 import { InGame } from "./pages/InGame";
-import { Lobby } from "./pages/Lobby";
+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";
 
 // router
 
@@ -41,15 +44,25 @@ function App() {
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <HomePage gameRoom={gameRoom}/>,
+      element: <LandingHost w/>,
+    },
+    {
+      path: "/lobby/player",
+      element: <LobbyPlayer gameRoom={gameRoom}/>
     },
+
+    {
+      path: "/join/:roomId",
+      element: <LandingPlayer />
+    },
+
     {
       path: "/in-game",
       element: <InGame />,
     },
     {
-      path: "/lobby",
-      element: <Lobby />,
+      path: "/lobby/host",
+      element: <LobbyHost gameRoom={gameRoom}/>,
     },
     {
       path: "/round-end",

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

@@ -3,11 +3,15 @@
 //imports needed
 import { socket } from "../socket";
 import { Button } from "../components/Button";
+import { useNavigate } from "react-router-dom";
 
 // page function
-export function HomePage({ gameRoom }) {
+export function LandingHost() {
+  const navigate = useNavigate()
   const handleClick = () => {
     socket.emit("create_room");
+    navigate('/lobby/host')
+
   };
   return (
     <>
@@ -21,7 +25,6 @@ export function HomePage({ gameRoom }) {
           </ul>
         </p>
         <Button handleClick={handleClick} buttonText="Create Game"></Button>
-        {gameRoom && <div data-testid="game-link">Game Link: {`${window.location.href}join/${gameRoom}`}</div>}
       </div>
     </>
   );

frontend/src/pages/LandingPlayer.jsx

@@ -0,0 +1,14 @@
+import { Button } from "../components/Button"
+import { useNavigate } from "react-router-dom"
+
+export function LandingPlayer() {
+  const navigate = useNavigate()
+  const handleClick = () => {
+    navigate('/lobby/player')
+  }
+  return (
+    <>
+      <Button handleClick={handleClick} buttonText="Join Room"/>
+    </>
+  )
+}

frontend/src/pages/LobbyHost.jsx

@@ -0,0 +1,42 @@
+// The page where the players are waiting while everybody joins the game
+// For the host, this is the page with the 'start the game' button
+
+import { Link } from "react-router-dom";
+import { Button } from "../components/Button";
+{/* import { Button } from "../components/Button"; */}
+
+export function LobbyHost({ gameRoom }) {
+  return (
+    <>
+    <Button buttonText="Start Game"/>
+    <div>{`Game Room: http://localhost:5173/join/${gameRoom}`}</div>
+    </>
+  )
+  // return (
+  //   <div className="lobby">
+  //       <div className="players_list">
+  //           <h1>Players joining component placeholder</h1>
+  //           <p>
+  //               Players
+  //               <ul>
+  //                   <li>Player1</li>
+  //                   <li>Player2</li>
+  //                   <li>Player3</li>
+  //               </ul>
+  //           </p>
+  //       </div>
+
+  //       <Link to="/in-game" className="in-game-link"></Link>
+  //       {/* <Button onClick={handleClick}>Start game</Button> */}
+
+  //       <div className="share_link">
+  //           <h1>Share link component placeholder</h1>
+  //           <p data-testid="add-players-prompt">
+  //               Add up to 6 players using this link
+  //           </p>
+  //           <a> Link</a>
+  //       </div>
+
+  //   </div>
+  // );
+}

frontend/src/pages/LobbyPlayer.jsx

@@ -0,0 +1,8 @@
+export function LobbyPlayer({ gameRoom }) {
+  return (
+    <>
+    <div >Waiting for host to start game...</div>
+    <div>{`Game Room: http://localhost:5173/join/${gameRoom}`}</div>
+    </>
+  )
+}

frontend/src/pages/RoundEnd.jsx

@@ -39,7 +39,7 @@ export function RoundEnd() {
         </div>
 
 
-        <Link to="/" className="homepage-link"></Link>
+        <Link to="/" className="landing-host-link"></Link>
         <Link to="/in-game" className="in-game-link"></Link>
         {/* <Button onClick={handleClick}>Next round :D</Button>
 

frontend/tests/pages/HomePage.test.jsx → frontend/tests/pages/LandingHost.test.jsx

@@ -2,47 +2,51 @@
 
 //required imports
 import { render, screen } from "@testing-library/react";
-import { HomePage } from "../../src/pages/HomePage";
+import { LandingHost } from "../../src/pages/LandingHost";
 import { describe, expect, test, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { socket } from "../../src/socket";
+import { useNavigate } from "react-router-dom";
 
 vi.mock("../../src/socket.js", () => {
   return { socket: { emit: vi.fn() } };
 });
 
-describe("Homepage tests", () => {
+vi.mock("react-router-dom", () => {
+  const navigateMock = vi.fn()
+  const useNavigateMock = () => navigateMock
+  return { useNavigate: useNavigateMock}
+})
+
+
+
+describe("LandingHost tests", () => {
   test("name of the game", () => {
-    render(<HomePage gameRoom={""} />);
+    render(<LandingHost />);
     const heading = screen.getByTestId("game-name");
     expect(heading.textContent).toEqual("Guess the number!");
   });
   test("rules of the game", () => {
-    render(<HomePage gameRoom={""} />);
+    render(<LandingHost />);
     expect(screen.getByText("Rules of the game:")).toBeTruthy();
     expect(screen.getByText("Guess the number between 1 and 100")).toBeTruthy();
     expect(screen.getByText("2 to 6 players")).toBeTruthy();
   });
   test("create game button appears on page", () => {
-    render(<HomePage gameRoom={""} />);
+    render(<LandingHost />);
     const buttonEl = screen.getByRole("button");
     expect(buttonEl.textContent).toEqual("Create Game");
   });
   test('when a user clicks on the button the socket emits to "create_room"', async () => {
-    render(<HomePage gameRoom={""} />);
+    render(<LandingHost />);
     const buttonEl = screen.getByRole("button");
     const user = userEvent.setup();
     await user.click(buttonEl);
     expect(socket.emit).toHaveBeenCalledWith("create_room");
   });
   test("when no link is passed into the component it is not visible", () => {
-    render(<HomePage gameRoom={""} />);
+    render(<LandingHost />);
     const link = screen.queryByTestId("game-link");
     expect(link).toBeNull();
   });
-  test("given a link passed into the components", () => {
-    render(<HomePage gameRoom={"abc123"} />);
-    const link = screen.getByTestId("game-link");
-    expect(link.textContent).toEqual("Game Link: http://localhost:3000/join/abc123");
-  });
 });

frontend/tests/pages/LandingPlayer.test.jsx

@@ -0,0 +1,21 @@
+// Tests for the landing page where the players can share a link to join
+// the game, and the players can join the game
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { describe, expect, test } from "vitest";
+import { LandingPlayer } from "../../src/pages/LandingPlayer";
+
+
+describe("LandingPlayer tests", ()  => {
+    test("join room button is visible", () => {
+        render(
+            <BrowserRouter>
+                <LandingPlayer />
+            </BrowserRouter>
+        );       
+        const buttonEl = screen.getByRole("button")
+        expect(buttonEl.textContent).toEqual("Join Room")
+    });
+});

frontend/tests/pages/LobbyHost.test.jsx

@@ -0,0 +1,22 @@
+// Tests for the lobby page where the host can share a link to join
+// the game, the host can start the game, and the host can see who has joined
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { LobbyHost } from "../../src/pages/LobbyHost";
+import { describe, expect, test } from "vitest";
+
+
+describe("LobbyHost tests", ()  => {
+    test("there is a button", () => {
+        render(
+            <BrowserRouter>
+                <LobbyHost gameRoom={""}/>
+            </BrowserRouter>
+        );       
+
+        const buttonEl = screen.getByRole("button");
+        expect(buttonEl.textContent).toEqual("Start Game");
+    });
+});

frontend/tests/pages/LobbyPlayer.test.jsx

@@ -0,0 +1,21 @@
+// Tests for the lobby page where the players can share a link to join
+// the game, and the players can see who has joined
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { LobbyPlayer } from "../../src/pages/LobbyPlayer";
+import { describe, expect, test } from "vitest";
+
+
+describe("LobbyPlayer tests", ()  => {
+    test("name of the game", () => {
+        render(
+            <BrowserRouter>
+                <LobbyPlayer gameRoom={""}/>
+            </BrowserRouter>
+        );       
+
+        expect(screen.getByText("Waiting for host to start game...")).toBeTruthy();
+    });
+});