61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import Icon from "./Icon"
|
|
import Player from "./Player"
|
|
import useGameState from "@lib/hooks/useGameState"
|
|
import useSocket from "@lib/hooks/useSocket"
|
|
import { Fragment, useEffect, useState } from "react"
|
|
|
|
function LobbyFrame({ openSettings }: { openSettings: () => void }) {
|
|
const { payload } = useGameState().gameProps
|
|
useSocket()
|
|
const [dots, setDots] = useState(1)
|
|
|
|
useEffect(() => {
|
|
if (payload?.player2) return
|
|
const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
|
|
return () => clearInterval(interval)
|
|
}, [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">{payload?.gamePin?.pin ?? "---"}</span>
|
|
</h1>
|
|
<Icon src="gear.png" onClick={openSettings}>
|
|
Settings
|
|
</Icon>
|
|
</div>
|
|
<div className="flex items-center justify-around">
|
|
<Player
|
|
src="player_blue.png"
|
|
text={payload?.player1?.name ?? "Spieler 1 (Du)"}
|
|
primary={true}
|
|
edit={true}
|
|
/>
|
|
<p className="font-farro m-4 text-6xl font-semibold">VS</p>
|
|
{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("")}
|
|
{Array.from(Array(3 - dots), (_, i) => (
|
|
<Fragment key={i}> </Fragment>
|
|
))}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-center border-t-2 border-slate-900">
|
|
<button className="font-farro m-4 rounded-xl border-b-4 border-orange-400 bg-warn px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0">
|
|
START
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LobbyFrame
|