From 1ecfcb2f88fb6a89be4585301398a6bc74eba4ab Mon Sep 17 00:00:00 2001
From: Michael Peters <michael@styx>
Date: Sat, 27 Jan 2024 15:26:35 -0800
Subject: [PATCH] ui for mode support

---
 src/atoms.ts                         | 11 +++-
 src/components/grid/grid-config.scss | 40 ++++++++-------
 src/components/grid/grid-config.tsx  | 76 ++++++++++++++++++++++------
 src/components/grid/grid.tsx         |  4 +-
 4 files changed, 93 insertions(+), 38 deletions(-)

diff --git a/src/atoms.ts b/src/atoms.ts
index d7fd17d..3867bcc 100644
--- a/src/atoms.ts
+++ b/src/atoms.ts
@@ -2,7 +2,16 @@ import { atom } from 'recoil';
 
 export const DEFAULT_COLOR = '#339ad6';
 
-export const currentColorState = atom({
+type DrawMode = 'line' | 'trash';
+export const MODE_LINE = 'line';
+export const MODE_TRASH = 'trash';
+
+export const lineColorState = atom<string>({
     key: 'colorState',
     default: DEFAULT_COLOR,
 });
+
+export const drawModeState = atom<DrawMode>({
+    key: 'drawModeState',
+    default: MODE_LINE,
+});
diff --git a/src/components/grid/grid-config.scss b/src/components/grid/grid-config.scss
index 45b6f84..e8fdb73 100644
--- a/src/components/grid/grid-config.scss
+++ b/src/components/grid/grid-config.scss
@@ -7,32 +7,34 @@
         margin: 20px;
     }
 
-    .color-config {
+    .options {
         background-color: #000;
         border-radius: 5px;
         padding: 5px;
+        display: grid;
+        grid-template-columns: auto auto;
 
-        .color-options {
-            display: grid;
-            grid-template-columns: auto auto;
+        .option {
+            margin: 5px;
+            padding: 7px;
+            background-color: #283f56;
+            border: 2px solid #283f56;
+            border-radius: 5px;
 
-            .color-option {
-                margin: 5px;
-                padding: 7px;
-                background-color: #283f56;
-                border: 2px solid #283f56;
-                border-radius: 5px;
+            &.active {
+                background-color: #265584;
+                border-color: #458bd1;
+            }
 
-                &.active {
-                    background-color: #265584;
-                    border-color: #458bd1;
-                }
+            .sample {
+                width: 24px;
+                height: 13px;
+                border-radius: 3px;
+            }
 
-                .sample {
-                    width: 24px;
-                    height: 13px;
-                    border-radius: 3px;
-                }
+            svg.icon {
+                width: 24px;
+                height: 13px;
             }
         }
     }
diff --git a/src/components/grid/grid-config.tsx b/src/components/grid/grid-config.tsx
index 8d94f98..e91e63a 100644
--- a/src/components/grid/grid-config.tsx
+++ b/src/components/grid/grid-config.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { useRecoilState } from 'recoil';
-import { currentColorState, DEFAULT_COLOR } from '../../atoms';
+import { DEFAULT_COLOR, drawModeState, lineColorState } from '../../atoms';
 
 import './grid-config.scss';
 
@@ -10,14 +10,12 @@ interface ColorOptionProps {
 
 const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
     const { color } = props;
-    const [currentColor, setCurrentColor] = useRecoilState(currentColorState);
+    const [lineColor, setLineColor] = useRecoilState(lineColorState);
 
     return (
         <div
-            className={
-                color === currentColor ? 'color-option active' : 'color-option'
-            }
-            onClick={() => setCurrentColor(color)}
+            className={color === lineColor ? 'option active' : 'option'}
+            onClick={() => setLineColor(color)}
         >
             <div className="sample" style={{ backgroundColor: color }} />
         </div>
@@ -26,16 +24,61 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
 
 const ColorConfig: FC = () => {
     return (
-        <div className="color-config">
-            <div className="color-options">
-                <ColorOption color={DEFAULT_COLOR} />
-                <ColorOption color="#d33b3d" />
-                <ColorOption color="#3dd33b" />
-                <ColorOption color="#f1c40f" />
-                <ColorOption color="#d35400" />
-                <ColorOption color="#8e44ad" />
-                <ColorOption color="#eeeeee" />
-                <ColorOption color="#95a5a6" />
+        <div className="color options">
+            <ColorOption color={DEFAULT_COLOR} />
+            <ColorOption color="#d33b3d" />
+            <ColorOption color="#3dd33b" />
+            <ColorOption color="#f1c40f" />
+            <ColorOption color="#d35400" />
+            <ColorOption color="#8e44ad" />
+            <ColorOption color="#eeeeee" />
+            <ColorOption color="#95a5a6" />
+        </div>
+    );
+};
+
+const ModeConfig: FC = () => {
+    const [drawMode, setDrawMode] = useRecoilState(drawModeState);
+
+    const lineClassName = drawMode === 'line' ? 'option active' : 'option';
+    const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
+    return (
+        <div className="mode options">
+            <div className={lineClassName} onClick={() => setDrawMode('line')}>
+                <svg
+                    className="icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="13"
+                    viewBox="0 0 24 13"
+                >
+                    <line
+                        x1="6"
+                        y1="9"
+                        x2="18"
+                        y2="4"
+                        stroke="#ffffff"
+                        strokeWidth="2"
+                    />
+                    <circle cx="6" cy="9" r="3" fill="#ffffff" />
+                    <circle cx="18" cy="4" r="3" fill="#ffffff" />
+                </svg>
+            </div>
+            <div
+                className={trashClassName}
+                onClick={() => setDrawMode('trash')}
+            >
+                <svg
+                    className="icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        fill="#ffffff"
+                        fill-rule="evenodd"
+                        d="M7 1a2 2 0 00-2 2v2H2a1 1 0 000 2h.884c.036.338.078.754.12 1.213.11 1.202.218 2.664.218 3.787 0 1.47-.183 3.508-.315 4.776a2.015 2.015 0 002 2.224h10.186a2.015 2.015 0 002-2.224c-.132-1.268-.315-3.306-.315-4.776 0-1.123.107-2.585.218-3.787.042-.459.084-.875.12-1.213H18a1 1 0 100-2h-3V3a2 2 0 00-2-2H7zm6 4V3H7v2h6zM4.996 8.03c-.035-.378-.07-.728-.101-1.03h10.21a81.66 81.66 0 00-.1 1.03c-.112 1.212-.227 2.75-.227 3.97 0 1.584.194 3.714.325 4.982v.007a.02.02 0 01-.005.008l-.003.003H4.905a.024.024 0 01-.008-.01v-.008c.131-1.268.325-3.398.325-4.982 0-1.22-.115-2.758-.226-3.97zM8 8a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1zm5 1a1 1 0 10-2 0v6a1 1 0 102 0V9z"
+                    />
+                </svg>
             </div>
         </div>
     );
@@ -45,6 +88,7 @@ const GridConfig: FC = () => {
     return (
         <div className="grid-config">
             <ColorConfig />
+            <ModeConfig />
         </div>
     );
 };
diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx
index 233ba14..b992b84 100644
--- a/src/components/grid/grid.tsx
+++ b/src/components/grid/grid.tsx
@@ -13,7 +13,7 @@ import './grid.scss';
 
 import * as lodash from 'lodash';
 import { useRecoilValue } from 'recoil';
-import { currentColorState } from '../../atoms';
+import { lineColorState } from '../../atoms';
 
 interface Point {
     x: number;
@@ -127,7 +127,7 @@ const Grid: FC = () => {
     const [userLines, setUserLines] = useState<Line[]>([]);
     const [userRedoLines, setUserRedoLines] = useState<Line[]>([]);
     const [userStartPoint, setUserStartPoint] = useState<Point | null>(null);
-    const userLineColor = useRecoilValue(currentColorState);
+    const userLineColor = useRecoilValue(lineColorState);
 
     // mouse clicks create lines
     const onGridClick = useCallback(