Working history state

1 files changed, 60 insertions, 5 deletions

diff --git a/src/pages/Paint.tsx b/src/pages/Paint.tsx
index 5284b26..136a347 100644
--- a/src/pages/Paint.tsx
+++ b/src/pages/Paint.tsx
@@ -1,11 +1,66 @@
-import { useState } from 'react';
+import { GridComponent } from '@/components/grid/GridComponent';
+import type { AnsiTermColor, Grid, GridCell } from '@/types/grid';
+import {
+    type IZipper,
+    ListZipper,
+} from '@emprespresso/pengueno';
+import { useCallback, useState } from 'react';
 
 export interface ChooseArtProps {
-    art: string;
+    grid: Grid;
 }
 
-export const Paint: React.FC<ChooseArtProps> = ({ art: initArt }) => {
-    const [art, setArt] = useState<string>(initArt);
+export const Paint: React.FC<ChooseArtProps> = ({ grid }) => {
+    const [selectedColor, setSelectedColor] = useState<AnsiTermColor>({
+        foreground: { r: 5, g: 5, b: 5 },
+        background: null,
+    });
+    const [history, setHistory] = useState<IZipper<Grid>>(
+        ListZipper.from([grid]),
+    );
 
-    return <div>{art}</div>;
+    const cellInteractionCallback = useCallback(
+        (cell: GridCell) => {
+            setHistory((currentHistory) => {
+                const currentGrid = currentHistory.read().get();
+                const newGrid = currentGrid.map((row) => [...row]); // Deep copy for current state
+                newGrid[cell.y][cell.x] = { ...cell, color: selectedColor };
+                return currentHistory.prepend(newGrid).previous().get();
+            });
+        },
+        [selectedColor],
+    );
+
+    return (
+        <div>
+            <GridComponent
+                grid={history.read().get()}
+                onCellInteract={cellInteractionCallback}
+            />
+            <button
+                disabled={
+                    !history
+                        .next()
+                        .flatMap((it) => it.read())
+                        .present()
+                }
+                onClick={() => setHistory((history) => history.next().get())}
+            >
+                Undo
+            </button>
+            <button
+                disabled={
+                    !history
+                        .previous()
+                        .flatMap((it) => it.read())
+                        .present()
+                }
+                onClick={() =>
+                    setHistory((history) => history.previous().get())
+                }
+            >
+                Redo
+            </button>
+        </div>
+    );
 };