fix party code + avatar on multiplayer lobby

webapp/src/components/game/LobbyGame.scss

@@ -24,8 +24,11 @@ table {
 
   .player-item {
     display: flex;
-    flex-direction: row;
-    justify-content: stretch;
+    justify-content: space-between; 
+    align-items: center; 
+    margin-bottom: 10px;
+    border-bottom: 1px solid #eee;
+    padding: 10px;
   }
 
   img {

webapp/src/components/game/multiplayer/GameMultiPlayer.tsx

@@ -13,6 +13,13 @@ export interface SocketProps {
   close: () => void; 
 }
 
+export interface UserPlayer {
+  username: string;
+  totalPoints: number;
+  uuid: string;
+  isAdmin: boolean;
+}
+
 const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
 
   const SERVER_URL = 'http://localhost:8006';
@@ -21,7 +28,7 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
   const [socket, setSocket] = useState<SocketProps | null>(null);
   const [stage, setStage] = useState<number>(1)
   const [partyCode, setPartyCode] = useState<string>("");
-  const [users, setUsers] = useState<string[]>([]);
+  const [users, setUsers] = useState<UserPlayer[]>([]);
 
   useEffect(() => {
     const newSocket = io(SERVER_URL);
@@ -30,16 +37,16 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
     newSocket.on('partyCreated', (partyCode: string) => {
       console.log(`Party created: ${partyCode}`);
       setPartyCode(partyCode);
-      setUsers([username]);
     });
 
-    newSocket.on('joinedParty', (username: string) => {
+    newSocket.on('joinedParty', (user: UserPlayer) => {
+      console.log(user)
       console.log(`User ${username} joined the party`);
       setStage(2);
       console.log(users)
     })
 
-    newSocket.on('lobbyUsers', (users: string[]) => {
+    newSocket.on('lobbyUsers', (users: UserPlayer[]) => {
       setUsers(users);
       console.log(users)
     });
@@ -57,9 +64,13 @@ const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
     setStage(n);
   };
 
+  const handlePartyCode = (n:string) => {
+    setPartyCode(n)
+  };
+
   return (
     <Container sx={{ mt: 9 }}>
-      {stage === 1 && <MenuMultiplayer socket={socket} handleCurrentStage={handleCurrentStage} />}
+      {stage === 1 && <MenuMultiplayer socket={socket} handleCurrentStage={handleCurrentStage} handlePartyCode={handlePartyCode}/>}
       {stage === 2 && <LobbyMultiPlayer socket={socket} handleCurrentStage={handleCurrentStage} partyCode={partyCode} users={users}/>}
     </Container>
   )

webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx

@@ -1,32 +1,33 @@
-import { FC, useEffect, useState } from 'react'
-import { SocketProps } from './GameMultiPlayer';
-import '../LobbyGame.css';
-import axios from 'axios';
+import { FC, useState } from 'react'
+import { SocketProps, UserPlayer } from './GameMultiPlayer';
+import '../LobbyGame.scss';
 
 interface LobbyMultiPlayerProps {
     socket: SocketProps;
     handleCurrentStage: (n: number) => void
     partyCode: string
-    users: string[]
+    users: UserPlayer[]
 }
 
 const LobbyMultiPlayer: FC<LobbyMultiPlayerProps> = ({socket, handleCurrentStage, partyCode, users}) => {
 
-  const [fetched, setFetched] = useState(false);
 
   // return <div>
   //   <p>Party code: {partyCode}</p>
   //   {users.map((user, index) => (
   //     <p key={index}>{user}</p>
   //   ))}
   // </div>
+  console.log(users)
   return (
     <div className='lobby-container'>
       <h2 className='lobby-title'>Lobby</h2>
       <p>Party code: {partyCode}</p>
       {users.map((player, index) => (
-        <div key={player} className='player-item'>
-          <p>Name: {player}</p>
+        <div key={player.uuid} className='player-item'>
+          <img src={"https://robohash.org/"+player.username+".png"} alt={player.uuid} />
+          <p>{player.username}</p>
+          <p>Points: {player.totalPoints}</p>
         </div>
       ))}
       <div className='button-container'>

webapp/src/components/game/multiplayer/MenuMultiplayer.tsx

@@ -1,27 +1,43 @@
 import { FC, useState } from 'react'
-import { SocketProps } from './GameMultiPlayer';
+import { SocketProps, UserPlayer } from './GameMultiPlayer';
 import './MenuMultiplayer.css'
 
 interface MenuMultiplayerProps {
   socket: SocketProps;
   handleCurrentStage: (n: number) => void
+  handlePartyCode: (n: string) => void
 }
 
-const MenuMultiplayer: FC<MenuMultiplayerProps> = ({socket, handleCurrentStage}) => {
+const MenuMultiplayer: FC<MenuMultiplayerProps> = ({socket, handleCurrentStage, handlePartyCode}) => {
 
     const username = localStorage.getItem('username');
+    const totalPoints = localStorage.getItem('score');
+    const uuid = localStorage.getItem('uuid');
     const [typedCode, setTypedCode] = useState<string>();
 
     const createParty = () => {
-        handleCurrentStage(2);
-        socket.emit('createParty', username);
+      handleCurrentStage(2);
+      const user: UserPlayer = {
+          username: username,
+          totalPoints: parseInt(totalPoints),
+          uuid: uuid,
+          isAdmin: true
+      }
+      socket.emit('createParty', user);
     };
 
     const joinParty = () => {
       console.log("Joining party...")
       console.log(typedCode)
       console.log(username)
-      socket.emit('joinParty', typedCode, username);
+      const user: UserPlayer = {
+        username: username,
+        totalPoints: parseInt(totalPoints),
+        uuid: uuid,
+        isAdmin: false
+      }
+      handlePartyCode(typedCode)
+      socket.emit('joinParty', typedCode, user);
     }
 
     return (