From be5761eaa52cea7371fe6c18da4c3310c87cc512 Mon Sep 17 00:00:00 2001
From: tatehito <48908346+Tatehito@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:26:07 +0900
Subject: [PATCH] feat: Add cell color clear function (#47)

---
 src/app/lib/Board.ts                          |  2 +-
 .../molecules/TurtleGraphicsController.tsx    |  5 --
 src/components/organisms/TurtleGraphics.tsx   | 41 ++++++++----
 src/types.ts                                  |  2 +-
 tests/solveProblem.test.ts                    | 64 +++++++++----------
 5 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/src/app/lib/Board.ts b/src/app/lib/Board.ts
index 9041fdb0..6647f8b1 100644
--- a/src/app/lib/Board.ts
+++ b/src/app/lib/Board.ts
@@ -18,7 +18,7 @@ export class Board {
     for (let i = 0; i < numRows; i++) {
       grid.push([]);
       for (let j = 0; j < numColumns; j++) {
-        grid[i].push({ color: undefined });
+        grid[i].push({ color: 'white' });
       }
     }
     return grid;
diff --git a/src/components/molecules/TurtleGraphicsController.tsx b/src/components/molecules/TurtleGraphicsController.tsx
index f06dc48c..0bf0440e 100644
--- a/src/components/molecules/TurtleGraphicsController.tsx
+++ b/src/components/molecules/TurtleGraphicsController.tsx
@@ -141,11 +141,6 @@ export const TurtleGraphicsController: React.FC<TurtleGraphicsControllerProps> =
               handleOnClick={() => handleChangeCellColorButton('purple')}
               selectedColor={board.getCellColor(selectedCell.x, selectedCell.y)}
             />
-            <ColorChangeButton
-              color={undefined}
-              handleOnClick={() => handleChangeCellColorButton(undefined)}
-              selectedColor={board.getCellColor(selectedCell.x, selectedCell.y)}
-            />
           </HStack>
         </>
       )}
diff --git a/src/components/organisms/TurtleGraphics.tsx b/src/components/organisms/TurtleGraphics.tsx
index 7fc9fdc1..f7262d8e 100644
--- a/src/components/organisms/TurtleGraphics.tsx
+++ b/src/components/organisms/TurtleGraphics.tsx
@@ -79,6 +79,19 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
       setSelectedCharacter(updatedCharacter);
     };
 
+    const updateCellColor = (color: CellColor, columnIndex: number, rowIndex: number): void => {
+      setBoard((prevBoard) => {
+        const newBoard = new Board();
+        for (const [y, rows] of prevBoard.grid.entries()) {
+          for (const [x, column] of rows.entries()) {
+            newBoard.setCellColor(x, y, column.color);
+          }
+        }
+        newBoard.setCellColor(columnIndex, rowIndex, color);
+        return newBoard;
+      });
+    };
+
     const isCorrect = (): boolean => {
       return isAnswerCorrect(problemProgram, characters, board, currentCheckPointLine);
     };
@@ -197,16 +210,18 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
     const handleChangeCellColorButton = (color: CellColor): void => {
       if (!selectedCell) return;
 
-      setBoard((prevBoard) => {
-        const newBoard = new Board();
-        for (const [y, rows] of prevBoard.grid.entries()) {
-          for (const [x, column] of rows.entries()) {
-            newBoard.setCellColor(x, y, column.color);
-          }
-        }
-        newBoard.setCellColor(selectedCell.x, selectedCell.y, color);
-        return newBoard;
-      });
+      updateCellColor(color, selectedCell.x, selectedCell.y);
+    };
+
+    const handleContextMenu = (
+      event: React.MouseEvent<HTMLDivElement>,
+      columnIndex: number,
+      rowIndex: number
+    ): void => {
+      event.preventDefault();
+
+      handleClickCell(columnIndex, rowIndex);
+      updateCellColor('white', columnIndex, rowIndex);
     };
 
     return (
@@ -229,6 +244,7 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
                 borderWidth={selectedCell?.x === columnIndex && selectedCell?.y === rowIndex ? '2px' : '0.5px'}
                 className="grid-cell"
                 onClick={() => handleClickCell(columnIndex, rowIndex)}
+                onContextMenu={(e) => handleContextMenu(e, columnIndex, rowIndex)}
               />
             ))
           )}
@@ -238,11 +254,12 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
               borderColor={selectedCharacter?.id === character.id ? 'black' : 'transparent'}
               borderWidth="2px"
               h={GRID_SIZE + 'px'}
-              left={(character.x - ORIGIN_Y) * GRID_SIZE + 'px'}
+              left={(character.x - ORIGIN_X) * GRID_SIZE + 'px'}
               position="absolute"
-              top={(character.y - ORIGIN_X) * GRID_SIZE + 'px'}
+              top={(character.y - ORIGIN_Y) * GRID_SIZE + 'px'}
               w={GRID_SIZE + 'px'}
               onClick={() => handleClickCharacter(character)}
+              onContextMenu={(e) => handleContextMenu(e, character.x - ORIGIN_X, character.y - ORIGIN_Y)}
             >
               <Box p="0.2rem" transform={character.rotateCss()}>
                 <Image
diff --git a/src/types.ts b/src/types.ts
index 19255767..5f55454c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,7 +9,7 @@ export interface LayoutProps {
 
 export type LayoutComponent = React.FC<LayoutProps>;
 
-export type CellColor = 'red' | 'blue' | 'green' | 'yellow' | 'purple' | undefined;
+export type CellColor = 'red' | 'blue' | 'green' | 'yellow' | 'purple' | 'white';
 export type Cell = {
   color: CellColor;
 };
diff --git a/tests/solveProblem.test.ts b/tests/solveProblem.test.ts
index f39abe75..94f9ff01 100644
--- a/tests/solveProblem.test.ts
+++ b/tests/solveProblem.test.ts
@@ -116,14 +116,14 @@ test('Solve a problem (1character)', () => {
 
   // prettier-ignore
   expect(answer.board.grid).toEqual([
-    [{ color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: "red" }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
+    [{ color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: "red" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
   ]);
 
   expect(answer.histories?.at(0)?.characterVariables?.length).toEqual(0);
@@ -138,25 +138,25 @@ test('Solve a problem (1character)', () => {
 
   // prettier-ignore
   expect(answer.histories?.at(0)?.board?.grid).toEqual([
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" },],
   ]);
   // prettier-ignore
   expect(answer.histories?.at(1)?.board?.grid).toEqual([
-    [{ color: 'red' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
+    [{ color: 'red' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
   ]);
 });
 
@@ -186,14 +186,14 @@ test('Solve a problem (multiple characters)', () => {
 
   // prettier-ignore
   expect(answer.board.grid).toEqual([
-    [{ color: 'red' }, { color: 'green' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: 'green' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: 'red' }, { color: 'green' }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
-    [{ color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }, { color: undefined }],
+    [{ color: 'red' }, { color: 'green' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: 'green' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: 'red' }, { color: 'green' }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
+    [{ color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }, { color: "white" }],
   ]);
   expect(answer.histories?.at(-1)?.characterVariables?.length).toEqual(3);
   expect(answer.histories?.at(-1)?.characterVariables?.[0]?.value.x).toEqual(1);