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

Mobile sizeed start screen

Browse source
This commit is contained in:
aronmal 2023-02-11 20:30:55 +01:00
parent 3c6acb5597
commit b486ab99c2
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,13 @@
import React from "react"
function BurgerMenu() {
function BurgerMenu({ onClick }: { onClick: () => void }) {
return (
<button className="absolute top-16 left-16 flex h-24 w-24 items-center justify-center rounded-lg bg-grayish">
<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)}
>
<img
className="pixelart h-20 w-20"
className="pixelart h-8 w-8"
src="/assets/burger-menu.png"
alt="Burger Menu"
/>

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

@ -3,8 +3,8 @@ import React from "react"
function Logo() {
return (
<div className="relative flex items-center rounded-sm border-x-8 border-y-4 border-shield-gray bg-shield-lightgray">
<h1 className="font-checkpoint my-4 mx-36 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
<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
@ -17,10 +17,10 @@ function Logo() {
function Screws() {
return (
<>
<Screw orientation="top-3 left-3" rotation="rotate-[135deg]" />
<Screw orientation="top-3 right-3" rotation="rotate-[5deg]" />
<Screw orientation="bottom-3 right-3" rotation="rotate-[150deg]" />
<Screw orientation="bottom-3 left-3" rotation="rotate-[20deg]" />
<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]" />
</>
)
}
@ -35,7 +35,7 @@ function Screw({
return (
<div
className={classNames(
"absolute flex h-6 w-6 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",
orientation
)}
>

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

@ -12,15 +12,15 @@ export default function Home() {
return (
<div className="h-full bg-theme">
<BurgerMenu />
<div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-around">
<div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly">
<Logo />
{!heWantsToPlay ? (
<>
<div className="transition-color flex h-full max-h-80 w-full max-w-screen-sm items-center justify-center rounded-xl border-4 border-black bg-[#2227] duration-200">
<FontAwesomeIcon className="text-8xl" icon={faCirclePlay} />
<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>
<button
className="font-farro transition-color rounded-2xl border-b-8 border-orange-400 bg-warn px-24 pt-10 pb-8 text-5xl font-bold duration-100 active:border-t-8 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"
onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
>
START