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"
function BurgerMenu({ onClick }: { onClick?: () => void }) {
function BurgerMenu({
onClick,
blur,
}: {
onClick?: () => void
blur?: boolean
}) {
return (
<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)}
>
<img

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>
)
}

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

@ -14,16 +14,16 @@ function Player({
edit?: boolean
}) {
return (
<div className="m-4 flex flex-col items-center">
<div className="flex w-96 flex-col items-center gap-16 py-8">
<p
className={classNames(
"font-farro my-8 text-5xl",
"font-farro text-5xl",
primary ? "font-semibold" : "font-normal"
)}
>
{text}
</p>
<div className="relative m-8">
<div className="relative">
<img className="pixelart w-64" src={"/assets/" + src} alt={src} />
{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">

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

@ -15,25 +15,20 @@ function Setting({
}
}) {
return (
<>
<label
htmlFor={key}
className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
>
<label className="flex items-center justify-between" htmlFor={key}>
<span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
{key}
</label>
<label
htmlFor={key}
className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
>
<FontAwesomeIcon
className={classNames(
"w-24 drop-shadow-md",
state ? "text-blue-500" : "text-gray-700"
)}
icon={state ? faToggleLargeOn : faToggleLargeOff}
/>
</label>
</span>
<FontAwesomeIcon
className={classNames(
"text-md mx-auto w-24 rounded-full px-4 drop-shadow-md transition-all",
state ? "text-blue-500" : "text-gray-800",
{
"bg-gray-300 ": state,
}
)}
icon={state ? faToggleLargeOn : faToggleLargeOff}
/>
<input
className="bg-none"
checked={state}
@ -42,7 +37,7 @@ function Setting({
onChange={onClick}
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 }) {
const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
return (
<div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-40">
<div className="relative mx-16 flex flex-col rounded-3xl border-4 border-zinc-700 bg-zinc-400 p-8">
<h1 className="font-farro text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
Settings
</h1>
<button
className="absolute top-6 right-6 h-14 w-14 "
onClick={closeSettings}
>
<FontAwesomeIcon
className="h-full w-full text-gray-700 drop-shadow-md"
icon={faXmark}
/>
</button>
<div className="relative m-8 rounded-xl bg-zinc-500 pt-16">
<button
className="absolute top-8 right-12 h-14 w-14"
onClick={() => setSettingOptions(settingOptionsInit)}
>
<FontAwesomeIcon
className="h-full w-full text-gray-700 drop-shadow-md"
icon={faRotateLeft}
/>
</button>
<div className="mr-32 grid grid-cols-3 items-center justify-items-start gap-4 p-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 className="absolute inset-0 flex flex-col items-center justify-center bg-black/40">
<div className="w-full max-w-screen-lg">
<div className="mx-16 flex flex-col rounded-3xl border-4 border-slate-800 bg-zinc-500 p-8">
<div className="flex items-center justify-center">
<h1 className="font-farro ml-auto pl-14 text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
Settings
</h1>
<button
className="top-6 right-6 ml-auto h-14 w-14"
onClick={closeSettings}
>
<FontAwesomeIcon
className="h-full w-full text-gray-800 drop-shadow-md"
icon={faXmark}
/>
</button>
</div>
<div className="mt-8 rounded-xl bg-zinc-600 p-8">
<div className="flex items-center justify-end">
<button
className="top-8 right-12 h-14 w-14"
onClick={() => setSettingOptions(settingOptionsInit)}
>
<FontAwesomeIcon
className="h-full w-full text-gray-800 drop-shadow-md"
icon={faRotateLeft}
/>
</button>
</div>
<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>

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

@ -1,35 +1,52 @@
import classNames from "classnames"
import React from "react"
function Logo() {
function Logo({ small }: { small?: boolean }) {
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">
<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>Ships</span>
</h1>
<Screws />
<Screws small={small} />
</div>
)
}
function Screws() {
function Screws({ small }: { small?: boolean }) {
return (
<>
<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]"
/>
<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]"
/>
<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]"
/>
<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]"
/>
</>
@ -39,20 +56,24 @@ function Screws() {
function Screw({
orientation,
rotation,
small,
}: {
orientation: string
rotation: string
small?: boolean
}) {
return (
<div
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
)}
>
<hr
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
)}
/>

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

@ -23,7 +23,7 @@ export default function Home() {
/>
</div>
<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)}
>
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 LobbyFrame from "../../components/Lobby/LobbyFrame"
import BurgerMenu from "../../components/BurgerMenu"
import { useState } from "react"
import Settings from "../../components/Lobby/SettingsFrame/Settings"
import classNames from "classnames"
export default function Home() {
const [settings, setSettings] = useState(false)
return (
<div id="box">
<div className="h-full bg-theme">
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Logo />
<BurgerMenu />
<LobbyFrame />
<div
className={classNames(
"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>
)
}