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

Fairly responsive start page

Browse source
This commit is contained in:
aronmal 2023-02-12 02:17:06 +01:00
parent b486ab99c2
commit 9ce74a7227
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 59 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,13 @@
import React from "react"
function BurgerMenu({ onClick }: { onClick: () => void }) {
function BurgerMenu({ onClick }: { onClick?: () => void }) {
return (
<button
className="absolute top-4 left-4 flex h-10 w-10 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"
onClick={() => setTimeout(onClick, 200)}
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"
onClick={() => onClick && setTimeout(onClick, 200)}
>
<img
className="pixelart h-8 w-8"
className="pixelart h-12 w-12 md:h-16 md:w-16 xl:h-20 xl:w-20"
src="/assets/burger-menu.png"
alt="Burger Menu"
/>

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

@ -3,11 +3,10 @@ import React from "react"
function Logo() {
return (
<div className="relative flex items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray">
<h1 className="font-checkpoint mx-16 my-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest">
Leaky
<br />
Ships
<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">
<span>Leaky</span>
<span>Ships</span>
</h1>
<Screws />
</div>
@ -17,10 +16,22 @@ function Logo() {
function Screws() {
return (
<>
<Screw orientation="top-1 left-1" rotation="rotate-[135deg]" />
<Screw orientation="top-1 right-1" rotation="rotate-[5deg]" />
<Screw orientation="bottom-1 right-1" rotation="rotate-[150deg]" />
<Screw orientation="bottom-1 left-1" rotation="rotate-[20deg]" />
<Screw
orientation="top-1 left-1 sm:top-2 sm:left-2 xl:top-4 xl:left-4"
rotation="rotate-[135deg]"
/>
<Screw
orientation="top-1 right-1 sm:top-2 sm:right-2 xl:top-4 xl:right-4"
rotation="rotate-[5deg]"
/>
<Screw
orientation="bottom-1 right-1 sm:bottom-2 sm:right-2 xl:bottom-4 xl:right-4"
rotation="rotate-[150deg]"
/>
<Screw
orientation="bottom-1 left-1 sm:bottom-2 sm:left-2 xl:bottom-4 xl:left-4"
rotation="rotate-[20deg]"
/>
</>
)
}
@ -35,11 +46,16 @@ function Screw({
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",
"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",
orientation
)}
>
<hr className={classNames("color w-full border-neutral-500", rotation)} />
<hr
className={classNames(
"color w-full border-neutral-500 sm:border-t-2 xl:border-t-4",
rotation
)}
/>
</div>
)
}

9
leaky-ships/components/OptionButton.tsx
View file

@ -15,11 +15,14 @@ function OptionButton({
}) {
return (
<button
className="flex w-full flex-row items-center justify-between rounded-lg border-2 border-black bg-voidDark py-4 pr-8 pl-16 text-4xl text-grayish first:mt-8 last:mt-8"
onClick={action}
className="flex w-full flex-row items-center justify-between rounded-xl border-b-4 border-shield-gray bg-voidDark py-2 pr-4 pl-8 text-lg text-grayish duration-100 first:mt-4 last:mt-4 active:border-t-4 active:border-b-0 sm:py-4 sm:pr-8 sm:pl-16 sm:text-4xl sm:first:mt-8 sm:last:mt-8"
onClick={() => action && setTimeout(action, 200)}
>
<span className="mx-auto">{children}</span>
<FontAwesomeIcon className="ml-12 w-10 text-4xl" icon={icon} />
<FontAwesomeIcon
className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
icon={icon}
/>
</button>
)
}

1
leaky-ships/pages/_app.tsx
View file

@ -1,7 +1,6 @@
import "../styles/App.scss"
import "../styles/grid.scss"
import "../styles/grid2.scss"
import "../styles/homepage.scss"
import "../styles/globals.css"
import type { AppProps } from "next/app"

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

@ -11,30 +11,33 @@ export default function Home() {
const [heWantsToPlay, setHeWantsToPlay] = useState<boolean | null>(false)
return (
<div className="h-full bg-theme">
<BurgerMenu />
<div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly">
<Logo />
<BurgerMenu />
{!heWantsToPlay ? (
<>
<div className="transition-color flex h-32 w-64 max-w-screen-sm items-center justify-center rounded-xl border-4 border-black bg-[#2227] duration-200">
<FontAwesomeIcon className="text-6xl" icon={faCirclePlay} />
<div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] lg:h-[18rem] lg:w-[32rem] lg:border-[6px] xl:h-[26rem] xl:w-[48rem]">
<FontAwesomeIcon
className="text-6xl lg:text-8xl"
icon={faCirclePlay}
/>
</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"
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 xl:rounded-2xl xl:border-b-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl xl:active:border-t-8"
onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
>
START
</button>
</>
) : (
<div className="gap flex w-full flex-col items-center rounded-xl border-4 border-black bg-grayish p-12 shadow-lg">
<div className="flex flex-col items-center rounded-xl border-4 border-black bg-grayish px-4 py-6 shadow-lg sm:mx-8 sm:p-12 md:w-full">
<button
className="mt-[-1.5rem] w-40 self-start rounded-lg border-2 border-black bg-voidDark px-2 text-5xl text-grayish"
onClick={() => setHeWantsToPlay(false)}
className="-mt-2 w-20 self-start rounded-xl border-b-4 border-shield-gray bg-voidDark text-2xl text-grayish duration-100 active:border-t-4 active:border-b-0 sm:-mt-6 sm:w-40 sm:px-2 sm:text-5xl"
onClick={() => setTimeout(() => setHeWantsToPlay(false), 200)}
>
<FontAwesomeIcon icon={faLeftLong} />
</button>
<div className="flex flex-col items-center gap-12">
<div className="flex flex-col items-center gap-6 sm:gap-12">
<OptionButton icon={faPlus}>Raum erstellen</OptionButton>
<OptionButton icon={faUserPlus}>Raum beitreten</OptionButton>
<OptionButton icon={faEye}>Zuschauen</OptionButton>

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

@ -12,8 +12,8 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<BurgerMenu />
<Logo />
<BurgerMenu />
<LobbyFrame />
</div>
)

10
leaky-ships/styles/globals.css
View file

@ -21,3 +21,13 @@
.font-checkpoint {
font-family: "CP_Font", sans-serif;
}
button {
cursor: none;
}
@media (pointer: fine) {
button {
cursor: pointer;
}
}

330
leaky-ships/styles/homepage.scss
View file

@ -1,330 +0,0 @@
@use "./mixins/display" as *;
@use "./mixins/effects" as *;
@use "./mixins/CP_Font" as *;
@import "./mixins/variables";
@import url("https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap");
#box {
min-height: 100%;
background-color: #282c34;
@include flex-col;
align-items: center;
justify-content: space-around;
#navExpand {
@include flex;
align-items: center;
justify-content: center;
position: absolute;
top: 64px;
left: 64px;
width: 96px;
height: 96px;
background-color: $grayish;
border-radius: 8px;
box-shadow: 0 0 2px 2px #0008 inset;
#burgerMenu {
@include pixelart;
height: 84px;
width: 84px;
}
}
#shield {
@include flex-row;
justify-content: center;
height: 250px;
width: 700px;
background-image: url("/assets/shield.png");
background-repeat: no-repeat;
background-size: contain;
#width {
@include flex-col;
justify-content: space-between;
h1 {
@include CP_Font;
margin: 3%;
width: 100%;
text-align: center;
font-size: 5.8em;
letter-spacing: 6px;
&:first-child {
border-top: 5px solid black;
}
&:last-child {
border-bottom: 5px solid black;
}
}
}
}
#videoWrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 350px;
width: 700px;
background-color: #2227;
border: 4px solid black;
border-radius: 8px;
svg {
font-size: 6em;
color: #231f20;
path {
stroke: black;
stroke-width: 2px;
stroke-linejoin: round;
}
}
}
#startButton {
font-family: "Farro", sans-serif;
font-weight: bold;
font-size: 3em;
color: black;
background-color: $warn;
border: none;
border-radius: 8px;
padding: calc(2rem + 8px) 6rem 2rem 6rem;
}
#startBox {
display: flex;
flex-direction: column;
align-items: center;
background-color: $grayish;
box-shadow: 0 0 2px 2px #fffb inset, 0 0 2px 2px #fff2;
border: 4px solid black;
padding: 3rem;
border-radius: 8px;
min-width: 60vw;
gap: 2rem;
#back {
font-size: 3em;
color: $grayish;
align-self: flex-start;
background-color: #000c;
border: none;
border-radius: 8px;
padding: 0 0.5rem;
margin-top: -1.5rem;
width: 10rem;
box-shadow: 0 0 2px 2px #fff6 inset;
border: 2px solid #000c;
}
#sameWidth {
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
.optionButton {
@include flex-row;
justify-content: space-between;
align-items: center;
font-size: 2.5em;
color: $grayish;
background-color: #000c;
border: none;
border-radius: 8px;
padding: 1rem 2rem 1rem 4rem;
width: 100%;
box-shadow: 0 0 2px 2px #fff6 inset;
border: 2px solid #000c;
&:last-child {
margin-top: 2rem;
}
span {
margin: 0 auto;
}
svg {
margin-left: 3rem;
font-size: 2em;
width: 2.5rem;
height: inherit;
}
}
}
}
}
@media (max-width: 2000px) {
#box {
#shield {
height: 200px;
width: 560px;
#width {
h1 {
font-size: 4.5em;
letter-spacing: 4px;
&:first-child {
border-top: 4px solid black;
}
&:last-child {
border-bottom: 4px solid black;
}
}
}
}
}
}
@media (max-width: 1000px) {
#box {
#navExpand {
top: 32px;
left: 32px;
width: 80px;
height: 80px;
#burgerMenu {
height: 64px;
width: 64px;
}
}
#shield {
height: 160px;
width: 450px;
#width {
h1 {
font-size: 3.6em;
letter-spacing: 3px;
&:first-child {
border-top: 3px solid black;
}
&:last-child {
border-bottom: 3px solid black;
}
}
}
}
#videoWrapper {
height: 300px;
width: 600px;
}
}
}
@media (max-width: 700px) {
#box {
justify-content: space-evenly;
#navExpand {
top: 16px;
left: 16px;
width: 64px;
height: 64px;
#burgerMenu {
height: 44px;
width: 44px;
}
}
#shield {
height: 100px;
width: 280px;
#width {
h1 {
font-size: 2.2em;
letter-spacing: 2px;
&:first-child {
border-top: 2px solid black;
}
&:last-child {
border-bottom: 2px solid black;
}
}
}
}
#videoWrapper {
height: 250px;
width: 450px;
svg {
font-size: 4em;
}
}
#startButton {
font-size: 2em;
padding: calc(1rem + 8px) 3rem 1rem 3rem;
}
#startBox {
max-width: 90vw;
padding: 2rem;
#back {
margin-top: -1rem;
font-size: 2em;
width: 7rem;
padding: 0.125rem;
}
#sameWidth {
max-width: 100%;
.optionButton {
font-size: 2em;
padding: 1rem 2rem;
svg {
margin-left: 2rem;
font-size: 1.5em;
width: 2rem;
}
}
}
}
}
}
@media (max-width: 500px) {
#box {
#videoWrapper {
height: 150px;
width: 300px;
}
#startBox {
#sameWidth {
.optionButton {
font-size: 1.5em;
svg {
margin-left: 1rem;
font-size: 1em;
}
}
}
}
}
}