aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added userState (isReady and isConnection)

Browse source
This commit is contained in:
aronmal 2023-06-02 12:40:51 +02:00
parent 29cb4a279d
commit 63fc8c56bf
Signed by: aronmal
GPG key ID: 816B7707426FC612
13 changed files with 311 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

38
leaky-ships/components/Lobby/LobbyFrame.tsx
View file

@ -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 }) {
</Icon>
</div>
<div className="flex items-center justify-around">
<Player
src="player_blue.png"
player={payload?.player1}
userId={session?.user.id}
/>
<p className="font-farro m-4 text-6xl font-semibold">VS</p>
{payload?.player2 ? (
<Player
src="player_red.png"
player={payload?.player2}
userId={session?.user.id}
/>
{isConnected ? (
<>
<Player src="player_blue.png" i={0} userId={session?.user.id} />
<p className="font-farro m-4 text-6xl font-semibold">VS</p>
{payload?.users[1] ? (
<Player src="player_red.png" i={1} userId={session?.user.id} />
) : (
<p className="font-farro w-96 text-center text-4xl font-medium">
<WithDots>Warte auf Spieler 2</WithDots>
</p>
)}
</>
) : (
<p className="font-farro w-96 text-center text-4xl font-medium">
<WithDots>
{"Warte auf " + (isConnected ? "Spieler 2" : "Verbindung")}
</WithDots>
<p className="font-farro m-48 text-center text-6xl font-medium">
Warte auf Verbindung
</p>
)}
</div>