From bb1a41ba6670cbb83bd4a40cc9d9ad28854be622 Mon Sep 17 00:00:00 2001
From: Hikaru Ishiwata <145771843+hishiwat@users.noreply.github.com>
Date: Fri, 13 Sep 2024 17:01:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=90=E5=87=BA=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E6=8A=BC=E3=81=97=E3=82=84=E3=81=99=E3=81=8F?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=20(#105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[programId]/CheckpointProblem.tsx         | 94 +++++++++++++------
 .../[programId]/ExecutionResultProblem.tsx    | 65 ++++++++++---
 .../[languageId]/[programId]/StepProblem.tsx  | 94 +++++++++++++------
 3 files changed, 182 insertions(+), 71 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
index d7dde548..07436357 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
@@ -1,12 +1,20 @@
 'use client';
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { CustomModal } from '../../../../../../components/molecules/CustomModal';
 import { SyntaxHighlighter } from '../../../../../../components/organisms/SyntaxHighlighter';
 import type { TurtleGraphicsHandle } from '../../../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../../../components/organisms/TurtleGraphics';
-import { Box, Button, Flex, HStack, useDisclosure, VStack } from '../../../../../../infrastructures/useClient/chakra';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Tooltip,
+  useDisclosure,
+  VStack,
+} from '../../../../../../infrastructures/useClient/chakra';
 import type { Problem } from '../../../../../../problems/generateProblem';
 import type { ProblemType } from '../../../../../../types';
 
@@ -81,30 +89,64 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault();
+        handleClickAnswerButton();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <Flex gap="6" w="100%">
-      <VStack spacing="10">
-        <Box>赤線で囲まれている行における盤面を作成してください。</Box>
-        <Box>赤線で囲まれた時点の実行結果</Box>
-        <Box>
-          <TurtleGraphics
-            ref={turtleGraphicsRef}
-            beforeTraceItem={beforeCheckpointTraceItem}
-            currentTraceItem={currentCheckpointTraceItem}
-            isEnableOperation={true}
-            problem={problem}
-          />
-        </Box>
-        <Box>青色のハイライト時点の実行結果</Box>
-        <Box>
-          <TurtleGraphics
-            ref={turtleGraphicsRef}
-            beforeTraceItem={beforeCheckpointTraceItem}
-            currentTraceItem={currentCheckpointTraceItem}
-            isEnableOperation={false}
-            problem={problem}
-          />
-        </Box>
+      <VStack spacing="4">
+        <VStack align="start">
+          <Box>赤色にハイライトされている行における盤面を作成してください。</Box>
+          <HStack>
+            <Tooltip
+              hasArrow
+              fontSize="xs"
+              label={`${navigator.platform.toLowerCase().includes('mac') ? 'Cmd+Enter' : 'Ctrl+Enter'}`}
+              placement="bottom"
+            >
+              <Button onClick={() => handleClickAnswerButton()}>解答</Button>
+            </Tooltip>
+            <Button onClick={() => handleClickResetButton()}>リセット</Button>
+          </HStack>
+        </VStack>
+        <VStack align="center">
+          <Box textAlign="center" w="100%">
+            赤線で囲われた時点の実行結果
+          </Box>
+          <Box>
+            <TurtleGraphics
+              ref={turtleGraphicsRef}
+              beforeTraceItem={beforeCheckpointTraceItem}
+              currentTraceItem={currentCheckpointTraceItem}
+              isEnableOperation={true}
+              problem={problem}
+            />
+          </Box>
+        </VStack>
+        <VStack>
+          <Box>青色のハイライト時点の実行結果</Box>
+          <Box>
+            <TurtleGraphics
+              ref={turtleGraphicsRef}
+              beforeTraceItem={beforeCheckpointTraceItem}
+              currentTraceItem={currentCheckpointTraceItem}
+              isEnableOperation={false}
+              problem={problem}
+            />
+          </Box>
+        </VStack>
       </VStack>
       <VStack align="end" minW="50%" overflow="hidden">
         <HStack>
@@ -140,10 +182,6 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
           />
         </Box>
         <Variables traceItemVars={beforeCheckpointTraceItem?.vars} />
-        <HStack>
-          <Button onClick={() => handleClickResetButton()}>リセット</Button>
-          <Button onClick={() => handleClickAnswerButton()}>解答</Button>
-        </HStack>
       </VStack>
     </Flex>
   );
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx
index 0361644c..65a27bc5 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx
@@ -1,12 +1,20 @@
 'use client';
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { CustomModal } from '../../../../../../components/molecules/CustomModal';
 import { SyntaxHighlighter } from '../../../../../../components/organisms/SyntaxHighlighter';
 import type { TurtleGraphicsHandle } from '../../../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../../../components/organisms/TurtleGraphics';
-import { Box, Button, Flex, HStack, useDisclosure, VStack } from '../../../../../../infrastructures/useClient/chakra';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Tooltip,
+  useDisclosure,
+  VStack,
+} from '../../../../../../infrastructures/useClient/chakra';
 import type { Problem } from '../../../../../../problems/generateProblem';
 import type { ProblemType } from '../../../../../../types';
 
@@ -66,20 +74,51 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault();
+        handleClickAnswerButton();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <Flex gap="6" w="100%">
-      <VStack spacing="10">
-        <Box>プログラムの実行後の結果を解答してください。</Box>
+      <VStack align="start" spacing="4" w="100%">
         <Box>
-          <TurtleGraphics
-            ref={turtleGraphicsRef}
-            beforeTraceItem={problem.traceItems.at(0)}
-            currentTraceItem={problem.traceItems.at(-1)}
-            isEnableOperation={true}
-            problem={problem}
-          />
+          <Box>プログラムの実行後の結果を解答してください。</Box>
+          <HStack>
+            <Tooltip
+              hasArrow
+              fontSize="xs"
+              label={`${navigator.platform.toLowerCase().includes('mac') ? 'Cmd+Enter' : 'Ctrl+Enter'}`}
+              placement="bottom"
+            >
+              <Button onClick={() => handleClickAnswerButton()}>解答</Button>
+            </Tooltip>
+            <Button onClick={() => handleClickResetButton()}>リセット</Button>
+          </HStack>
         </Box>
+        <VStack align="center" w="100%">
+          <Box>
+            <TurtleGraphics
+              ref={turtleGraphicsRef}
+              beforeTraceItem={problem.traceItems.at(0)}
+              currentTraceItem={problem.traceItems.at(-1)}
+              isEnableOperation={true}
+              problem={problem}
+            />
+          </Box>
+        </VStack>
       </VStack>
+
       <VStack align="end" minW="50%" overflow="hidden">
         <HStack>
           <Button colorScheme="gray" onClick={onHelpModalOpen}>
@@ -109,10 +148,6 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
         <Box h="calc(100vh - 370px)" w="100%">
           <SyntaxHighlighter code={problem.displayProgram} programmingLanguageId={selectedLanguageId} />
         </Box>
-        <HStack>
-          <Button onClick={() => handleClickResetButton()}>リセット</Button>
-          <Button onClick={() => handleClickAnswerButton()}>解答</Button>
-        </HStack>
       </VStack>
     </Flex>
   );
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
index 195a6122..eb4c281f 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
@@ -1,12 +1,20 @@
 'use client';
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { CustomModal } from '../../../../../../components/molecules/CustomModal';
 import { SyntaxHighlighter } from '../../../../../../components/organisms/SyntaxHighlighter';
 import type { TurtleGraphicsHandle } from '../../../../../../components/organisms/TurtleGraphics';
 import { TurtleGraphics } from '../../../../../../components/organisms/TurtleGraphics';
-import { Box, Button, Flex, HStack, useDisclosure, VStack } from '../../../../../../infrastructures/useClient/chakra';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Tooltip,
+  useDisclosure,
+  VStack,
+} from '../../../../../../infrastructures/useClient/chakra';
 import type { Problem } from '../../../../../../problems/generateProblem';
 
 import { Variables } from './Variables';
@@ -69,30 +77,64 @@ export const StepProblem: React.FC<StepProblemProps> = ({
     }
   };
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault();
+        handleClickAnswerButton();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <Flex gap="6" w="100%">
-      <VStack spacing="10">
-        <Box>赤線で囲まれている行における盤面を作成してください。</Box>
-        <Box>赤線で囲まれた時点の実行結果</Box>
-        <Box>
-          <TurtleGraphics
-            ref={turtleGraphicsRef}
-            beforeTraceItem={beforeCheckpointTraceItem}
-            currentTraceItem={currentCheckpointTraceItem}
-            isEnableOperation={true}
-            problem={problem}
-          />
-        </Box>
-        <Box>青色のハイライト時点の実行結果</Box>
-        <Box>
-          <TurtleGraphics
-            ref={turtleGraphicsRef}
-            beforeTraceItem={beforeCheckpointTraceItem}
-            currentTraceItem={currentCheckpointTraceItem}
-            isEnableOperation={false}
-            problem={problem}
-          />
-        </Box>
+      <VStack spacing="4">
+        <VStack align="start">
+          <Box>赤色にハイライトされている行における盤面を作成してください。</Box>
+          <HStack>
+            <Tooltip
+              hasArrow
+              fontSize="xs"
+              label={`${navigator.platform.toLowerCase().includes('mac') ? 'Cmd+Enter' : 'Ctrl+Enter'}`}
+              placement="bottom"
+            >
+              <Button onClick={() => handleClickAnswerButton()}>解答</Button>
+            </Tooltip>
+            <Button onClick={() => handleClickResetButton()}>リセット</Button>
+          </HStack>
+        </VStack>
+        <VStack align="center">
+          <Box textAlign="center" w="100%">
+            赤線で囲われた時点の実行結果
+          </Box>
+          <Box>
+            <TurtleGraphics
+              ref={turtleGraphicsRef}
+              beforeTraceItem={beforeCheckpointTraceItem}
+              currentTraceItem={currentCheckpointTraceItem}
+              isEnableOperation={true}
+              problem={problem}
+            />
+          </Box>
+        </VStack>
+        <VStack>
+          <Box>青色のハイライト時点の実行結果</Box>
+          <Box>
+            <TurtleGraphics
+              ref={turtleGraphicsRef}
+              beforeTraceItem={beforeCheckpointTraceItem}
+              currentTraceItem={currentCheckpointTraceItem}
+              isEnableOperation={false}
+              problem={problem}
+            />
+          </Box>
+        </VStack>
       </VStack>
       <VStack align="end" minW="50%" overflow="hidden">
         <HStack>
@@ -128,10 +170,6 @@ export const StepProblem: React.FC<StepProblemProps> = ({
           />
         </Box>
         <Variables traceItemVars={beforeCheckpointTraceItem?.vars} />
-        <HStack>
-          <Button onClick={() => handleClickResetButton()}>リセット</Button>
-          <Button onClick={() => handleClickAnswerButton()}>解答</Button>
-        </HStack>
       </VStack>
     </Flex>
   );