Commit d56762ff authored by Grant's avatar Grant
Browse files

Add palette numbering

parent e0ab0f4b

packages/client/src/components/Settings/SettingsSidebar.tsx

+10 −2
Original line number Diff line number Diff line 
import { faGear } from "@fortawesome/free-solid-svg-icons";

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

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

import { Button, Divider } from "@nextui-org/react";

import { Button, Divider, Switch } from "@nextui-org/react";

import { TemplateSettings } from "./TemplateSettings";

import { ChatSettings } from "./ChatSettings";

import { OverlaySettings } from "../Overlay/OverlaySettings";

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



export const SettingsSidebar = () => {

  const { settingsSidebar, setSettingsSidebar, setShowKeybinds } =

  const { settingsSidebar, setSettingsSidebar, setShowKeybinds, settings } =

    useAppContext();

  const { dispatch } = useDialog();
@@ -29,6 +29,14 @@ export const SettingsSidebar = () => { 
        <OverlaySettings />

        <Divider />

        <section className="flex gap-2 flex-wrap">

          <Switch

            isSelected={settings.get["palette.colors"]}

            onValueChange={(value) =>

              settings.set({ key: "palette.colors", value })

            }

          >

            Show palette numbers

          </Switch>

          <Button

            onPress={() => {

              setShowKeybinds(true);

packages/client/src/components/Toolbar/Palette.scss

+16 −0
Original line number Diff line number Diff line
@@ -26,6 +26,22 @@ 


    .pallete-color {

      margin-left: 10px;



      position: relative;



      &.show-number::before {

        content: attr(data-number);



        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        transform: translateY(-50%);



        background-color: #000;

        color: #fff;

        border-radius: 10px;

      }

    }

  }

packages/client/src/components/Toolbar/Palette.tsx

+4 −2
Original line number Diff line number Diff line
@@ -11,7 +11,7 @@ import useSWR from "swr"; 


export const Palette = () => {

  const { dispatch } = useDialog();

  const { config, user, cursor, setCursor } = useAppContext<true>();

  const { config, user, cursor, setCursor, settings } = useAppContext<true>();

  const meta = useSWR<{ login: "INHIBIT" | "NORMAL" | "TRUST" }>("/api/info");



  useEffect(() => {
@@ -71,13 +71,15 @@ export const Palette = () => { 
          >

            <FontAwesomeIcon icon={faXmark} />

          </button>

          {config.pallete.colors.map((color) => (

          {config.pallete.colors.map((color, i) => (

            <button

              key={color.id}

              data-number={i + 1}

              aria-label={color.name}

              className={[

                "pallete-color",

                color.id === cursor.color && "active",

                settings.get["palette.colors"] && "show-number",

              ]

                .filter((a) => a)

                .join(" ")}

packages/client/src/contexts/AppContext.tsx

+38 −0
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ import React, { 
  createContext,

  useContext,

  useEffect,

  useReducer,

  useState,

} from "react";

import { AuthSession, ClientConfig } from "@sc07-canvas/lib/src/net";
@@ -13,12 +14,30 @@ import { RestAPI } from "@sc07-canvas/lib"; 


type Whoami = RestAPI.components["schemas"]["Whoami"];



interface ISettings {

  "palette.colors"(val: boolean): boolean;

}



type SettingsAction<T extends keyof ISettings> = {

  key: T;

  value: Parameters<ISettings[T]>[0];

};



type ISettingsValue = {

  [K in keyof ISettings]: ReturnType<ISettings[K]>;

};



interface IAppContext {

  config?: ClientConfig;

  user?: AuthSession;

  whoami?: Whoami;

  connected: boolean;



  settings: {

    get: ISettingsValue;

    set: React.ActionDispatch<[SettingsAction<keyof ISettings>]>;

  };



  canvasPosition?: ICanvasPosition;

  setCanvasPosition: (v: ICanvasPosition) => void;

  cursor: ICursor;
@@ -131,6 +150,21 @@ export const AppContext = ({ children }: PropsWithChildren) => { 


  const [profile, setProfile] = useState<string>();



  const settings = useReducer<

    ISettingsValue,

    [SettingsAction<keyof ISettings>]

  >(

    (state, action) => {

      return {

        ...state,

        [action.key]: action.value,

      };

    },

    {

      "palette.colors": false,

    }

  );



  useEffect(() => {

    oapi.GET("/whoami").then(({ data }) => {

      setWhoami(data);
@@ -208,6 +242,10 @@ export const AppContext = ({ children }: PropsWithChildren) => { 
        config,

        user: auth,

        whoami,

        settings: {

          get: settings[0],

          set: settings[1],

        },

        canvasPosition,

        setCanvasPosition,

        cursor,