Commit d262be82 authored by Grant's avatar Grant
Browse files

add settings sidebar & initial templating support 🎉 (#28)

parent 3845756c

packages/client/src/components/App.tsx

+9 −3
Original line number Diff line number Diff line
@@ -2,13 +2,19 @@ import { Header } from "./Header"; 
import { AppContext } from "../contexts/AppContext";

import { CanvasWrapper } from "./CanvasWrapper";

import { Pallete } from "./Pallete";

import { TemplateContext } from "../contexts/TemplateContext";

import { SettingsSidebar } from "./Settings/SettingsSidebar";



const App = () => {

  return (

    <AppContext>

      <TemplateContext>

        <Header />

        <CanvasWrapper />

        <Pallete />



        <SettingsSidebar />

      </TemplateContext>

    </AppContext>

  );

};

packages/client/src/components/CanvasWrapper.tsx

+3 −1
Original line number Diff line number Diff line
@@ -7,12 +7,14 @@ import { ViewportMoveEvent } from "@sc07-canvas/lib/src/renderer/PanZoom"; 
import throttle from "lodash.throttle";

import { Routes } from "../lib/routes";

import { ICanvasPosition, IPosition } from "@sc07-canvas/lib/src/net";

import { Template } from "./Template";



export const CanvasWrapper = () => {

  // to prevent safari from blurring things, use the zoom css property

  return (

    <main>

      <PanZoomWrapper>

        <Template />

        <CanvasInner />

      </PanZoomWrapper>

    </main>
@@ -90,7 +92,7 @@ const CanvasInner = () => { 


      setCanvasPosition(canvasPosition);



      window.location.replace(Routes.canvas(canvasPosition));

      window.location.replace(Routes.canvas({ pos: canvasPosition }));

    }, 1000);



    const handleCursorPos = throttle((pos: IPosition) => {

packages/client/src/components/Header.tsx

+5 −0
Original line number Diff line number Diff line 
import { Button } from "@nextui-org/react";

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

import { User } from "./Header/User";



export const Header = () => {

  const { setSettingsSidebar } = useAppContext();



  return (

    <header id="main-header">

      <div></div>

      <div className="spacer"></div>

      <div className="box">

        <User />

        <Button onClick={() => setSettingsSidebar(true)}>Settings</Button>

      </div>

    </header>

  );

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

0 → 100644
+26 −0
Original line number Diff line number Diff line 
import { Button } from "@nextui-org/react";

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

import { TemplateSettings } from "./TemplateSettings";

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

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



export const SettingsSidebar = () => {

  const { settingsSidebar, setSettingsSidebar } = useAppContext();



  return (

    <div

      className="sidebar sidebar-right"

      style={{ ...(settingsSidebar ? {} : { display: "none" }) }}

    >

      <header>

        <h1>Settings</h1>

        <div className="flex-grow" />

        <Button size="sm" isIconOnly onClick={() => setSettingsSidebar(false)}>

          <FontAwesomeIcon icon={faXmark} />

        </Button>

      </header>

      <section>abc</section>

      <TemplateSettings />

    </div>

  );

};

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

0 → 100644
+70 −0
Original line number Diff line number Diff line 
import { useTemplateContext } from "../../contexts/TemplateContext";

import { Input, Slider, Switch } from "@nextui-org/react";



export const TemplateSettings = () => {

  const {

    enable,

    setEnable,

    url,

    setURL,

    width,

    setWidth,

    x,

    setX,

    y,

    setY,

    opacity,

    setOpacity,

  } = useTemplateContext();



  return (

    <>

      <header>

        <Switch size="sm" isSelected={enable} onValueChange={setEnable} />

        <h2>Template</h2>

      </header>

      <section>

        <Input

          label="Template URL"

          size="sm"

          value={url}

          onValueChange={setURL}

        />

        <Input

          label="Template Width"

          size="sm"

          type="number"

          min="1"

          max={10_000}

          value={width?.toString()}

          onValueChange={(v) => setWidth(parseInt(v))}

        />

        <div className="flex flex-row gap-1">

          <Input

            label="Template X"

            size="sm"

            type="number"

            value={x.toString()}

            onValueChange={(v) => setX(parseInt(v))}

          />

          <Input

            label="Template Y"

            size="sm"

            type="number"

            value={y.toString()}

            onValueChange={(v) => setY(parseInt(v))}

          />

        </div>

        <Slider

          label="Template Opacity"

          step={1}

          minValue={0}

          maxValue={100}

          value={opacity}

          onChange={(v) => setOpacity(v as number)}

          getValue={(v) => v + "%"}

        />

      </section>

    </>

  );

};