Merge branch 'main' into feature/add-program-langage-selection

# Conflicts:
#	src/app/(withAuth)/problems/[problemId]/page.tsx

package.json

@@ -50,6 +50,7 @@
     "supertokens-auth-react": "0.36.1",
     "supertokens-node": "16.7.1",
     "supertokens-web-js": "0.8.0",
+    "uuid": "9.0.1",
     "zod": "3.22.4",
     "zod-form-data": "2.0.2"
   },
@@ -61,6 +62,7 @@
     "@types/node": "20.11.0",
     "@types/react-dom": "18.2.18",
     "@types/react-syntax-highlighter": "^15",
+    "@types/uuid": "^9",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
     "@willbooster/eslint-config-next": "1.1.0",

src/app/(withAuth)/problems/[problemId]/page.tsx

@@ -2,47 +2,59 @@
 
 import { Box, Button, Flex, HStack, Heading, VStack } from '@chakra-ui/react';
 import type { NextPage } from 'next';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
+import type { TurtleGraphicsHandle } from '../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
-import { programIdToName, generateProgram, getDescription } from '../../../../problems/problemData';
+import { programIdToName, generateProgram } from '../../../../problems/problemData';
 import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage';
 
-const GRID_COLUMNS = 12;
-const GRID_ROWS = 8;
-const GRID_SIZE = 40;
-
 const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) => {
+  const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
   const [selectedLanguageId, setSelectedLanguageId] = useState('');
 
   useEffect(() => {
     setSelectedLanguageId(getLanguageIdFromSessionStorage());
   }, []);
 
+  const problemProgram = generateProgram(params.problemId, selectedLanguageId);
+
+  const handleClickResetButton = (): void => {
+    turtleGraphicsRef.current?.reset();
+  };
+
+  const handleClickAnswerButton = (): void => {
+    const isCorrect = turtleGraphicsRef.current?.isCorrect();
+
+    // TODO: 一旦アラートで表示
+    if (isCorrect) {
+      alert('正解です');
+    } else {
+      alert('不正解です');
+    }
+  };
+
   return (
     <main>
       <VStack spacing="4">
         <Heading as="h1">{programIdToName[params.problemId]}</Heading>
         <Flex gap="6" w="100%">
-          <VStack spacing="10" w={GRID_COLUMNS * GRID_SIZE}>
-            <Box>{getDescription(params.problemId)}</Box>
+          <VStack spacing="10">
+            <Box>プログラムの実行後の結果を解答してください。</Box>
             <Box>
-              <TurtleGraphics characters={[]} gridColumns={GRID_COLUMNS} gridRows={GRID_ROWS} gridSize={GRID_SIZE} />
+              <TurtleGraphics ref={turtleGraphicsRef} 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, selectedLanguageId)}
-                programmingLanguageId={selectedLanguageId}
-              />
+              <SyntaxHighlighter code={problemProgram} programmingLanguageId={selectedLanguageId} />
             </Box>
             <HStack>
-              <Button colorScheme="gray">リセット</Button>
-              <Button colorScheme="gray">解答</Button>
+              <Button onClick={() => handleClickResetButton()}>リセット</Button>
+              <Button onClick={() => handleClickAnswerButton()}>解答</Button>
             </HStack>
           </VStack>
         </Flex>

src/app/lib/Board.ts

@@ -1,15 +1,16 @@
-import type { Cell } from '../../types';
+import { GRID_COLUMNS, GRID_ROWS } from '../../components/organisms/TurtleGraphics';
+import type { Cell, CellColor } from '../../types';
 
 import type { Character } from './Character';
 
 export class Board {
   grid: Cell[][];
   constructor({
-    gridSize = [8, 12],
+    gridSize = [GRID_ROWS, GRID_COLUMNS],
   }: {
     gridSize?: [number, number];
   } = {}) {
-    this.grid = this.createGrid(gridSize[1], gridSize[0]);
+    this.grid = this.createGrid(gridSize[0], gridSize[1]);
   }
 
   createGrid(numRows: number, numColumns: number): Cell[][] {
@@ -24,7 +25,15 @@ export class Board {
   }
 
   updateGrid(character: Character): void {
-    const { cellColor, penDown, x, y } = character;
-    if (penDown) this.grid[y - 1][x - 1].color = cellColor;
+    const { color, penDown, x, y } = character;
+    if (penDown) this.grid[y - 1][x - 1].color = color;
+  }
+
+  getCellColor(x: number, y: number): CellColor {
+    return this.grid[y][x].color;
+  }
+
+  setCellColor(x: number, y: number, color: CellColor): void {
+    this.grid[y][x].color = color;
   }
 }

src/app/lib/Character.ts

@@ -1,43 +1,34 @@
-import type { CellColor } from '../../types';
+import { v4 as uuidv4 } from 'uuid';
 
-export const CharacterColor = {
-  Red: 'red',
-  Blue: 'blue',
-  Green: 'green',
-  Yellow: 'yellow',
-  Purple: 'purple',
-};
-type Color = (typeof CharacterColor)[keyof typeof CharacterColor];
+import { GRID_COLUMNS, GRID_ROWS } from '../../components/organisms/TurtleGraphics';
+import type { CellColor, CharacterDirection } from '../../types';
 
 export class Character {
-  id: number;
+  id: string;
   name: string;
   x: number;
   y: number;
-  direction: string;
-  cellColor: CellColor;
-  color: Color;
+  direction: CharacterDirection;
+  color: CellColor;
   penDown: boolean;
   path: string[];
 
   constructor({
-    cellColor = 'red',
     color = 'red',
     direction = 'down',
-    id = 1,
+    id = uuidv4(),
     name = 'Bear',
     path = ['1,1'],
     penDown = true,
     x = 1,
     y = 1,
   }: {
-    id?: number;
+    id?: string;
     name?: string;
     x?: number;
     y?: number;
-    direction?: string;
-    cellColor?: CellColor;
-    color?: Color;
+    direction?: CharacterDirection;
+    color?: CellColor;
     penDown?: boolean;
     path?: string[];
   } = {}) {
@@ -46,35 +37,28 @@ export class Character {
     this.x = x;
     this.y = y;
     this.direction = direction;
-    this.cellColor = cellColor;
     this.color = color;
     this.penDown = penDown;
     this.path = path;
   }
 
-  moveForward(gridColumns: number, gridRows: number): void {
+  moveForward(): void {
+    if (!this.canMoveForward()) return;
+
     switch (this.direction) {
       case 'up': {
-        if (this.y <= 1) return;
-
         this.y -= 1;
         break;
       }
       case 'down': {
-        if (this.y >= gridRows) return;
-
         this.y += 1;
         break;
       }
       case 'left': {
-        if (this.x <= 1) return;
-
         this.x -= 1;
         break;
       }
       case 'right': {
-        if (this.x >= gridColumns) return;
-
         this.x += 1;
         break;
       }
@@ -85,29 +69,23 @@ export class Character {
     }
   }
 
-  moveBack(gridColumns: number, gridRows: number): void {
+  moveBack(): void {
+    if (!this.canMoveBack()) return;
+
     switch (this.direction) {
       case 'up': {
-        if (this.y >= gridRows) return;
-
         this.y += 1;
         break;
       }
       case 'down': {
-        if (this.y <= 1) return;
-
         this.y -= 1;
         break;
       }
       case 'left': {
-        if (this.x >= gridColumns) return;
-
         this.x += 1;
         break;
       }
       case 'right': {
-        if (this.x <= 1) return;
-
         this.x -= 1;
         break;
       }
@@ -160,7 +138,12 @@ export class Character {
     }
   }
 
-  setColor(color: Color): void {
+  setPosition(x: number, y: number): void {
+    this.x = x;
+    this.y = y;
+  }
+
+  setColor(color: CellColor): void {
     this.color = color;
   }
 
@@ -189,4 +172,40 @@ export class Character {
     }
     return '';
   }
+
+  canMoveForward(): boolean {
+    switch (this.direction) {
+      case 'up': {
+        return this.y > 1;
+      }
+      case 'down': {
+        return this.y < GRID_ROWS;
+      }
+      case 'left': {
+        return this.x > 1;
+      }
+      case 'right': {
+        return this.x < GRID_COLUMNS;
+      }
+    }
+    return false;
+  }
+
+  canMoveBack(): boolean {
+    switch (this.direction) {
+      case 'up': {
+        return this.y < GRID_ROWS;
+      }
+      case 'down': {
+        return this.y > 1;
+      }
+      case 'left': {
+        return this.x < GRID_COLUMNS;
+      }
+      case 'right': {
+        return this.x > 1;
+      }
+    }
+    return false;
+  }
 }