link is now created in the frontend

api/app.js

@@ -55,8 +55,8 @@ io.on('connection', (socket) => {
 
   socket.on("create_room", () => {
     const roomId = crypto.randomBytes(3).toString('hex')
-    const link = `http://localhost:5173/join/${roomId}`
-    socket.emit('receive_link', link)
+    // const link = `http://localhost:5173/join/${roomId}`
+    socket.emit('receive_link', roomId)
   })
 })
 

frontend/src/App.jsx

@@ -14,7 +14,7 @@ import { RoundEnd } from "./pages/RoundEnd";
 function App() {
 
   const [isConnected, setIsConnected] = useState(socket.connected)
-  const [gameLink, setGameLink] = useState("")
+  const [gameRoom, setGameRoom] = useState("")
 
   useEffect(() => {
     const onConnect = () => {
@@ -24,7 +24,7 @@ function App() {
       setIsConnected(false)
     }
     const onReceiveLink = (data) => {
-      setGameLink(data)
+      setGameRoom(data)
     }
 
     socket.on('connect', onConnect)
@@ -41,7 +41,7 @@ function App() {
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <HomePage gameLink={gameLink}/>,
+      element: <HomePage gameRoom={gameRoom}/>,
     },
     {
       path: "/in-game",

frontend/src/pages/HomePage.jsx

@@ -5,8 +5,7 @@ import { socket } from "../socket";
 import { Button } from "../components/Button";
 
 // page function
-export function HomePage({gameLink}) {
-
+export function HomePage({ gameRoom }) {
   const handleClick = () => {
     socket.emit("create_room");
   };
@@ -22,8 +21,8 @@ export function HomePage({gameLink}) {
           </ul>
         </p>
         <Button handleClick={handleClick} buttonText="Create Game"></Button>
-        {gameLink && <div data-testid="game-link">Game Link: {gameLink}</div>}
+        {gameRoom && <div data-testid="game-link">Game Link: {`${window.location.href}join/${gameRoom}`}</div>}
       </div>
     </>
   );
-}
+}

frontend/src/socket.js

@@ -3,4 +3,5 @@ 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(SOCKET_URL)
+export const socket = io("http://localhost:3001")

frontend/tests/pages/HomePage.test.jsx

@@ -13,36 +13,36 @@ vi.mock("../../src/socket.js", () => {
 
 describe("Homepage tests", () => {
   test("name of the game", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     const heading = screen.getByTestId("game-name");
     expect(heading.textContent).toEqual("Guess the number!");
   });
   test("rules of the game", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     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={""} />);
+    render(<HomePage gameRoom={""} />);
     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={""} />);
+    render(<HomePage gameRoom={""} />);
     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={""} />);
+    render(<HomePage gameRoom={""} />);
     const link = screen.queryByTestId("game-link");
     expect(link).toBeNull();
   });
   test("given a link passed into the components", () => {
-    render(<HomePage gameLink={"http://example.com"} />);
+    render(<HomePage gameRoom={"abc123"} />);
     const link = screen.getByTestId("game-link");
-    expect(link.textContent).toEqual("Game Link: http://example.com");
+    expect(link.textContent).toEqual("Game Link: http://localhost:3000/join/abc123");
   });
 });