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")}

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