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

Use React Context as in the first place

Browse source
This commit is contained in:
aronmal 2023-04-26 13:49:15 +02:00
parent f97b3a622a
commit 2ed943857e
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 56 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,23 +4,21 @@ import useGameState from "@lib/hooks/useGameState"
import { Fragment, useEffect, useState } from "react"
function LobbyFrame({ openSettings }: { openSettings: () => void }) {
const { gameProps } = useGameState()
const { payload } = useGameState().gameProps
const [dots, setDots] = useState(1)
const { gamePin, player1, player2 } = gameProps.payload
useEffect(() => {
if (player2) return
if (payload?.player2) return
const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
return () => clearInterval(interval)
}, [player2])
}, [payload?.player2])
return (
<div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
<div className="flex items-center justify-between border-b-2 border-slate-900">
<Icon src="speech_bubble.png">Chat</Icon>
<h1 className="font-farro text-5xl font-medium">
Game-PIN: <span className="underline">{gamePin?.pin}</span>
Game-PIN: <span className="underline">{payload?.gamePin?.pin}</span>
</h1>
<Icon src="gear.png" onClick={openSettings}>
Settings
@ -29,13 +27,16 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
<div className="flex items-center justify-around">
<Player
src="player_blue.png"
text={player1?.name ?? "Spieler 1 (Du)"}
text={payload?.player1?.name ?? "Spieler 1 (Du)"}
primary={true}
edit={true}
/>
<p className="font-farro m-4 text-6xl font-semibold">VS</p>
{player2 ? (
<Player src="player_red.png" text={player2.name ?? "Spieler 2"} />
{payload?.player2 ? (
<Player
src="player_red.png"
text={payload?.player2.name ?? "Spieler 2"}
/>
) : (
<p className="font-farro w-96 text-center text-4xl font-medium">
Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}