Commit 80dfee70 authored by Grant's avatar Grant
Browse files

chore: extract UI into dedicated contexts

parent f82f294f

packages/client/src/components/App.tsx

+10 −7
Original line number Diff line number Diff line
@@ -24,6 +24,7 @@ import { LoginModal } from "./Login/LoginModal"; 
import { Chat, ChatContext } from "./Chat/utils";

import { EventInfoModal } from "./EventInfo/EventInfo";

import AudioContext from "@/contexts/AudioContext";

import PanelContext from "@/contexts/PanelContext";



console.log("Client init with version " + __COMMIT_HASH__);
@@ -78,6 +79,7 @@ const App = () => { 
      >

        <AppContext>

          <AudioContext>

            <PanelContext>

              <DialogContext>

                <ModeratorContext>

                  <TemplateContext>
@@ -85,6 +87,7 @@ const App = () => { 
                  </TemplateContext>

                </ModeratorContext>

              </DialogContext>

            </PanelContext>

          </AudioContext>

        </AppContext>

      </SWRConfig>

packages/client/src/components/CanvasWrapper.tsx

+5 −8
Original line number Diff line number Diff line
@@ -21,6 +21,7 @@ import { useHasRole } from "../hooks/useHasRole"; 
import { GridOverlay } from "./Overlay/GridOverlay";

import { PaletteLib } from "../lib/palette";

import { getRenderer } from "../lib/utils";

import { usePanel } from "@/contexts/PanelContext";



export const CanvasWrapper = () => {

  const hasMod = useHasRole("MOD");
@@ -110,13 +111,9 @@ const Cursor = () => { 
const CanvasInner = () => {

  const canvasSkeleton = useRef<HTMLDivElement>(null);

  const canvas = useRef<CanvasCore>(null);

  const {

    config,

    blankOverlay,

    setCanvasPosition,

    setCursorPos,

    setPixelWhois,

  } = useAppContext();

  const { config, blankOverlay, setCanvasPosition, setCursorPos } =

    useAppContext();

  const Panel = usePanel();

  const {

    x: templateX,

    y: templateY,
@@ -181,7 +178,7 @@ const CanvasInner = () => { 
      // .......

      const surrounding = canvas.current.getSurroundingPixels(x, y, 3);



      setPixelWhois({ x, y, surrounding });

      Panel.dispatch(["whois", { x, y, surrounding }]);

    },

    [canvas.current],

  );

packages/client/src/components/Header/HeaderLeft.tsx

+3 −3
Original line number Diff line number Diff line 
import { useAppContext } from "../../contexts/AppContext";

import { AccountStanding } from "./AccountStanding";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { Debug } from "@sc07-canvas/lib/debug";

import { faInfoCircle, faTools } from "@fortawesome/free-solid-svg-icons";

import { EventDatesHeader } from "../EventInfo";

import { Button } from "../core/Button";

import { usePanel } from "@/contexts/PanelContext";



export const HeaderLeft = () => {

  const { setInfoSidebar } = useAppContext();

  const Panel = usePanel();



  return (

    <div className="box gap-2 flex flex-col">

      <EventDatesHeader />

      <div className="gap-2 flex">

        <AccountStanding />

        <Button onPress={() => setInfoSidebar(true)}>

        <Button onPress={() => Panel.dispatch(["info", true])}>

          <FontAwesomeIcon icon={faInfoCircle} />

          <p>Info</p>

        </Button>

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

+4 −4
Original line number Diff line number Diff line 
import { useAppContext } from "../../contexts/AppContext";

import { InfoText } from "./InfoText";

import { InfoButtons } from "./InfoButtons";

import { SidebarBase } from "../SidebarBase";

import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";

import { usePanel } from "@/contexts/PanelContext";



/**

 * Information sidebar
@@ -12,12 +12,12 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; 
 * @returns

 */

export const InfoSidebar = () => {

  const { infoSidebar, setInfoSidebar } = useAppContext();

  const { state, dispatch } = usePanel();



  return (

    <SidebarBase

      shown={infoSidebar}

      setSidebarShown={setInfoSidebar}

      shown={Boolean(state.info)}

      setSidebarShown={() => dispatch(["info", undefined])}

      icon={faInfoCircle}

      title="Info"

      description="Information about the event"

packages/client/src/components/KeybindModal.tsx

+19 −5
Original line number Diff line number Diff line
@@ -7,9 +7,10 @@ import { 
  ModalFooter,

  ModalHeader,

} from "@heroui/react";

import { useAppContext } from "../contexts/AppContext";

import { type IKeybind, KeybindManager } from "../lib/keybinds";

import { Button } from "./core/Button";

import { useDialog } from "@/contexts/DialogContext";

import { useEffect } from "react";



export const Keybind = ({ kb }: { kb: IKeybind }) => (

  <Kbd
@@ -27,12 +28,25 @@ export const Keybind = ({ kb }: { kb: IKeybind }) => ( 
);



export const KeybindModal = () => {

  const { showKeybinds, setShowKeybinds } = useAppContext();

  const { state, dispatch } = useDialog();



  useEffect(() => {

    const open = () =>

      dispatch({ action: "OPEN_DIALOG", dialog: { id: "KEYBINDS" } });



    KeybindManager.on("KEYBINDS", open);



    return () => {

      KeybindManager.off("KEYBINDS", open);

    };

  }, []);



  return (

    <Modal

      isOpen={showKeybinds}

      onOpenChange={setShowKeybinds}

      isOpen={"KEYBINDS" in state.dialogs}

      onOpenChange={() =>

        dispatch({ action: "CLOSE_DIALOG", dialogId: "KEYBINDS" })

      }

      placement="center"

    >

      <ModalContent>
@@ -48,7 +62,7 @@ export const KeybindModal = () => { 
                      <Keybind kb={kb} />

                    ))}

                  </div>

                )

                ),

              )}

            </ModalBody>

            <ModalFooter>