From 41d5f2d13842ed7389efa5394240d5cbfb9bf50f Mon Sep 17 00:00:00 2001 From: aronmal Date: Wed, 8 Feb 2023 14:17:03 +0100 Subject: [PATCH] Lobby improvement in many ways - using button instead of div - shield styled with tailwindcss - implement Head for initial-scale - Player component with reworked edit button --- leaky-ships/pages/dev/lobby.tsx | 49 ++++++++++++++++++++++++--------- leaky-ships/styles/globals.css | 8 ++++++ leaky-ships/tailwind.config.js | 10 +++++++ 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/leaky-ships/pages/dev/lobby.tsx b/leaky-ships/pages/dev/lobby.tsx index f141898..08d7372 100644 --- a/leaky-ships/pages/dev/lobby.tsx +++ b/leaky-ships/pages/dev/lobby.tsx @@ -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 (
+ + Create Next App + + + + -
-
-

Leaky

-

Ships

+
+
+

+ Leaky +
+ Ships +

@@ -33,7 +43,12 @@ export default function Home() {
- +

setEnemy((e) => !e)} @@ -41,7 +56,7 @@ export default function Home() { VS

{enemy ? ( - + ) : (

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 ( -

+
+ ) } function Player({ src, text, primary, + edit, }: { src: string text: string - primary: boolean + primary?: boolean + edit?: boolean }) { return (
@@ -91,10 +108,16 @@ function Player({

{src} - + {edit ? ( + + ) : ( + <> + )}
) diff --git a/leaky-ships/styles/globals.css b/leaky-ships/styles/globals.css index 31f5c41..1583aa5 100644 --- a/leaky-ships/styles/globals.css +++ b/leaky-ships/styles/globals.css @@ -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; +} diff --git a/leaky-ships/tailwind.config.js b/leaky-ships/tailwind.config.js index f8ecd2c..d8e8fa9 100644 --- a/leaky-ships/tailwind.config.js +++ b/leaky-ships/tailwind.config.js @@ -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: [],