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

Working real time lobby

Browse source
This commit is contained in:
aronmal 2023-05-13 15:03:12 +02:00
parent 61ae4b901d
commit f1ea064d4c
Signed by: aronmal
GPG key ID: 816B7707426FC612
13 changed files with 386 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,22 @@ import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useGameProps } from "@hooks/useGameProps"
import useSocket from "@hooks/useSocket"
import { socket } from "@lib/socket"
import { useSession } from "next-auth/react"
import { useRouter } from "next/router"
import { Fragment, useEffect, useState } from "react"
function LobbyFrame({ openSettings }: { openSettings: () => void }) {
const { payload } = useGameProps()
const { payload, full, leave, reset } = useGameProps()
const [dots, setDots] = useState(3)
const { isConnected } = useSocket()
const router = useRouter()
const { data: session } = useSession()
useEffect(() => {
if (payload?.game?.id || !isConnected) return
socket.emit("update", full)
}, [full, payload?.game?.id, isConnected])
useEffect(() => {
if (payload?.player2) return
@ -38,15 +46,15 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
<div className="flex items-center justify-around">
<Player
src="player_blue.png"
text={payload?.player1?.name ?? "Spieler 1 (Du)"}
primary={true}
edit={true}
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"
text={payload?.player2.name ?? "Spieler 2"}
player={payload?.player2}
userId={session?.user.id}
/>
) : (
<p className="font-farro w-96 text-center text-4xl font-medium">
@ -60,9 +68,17 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
</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"
onClick={() => router.push("/")}
className="font-farro mx-32 my-4 rounded-xl border-b-4 border-red-400 bg-red-500 px-12 py-4 text-5xl font-medium duration-100 active:border-t-4 active:border-b-0"
onClick={() => {
leave(async () => {
await router.push("/")
reset()
})
}}
>
LEAVE
</button>
<button className="font-farro mx-32 my-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>