From e9b1f4c468b76c1927c3d5056325d56ddd546e6b Mon Sep 17 00:00:00 2001 From: Grant Date: Tue, 11 Jun 2024 16:33:29 -0600 Subject: [PATCH] add info & welcome modal (related #1) --- package-lock.json | 22 +++++++ packages/client/package.json | 1 + packages/client/src/components/App.tsx | 4 ++ packages/client/src/components/Header.tsx | 7 ++- .../src/components/Info/InfoSidebar.tsx | 57 +++++++++++++++++++ .../src/components/Welcome/WelcomeModal.tsx | 50 ++++++++++++++++ packages/client/src/contexts/AppContext.tsx | 5 ++ packages/client/src/style.scss | 4 ++ 8 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 packages/client/src/components/Info/InfoSidebar.tsx create mode 100644 packages/client/src/components/Welcome/WelcomeModal.tsx diff --git a/package-lock.json b/package-lock.json index 1933eae..16f3b6d 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/client/package.json b/packages/client/package.json index cab0166..415e1ca 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx index 26a2551..2d9837b 100644 --- a/packages/client/src/components/App.tsx +++ b/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 = () => { + + diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx index 14b12b5..1fed3e9 100644 --- a/packages/client/src/components/Header.tsx +++ b/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 (
-
+
+ +
{!connected && (
diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx new file mode 100644 index 0000000..bff1b52 --- /dev/null +++ b/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 ( +
+
+

Information

+
+ +
+
+
+ + +
+ +
+
+ ); +}; diff --git a/packages/client/src/components/Welcome/WelcomeModal.tsx b/packages/client/src/components/Welcome/WelcomeModal.tsx new file mode 100644 index 0000000..6455288 --- /dev/null +++ b/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 ( + + + {(onClose) => ( + <> + Welcome + +

Welcome to Canvas!

+

+ Canvas is a collaborative pixel placing event that uses + Fediverse accounts +

+

More information can be found in the top left

+ + + + + + )} + + + ); +}; diff --git a/packages/client/src/contexts/AppContext.tsx b/packages/client/src/contexts/AppContext.tsx index 5fd3a3f..e713447 100644 --- a/packages/client/src/contexts/AppContext.tsx +++ b/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 && ( diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index e9c0b78..01724ad 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -158,6 +158,10 @@ main { right: 0; } + &-left { + left: 0; + } + header { display: flex; flex-direction: row; -- GitLab