diff --git a/leaky-ships/components/Lobby/LobbyFrame.tsx b/leaky-ships/components/Lobby/LobbyFrame.tsx index f0c92f4..6c15900 100644 --- a/leaky-ships/components/Lobby/LobbyFrame.tsx +++ b/leaky-ships/components/Lobby/LobbyFrame.tsx @@ -33,15 +33,17 @@ function WithDots({ children }: { children: ReactNode }) { } function LobbyFrame({ openSettings }: { openSettings: () => void }) { - const { payload, full, leave, reset } = useGameProps() + const { payload, userStates, full, leave, reset } = useGameProps() const { isConnected } = useSocket() const router = useRouter() const { data: session } = useSession() const [launchTime, setLaunchTime] = useState(3) const launching = useMemo( - () => payload?.player1?.isReady && payload?.player2?.isReady, - [payload?.player1?.isReady, payload?.player2?.isReady] + () => + payload?.users.length === 2 && + !userStates.filter((user) => !user.isReady).length, + [payload?.users.length, userStates] ) useEffect(() => { @@ -88,23 +90,21 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
- -

VS

- {payload?.player2 ? ( - + {isConnected ? ( + <> + +

VS

+ {payload?.users[1] ? ( + + ) : ( +

+ Warte auf Spieler 2 +

+ )} + ) : ( -

- - {"Warte auf " + (isConnected ? "Spieler 2" : "Verbindung")} - +

+ Warte auf Verbindung

)}
diff --git a/leaky-ships/components/Lobby/Player.tsx b/leaky-ships/components/Lobby/Player.tsx index 6ea88fe..35e28db 100644 --- a/leaky-ships/components/Lobby/Player.tsx +++ b/leaky-ships/components/Lobby/Player.tsx @@ -11,7 +11,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons" import { useGameProps } from "@hooks/useGameProps" import { socket } from "@lib/socket" -import { PlayerSchema } from "@lib/zodSchemas" import classNames from "classnames" import { CSSProperties, useEffect, useMemo, useState } from "react" @@ -45,17 +44,19 @@ function HourGlass() { function Player({ src, - player, + i, userId, }: { src: string - player?: PlayerSchema + i: number userId?: string }) { - const { setIsReady } = useGameProps() + const { payload, userStates, setIsReady } = useGameProps() + const player = useMemo(() => payload?.users[i], [i, payload?.users]) + const { isReady, isConnected } = useMemo(() => userStates[i], [i, userStates]) const primary = useMemo( - () => userId && userId === player?.id, - [player?.id, userId] + () => userId && userId === payload?.users[i]?.id, + [i, payload?.users, userId] ) return ( @@ -66,7 +67,7 @@ function Player({ primary ? "font-semibold" : "font-normal" )} > - {player?.name ?? "Spieler " + (player?.index === "player2" ? "2" : "1")} + {player?.name ?? "Spieler " + (player?.index === 2 ? "2" : "1")}

{src} @@ -82,21 +83,22 @@ function Player({ )}