From 63fc8c56bfe7add86728e19b7d8be25cb92cf9ef Mon Sep 17 00:00:00 2001
From: aronmal
Date: Fri, 2 Jun 2023 12:40:51 +0200
Subject: [PATCH] Added userState (isReady and isConnection)
---
leaky-ships/components/Lobby/LobbyFrame.tsx | 38 ++--
leaky-ships/components/Lobby/Player.tsx | 28 +--
leaky-ships/hooks/useGameProps.ts | 55 +++--
leaky-ships/hooks/useSocket.ts | 81 +++++--
leaky-ships/interfaces/NextApiSocket.ts | 38 +++-
leaky-ships/lib/getPayloadwithChecksum.ts | 3 +-
leaky-ships/lib/zodSchemas.ts | 42 ++--
leaky-ships/pages/api/game/create.ts | 2 +-
leaky-ships/pages/api/game/join.ts | 2 +-
leaky-ships/pages/api/game/running.ts | 17 +-
leaky-ships/pages/api/ws.ts | 104 ++++-----
leaky-ships/prisma/generated/zod/index.ts | 234 ++++++--------------
leaky-ships/prisma/schema.prisma | 25 +--
13 files changed, 311 insertions(+), 358 deletions(-)
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({
)}