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

14
leaky-ships/components/BurgerMenu.tsx
View file

@ -1,9 +1,19 @@
import classNames from "classnames"
import React from "react" import React from "react"
function BurgerMenu({ onClick }: { onClick?: () => void }) { function BurgerMenu({
onClick,
blur,
}: {
onClick?: () => void
blur?: boolean
}) {
return ( return (
<button <button
className="absolute top-4 left-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0 md:top-6 md:left-6 md:h-20 md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24" className={classNames(
"absolute top-4 left-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0 md:top-6 md:left-6 md:h-20 md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24",
{ "blur-sm": blur }
)}
onClick={() => onClick && setTimeout(onClick, 200)} onClick={() => onClick && setTimeout(onClick, 200)}
> >
<img <img

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

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

6
leaky-ships/components/Lobby/Player.tsx
View file

@ -14,16 +14,16 @@ function Player({
edit?: boolean edit?: boolean
}) { }) {
return ( return (
<div className="m-4 flex flex-col items-center"> <div className="flex w-96 flex-col items-center gap-16 py-8">
<p <p
className={classNames( className={classNames(
"font-farro my-8 text-5xl", "font-farro text-5xl",
primary ? "font-semibold" : "font-normal" primary ? "font-semibold" : "font-normal"
)} )}
> >
{text} {text}
</p> </p>
<div className="relative m-8"> <div className="relative">
<img className="pixelart w-64" src={"/assets/" + src} alt={src} /> <img className="pixelart w-64" src={"/assets/" + src} alt={src} />
{edit ? ( {edit ? (
<button className="absolute top-4 right-4 h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90"> <button className="absolute top-4 right-4 h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90">

33
leaky-ships/components/Lobby/SettingsFrame/Setting.tsx
View file

@ -15,25 +15,20 @@ function Setting({
} }
}) { }) {
return ( return (
<> <label className="flex items-center justify-between" htmlFor={key}>
<label <span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
htmlFor={key}
className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
>
{key} {key}
</label> </span>
<label <FontAwesomeIcon
htmlFor={key} className={classNames(
className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""} "text-md mx-auto w-24 rounded-full px-4 drop-shadow-md transition-all",
> state ? "text-blue-500" : "text-gray-800",
<FontAwesomeIcon {
className={classNames( "bg-gray-300 ": state,
"w-24 drop-shadow-md", }
state ? "text-blue-500" : "text-gray-700" )}
)} icon={state ? faToggleLargeOn : faToggleLargeOff}
icon={state ? faToggleLargeOn : faToggleLargeOff} />
/>
</label>
<input <input
className="bg-none" className="bg-none"
checked={state} checked={state}
@ -42,7 +37,7 @@ function Setting({
onChange={onClick} onChange={onClick}
hidden={true} hidden={true}
/> />
</> </label>
) )
} }

68
leaky-ships/components/Lobby/SettingsFrame/Settings.tsx
View file

@ -14,37 +14,43 @@ const settingOptionsInit: { [key: string]: boolean } = {
function Settings({ closeSettings }: { closeSettings: () => void }) { function Settings({ closeSettings }: { closeSettings: () => void }) {
const [settingOptions, setSettingOptions] = useState(settingOptionsInit) const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
return ( return (
<div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-40"> <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40">
<div className="relative mx-16 flex flex-col rounded-3xl border-4 border-zinc-700 bg-zinc-400 p-8"> <div className="w-full max-w-screen-lg">
<h1 className="font-farro text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg"> <div className="mx-16 flex flex-col rounded-3xl border-4 border-slate-800 bg-zinc-500 p-8">
Settings <div className="flex items-center justify-center">
</h1> <h1 className="font-farro ml-auto pl-14 text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
<button Settings
className="absolute top-6 right-6 h-14 w-14 " </h1>
onClick={closeSettings} <button
> className="top-6 right-6 ml-auto h-14 w-14"
<FontAwesomeIcon onClick={closeSettings}
className="h-full w-full text-gray-700 drop-shadow-md" >
icon={faXmark} <FontAwesomeIcon
/> className="h-full w-full text-gray-800 drop-shadow-md"
</button> icon={faXmark}
<div className="relative m-8 rounded-xl bg-zinc-500 pt-16"> />
<button </button>
className="absolute top-8 right-12 h-14 w-14" </div>
onClick={() => setSettingOptions(settingOptionsInit)} <div className="mt-8 rounded-xl bg-zinc-600 p-8">
> <div className="flex items-center justify-end">
<FontAwesomeIcon <button
className="h-full w-full text-gray-700 drop-shadow-md" className="top-8 right-12 h-14 w-14"
icon={faRotateLeft} onClick={() => setSettingOptions(settingOptionsInit)}
/> >
</button> <FontAwesomeIcon
<div className="mr-32 grid grid-cols-3 items-center justify-items-start gap-4 p-8"> className="h-full w-full text-gray-800 drop-shadow-md"
{Object.keys(settingOptions).map((key) => { icon={faRotateLeft}
const state = settingOptions[key] />
const onClick = () => </button>
setSettingOptions((e) => ({ ...e, [key]: !e[key] })) </div>
return <Setting key={key} props={{ key, state, onClick }} /> <div className="flex flex-col gap-8">
})} {Object.keys(settingOptions).map((key) => {
const state = settingOptions[key]
const onClick = () =>
setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
return <Setting key={key} props={{ key, state, onClick }} />
})}
</div>
</div> </div>
</div> </div>
</div> </div>

41
leaky-ships/components/Logo.tsx
View file

@ -1,35 +1,52 @@
import classNames from "classnames" import classNames from "classnames"
import React from "react" import React from "react"
function Logo() { function Logo({ small }: { small?: boolean }) {
return ( return (
<div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4"> <div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4">
<h1 className="font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl xl:gap-6 xl:py-2 xl:text-6xl"> <h1
className={classNames(
"font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl",
{ "xl:gap-6 xl:py-2 xl:text-6xl": !small }
)}
>
<span>Leaky</span> <span>Leaky</span>
<span>Ships</span> <span>Ships</span>
</h1> </h1>
<Screws /> <Screws small={small} />
</div> </div>
) )
} }
function Screws() { function Screws({ small }: { small?: boolean }) {
return ( return (
<> <>
<Screw <Screw
orientation="top-1 left-1 sm:top-2 sm:left-2 xl:top-4 xl:left-4" small={small}
orientation={classNames("top-1 left-1 sm:top-2 sm:left-2", {
"xl:top-4 xl:left-4": !small,
})}
rotation="rotate-[135deg]" rotation="rotate-[135deg]"
/> />
<Screw <Screw
orientation="top-1 right-1 sm:top-2 sm:right-2 xl:top-4 xl:right-4" small={small}
orientation={classNames("top-1 right-1 sm:top-2 sm:right-2", {
"xl:top-4 xl:right-4": !small,
})}
rotation="rotate-[5deg]" rotation="rotate-[5deg]"
/> />
<Screw <Screw
orientation="bottom-1 right-1 sm:bottom-2 sm:right-2 xl:bottom-4 xl:right-4" small={small}
orientation={classNames("bottom-1 right-1 sm:bottom-2 sm:right-2", {
"xl:bottom-4 xl:right-4": !small,
})}
rotation="rotate-[150deg]" rotation="rotate-[150deg]"
/> />
<Screw <Screw
orientation="bottom-1 left-1 sm:bottom-2 sm:left-2 xl:bottom-4 xl:left-4" small={small}
orientation={classNames("bottom-1 left-1 sm:bottom-2 sm:left-2", {
"xl:bottom-4 xl:left-4": !small,
})}
rotation="rotate-[20deg]" rotation="rotate-[20deg]"
/> />
</> </>
@ -39,20 +56,24 @@ function Screws() {
function Screw({ function Screw({
orientation, orientation,
rotation, rotation,
small,
}: { }: {
orientation: string orientation: string
rotation: string rotation: string
small?: boolean
}) { }) {
return ( return (
<div <div
className={classNames( className={classNames(
"absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6 xl:h-8 xl:w-8", "absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6",
{ "xl:h-8 xl:w-8": !small },
orientation orientation
)} )}
> >
<hr <hr
className={classNames( className={classNames(
"color w-full border-neutral-500 sm:border-t-2 xl:border-t-4", "color w-full border-neutral-500 sm:border-t-2",
{ "xl:border-t-4": !small },
rotation rotation
)} )}
/> />

2
leaky-ships/pages/dev/index.tsx
View file

@ -23,7 +23,7 @@ export default function Home() {
/> />
</div> </div>
<button <button
className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl" className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)} onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
> >
START START

20
leaky-ships/pages/dev/lobby.tsx
View file

@ -2,19 +2,31 @@ import Head from "next/head"
import Logo from "../../components/Logo" import Logo from "../../components/Logo"
import LobbyFrame from "../../components/Lobby/LobbyFrame" import LobbyFrame from "../../components/Lobby/LobbyFrame"
import BurgerMenu from "../../components/BurgerMenu" import BurgerMenu from "../../components/BurgerMenu"
import { useState } from "react"
import Settings from "../../components/Lobby/SettingsFrame/Settings"
import classNames from "classnames"
export default function Home() { export default function Home() {
const [settings, setSettings] = useState(false)
return ( return (
<div id="box"> <div className="h-full bg-theme">
<Head> <Head>
<title>Create Next App</title> <title>Create Next App</title>
<meta name="description" content="Generated by create next app" /> <meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Logo /> <div
<BurgerMenu /> className={classNames(
<LobbyFrame /> "mx-auto flex h-full max-w-screen-2xl flex-col items-center justify-evenly",
{ "blur-sm": settings }
)}
>
<Logo small={true} />
<LobbyFrame openSettings={() => setSettings(true)} />
</div>
<BurgerMenu blur={settings} />
{settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
</div> </div>
) )
} }