Refactoring

leaky-ships/components/BurgerMenu.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+function BurgerMenu() {
+  return (
+    <button className="absolute top-16 left-16 flex h-24 w-24 items-center justify-center rounded-lg bg-grayish">
+      <img
+        className="pixelart h-20 w-20"
+        src="/assets/burger-menu.png"
+        alt="Burger Menu"
+      />
+    </button>
+  )
+}
+
+export default BurgerMenu

leaky-ships/components/Gamefield/BorderTiles.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, Dispatch, SetStateAction } from "react"
-import { borderCN, cornerCN, fieldIndex } from "../lib/utils/helpers"
-import { Position, MouseCursor } from "../interfaces/frontend"
+import { borderCN, cornerCN, fieldIndex } from "../../lib/utils/helpers"
+import { Position, MouseCursor } from "../../interfaces/frontend"
 
 type TilesType = {
   key: number

leaky-ships/components/Gamefield/EventBar.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react"
-import { Items, Target } from "../interfaces/frontend"
+import { Items, Target } from "../../interfaces/frontend"
 import Item from "./Item"
 
 function EventBar({

leaky-ships/components/Gamefield/Gamefield.tsx

@@ -6,7 +6,7 @@ import EventBar from "./EventBar"
 import HitElems from "./HitElems"
 import Labeling from "./Labeling"
 import Ships from "./Ships"
-import useGameEvent from "../lib/hooks/useGameEvent"
+import useGameEvent from "../../lib/hooks/useGameEvent"
 import Targets from "./Targets"
 
 function Gamefield() {

leaky-ships/components/Gamefield/GamefieldPointer.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { CSSProperties } from "react"
 import classNames from "classnames"
 import { faRadar } from "@fortawesome/pro-thin-svg-icons"
-import { Target, TargetList } from "../interfaces/frontend"
+import { Target, TargetList } from "../../interfaces/frontend"
 
 export interface PointerProps extends Target, TargetList {
   imply: boolean

leaky-ships/components/Gamefield/HitElems.tsx

@@ -1,7 +1,7 @@
 import { faBurst, faXmark } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { CSSProperties } from "react"
-import { Hit } from "../interfaces/frontend"
+import { Hit } from "../../interfaces/frontend"
 
 function HitElems({ hits }: { hits: Hit[] }) {
   return (

leaky-ships/components/Gamefield/Labeling.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames"
 import { CSSProperties } from "react"
-import { fieldIndex } from "../lib/utils/helpers"
-import { Field } from "../interfaces/frontend"
+import { fieldIndex } from "../../lib/utils/helpers"
+import { Field } from "../../interfaces/frontend"
 
 function Labeling({ count }: { count: number }) {
   let elems: (Field & {

leaky-ships/components/Gamefield/Targets.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Target } from "../interfaces/frontend"
+import { Target } from "../../interfaces/frontend"
 import GamefieldPointer, { PointerProps } from "./GamefieldPointer"
 
 function Targets({

leaky-ships/components/Lobby/Icon.tsx

@@ -0,0 +1,25 @@
+function Icon({
+  src,
+  text,
+  onClick,
+}: {
+  src: string
+  text: string
+  onClick?: () => void
+}) {
+  return (
+    <button
+      className="mx-4 mt-4 flex flex-col items-center border-none"
+      onClick={onClick}
+    >
+      <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>
+    </button>
+  )
+}
+
+export default Icon

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react"
+import Settings from "../SettingsFrame/Settings"
+import Icon from "./Icon"
+import Player from "./Player"
+
+function LobbyFrame() {
+  const [settings, setSettings] = useState(false)
+  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 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="font-farro text-5xl font-medium">
+          Game-PIN: <span className="underline">3169</span>
+        </h1>
+        <Icon
+          src="gear.png"
+          text="Settings"
+          onClick={() => setSettings(true)}
+        />
+      </div>
+      <div className="flex items-center justify-around">
+        <Player
+          src="player_blue.png"
+          text="Spieler 1 (Du)"
+          primary={true}
+          edit={true}
+        />
+        <p
+          className="font-farro m-4 text-6xl font-semibold"
+          onClick={() => setEnemy((e) => !e)}
+        >
+          VS
+        </p>
+        {enemy ? (
+          <Player src="player_red.png" text="Spieler 2" />
+        ) : (
+          <p className="font-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="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
+          START
+        </button>
+      </div>
+      {settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
+    </div>
+  )
+}
+
+export default LobbyFrame

leaky-ships/components/Lobby/Player.tsx

@@ -0,0 +1,43 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
+import classNames from "classnames"
+
+function Player({
+  src,
+  text,
+  primary,
+  edit,
+}: {
+  src: string
+  text: string
+  primary?: boolean
+  edit?: boolean
+}) {
+  return (
+    <div className="m-4 flex flex-col items-center">
+      <p
+        className={classNames(
+          "font-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} />
+        {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>
+  )
+}
+
+export default Player

leaky-ships/components/Logo.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+function Logo() {
+  return (
+    <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="font-checkpoint my-4 mx-32 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
+          Leaky
+          <br />
+          Ships
+        </h1>
+      </div>
+    </div>
+  )
+}
+
+export default Logo

leaky-ships/components/SettingsFrame/Setting.tsx

@@ -0,0 +1,49 @@
+import {
+  faToggleLargeOff,
+  faToggleLargeOn,
+} from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import classNames from "classnames"
+
+function Setting({
+  props: { key, state, onClick },
+}: {
+  props: {
+    key: string
+    state: boolean
+    onClick: () => void
+  }
+}) {
+  return (
+    <>
+      <label
+        htmlFor={key}
+        className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
+      >
+        {key}
+      </label>
+      <label
+        htmlFor={key}
+        className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
+      >
+        <FontAwesomeIcon
+          className={classNames(
+            "w-24 drop-shadow-md",
+            state ? "text-blue-500" : "text-gray-700"
+          )}
+          icon={state ? faToggleLargeOn : faToggleLargeOff}
+        />
+      </label>
+      <input
+        className="bg-none"
+        checked={state}
+        type="checkbox"
+        id={key}
+        onChange={onClick}
+        hidden={true}
+      />
+    </>
+  )
+}
+
+export default Setting

leaky-ships/components/SettingsFrame/Settings.tsx

@@ -0,0 +1,55 @@
+import { faXmark } from "@fortawesome/pro-solid-svg-icons"
+import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useState } from "react"
+import Setting from "./Setting"
+
+const settingOptionsInit: { [key: string]: boolean } = {
+  allowSpectators: false,
+  allowSpecials: false,
+  allowChat: false,
+  allowMarkDraw: false,
+}
+
+function Settings({ closeSettings }: { closeSettings: () => void }) {
+  const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
+  return (
+    <div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-40">
+      <div className="relative mx-16 flex flex-col rounded-3xl border-4 border-zinc-700 bg-zinc-400 p-8">
+        <h1 className="font-farro text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
+          Settings
+        </h1>
+        <button
+          className="absolute top-6 right-6  h-14 w-14 "
+          onClick={closeSettings}
+        >
+          <FontAwesomeIcon
+            className="h-full w-full text-gray-700 drop-shadow-md"
+            icon={faXmark}
+          />
+        </button>
+        <div className="relative m-8 rounded-xl bg-zinc-500 pt-16">
+          <button
+            className="absolute top-8 right-12  h-14 w-14"
+            onClick={() => setSettingOptions(settingOptionsInit)}
+          >
+            <FontAwesomeIcon
+              className="h-full w-full text-gray-700 drop-shadow-md"
+              icon={faRotateLeft}
+            />
+          </button>
+          <div className="mr-32 grid grid-cols-3 items-center justify-items-start gap-4 p-8">
+            {Object.keys(settingOptions).map((key) => {
+              const state = settingOptions[key]
+              const onClick = () =>
+                setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
+              return <Setting key={key} props={{ key, state, onClick }} />
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Settings

leaky-ships/lib/hooks/useGameEvent.ts

@@ -13,7 +13,7 @@ import {
   Target,
   Position,
 } from "../../interfaces/frontend"
-import { PointerProps } from "../../components/GamefieldPointer"
+import { PointerProps } from "../../components/Gamefield/GamefieldPointer"
 
 const modes: Mode[] = [
   {

leaky-ships/pages/dev/gamefield.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head"
-import Gamefield from "../../components/Gamefield"
+import Gamefield from "../../components/Gamefield/Gamefield"
 
 export default function Home() {
   return (

leaky-ships/pages/dev/lobby.tsx

@@ -1,34 +1,9 @@
-import {
-  faToggleLargeOff,
-  faToggleLargeOn,
-  faXmark,
-} from "@fortawesome/pro-solid-svg-icons"
-import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
-import classNames from "classnames"
 import Head from "next/head"
-import { Dispatch, SetStateAction, useEffect, useState } from "react"
-
-const settingOptionsInit: { [key: string]: boolean } = {
-  allowSpectators: false,
-  allowSpecials: false,
-  allowChat: false,
-  allowMarkDraw: false,
-}
+import Logo from "../../components/Logo"
+import LobbyFrame from "../../components/Lobby/LobbyFrame"
+import BurgerMenu from "../../components/BurgerMenu"
 
 export default function Home() {
-  const [enemy, setEnemy] = useState(false)
-  const [settings, setSettings] = useState(false)
-  const [dots, setDots] = useState(0)
-  const [settingOptions, setSettingOptions] = useState(settingOptionsInit)
-
-  useEffect(() => {
-    if (enemy) return
-    const interval = setInterval(() => setDots((e) => (e % 3) + 1), 1000)
-    return () => clearInterval(interval)
-  }, [])
-
   return (
     <div id="box">
       <Head>
@@ -37,220 +12,9 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <button className="absolute top-16 left-16 flex h-24 w-24 items-center justify-center rounded-lg bg-grayish">
-        <img
-          className="pixelart h-20 w-20"
-          src="/assets/burger-menu.png"
-          alt="Burger Menu"
-        />
-      </button>
-      <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="font-checkpoint my-4 mx-32 border-y-4 border-slate-700 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">
-        <div className="flex items-center justify-between border-b-2 border-slate-900">
-          <Icon src="speech_bubble.png" text="Chat" />
-          <h1 className="font-farro text-5xl font-medium">
-            Game-PIN: <span className="underline">3169</span>
-          </h1>
-          <Icon
-            src="gear.png"
-            text="Settings"
-            onClick={() => setSettings(true)}
-          />
-        </div>
-        <div className="flex items-center justify-around">
-          <Player
-            src="player_blue.png"
-            text="Spieler 1 (Du)"
-            primary={true}
-            edit={true}
-          />
-          <p
-            className="font-farro m-4 text-6xl font-semibold"
-            onClick={() => setEnemy((e) => !e)}
-          >
-            VS
-          </p>
-          {enemy ? (
-            <Player src="player_red.png" text="Spieler 2" />
-          ) : (
-            <p className="font-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="font-farro m-8 rounded-xl bg-amber-400 px-12 py-4 text-5xl font-medium">
-            START
-          </button>
-        </div>
-      </div>
-      {settings ? (
-        <Settings
-          props={{
-            settingOptions,
-            setSettingOptions,
-            closeSettings: () => setSettings(false),
-          }}
-        />
-      ) : (
-        <></>
-      )}
+      <BurgerMenu />
+      <Logo />
+      <LobbyFrame />
     </div>
   )
 }
-
-function Icon({
-  src,
-  text,
-  onClick,
-}: {
-  src: string
-  text: string
-  onClick?: () => void
-}) {
-  return (
-    <button
-      className="mx-4 mt-4 flex flex-col items-center border-none"
-      onClick={onClick}
-    >
-      <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>
-    </button>
-  )
-}
-function Player({
-  src,
-  text,
-  primary,
-  edit,
-}: {
-  src: string
-  text: string
-  primary?: boolean
-  edit?: boolean
-}) {
-  return (
-    <div className="m-4 flex flex-col items-center">
-      <p
-        className={classNames(
-          "font-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} />
-        {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>
-  )
-}
-function Settings({
-  props: { settingOptions, setSettingOptions, closeSettings },
-}: {
-  props: {
-    settingOptions: typeof settingOptionsInit
-    setSettingOptions: Dispatch<SetStateAction<typeof settingOptionsInit>>
-    closeSettings: () => void
-  }
-}) {
-  return (
-    <div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-40">
-      <div className="relative mx-16 flex flex-col rounded-3xl border-4 border-zinc-700 bg-zinc-400 p-8">
-        <h1 className="font-farro text-center text-6xl font-semibold text-white shadow-black drop-shadow-lg">
-          Settings
-        </h1>
-        <button
-          className="absolute top-6 right-6  h-14 w-14 "
-          onClick={closeSettings}
-        >
-          <FontAwesomeIcon
-            className="h-full w-full text-gray-700 drop-shadow-md"
-            icon={faXmark}
-          />
-        </button>
-        <div className="relative m-8 rounded-xl bg-zinc-500 pt-16">
-          <button
-            className="absolute top-8 right-12  h-14 w-14"
-            onClick={() => setSettingOptions(settingOptionsInit)}
-          >
-            <FontAwesomeIcon
-              className="h-full w-full text-gray-700 drop-shadow-md"
-              icon={faRotateLeft}
-            />
-          </button>
-          <div className="mr-32 grid grid-cols-3 items-center justify-items-start gap-4 p-8">
-            {Object.keys(settingOptions).map((key) => {
-              const state = settingOptions[key]
-              const onClick = () =>
-                setSettingOptions((e) => ({ ...e, [key]: !e[key] }))
-              return <Setting key={key} props={{ key, state, onClick }} />
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-function Setting({
-  props: { key, state, onClick },
-}: {
-  props: {
-    key: string
-    state: boolean
-    onClick: () => void
-  }
-}) {
-  return (
-    <>
-      <label
-        htmlFor={key}
-        className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
-      >
-        {key}
-      </label>
-      <label
-        htmlFor={key}
-        className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
-      >
-        <FontAwesomeIcon
-          className={classNames(
-            "w-24 drop-shadow-md",
-            state ? "text-blue-500" : "text-gray-700"
-          )}
-          icon={state ? faToggleLargeOn : faToggleLargeOff}
-        />
-      </label>
-      <input
-        className="bg-none"
-        checked={state}
-        type="checkbox"
-        id={key}
-        onChange={onClick}
-        hidden={true}
-      />
-    </>
-  )
-}