Merge branch 'main' into env-problems

api/app.js

@@ -5,6 +5,7 @@ const http = require('http')
 const express = require("express");
 const bodyParser = require("body-parser");
 const cors = require("cors");
+const crypto = require("crypto")
 
 
 const app = express();
@@ -51,6 +52,12 @@ io.on('connection', (socket) => {
     console.log("User disconnected!")
     console.log(`Users Connected: ${io.engine.clientsCount}`)
   })
+
+  socket.on("create_room", () => {
+    const roomId = crypto.randomBytes(3).toString('hex')
+    const link = `http://localhost:5173/join/${roomId}`
+    socket.emit('receive_link', link)
+  })
 })
 
 server.listen(3001, () => {

frontend/src/App.jsx

@@ -10,46 +10,53 @@ import { Lobby } from "./pages/Lobby";
 import { RoundEnd } from "./pages/RoundEnd";
 
 // router
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <HomePage />,
-  },
-  {
-    path: "/in-game",
-    element: <InGame />,
-  },
-  {
-    path: "/lobby",
-    element: <Lobby />,
-  },
-  {
-    path: "/round-end",
-    element: <RoundEnd />,
-  }      
-]);
 
 function App() {
-
+  
   const [isConnected, setIsConnected] = useState(socket.connected)
-
+  const [gameLink, setGameLink] = useState("")
+
   useEffect(() => {
     const onConnect = () => {
       setIsConnected(true)
     }
-
     const onDisconnect = () => {
       setIsConnected(false)
     }
-
+    const onReceiveLink = (data) => {
+      setGameLink(data)
+    }
+
     socket.on('connect', onConnect)
     socket.on('disconnect', onDisconnect)
-
+    socket.on('receive_link', (data) => onReceiveLink(data))
+
     return () => {
       socket.off('connect', onConnect)
       socket.off('disconnect', onDisconnect)
+      socket.off('receive_link', () => onReceiveLink(""))
     }
   })
+
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <HomePage gameLink={gameLink}/>,
+    },
+    {
+      path: "/in-game",
+      element: <InGame />,
+    },
+    {
+      path: "/lobby",
+      element: <Lobby />,
+    },
+    {
+      path: "/round-end",
+      element: <RoundEnd />,
+    }      
+  ]);
+
   return (
     <>
       <RouterProvider router={router} />

frontend/src/pages/HomePage.jsx

@@ -1,26 +1,29 @@
 // the landing page with the create a game option
 
 //imports needed
-import { Link } from "react-router-dom";
-{/*import { Button } from "../components/Button"; */}
+import { socket } from "../socket";
+import { Button } from "../components/Button";
 
 // page function
-export function HomePage() {
+export function HomePage({gameLink}) {
+
+  const handleClick = () => {
+    socket.emit("create_room");
+  };
   return (
     <>
-    <div className="home">
+      <div className="home">
         <h1 data-testid="game-name">Guess the number!</h1>
         <p>
-            Rules of the game: 
-            <ul>
-                <li>Guess the number between 1 and 100</li>
-                <li>2 to 6 players</li>
-            </ul>
+          Rules of the game:
+          <ul>
+            <li>Guess the number between 1 and 100</li>
+            <li>2 to 6 players</li>
+          </ul>
         </p>
-        <Link to="/lobby" className="lobby-link"></Link>
-        {/* <Button onClick={handleClick}>Create game</Button> */}
-
-    </div>
+        <Button handleClick={handleClick} buttonText="Create Game"></Button>
+        {gameLink && <div data-testid="game-link">Game Link: {gameLink}</div>}
+      </div>
     </>
   );
 }

frontend/src/socket.js

@@ -1,5 +1,6 @@
 import { io } from "socket.io-client";
+
 const SOCKET_URL = import.meta.env.VITE_SOCKET_BACKEND_URL;
 console.log("SOCKET_URL",SOCKET_URL)
 
-export const socket = io(SOCKET_URL)
+export const socket = io("http://localhost:3001")

frontend/tests/pages/HomePage.test.jsx

@@ -2,19 +2,47 @@
 
 //required imports
 import { render, screen } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
 import { HomePage } from "../../src/pages/HomePage";
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { socket } from "../../src/socket";
 
-describe("Homepage tests", ()  => {
-    test("name of the game", () => {
-        render(
-            <BrowserRouter>
-                <HomePage />
-            </BrowserRouter>
-        );       
-
-        const heading = screen.getByTestId("game-name");
-        expect(heading.textContent).toEqual("Guess the number!");
-    });
-});
+vi.mock("../../src/socket.js", () => {
+  return { socket: { emit: vi.fn() } };
+});
+
+describe("Homepage tests", () => {
+  test("name of the game", () => {
+    render(<HomePage gameLink={""} />);
+    const heading = screen.getByTestId("game-name");
+    expect(heading.textContent).toEqual("Guess the number!");
+  });
+  test("rules of the game", () => {
+    render(<HomePage gameLink={""} />);
+    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 gameLink={""} />);
+    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 gameLink={""} />);
+    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 gameLink={""} />);
+    const link = screen.queryByTestId("game-link");
+    expect(link).toBeNull();
+  });
+  test("given a link passed into the components", () => {
+    render(<HomePage gameLink={"http://example.com"} />);
+    const link = screen.getByTestId("game-link");
+    expect(link.textContent).toEqual("Game Link: http://example.com");
+  });
+});