feat: support programming 2 (#205)

.env

@@ -1,7 +1,7 @@
 DATABASE_URL="file:./dev.sqlite3?connection_limit=1"
 
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
-NEXT_PUBLIC_COURSE_ID_TO_LECTURE_IDS_JSON={"tuBeginner1":["8d692b48-8c19-4679-8d8f-3f27a051d44d","d4de75e2-758b-4500-b38e-96213c360527","99045fdf-6cb5-4947-b934-8b1bc5831bbd","37632776-e3ab-4cc5-ae08-934caf2ada53","8fbc94d3-d20c-4457-8997-61e85b3516d9","35957643-c106-4a97-8073-6705c39ab9a6","045094ae-1f5c-4caf-bc33-a86af985f13b","84805179-12cf-4871-969e-fb39e6ad767a"],"tuBeginner2":["5ba06885-2044-4c1e-bd65-2a9c5e9c9e39"],"test":["6481cd2e-5143-4a99-9c86-dd93b7254211"]}
+NEXT_PUBLIC_COURSE_ID_TO_LECTURE_IDS_JSON={"tuBeginner1":["8d692b48-8c19-4679-8d8f-3f27a051d44d","d4de75e2-758b-4500-b38e-96213c360527","99045fdf-6cb5-4947-b934-8b1bc5831bbd","37632776-e3ab-4cc5-ae08-934caf2ada53","8fbc94d3-d20c-4457-8997-61e85b3516d9","35957643-c106-4a97-8073-6705c39ab9a6","045094ae-1f5c-4caf-bc33-a86af985f13b","84805179-12cf-4871-969e-fb39e6ad767a"],"tuBeginner2":["8d692b48-8c19-4679-8d8f-3f27a051d44d","d4de75e2-758b-4500-b38e-96213c360527","99045fdf-6cb5-4947-b934-8b1bc5831bbd","37632776-e3ab-4cc5-ae08-934caf2ada53","8fbc94d3-d20c-4457-8997-61e85b3516d9","35957643-c106-4a97-8073-6705c39ab9a6","045094ae-1f5c-4caf-bc33-a86af985f13b","84805179-12cf-4871-969e-fb39e6ad767a"],"test":["8d692b48-8c19-4679-8d8f-3f27a051d44d"]}
 
 SUPERTOKENS_URI="https://st-dev-9ecbdd10-5f8e-11ef-a204-f3d2d26d900f.aws.supertokens.io"
 SUPERTOKENS_API_KEY="J-1qlZUxj8wo1xO3DZBu9rUwZc"

README.md

@@ -41,6 +41,7 @@ An educational web app for training program tracing skills.
    ```
 
 2. Open lectures via the following URLs:
+
    - 初級プログラミングⅠ
      1. http://localhost:3000/courses/tuBeginner1/lectures/8d692b48-8c19-4679-8d8f-3f27a051d44d
      2. http://localhost:3000/courses/tuBeginner1/lectures/d4de75e2-758b-4500-b38e-96213c360527
@@ -51,7 +52,9 @@ An educational web app for training program tracing skills.
      7. http://localhost:3000/courses/tuBeginner1/lectures/045094ae-1f5c-4caf-bc33-a86af985f13b
      8. http://localhost:3000/courses/tuBeginner1/lectures/84805179-12cf-4871-969e-fb39e6ad767a
    - 初級プログラミングⅡ
-     1. http://localhost:3000/courses/tuBeginner2/lectures/5ba06885-2044-4c1e-bd65-2a9c5e9c9e39
+     1. http://localhost:3000/courses/tuBeginner2/lectures/8d692b48-8c19-4679-8d8f-3f27a051d44d
+   - 動作確認用
+     1. http://localhost:3000/courses/test/lectures/8d692b48-8c19-4679-8d8f-3f27a051d44d
 
    The URL format is as follows.
    You can find parameter values from `NEXT_PUBLIC_COURSE_ID_TO_LECTURE_IDS_JSON` in the `.env` file.

src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx

@@ -75,7 +75,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
       updateVariables(props.initialVariables);
       if (!keepSelectedCell) setSelectedCell(undefined);
     },
-    [previousTraceItem, props.initialVariables, updateBoard, updateTurtles]
+    [previousTraceItem, props.initialVariables, updateBoard, updateTurtles, updateVariables]
   );
 
   useImperativeHandle(ref, () => ({
@@ -84,8 +84,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
 
   useEffect(() => {
     initialize(props.previousTraceItemIndex >= 1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.previousTraceItemIndex, props.problem]);
+  }, [props.previousTraceItemIndex, initialize]); // We should include initialize because it depends on props.initialVariables
 
   const updateTurtle = (currentTurtle: TurtleTrace, newTurtle: Partial<TurtleTrace>): void => {
     updateTurtles((draft) => {
@@ -116,7 +115,8 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
         zenkakuAlphanumericalsToHankaku(value) !==
         zenkakuAlphanumericalsToHankaku(props.currentVariables[name].toString())
       ) {
-        locations.push(`変数${name}`);
+        const isExpression = /[+\-*/%()[\]\\.]/.test(name);
+        locations.push(isExpression ? `式「${name}」` : `変数${name}`);
         if (props.initialVariables[name].toString() === props.currentVariables[name].toString()) {
           hintText += hintText ? '\n\n' : '\n\nヒント: ';
           hintText +=
@@ -234,7 +234,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
             <Table size="sm">
               <Thead>
                 <Tr>
-                  <Th>変数名</Th>
+                  <Th>変数/式</Th>
                   <Th>値（=や+=などの代入がないと変化しない）</Th>
                 </Tr>
               </Thead>

src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx

@@ -317,11 +317,10 @@ function getInitialVariables(
   let adjustedPreviousTraceItemIndex = previousTraceItemIndex;
 
   if (problemType === 'step') {
-    while (
-      adjustedPreviousTraceItemIndex > 0 &&
-      traceItems[currentTraceItemIndex].depth !== traceItems[adjustedPreviousTraceItemIndex].depth
-    ) {
-      if (traceItems[currentTraceItemIndex].depth > traceItems[adjustedPreviousTraceItemIndex].depth) {
+    const currentDepth = traceItems[currentTraceItemIndex].depth;
+    while (adjustedPreviousTraceItemIndex > 0 && currentDepth !== traceItems[adjustedPreviousTraceItemIndex].depth) {
+      if (currentDepth > traceItems[adjustedPreviousTraceItemIndex].depth) {
+        // 過去のトレースの方が現在のトレースよりも深いため。
         return getEmptyVariables(currentVariables);
       }
       adjustedPreviousTraceItemIndex--;
@@ -330,6 +329,7 @@ function getInitialVariables(
     if (
       traceItems[currentTraceItemIndex].callStack.at(-1) !== traceItems[adjustedPreviousTraceItemIndex].callStack.at(-1)
     ) {
+      // 過去のトレースと現在のトレースのスタックトレースが別であるため。
       return getEmptyVariables(currentVariables);
     }
   }

src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/Variables.tsx

@@ -25,7 +25,7 @@ export const Variables: React.FC<VariablesProps> = ({ traceItemVars }) => {
         <Table>
           <Thead>
             <Tr>
-              <Th>変数名</Th>
+              <Th>変数/式</Th>
               <Th isNumeric w="0">
                 値
               </Th>

src/app/(withAuth)/usage/page.tsx

@@ -40,7 +40,7 @@ const CoursesPage: NextPage = async () => {
         <Image alt="Turtle Movement" my={4} src="/images/usage_03.png" />
 
         <Text mt={16}>
-          ④盤面の下に「変数名」「値」と書かれたフォームがある場合は、プログラムを実行した時の最終的な変数の値を入力してください。
+          ④盤面の下に「変数/式」「値」と書かれたフォームがある場合は、プログラムを実行した時の最終的な変数の値を入力してください。
         </Text>
         <Image alt="Variable Input" my={4} src="/images/usage_04.png" />
 

src/problems/instantiateProblem.ts

@@ -15,6 +15,11 @@ export type InstantiatedProblem = {
    */
   displayProgram: string;
 
+  /**
+   * The program to be executable via `eval()`. For debugging.
+   */
+  executableCode: string;
+
   /**
    * The trace items of the program.
    */