Add Settings and more functionality to lobby

leaky-ships/pages/dev/lobby.tsx

@@ -1,12 +1,27 @@
+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 { useEffect, useState } from "react"
+import { Dispatch, SetStateAction, useEffect, useState } from "react"
+
+const settingOptionsInit: { [key: string]: boolean } = {
+  allowSpectators: false,
+  allowSpecials: false,
+  allowChat: false,
+  allowMarkDraw: false,
+}
 
 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
@@ -44,7 +59,11 @@ export default function Home() {
           <h1 className="font-farro text-5xl font-medium">
             Game-PIN: <span className="underline">3169</span>
           </h1>
-          <Icon src="gear.png" text="Settings" />
+          <Icon
+            src="gear.png"
+            text="Settings"
+            onClick={() => setSettings(true)}
+          />
         </div>
         <div className="flex items-center justify-around">
           <Player
@@ -73,13 +92,35 @@ export default function Home() {
           </button>
         </div>
       </div>
+      {settings ? (
+        <Settings
+          props={{
+            settingOptions,
+            setSettingOptions,
+            closeSettings: () => setSettings(false),
+          }}
+        />
+      ) : (
+        <></>
+      )}
     </div>
   )
 }
 
-function Icon({ src, text }: { src: string; text: string }) {
+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">
+    <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}
@@ -126,3 +167,90 @@ function Player({
     </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}
+      />
+    </>
+  )
+}