Added 'lobby' page made with tailwind

leaky-ships/.prettierrc.json

@@ -1,3 +1,5 @@
 {
-  "semi": false
+  "semi": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "pluginSearchDirs": false
 }

leaky-ships/pages/dev/lobby.tsx

@@ -0,0 +1,101 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
+import classNames from "classnames"
+import { useEffect, useState } from "react"
+
+export default function Home() {
+  const [enemy, setEnemy] = useState(false)
+  const [dots, setDots] = useState(0)
+
+  useEffect(() => {
+    if (enemy) return
+    const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
+    return () => clearInterval(interval)
+  })
+
+  return (
+    <div id="box">
+      <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>
+      </div>
+      <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
+        <div className="flex items-center justify-between border-b-2 border-slate-900">
+          <Icon src="speech_bubble.png" text="Chat" />
+          <h1 className="farro text-5xl font-medium">
+            Game-PIN: <span className="underline">3169</span>
+          </h1>
+          <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} />
+          <p
+            className="farro m-4 text-6xl font-semibold"
+            onClick={() => setEnemy((e) => !e)}
+          >
+            VS
+          </p>
+          {enemy ? (
+            <Player src="player_red.png" text="Spieler 2" primary={false} />
+          ) : (
+            <p className="farro m-12 w-64 text-center text-5xl font-medium">
+              Warte auf Spieler 2 {Array.from(Array(dots), () => ".").join("")}
+            </p>
+          )}
+        </div>
+        <div className="flex items-center justify-center border-t-2 border-slate-900">
+          <button className="farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
+            START
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Icon({ src, text }: { src: string; text: string }) {
+  return (
+    <div className="mx-4 mt-4 flex flex-col items-center">
+      <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>
+  )
+}
+function Player({
+  src,
+  text,
+  primary,
+}: {
+  src: string
+  text: string
+  primary: boolean
+}) {
+  return (
+    <div className="m-4 flex flex-col items-center">
+      <p
+        className={classNames(
+          "farro my-8 text-5xl",
+          primary ? "font-semibold" : "font-normal"
+        )}
+      >
+        {text}
+      </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}
+        />
+      </div>
+    </div>
+  )
+}

leaky-ships/styles/globals.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap");
+
+.pixelart {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.farro {
+  font-family: "Farro", sans-serif;
+}