Merge branch 'main' into chore/rename-problem

# Conflicts:
#	src/app/(withAuth)/programs/[programId]/CheckpointProblem.tsx
#	src/app/(withAuth)/programs/[programId]/ExecutionResultProblem.tsx
#	src/app/(withAuth)/programs/[programId]/StepProblem.tsx
#	src/app/(withAuth)/programs/[programId]/page.tsx

src/app/(withAuth)/programs/[programId]/CheckpointProblem.tsx

@@ -1,37 +1,35 @@
 'use client';
 
 import { Box, Button, Flex, HStack, VStack } from '@chakra-ui/react';
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 
 import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
 import type { TurtleGraphicsHandle } from '../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
-import { generateProgram } from '../../../../problems/problemData';
 import type { ProblemType } from '../../../../types';
-import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage';
 
 interface CheckpointProblemProps {
-  programId: string;
+  problemProgram: string;
+  selectedLanguageId: string;
+  checkPointLines: number[];
   setStep: (step: ProblemType) => void;
+  beforeCheckPointLine: number;
+  setBeforeCheckPointLine: (line: number) => void;
+  currentCheckPointLine: number;
+  setCurrentCheckPointLine: (line: number) => void;
 }
 
-export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({ programId }) => {
+export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
+  beforeCheckPointLine,
+  checkPointLines,
+  currentCheckPointLine,
+  problemProgram,
+  selectedLanguageId,
+  setBeforeCheckPointLine,
+  setCurrentCheckPointLine,
+  setStep,
+}) => {
   const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
-  const [selectedLanguageId, setSelectedLanguageId] = useState('');
-
-  // TODO: チェックポイントを取得する処理が実装できたら置き換える
-  const getCheckPointLines = [2, 4];
-  const [problemProgram, setProblemProgram] = useState<string>('');
-  const [beforeCheckPointLine, setBeforeCheckPointLine] = useState(1);
-  const [currentCheckPointLine, setCurrentCheckPointLine] = useState(getCheckPointLines[0]);
-
-  useEffect(() => {
-    setSelectedLanguageId(getLanguageIdFromSessionStorage());
-  }, []);
-
-  useEffect(() => {
-    setProblemProgram(generateProgram(programId, selectedLanguageId));
-  }, [programId, selectedLanguageId]);
 
   const handleClickResetButton = (): void => {
     turtleGraphicsRef.current?.init();
@@ -42,15 +40,22 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({ programId
 
     // TODO: 一旦アラートで表示
     if (isCorrect) {
-      alert('正解です');
-
-      if (currentCheckPointLine === getCheckPointLines.at(-1)) return;
-
       setBeforeCheckPointLine(currentCheckPointLine);
-      setCurrentCheckPointLine(getCheckPointLines[getCheckPointLines.indexOf(currentCheckPointLine) + 1]);
+
+      if (currentCheckPointLine === checkPointLines.at(-1)) {
+        // 最終チェックポイントを正解した場合はその次の行からステップ問題に移行
+        alert('正解です。このチェックポイントから1行ずつ回答してください');
+        setCurrentCheckPointLine(currentCheckPointLine + 1);
+        setStep('step');
+      } else {
+        alert('正解です。次のチェックポイントに進みます');
+        setCurrentCheckPointLine(checkPointLines[checkPointLines.indexOf(currentCheckPointLine) + 1]);
+      }
     } else {
-      alert('不正解です');
-      // setStep('step');
+      // 不正解の場合は最後に正解したチェックポイントからステップ問題に移行
+      alert('不正解です。最後に正解したチェックポイントから1行ずつ回答してください');
+      setCurrentCheckPointLine(beforeCheckPointLine + 1);
+      setStep('step');
     }
   };
 

src/app/(withAuth)/programs/[programId]/ExecutionResultProblem.tsx

@@ -1,29 +1,25 @@
 'use client';
 
 import { Box, Button, Flex, HStack, VStack } from '@chakra-ui/react';
-import { useEffect, useState, useRef } from 'react';
+import { useRef } from 'react';
 
 import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
 import type { TurtleGraphicsHandle } from '../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
-import { generateProgram } from '../../../../problems/problemData';
 import type { ProblemType } from '../../../../types';
-import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage';
 
 interface ExecutionResultProblemProps {
-  programId: string;
+  problemProgram: string;
+  selectedLanguageId: string;
   setStep: (step: ProblemType) => void;
 }
 
-export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({ programId, setStep }) => {
+export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
+  problemProgram,
+  selectedLanguageId,
+  setStep,
+}) => {
   const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
-  const [selectedLanguageId, setSelectedLanguageId] = useState('');
-
-  useEffect(() => {
-    setSelectedLanguageId(getLanguageIdFromSessionStorage());
-  }, []);
-
-  const problemProgram = generateProgram(programId, selectedLanguageId);
 
   const handleClickResetButton = (): void => {
     turtleGraphicsRef.current?.init();
@@ -34,9 +30,9 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
 
     // TODO: 一旦アラートで表示
     if (isCorrect) {
-      alert('正解です');
+      alert('正解です。この問題は終了です');
     } else {
-      alert('不正解です');
+      alert('不正解です。チェックポイントごとに回答してください');
       setStep('checkpoint');
     }
   };

src/app/(withAuth)/programs/[programId]/StepProblem.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Box, Button, Flex, HStack, VStack } from '@chakra-ui/react';
+import { useRef } from 'react';
+
+import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
+import type { TurtleGraphicsHandle } from '../../../../components/organisms/TurtleGraphics';
+import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
+
+interface StepProblemProps {
+  beforeCheckPointLine: number;
+  currentCheckPointLine: number;
+  problemProgram: string;
+  selectedLanguageId: string;
+  setBeforeCheckPointLine: (line: number) => void;
+  setCurrentCheckPointLine: (line: number) => void;
+}
+
+export const StepProblem: React.FC<StepProblemProps> = ({
+  beforeCheckPointLine,
+  currentCheckPointLine,
+  problemProgram,
+  selectedLanguageId,
+  setBeforeCheckPointLine,
+  setCurrentCheckPointLine,
+}) => {
+  const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
+
+  const handleClickResetButton = (): void => {
+    turtleGraphicsRef.current?.init();
+  };
+
+  const handleClickAnswerButton = (): void => {
+    const isCorrect = turtleGraphicsRef.current?.isCorrect();
+
+    // TODO: 一旦アラートで表示
+    if (isCorrect) {
+      const problemProgramLines = problemProgram.split('\n').length;
+
+      if (currentCheckPointLine === problemProgramLines) {
+        alert('正解です。この問題は終了です');
+      } else {
+        alert('正解です。次の行に進みます');
+        setBeforeCheckPointLine(currentCheckPointLine);
+        setCurrentCheckPointLine(currentCheckPointLine + 1);
+      }
+    } else {
+      alert('不正解です。もう一度回答してください');
+    }
+  };
+
+  return (
+    <Flex gap="6" w="100%">
+      <VStack spacing="10">
+        <Box>茶色にハイライトされている行における盤面を作成してください。</Box>
+        <Box>青色のハイライト時点の実行結果</Box>
+        <Box>
+          <TurtleGraphics
+            ref={turtleGraphicsRef}
+            beforeCheckPointLine={beforeCheckPointLine}
+            currentCheckPointLine={currentCheckPointLine}
+            isEnableOperation={false}
+            problemProgram={problemProgram}
+          />
+        </Box>
+        <Box>茶色のハイライト時点の実行結果</Box>
+        <Box>
+          <TurtleGraphics
+            ref={turtleGraphicsRef}
+            beforeCheckPointLine={beforeCheckPointLine}
+            currentCheckPointLine={currentCheckPointLine}
+            isEnableOperation={true}
+            problemProgram={problemProgram}
+          />
+        </Box>
+      </VStack>
+      <VStack align="end" minW="50%" overflow="hidden">
+        <Button colorScheme="gray">解説</Button>
+        <Box h="840px" w="100%">
+          <SyntaxHighlighter
+            beforeCheckPointLine={beforeCheckPointLine}
+            code={problemProgram}
+            currentCheckPointLine={currentCheckPointLine}
+            programmingLanguageId={selectedLanguageId}
+          />
+        </Box>
+        <HStack>
+          <Button onClick={() => handleClickResetButton()}>リセット</Button>
+          <Button onClick={() => handleClickAnswerButton()}>解答</Button>
+        </HStack>
+      </VStack>
+    </Flex>
+  );
+};

src/app/(withAuth)/programs/[programId]/page.tsx

@@ -2,32 +2,79 @@
 
 import { Heading, VStack } from '@chakra-ui/react';
 import type { NextPage } from 'next';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { programIdToName } from '../../../../problems/problemData';
+import { generateProgram, programIdToName } from '../../../../problems/problemData';
 import type { ProblemType } from '../../../../types';
+import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage';
 
 import { CheckpointProblem } from './CheckpointProblem';
 import { ExecutionResultProblem } from './ExecutionResultProblem';
+import { StepProblem } from './StepProblem';
 
 const ProblemPage: NextPage<{ params: { programId: string } }> = ({ params }) => {
+  const programId = params.programId;
+  // TODO: チェックポイントを取得する処理が実装できたら置き換える
+  const checkPointLines = [1, 4];
+
+  const [selectedLanguageId, setSelectedLanguageId] = useState('');
+  const [problemProgram, setProblemProgram] = useState<string>('');
   const [step, setStep] = useState<ProblemType>('normal');
+  const [beforeCheckPointLine, setBeforeCheckPointLine] = useState(0);
+  const [currentCheckPointLine, setCurrentCheckPointLine] = useState(checkPointLines[0]);
+
+  useEffect(() => {
+    setSelectedLanguageId(getLanguageIdFromSessionStorage());
+  }, []);
+
+  useEffect(() => {
+    setProblemProgram(generateProgram(programId, selectedLanguageId));
+  }, [programId, selectedLanguageId]);
 
   const ProblemComponent: React.FC = () => {
     switch (step) {
       case 'normal': {
-        return <ExecutionResultProblem programId={params.programId} setStep={setStep} />;
+        return (
+          <ExecutionResultProblem
+            problemProgram={problemProgram}
+            selectedLanguageId={selectedLanguageId}
+            setStep={setStep}
+          />
+        );
       }
       case 'checkpoint': {
-        return <CheckpointProblem programId={params.programId} setStep={setStep} />;
+        return (
+          <CheckpointProblem
+            beforeCheckPointLine={beforeCheckPointLine}
+            checkPointLines={checkPointLines}
+            currentCheckPointLine={currentCheckPointLine}
+            problemProgram={problemProgram}
+            selectedLanguageId={selectedLanguageId}
+            setBeforeCheckPointLine={setBeforeCheckPointLine}
+            setCurrentCheckPointLine={setCurrentCheckPointLine}
+            setStep={setStep}
+          />
+        );
+      }
+      case 'step': {
+        return (
+          <StepProblem
+            beforeCheckPointLine={beforeCheckPointLine}
+            currentCheckPointLine={currentCheckPointLine}
+            problemProgram={problemProgram}
+            selectedLanguageId={selectedLanguageId}
+            setBeforeCheckPointLine={setBeforeCheckPointLine}
+            setCurrentCheckPointLine={setCurrentCheckPointLine}
+          />
+        );
       }
     }
   };
 
   return (
     <main>
       <VStack spacing="4">
-        <Heading as="h1">{programIdToName[params.programId]}</Heading>
+        <Heading as="h1">{programIdToName[programId]}</Heading>
         <ProblemComponent />
       </VStack>
     </main>

src/problems/problemData.ts

@@ -42,8 +42,7 @@ character1.moveForward();
 character1.moveForward();
 character1.moveForward();
 character1.moveForward();
-character1.moveForward();
-` || programIdToLanguageIdToProgram[programId][languageId]
+character1.moveForward();` || programIdToLanguageIdToProgram[programId][languageId]
   );
 }