feat: 提出ボタンを押しやすくする (#105)

exKAZUu-Research · Sep 13, 2024 · bb1a41b · bb1a41b
1 parent 109dae0
commit bb1a41b
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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>
   );