diff --git a/webapp/src/components/game/LobbyGame.css b/webapp/src/components/game/LobbyGame.css deleted file mode 100644 index fbfceca..0000000 --- a/webapp/src/components/game/LobbyGame.css +++ /dev/null @@ -1,20 +0,0 @@ - - - -/** Deprecated**/ - - - - .player-item { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - border-bottom: 1px solid #eee; - padding: 10px; - } - - - - - \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.scss b/webapp/src/components/game/LobbyGame.scss index 581e59c..7cc5db5 100644 --- a/webapp/src/components/game/LobbyGame.scss +++ b/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 { diff --git a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx b/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx index e57da9b..65e66e4 100644 --- a/webapp/src/components/game/multiplayer/GameMultiPlayer.tsx +++ b/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 = ({}) => { const SERVER_URL = 'http://localhost:8006'; @@ -21,7 +28,7 @@ const GameMultiPlayer: FC = ({}) => { const [socket, setSocket] = useState(null); const [stage, setStage] = useState(1) const [partyCode, setPartyCode] = useState(""); - const [users, setUsers] = useState([]); + const [users, setUsers] = useState([]); useEffect(() => { const newSocket = io(SERVER_URL); @@ -30,16 +37,16 @@ const GameMultiPlayer: FC = ({}) => { 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 = ({}) => { setStage(n); }; + const handlePartyCode = (n:string) => { + setPartyCode(n) + }; + return ( - {stage === 1 && } + {stage === 1 && } {stage === 2 && } ) diff --git a/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx b/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx index 5d8ed85..3dddc51 100644 --- a/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx +++ b/webapp/src/components/game/multiplayer/LobbyMultiPlayer.tsx @@ -1,18 +1,16 @@ -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 = ({socket, handleCurrentStage, partyCode, users}) => { - const [fetched, setFetched] = useState(false); // return
//

Party code: {partyCode}

@@ -20,13 +18,16 @@ const LobbyMultiPlayer: FC = ({socket, handleCurrentStage //

{user}

// ))} //
+ console.log(users) return (

Lobby

Party code: {partyCode}

{users.map((player, index) => ( -
-

Name: {player}

+
+ {player.uuid} +

{player.username}

+

Points: {player.totalPoints}

))}
diff --git a/webapp/src/components/game/multiplayer/MenuMultiplayer.tsx b/webapp/src/components/game/multiplayer/MenuMultiplayer.tsx index 1e57bc7..c22dbcb 100644 --- a/webapp/src/components/game/multiplayer/MenuMultiplayer.tsx +++ b/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 = ({socket, handleCurrentStage}) => { +const MenuMultiplayer: FC = ({socket, handleCurrentStage, handlePartyCode}) => { const username = localStorage.getItem('username'); + const totalPoints = localStorage.getItem('score'); + const uuid = localStorage.getItem('uuid'); const [typedCode, setTypedCode] = useState(); 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 (