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

Lobby improvement in many ways

Browse source 
- using button instead of div
- shield styled with tailwindcss
- implement Head for initial-scale
- Player component with reworked edit button
This commit is contained in:
aronmal 2023-02-08 14:17:03 +01:00
parent 2e0966aa49
commit 41d5f2d138
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 54 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
import classNames from "classnames"
import Head from "next/head"
import { useEffect, useState } from "react"
export default function Home() {
@ -15,13 +16,22 @@ export default function Home() {
return (
<div id="box">
<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>
<button id="navExpand">
<img id="burgerMenu" src="/assets/burger-menu.png" alt="Burger Menu" />
</button>
<div id="shield">
<div id="width">
<h1>Leaky</h1>
<h1>Ships</h1>
<div className="flex flex-row bg-shield-gray bg-[url('/assets/shield.png')] bg-cover bg-no-repeat">
<div className="flex flex-col items-center justify-between">
<h1 className="CP_Font my-4 mx-32 border-y-4 border-slate-900 text-center text-6xl leading-tight tracking-widest">
Leaky
<br />
Ships
</h1>
</div>
</div>
<div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
@ -33,7 +43,12 @@ export default function Home() {
<Icon src="gear.png" text="Settings" />
</div>
<div className="flex items-center justify-around">
<Player src="player_blue.png" text="Spieler 1 (Du)" primary={true} />
<Player
src="player_blue.png"
text="Spieler 1 (Du)"
primary={true}
edit={true}
/>
<p
className="farro m-4 text-6xl font-semibold"
onClick={() => setEnemy((e) => !e)}
@ -41,7 +56,7 @@ export default function Home() {
VS
</p>
{enemy ? (
<Player src="player_red.png" text="Spieler 2" primary={false} />
<Player src="player_red.png" text="Spieler 2" />
) : (
<p className="farro m-12 w-64 text-center text-5xl font-medium">
Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
@ -60,24 +75,26 @@ export default function Home() {
function Icon({ src, text }: { src: string; text: string }) {
return (
<div className="mx-4 mt-4 flex flex-col items-center">
<button className="mx-4 mt-4 flex flex-col items-center border-none">
<img
className="pixelart mb-1 box-content w-16 rounded-xl bg-white p-1"
src={"/assets/" + src}
alt={src}
/>
<span className="font-semibold">{text}</span>
</div>
</button>
)
}
function Player({
src,
text,
primary,
edit,
}: {
src: string
text: string
primary: boolean
primary?: boolean
edit?: boolean
}) {
return (
<div className="m-4 flex flex-col items-center">
@ -91,10 +108,16 @@ function Player({
</p>
<div className="relative m-8">
<img className="pixelart w-64" src={"/assets/" + src} alt={src} />
<FontAwesomeIcon
className="absolute top-4 right-4 h-14 w-14 rounded-xl bg-gray-800 bg-opacity-90 text-6xl text-amber-400"
icon={faCaretDown}
/>
{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">
<FontAwesomeIcon
className="h-full w-full text-warn"
icon={faCaretDown}
/>
</button>
) : (
<></>
)}
</div>
</div>
)

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

@ -3,6 +3,10 @@
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap");
@font-face {
font-family: "CP_Font";
src: url("/fonts/cpfont_ote/CP Font.otf") format("opentype");
}
.pixelart {
image-rendering: pixelated;
@ -13,3 +17,7 @@
.farro {
font-family: "Farro", sans-serif;
}
.CP_Font {
font-family: "CP_Font", sans-serif;
}

10
leaky-ships/tailwind.config.js
View file

@ -1,10 +1,20 @@
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors")
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
colors: {
...colors,
theme: "#282c34",
grayish: "#b1b2b5cc",
warn: "#fabd04",
"shield-gray": "#616161",
"shield-lightgray": "#989898",
},
extend: {},
},
plugins: [],