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

Better Lobby

Browse source
This commit is contained in:
aronmal 2023-02-12 17:50:19 +01:00
parent d2594f51d5
commit 38f6d5eca9
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 123 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,10 @@
import { useEffect, useState } from "react"
import Settings from "./SettingsFrame/Settings"
import { Fragment, useEffect, useState } from "react"
import Icon from "./Icon"
import Player from "./Player"
function LobbyFrame() {
const [settings, setSettings] = useState(false)
function LobbyFrame({ openSettings }: { openSettings: () => void }) {
const [enemy, setEnemy] = useState(false)
const [dots, setDots] = useState(0)
const [dots, setDots] = useState(1)
useEffect(() => {
if (enemy) return
@ -21,7 +19,7 @@ function LobbyFrame() {
<h1 className="font-farro text-5xl font-medium">
Game-PIN: <span className="underline">3169</span>
</h1>
<Icon src="gear.png" onClick={() => setSettings(true)}>
<Icon src="gear.png" onClick={openSettings}>
Settings
</Icon>
</div>
@ -41,17 +39,19 @@ function LobbyFrame() {
{enemy ? (
<Player src="player_red.png" text="Spieler 2" />
) : (
<p className="font-farro m-12 w-64 text-center text-5xl font-medium">
<p className="font-farro w-96 text-center text-5xl font-medium">
Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
{Array.from(Array(3 - dots), (_, i) => (
<Fragment key={i}>&nbsp;</Fragment>
))}
</p>
)}
</div>
<div className="flex items-center justify-center border-t-2 border-slate-900">
<button className="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
<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>
{settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
</div>
)
}