.

exKAZUu-Research · Jan 25, 2024 · a288985 · a288985
1 parent 750be77
commit a288985
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 45 deletions.
diff --git a/src/app/(withAuth)/problems/[problemId]/page.tsx b/src/app/(withAuth)/problems/[problemId]/page.tsx
@@ -18,6 +18,7 @@ const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) =>
 
   // TODO: 一旦Java固定 言語選択機能実装時に変更する
   const programmingLanguageId = 'java';
+  const problemProgram = generateProgram(params.problemId, programmingLanguageId);
 
   const handleClickResetButton = (): void => {
     turtleGraphicsRef.current?.reset();
@@ -48,17 +49,15 @@ const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) =>
                 gridRows={GRID_ROWS}
                 gridSize={GRID_SIZE}
                 isEnableOperation={true}
+                problemProgram={problemProgram}
               />
             </Box>
           </VStack>
           <VStack align="end" minW="50%" overflow="hidden">
             <Button colorScheme="gray">解説</Button>
             {/* 画面に収まる高さに設定 */}
             <Box h="calc(100vh - 370px)" w="100%">
-              <SyntaxHighlighter
-                code={generateProgram(params.problemId, programmingLanguageId)}
-                programmingLanguageId={programmingLanguageId}
-              />
+              <SyntaxHighlighter code={problemProgram} programmingLanguageId={programmingLanguageId} />
             </Box>
             <HStack>
               <Button onClick={() => handleClickResetButton()}>リセット</Button>

diff --git a/src/app/lib/Board.ts b/src/app/lib/Board.ts
@@ -17,7 +17,7 @@ export class Board {
     for (let i = 0; i < numRows; i++) {
       grid.push([]);
       for (let j = 0; j < numColumns; j++) {
-        grid[i].push({ color: 'white' });
+        grid[i].push({ color: undefined });
       }
     }
     return grid;

diff --git a/src/components/molecules/TurtleGraphicsController.tsx b/src/components/molecules/TurtleGraphicsController.tsx
@@ -96,8 +96,8 @@ export const TurtleGraphicsController: React.FC<TurtleGraphicsControllerProps> =
               selectedColor={selectedCharacter.color}
             />
             <ColorChangeButton
-              color={'white'}
-              handleOnClick={() => handleChangeCharacterColorButton('white')}
+              color={undefined}
+              handleOnClick={() => handleChangeCharacterColorButton(undefined)}
               selectedColor={selectedCharacter.color}
             />
           </HStack>
@@ -147,8 +147,8 @@ export const TurtleGraphicsController: React.FC<TurtleGraphicsControllerProps> =
               selectedColor={board.getCellColor(selectedCell.x, selectedCell.y)}
             />
             <ColorChangeButton
-              color={'white'}
-              handleOnClick={() => handleChangeCellColorButton('white')}
+              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
@@ -5,6 +5,7 @@ import React, { useState, forwardRef, useImperativeHandle, useMemo } from 'react
 
 import { Board } from '../../app/lib/Board';
 import { Character } from '../../app/lib/Character';
+import { solveProblem } from '../../app/lib/solveProblem';
 import type { CellColor, CharacterDirection, SelectedCell } from '../../types';
 import { TurtleGraphicsController } from '../molecules/TurtleGraphicsController';
 
@@ -17,6 +18,7 @@ interface TurtleGraphicsProps {
   gridRows?: number;
   gridSize?: number;
   isEnableOperation?: boolean;
+  problemProgram: string;
 }
 
 export interface TurtleGraphicsHandle {
@@ -25,7 +27,7 @@ export interface TurtleGraphicsHandle {
 }
 
 export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>(
-  ({ gridColumns = 12, gridRows = 8, gridSize = 40, isEnableOperation = false }, ref) => {
+  ({ gridColumns = 12, gridRows = 8, gridSize = 40, isEnableOperation = false, problemProgram }, ref) => {
     const [board, setBoard] = useState<Board>(new Board());
     const [selectedCharacter, setSelectedCharacter] = useState<Character>();
     const [selectedCell, setSelectedCell] = useState<SelectedCell>();
@@ -74,18 +76,10 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
     };
 
     const isCorrect = (): boolean => {
+      const answer = solveProblem(problemProgram);
+
       // TODO: 正答を取得する処理ができたら置き換える
-      const correctCharacters = [
-        new Character({
-          name: 'A',
-          x: 5,
-          y: 2,
-          direction: 'right',
-          color: 'red',
-          penDown: true,
-          path: ['1,2', '2,2', '3,2'],
-        }),
-      ];
+      const correctCharacters = [answer.character];
       // 順番は関係なく、name, x, y, direction, color、penDownが一致していれば正解
       const isCorrectCharacters = correctCharacters.every((correctCharacter) => {
         const character = characters.find((character) => character.name === correctCharacter.name);
@@ -101,29 +95,16 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
         );
       });
 
-      // const correctCells = Array.from({ length: gridColumns * gridRows }).map((_, index) => {
-      //   const x = (index % gridColumns) + ORIGIN_X;
-      //   const y = Math.floor(index / gridColumns) + ORIGIN_Y;
-
-      //   let color = 'white' as CellColor;
-
-      //   if ((x === 1 && y === 2) || (x === 2 && y === 2) || (x === 3 && y === 2) || (x === 4 && y === 2)) {
-      //     color = 'red';
-      //   }
-
-      //   return new TurtleGraphicsCell(index, x, y, color);
-      // });
-      // // すべてのセルの色が一致していれば正解
-      // const isCorrectCells = correctCells.every((correctCell) => {
-      //   const cell = cells.find((cell) => cell.id === correctCell.id);
-
-      //   if (!cell) return false;
-
-      //   return correctCell.backgroundColor === cell.backgroundColor;
-      // });
+      const correctBoard = answer.board;
+      // すべてのセルの色が一致していれば正解
+      const isCorrectBoard = correctBoard.grid.every((rows, rowIndex) =>
+        rows.every((column, columnIndex) => {
+          const cell = board.grid[rowIndex][columnIndex];
+          return cell.color === column.color;
+        })
+      );
 
-      return isCorrectCharacters;
-      // return isCorrectCharacters && isCorrectCells;
+      return isCorrectCharacters && isCorrectBoard;
     };
 
     const handleClickCharacter = (character: Character): void => {
@@ -227,7 +208,7 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
     const handleAddCharacterButton = (): void => {
       if (!selectedCell) return;
 
-      board.setCellColor(selectedCell.x, selectedCell.y, 'white');
+      board.setCellColor(selectedCell.x, selectedCell.y, undefined);
 
       const newCharacter = new Character({
         x: selectedCell.x + ORIGIN_X,

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' | 'white';
+export type CellColor = 'red' | 'blue' | 'green' | 'yellow' | 'purple' | undefined;
 export type Cell = {
   color: CellColor;
 };