From 716b054f6c8edf280ad5660908f31402199340d9 Mon Sep 17 00:00:00 2001
From: "Sakamoto, Kazunori" <exkazuu@gmail.com>
Date: Fri, 11 Oct 2024 14:41:05 +0900
Subject: [PATCH] feat: enhance hints

---
 .../problems/[problemId]/BoardEditor.tsx          | 15 ++++++++++-----
 .../problems/[problemId]/ProblmBody.tsx           | 10 +++++++---
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx
index bfb590c1..1c320314 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/BoardEditor.tsx
@@ -52,7 +52,7 @@ interface TurtleGraphicsProps {
 }
 
 export interface TurtleGraphicsHandle {
-  findIncorrectLocations(): string[];
+  findIncorrectLocationsAndHintText(): [string[], string];
 }
 
 export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>((props, ref) => {
@@ -77,7 +77,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
   );
 
   useImperativeHandle(ref, () => ({
-    findIncorrectLocations,
+    findIncorrectLocationsAndHintText,
   }));
 
   useEffect(() => {
@@ -100,8 +100,9 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
     });
   };
 
-  const findIncorrectLocations = (): string[] => {
+  const findIncorrectLocationsAndHintText = (): [string[], string] => {
     const locations: string[] = [];
+    let hintText = '';
     if (!fastDeepEqual(currentTraceItem.turtles, turtles)) {
       locations.push('亀');
     }
@@ -114,9 +115,13 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
         zenkakuAlphanumericalsToHankaku(props.currentVariables[name].toString())
       ) {
         locations.push(`変数${name}`);
+        if (props.initialVariables[name].toString() === props.currentVariables[name].toString()) {
+          hintText +=
+            '\n\nヒント: たとえ変数を参照する式があっても、変数を更新する演算子（=, +=, ++）などがなければ、変数の値が変化しないことに注意してください。';
+        }
       }
     }
-    return locations;
+    return [locations, hintText];
   };
 
   const handleClickTurtle = (turtle: TurtleTrace): void => {
@@ -221,7 +226,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
               <Thead>
                 <Tr>
                   <Th>変数名</Th>
-                  <Th>値（=や+=などで代入しないと変化しない）</Th>
+                  <Th>値（=や+=などの代入がないと変化しない）</Th>
                 </Tr>
               </Thead>
               <Tbody>
diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
index 2c414d26..acaf36e3 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
@@ -91,7 +91,8 @@ export const ProblemBody: React.FC<Props> = (props) => {
   const handleSubmit = useCallback(async (): Promise<void> => {
     if (isAlertOpen || !turtleGraphicsRef.current) return;
 
-    const incorrectLocationText = turtleGraphicsRef.current.findIncorrectLocations().join('、');
+    const [incorrectLocations, hintText] = turtleGraphicsRef.current.findIncorrectLocationsAndHintText();
+    const incorrectLocationText = incorrectLocations.join('、');
 
     switch (problemType) {
       case 'executionResult': {
@@ -129,7 +130,10 @@ export const ProblemBody: React.FC<Props> = (props) => {
           !incorrectLocationText && currentTraceItemIndex === props.problem.traceItems.length - 1
         );
         if (incorrectLocationText) {
-          openAlertDialog('不正解', `${incorrectLocationText}に誤りがあります。もう一度解答してください。`);
+          openAlertDialog(
+            '不正解',
+            `${incorrectLocationText}に誤りがあります。もう一度解答してみましょう。${hintText}`
+          );
           setViewingTraceItemIndex(previousTraceItemIndex);
         } else {
           if (currentTraceItemIndex === props.problem.traceItems.length - 1) {
@@ -258,7 +262,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
             <AlertDialogHeader fontSize="lg" fontWeight="bold">
               {alertTitle}
             </AlertDialogHeader>
-            <AlertDialogBody>{alertMessage}</AlertDialogBody>
+            <AlertDialogBody whiteSpace="pre-wrap">{alertMessage}</AlertDialogBody>
             <AlertDialogFooter>
               <Button
                 ref={cancelRef}