Commit 45ad449f authored by Grant's avatar Grant
Browse files

implement pixel undos (fixes #5)

parent f81c98ab

packages/client/src/components/App.tsx

+2 −2
Original line number Diff line number Diff line 
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";

import { DebugModal } from "./Debug/DebugModal";

import { ToolbarWrapper } from "./Toolbar/ToolbarWrapper";



const App = () => {

  return (
@@ -12,7 +12,7 @@ const App = () => { 
      <TemplateContext>

        <Header />

        <CanvasWrapper />

        <Pallete />

        <ToolbarWrapper />



        <DebugModal />

        <SettingsSidebar />

packages/client/src/components/CanvasMeta.tsx→packages/client/src/components/Toolbar/CanvasMeta.tsx

+3 −3
Original line number Diff line number Diff line
@@ -6,11 +6,11 @@ import { 
  useDisclosure,

} from "@nextui-org/react";

import { CanvasLib } from "@sc07-canvas/lib/src/canvas";

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

import { Canvas } from "../lib/canvas";

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

import { Canvas } from "../../lib/canvas";

import { useEffect, useState } from "react";

import { ClientConfig } from "@sc07-canvas/lib/src/net";

import network from "../lib/network";

import network from "../../lib/network";



const getTimeLeft = (pixels: { available: number }, config: ClientConfig) => {

  // this implementation matches the server's implementation

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

+5 −1
Original line number Diff line number Diff line 
#pallete {

#toolbar {

  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

}



#pallete {

  display: flex;

  gap: 10px;

  padding: 10px;

  z-index: 10;

  position: relative;



  background-color: #fff;

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

+4 −7
Original line number Diff line number Diff line 
import { useEffect, useState } from "react";

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

import { Canvas } from "../lib/canvas";

import { IPalleteContext } from "../types";

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

import { Canvas } from "../../lib/canvas";

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

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

import { CanvasMeta } from "./CanvasMeta";

import { IPalleteContext } from "@sc07-canvas/lib/src/net";



export const Pallete = () => {

export const Palette = () => {

  const { config, user } = useAppContext();

  const [pallete, setPallete] = useState<IPalleteContext>({});
@@ -18,8 +17,6 @@ export const Pallete = () => { 


  return (

    <div id="pallete">

      <CanvasMeta />



      <div className="pallete-colors">

        <button

          aria-label="Deselect Color"

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

0 → 100644
+17 −0
Original line number Diff line number Diff line 
import { CanvasMeta } from "./CanvasMeta";

import { Palette } from "./Palette";

import { UndoButton } from "./UndoButton";



/**

 * Wrapper for everything aligned at the bottom of the screen

 */

export const ToolbarWrapper = () => {

  return (

    <div id="toolbar">

      <CanvasMeta />

      <UndoButton />



      <Palette />

    </div>

  );

};