add info & welcome modal (related #1)

package-lock.json

@@ -2854,6 +2854,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
@@ -16015,6 +16036,7 @@
       "license": "ISC",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@nextui-org/react": "^2.2.9",

packages/client/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@nextui-org/react": "^2.2.9",

packages/client/src/components/App.tsx

@@ -15,6 +15,8 @@ import "../lib/keybinds";
 import { PixelWhoisSidebar } from "./PixelWhoisSidebar";
 import { KeybindModal } from "./KeybindModal";
 import { ProfileModal } from "./Profile/ProfileModal";
+import { WelcomeModal } from "./Welcome/WelcomeModal";
+import { InfoSidebar } from "./Info/InfoSidebar";
 
 const Chat = lazy(() => import("./Chat/Chat"));
 
@@ -139,11 +141,13 @@ const AppInner = () => {
 
       <DebugModal />
       <SettingsSidebar />
+      <InfoSidebar />
       <PixelWhoisSidebar />
       <KeybindModal />
       <AuthErrors />
 
       <ProfileModal />
+      <WelcomeModal />
 
       <ToastContainer position="top-left" />
     </>

packages/client/src/components/Header.tsx

@@ -13,11 +13,14 @@ const DynamicChat = () => {
 };
 
 export const Header = () => {
-  const { setSettingsSidebar, connected, hasAdmin } = useAppContext();
+  const { setSettingsSidebar, connected, hasAdmin, setInfoSidebar } =
+    useAppContext();
 
   return (
     <header id="main-header">
-      <div></div>
+      <div className="box">
+        <Button onPress={() => setInfoSidebar(true)}>Info</Button>
+      </div>
       <div className="spacer"></div>
       {!connected && (
         <div>

packages/client/src/components/Info/InfoSidebar.tsx

@@ -0,0 +1,57 @@
+import { Button, Link } from "@nextui-org/react";
+import { useAppContext } from "../../contexts/AppContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+
+/**
+ * Information sidebar
+ *
+ * TODO: add customization for this post-event (#46)
+ *
+ * @returns
+ */
+export const InfoSidebar = () => {
+  const { infoSidebar, setInfoSidebar } = useAppContext();
+
+  return (
+    <div
+      className="sidebar sidebar-left"
+      style={{ ...(infoSidebar ? {} : { display: "none" }) }}
+    >
+      <header>
+        <h1>Information</h1>
+        <div className="flex-grow" />
+        <Button size="sm" isIconOnly onClick={() => setInfoSidebar(false)}>
+          <FontAwesomeIcon icon={faXmark} />
+        </Button>
+      </header>
+      <section>
+        <div className="flex gap-1 *:flex-grow">
+          <Button
+            as={Link}
+            href="https://matrix.to/#/#canvas-meta:aftermath.gg?via=matrix.org"
+            target="_blank"
+          >
+            Matrix Space
+          </Button>
+          <Button
+            as={Link}
+            href="https://discord.gg/mEUqXZw8kR"
+            target="_blank"
+          >
+            {/* i do not know why faDiscord doesn't match the types, but it does render */}
+            <FontAwesomeIcon icon={faDiscord as any} />
+            Discord
+          </Button>
+        </div>
+        <Button as={Link} href="https://toast.ooo/c/canvas">
+          <div className="flex flex-col text-center">
+            <span>Lemmy</span>
+            <span className="text-xs">!canvas@toast.ooo</span>
+          </div>
+        </Button>
+      </section>
+    </div>
+  );
+};

packages/client/src/components/Welcome/WelcomeModal.tsx

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure,
+} from "@nextui-org/react";
+
+/**
+ * Welcome popup
+ *
+ * TODO: customization post-event (#46)
+ *
+ * @returns
+ */
+export const WelcomeModal = () => {
+  const { isOpen, onClose } = useDisclosure({
+    defaultOpen: !localStorage.getItem("hide_welcome"),
+  });
+
+  const handleClose = () => {
+    localStorage.setItem("hide_welcome", "true");
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose}>
+      <ModalContent>
+        {(onClose) => (
+          <>
+            <ModalHeader>Welcome</ModalHeader>
+            <ModalBody>
+              <h1 className="text-4xl text-center">Welcome to Canvas!</h1>
+              <p>
+                Canvas is a collaborative pixel placing event that uses
+                Fediverse accounts
+              </p>
+              <p>More information can be found in the top left</p>
+            </ModalBody>
+            <ModalFooter>
+              <Button onPress={onClose}>Close</Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

packages/client/src/contexts/AppContext.tsx

@@ -25,6 +25,8 @@ interface IAppContext {
   loadChat: boolean;
   setLoadChat: (v: boolean) => void;
 
+  infoSidebar: boolean;
+  setInfoSidebar: (v: boolean) => void;
   settingsSidebar: boolean;
   setSettingsSidebar: (v: boolean) => void;
   pixelWhois?: { x: number; y: number; surrounding: string[][] };
@@ -79,6 +81,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
   const [undo, setUndo] = useState<{ available: true; expireAt: number }>();
 
   // overlays visible
+  const [infoSidebar, setInfoSidebar] = useState(false);
   const [settingsSidebar, setSettingsSidebar] = useState(false);
   const [pixelWhois, setPixelWhois] = useState<{
     x: number;
@@ -204,6 +207,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
         setHeatmapOverlay,
         profile,
         setProfile,
+        infoSidebar,
+        setInfoSidebar,
       }}
     >
       {!config && (

packages/client/src/style.scss

@@ -158,6 +158,10 @@ main {
     right: 0;
   }
 
+  &-left {
+    left: 0;
+  }
+
   header {
     display: flex;
     flex-direction: row;