diff --git a/package-lock.json b/package-lock.json index 1933eae938d0565c0ce1c16b777bef73a8863a30..16f3b6da8130338afcfd571c9adb78e4f8d9a830 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 cab0166e09febca1fc87bb5b8c31c4bc44c10923..415e1ca7184e0224ca8ba2dd76f8143c9851c793 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 26a255139b569c67be2cab669760497c4ec6367b..2d9837b95dc519a58a46a7cd55c1567c4aa8face 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 14b12b580735533a55e25e4a006cd487ccbf7272..1fed3e980e7c8b9a339eb529ee31e5c2b9acdcad 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 0000000000000000000000000000000000000000..bff1b523a1303b701fe00f97b91c0c8aeb3811fa --- /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 0000000000000000000000000000000000000000..6455288683b821d24049cdf0cba986cbcea807ef --- /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 5fd3a3f80e8081933701fcc2a8b07cbb44f3b51b..e713447b838e9c3dac64209ef1f31344736d7e9f 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 e9c0b78b013ca4b72d0c16ed9677f24935e13107..01724ad9d7939dc8ddc44ead83c3b5e9873e53dd 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;