From 2491f201ee8a4bcfe61aefcaa6b6c8eead47f5e7 Mon Sep 17 00:00:00 2001 From: Ategon Date: Sat, 13 Jul 2024 19:25:16 -0400 Subject: [PATCH 1/7] Improve info sidebar --- package-lock.json | 28 ++++-- packages/client/package.json | 3 +- .../src/components/Info/InfoButtons.tsx | 49 ++++++++++ .../client/src/components/Info/InfoHeader.tsx | 29 ++++++ .../src/components/Info/InfoPrivacy.tsx | 22 +++++ .../client/src/components/Info/InfoRules.tsx | 37 ++++++++ .../src/components/Info/InfoSidebar.tsx | 92 ++++++++----------- .../client/src/components/Info/InfoText.tsx | 14 +++ .../src/components/Info/InfoWelcome.tsx | 16 ++++ .../client/src/components/Info/Privacy.tsx | 25 ----- packages/client/src/components/Info/Rules.tsx | 46 ---------- 11 files changed, 225 insertions(+), 136 deletions(-) create mode 100644 packages/client/src/components/Info/InfoButtons.tsx create mode 100644 packages/client/src/components/Info/InfoHeader.tsx create mode 100644 packages/client/src/components/Info/InfoPrivacy.tsx create mode 100644 packages/client/src/components/Info/InfoRules.tsx create mode 100644 packages/client/src/components/Info/InfoText.tsx create mode 100644 packages/client/src/components/Info/InfoWelcome.tsx delete mode 100644 packages/client/src/components/Info/Privacy.tsx delete mode 100644 packages/client/src/components/Info/Rules.tsx diff --git a/package-lock.json b/package-lock.json index 2e50baf..e4d17b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2393,6 +2393,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "dependencies": { "@emotion/memoize": "0.7.4" } @@ -2401,7 +2402,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", @@ -3050,6 +3052,14 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==" }, + "node_modules/@icons-pack/react-simple-icons": { + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-9.6.0.tgz", + "integrity": "sha512-8lDLssg+2aJutepQV/P4zlGm0fgujSeIItCYaLKo+25NtwepozWxZJOnc5WGHSi3HjiLcGmxI6dA2eiD5w3i+w==", + "peerDependencies": { + "react": "^16.13 || ^17 || ^18" + } + }, "node_modules/@internationalized/date": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz", @@ -9741,20 +9751,21 @@ } }, "node_modules/framer-motion": { - "version": "11.0.5", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.5.tgz", - "integrity": "sha512-Lb0EYbQcSK/pgyQUJm+KzsQrKrJRX9sFRyzl9hSr9gFG4Mk8yP7BjhuxvRXzblOM/+JxycrJdCDVmOQBsjpYlw==", + "version": "11.3.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.2.tgz", + "integrity": "sha512-RgjSzrNFZmedWcvmW4MMc84A7UcoY37jocadE3Mbg3o+UMofodfyeNnYD/HR15UhP22/bb5KOebNhYOj4mYkpQ==", "dependencies": { "tslib": "^2.4.0" }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, "peerDependencies": { + "@emotion/is-prop-valid": "*", "react": "^18.0.0", "react-dom": "^18.0.0" }, "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, "react": { "optional": true }, @@ -16241,11 +16252,12 @@ "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@icons-pack/react-simple-icons": "^9.6.0", "@nextui-org/react": "^2.2.9", "@sc07-canvas/lib": "^1.0.0", "@typescript-eslint/parser": "^7.1.0", "eventemitter3": "^5.0.1", - "framer-motion": "^11.0.5", + "framer-motion": "^11.3.2", "lodash.throttle": "^4.1.1", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/packages/client/package.json b/packages/client/package.json index 4c45fac..e838032 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -24,11 +24,12 @@ "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@icons-pack/react-simple-icons": "^9.6.0", "@nextui-org/react": "^2.2.9", "@sc07-canvas/lib": "^1.0.0", "@typescript-eslint/parser": "^7.1.0", "eventemitter3": "^5.0.1", - "framer-motion": "^11.0.5", + "framer-motion": "^11.3.2", "lodash.throttle": "^4.1.1", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/packages/client/src/components/Info/InfoButtons.tsx b/packages/client/src/components/Info/InfoButtons.tsx new file mode 100644 index 0000000..fef9b4e --- /dev/null +++ b/packages/client/src/components/Info/InfoButtons.tsx @@ -0,0 +1,49 @@ +import { Button, Link } from "@nextui-org/react"; +import { SiDiscord, SiLemmy, SiMastodon, SiMatrix } from "@icons-pack/react-simple-icons" + +export const InfoButtons = () => { + return ( +
+ + + + +
+ ); +}; diff --git a/packages/client/src/components/Info/InfoHeader.tsx b/packages/client/src/components/Info/InfoHeader.tsx new file mode 100644 index 0000000..90101b5 --- /dev/null +++ b/packages/client/src/components/Info/InfoHeader.tsx @@ -0,0 +1,29 @@ +import { Button } from "@nextui-org/react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; + +export type InfoHeaderProps = { + setInfoSidebar: (value: boolean) => void +} + +export const InfoHeader = ({ setInfoSidebar }: InfoHeaderProps) => { + return ( +
+
+
+ +
+

Info

+

Information about the event

+
+
+ +
+ + +
+ ); +}; diff --git a/packages/client/src/components/Info/InfoPrivacy.tsx b/packages/client/src/components/Info/InfoPrivacy.tsx new file mode 100644 index 0000000..e5e59da --- /dev/null +++ b/packages/client/src/components/Info/InfoPrivacy.tsx @@ -0,0 +1,22 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faShieldHalved } from "@fortawesome/free-solid-svg-icons"; + +export const InfoPrivacy = () => { + return ( +
+
+ +

Privacy

+
+
+
    +
  • + Google Invisible Recaptcha is used to help prevent bots. Google's + privacy policy and terms are available below. +
    • +
  • Usernames should not be assumed to be private
    • +
+
+
+ ); +}; diff --git a/packages/client/src/components/Info/InfoRules.tsx b/packages/client/src/components/Info/InfoRules.tsx new file mode 100644 index 0000000..af1fc0e --- /dev/null +++ b/packages/client/src/components/Info/InfoRules.tsx @@ -0,0 +1,37 @@ +import { faGavel } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export const InfoRules = () => { + return ( +
+
+ +

Rules

+
+
+
    +
  1. +

    No alternate accounts

    +

    We want to keep it fair and not require people to create more + accounts to defend their art

    +
    2. +
  2. +

    No bots/automated placements

    +

    We're land of the humans, not bots

    +
    3. +
  3. +

    No hate speech or adjacent

    +
    4. +
  4. +

    No gore or nudity (NSFW/NSFL)

    +
    5. +
+

+ This canvas is built upon good faith rules, therefore moderators have + complete discretion on the rules. If you have any questions, ask in + the Matrix space or the Discord +

+
+
+ ) +}; \ No newline at end of file diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx index 1a8473d..2ee4de0 100644 --- a/packages/client/src/components/Info/InfoSidebar.tsx +++ b/packages/client/src/components/Info/InfoSidebar.tsx @@ -1,10 +1,9 @@ -import { Button, Link } from "@nextui-org/react"; +import { Divider } 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"; -import { Rules } from "./Rules"; -import { Privacy } from "./Privacy"; +import { InfoHeader } from "./InfoHeader"; +import { InfoText } from "./InfoText"; +import { InfoButtons } from "./InfoButtons"; +import { motion } from "framer-motion" /** * Information sidebar @@ -17,58 +16,39 @@ export const InfoSidebar = () => { const { infoSidebar, setInfoSidebar } = useAppContext(); return ( -
-
-

Information

-
- -
-
-
- - +
+ + + +
+ + + + + +
- - - Build {__COMMIT_HASH__} -
-
- - +
+

Build {__COMMIT_HASH__}

+
+
+
); }; diff --git a/packages/client/src/components/Info/InfoText.tsx b/packages/client/src/components/Info/InfoText.tsx new file mode 100644 index 0000000..d92ecaf --- /dev/null +++ b/packages/client/src/components/Info/InfoText.tsx @@ -0,0 +1,14 @@ +import { InfoPrivacy } from "./InfoPrivacy"; +import { InfoRules } from "./InfoRules"; +import { InfoWelcome } from "./InfoWelcome"; + +export const InfoText = () => { + return ( +
+ + + +
+ ) +}; + diff --git a/packages/client/src/components/Info/InfoWelcome.tsx b/packages/client/src/components/Info/InfoWelcome.tsx new file mode 100644 index 0000000..029e4be --- /dev/null +++ b/packages/client/src/components/Info/InfoWelcome.tsx @@ -0,0 +1,16 @@ +import { faFire } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export const InfoWelcome = () => { + return ( +
+
+ +

Welcome

+
+
+

Welcome to canvas! This is an event that lasts for 72 hours where users can place pixels every so often on a shared canvas. Everyone has access to the same canvas and pixels can be placed in any location to create things on the canvas.

+
+
+ ) +}; \ No newline at end of file diff --git a/packages/client/src/components/Info/Privacy.tsx b/packages/client/src/components/Info/Privacy.tsx deleted file mode 100644 index cd027a8..0000000 --- a/packages/client/src/components/Info/Privacy.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Privacy policy listed in InfoSidebar - * - * TODO: Customize this w/o editing the source #46 - * - * @returns - */ -export const Privacy = () => { - return ( - <> -
-

Privacy

-
-
- -
- - ); -}; diff --git a/packages/client/src/components/Info/Rules.tsx b/packages/client/src/components/Info/Rules.tsx deleted file mode 100644 index 5a3a608..0000000 --- a/packages/client/src/components/Info/Rules.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Rules listed inside InfoSidebar - * - * TODO: Customize this w/o editing the source #46 - * - * @returns - */ -export const Rules = () => { - return ( - <> -
-

Rules

-
-
-

Welcome to Canvas!

-

- We just have a couple rules, to use the canvas you must agree to them -

-
    -
  1. - No alternative accounts -
    - We want to keep it fair and not require people to create more - accounts to defend their art -
    2. -
  2. - No bots/automated placements -
    - We're land of the humans, not bots -
    3. -
  3. - No hate speech or adjacent -
    4. -
  4. - No gore or nudity (NSFW/NSFL) -
    5. -
- - This canvas is built upon good faith rules, therefore moderators have - complete discretion on the rules. If you have any questions, ask in - the Matrix space or the Discord - -
- - ); -}; -- GitLab From ded98d32a39b9fef620ea99bb28d98718a24d31f Mon Sep 17 00:00:00 2001 From: Ategon Date: Mon, 15 Jul 2024 14:58:41 -0400 Subject: [PATCH 2/7] Top right uses display name if possible --- packages/client/src/components/Header/User.tsx | 2 +- packages/lib/src/net.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/Header/User.tsx b/packages/client/src/components/Header/User.tsx index f4a3d1d..9489959 100644 --- a/packages/client/src/components/Header/User.tsx +++ b/packages/client/src/components/Header/User.tsx @@ -7,7 +7,7 @@ export const User = () => { return user ? ( Date: Mon, 15 Jul 2024 15:47:16 -0400 Subject: [PATCH 3/7] Add pixel pulses setting and allow sidebar mouse passthrough --- .../client/src/components/CanvasWrapper.tsx | 2 ++ .../components/Overlay/OverlaySettings.tsx | 11 ++++++++++- .../src/components/Overlay/PixelPulses.tsx | 11 +++++++++++ .../src/components/Profile/UserCard.tsx | 19 +++++++++++++++++-- .../client/src/components/SidebarBase.tsx | 2 +- packages/client/src/contexts/AppContext.tsx | 5 +++++ 6 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 packages/client/src/components/Overlay/PixelPulses.tsx diff --git a/packages/client/src/components/CanvasWrapper.tsx b/packages/client/src/components/CanvasWrapper.tsx index d1d9471..91d64cc 100644 --- a/packages/client/src/components/CanvasWrapper.tsx +++ b/packages/client/src/components/CanvasWrapper.tsx @@ -13,6 +13,7 @@ import { KeybindManager } from "../lib/keybinds"; import { BlankOverlay } from "./Overlay/BlankOverlay"; import { HeatmapOverlay } from "./Overlay/HeatmapOverlay"; import { useTemplateContext } from "../contexts/TemplateContext"; +import { PixelPulses } from "./Overlay/PixelPulses"; export const CanvasWrapper = () => { const { config } = useAppContext(); @@ -23,6 +24,7 @@ export const CanvasWrapper = () => { + {config &&