Merge branch 'main' into 13-problemTemplete

exKAZUu-Research · Feb 26, 2024 · 771dbac · 771dbac
2 parents ab001c0 + be5761e
commit 771dbac
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 };