From ef857c261810f37e5e86ae50c60605b4b9238698 Mon Sep 17 00:00:00 2001
From: "Sakamoto, Kazunori" <exKAZUu@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:52:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=80=E7=99=BA=E8=A7=A3=E7=AD=94?=
 =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=89=E3=81=AB3=E5=9B=9E=E6=8C=91?=
 =?UTF-8?q?=E6=88=A6=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=20(#156)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[courseId]/lectures/[lectureId]/page.tsx  |  3 +-
 .../lectures/[lectureId]/pageOnClient.tsx     |  4 +-
 .../problems/[problemId]/BoardEditor.tsx      |  3 +-
 .../problems/[problemId]/ProblmBody.tsx       | 55 +++++++++++++++----
 src/constants.ts                              |  2 +
 .../trpcBackend/routers/index.ts              | 16 ++++++
 6 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/page.tsx
index ea7f2995..f904ab0b 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/page.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/page.tsx
@@ -25,8 +25,7 @@ const LecturePage: NextPage<Props> = async (props) => {
     select: {
       problemId: true,
       completedAt: true,
-      elapsedMilliseconds: true,
-      submissions: { select: { elapsedMilliseconds: true, isCorrect: true } },
+      submissions: { select: { isCorrect: true } },
     },
     where: { userId: session.superTokensUserId, courseId: props.params.courseId, lectureId: props.params.lectureId },
   });
diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx
index b6ea3add..ac4e7242 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx
@@ -35,8 +35,8 @@ import {
 type Props = {
   params: { courseId: CourseId; lectureId: string };
   lectureIndex: number;
-  problemSessions: (Pick<ProblemSession, 'problemId' | 'completedAt' | 'elapsedMilliseconds'> & {
-    submissions: Pick<ProblemSubmission, 'elapsedMilliseconds' | 'isCorrect'>[];
+  problemSessions: (Pick<ProblemSession, 'problemId' | 'completedAt'> & {
+    submissions: Pick<ProblemSubmission, 'isCorrect'>[];
   })[];
 };
 
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 1b98bda6..25676647 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
@@ -236,12 +236,13 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
                     onClick={() => handleTurnTurtle(false)}
                   />
                 </Grid>
-                <HStack justify="flex-end">
+                <HStack justify="space-between" width="100%">
                   <Button
                     colorScheme="brand"
                     leftIcon={<Icon as={MdOutlineDelete} />}
                     size="sm"
                     variant="outline"
+                    width="100%"
                     onClick={() => handleRemoveCharacterButton()}
                   >
                     タートルを削除
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 33ceae3f..a50b74b0 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
@@ -2,6 +2,8 @@ import type { ProblemSession } from '@prisma/client';
 import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
+import { MAX_CHALLENGE_COUNT } from '../../../../../../../../constants';
+import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -22,7 +24,6 @@ import {
 import type { Problem } from '../../../../../../../../problems/generateProblem';
 import type { CourseId, ProblemId } from '../../../../../../../../problems/problemData';
 import { isTurtleTrace } from '../../../../../../../../problems/traceProgram';
-import { useIsMacOS } from '../../../../../../../../utils/platform';
 
 import type { TurtleGraphicsHandle } from './BoardEditor';
 import { BoardEditor } from './BoardEditor';
@@ -62,23 +63,41 @@ export const ProblemBody: React.FC<Props> = (props) => {
     onAlertOpen();
   };
 
+  const { refetch: fetchIncorrectSubmissionsCount } = backendTrpcReact.countIncorrectSubmissions.useQuery(
+    { sessionId: props.problemSession.id },
+    { enabled: false }
+  );
+
   const handleClickSubmitButton = async (): Promise<void> => {
     const isCorrect = turtleGraphicsRef.current?.isCorrect() || false;
 
     switch (problemType) {
       case 'executionResult': {
-        void props.createSubmissionUpdatingProblemSession(isCorrect, isCorrect);
         if (isCorrect) {
+          void props.createSubmissionUpdatingProblemSession(true, true);
           openAlertDialog(
             '正解',
-            '一発正解です！この問題は完了です。問題一覧ページに戻って、次の問題に挑戦してください。',
+            '一発正解です！この問題は完了です。問題一覧ページに戻りますので、次の問題に挑戦してください。',
             () => {
               router.push(`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`);
             }
           );
         } else {
-          void props.updateProblemSession('step', 1);
-          openAlertDialog('不正解', '不正解です。ステップごとに問題を解いてみましょう。');
+          const response = await fetchIncorrectSubmissionsCount();
+          const incorrectCount = (response.data ?? 0) + 1;
+          void props.createSubmissionUpdatingProblemSession(false, false);
+          if (incorrectCount === MAX_CHALLENGE_COUNT) {
+            void props.updateProblemSession('step', 1);
+            openAlertDialog(
+              '不正解',
+              `不正解です。${MAX_CHALLENGE_COUNT}回間違えたので、ステップ実行モードに移ります。ステップごとに問題を解いてください。`
+            );
+          } else {
+            openAlertDialog(
+              '不正解',
+              `不正解です。あと${MAX_CHALLENGE_COUNT - incorrectCount}回間違えたら、ステップ実行モードに移ります。一発正解を目指しましょう！`
+            );
+          }
         }
         break;
       }
@@ -91,7 +110,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
           if (currentTraceItemIndex === props.problem.traceItems.length - 1) {
             openAlertDialog(
               '正解',
-              '正解です。この問題は完了です。問題一覧ページに戻って、次の問題に挑戦してください。',
+              '正解です。この問題は完了です。問題一覧ページに戻りますので、次の問題に挑戦してください。',
               () => {
                 router.push(`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`);
               }
@@ -108,7 +127,6 @@ export const ProblemBody: React.FC<Props> = (props) => {
     }
   };
 
-  const isMacOS = useIsMacOS();
   useShortcutKeys(handleClickSubmitButton);
 
   return (
@@ -116,16 +134,29 @@ export const ProblemBody: React.FC<Props> = (props) => {
       <VStack align="stretch" flexBasis={0} flexGrow={1} minW={0} spacing={4}>
         <VStack align="stretch" as={Card} overflow="hidden" spacing={0}>
           <VStack align="stretch" borderBottomWidth="1px" p={5}>
-            <HStack>
+            <HStack justifyContent="space-between">
               <Heading size="md">問題</Heading>
               {problemType === 'step' && (
                 <Tag colorScheme="brand" fontWeight="bold" size="sm" variant="solid">
                   ステップ実行モード
                 </Tag>
               )}
+              {problemType === 'executionResult' && (
+                <Tooltip label="減点になりますが、確実に問題を解けます。">
+                  <Button
+                    colorScheme="brand"
+                    variant="outline"
+                    onClick={() => {
+                      void props.updateProblemSession('step', 1);
+                    }}
+                  >
+                    諦めてステップ実行モードに移る
+                  </Button>
+                </Tooltip>
+              )}
             </HStack>
 
-            <div>
+            <Box>
               <Box as="span" fontWeight="bold">
                 {problemType === 'executionResult' ? (
                   'プログラムを実行した後'
@@ -139,7 +170,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
                 )}
               </Box>
               の盤面を作成し、提出ボタンを押してください。
-            </div>
+            </Box>
           </VStack>
 
           <SyntaxHighlighter
@@ -205,7 +236,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
             colorScheme="brand"
             rightIcon={
               <Box as="span" color="whiteAlpha.800" fontSize="sm" fontWeight="bold">
-                {isMacOS ? 'Cmd + Enter' : 'Ctrl + Enter'}
+                (Enter)
               </Box>
             }
             onClick={() => handleClickSubmitButton()}
@@ -254,7 +285,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
 function useShortcutKeys(handleClickAnswerButton: () => Promise<void>): void {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent): void => {
-      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      if (event.key === 'Enter') {
         event.preventDefault();
         void handleClickAnswerButton();
       }
diff --git a/src/constants.ts b/src/constants.ts
index d6b8eeb7..966aa64a 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -16,6 +16,8 @@ export const SUPERTOKENS_ACCESS_TOKEN_COOKIE_NAME = 'sAccessToken';
 export const SUPERTOKENS_REFRESH_TOKEN_COOKIE_NAME = 'sRefreshToken';
 export const SERVICE_ADMIN_ROLE = 'admin';
 
+export const MAX_CHALLENGE_COUNT = 3;
+
 /**
  * 最後のイベントから今回のイベント発生時の期間において、アクティブと解釈される最大時間。
  */
diff --git a/src/infrastructures/trpcBackend/routers/index.ts b/src/infrastructures/trpcBackend/routers/index.ts
index 5765b7c5..08ac3300 100644
--- a/src/infrastructures/trpcBackend/routers/index.ts
+++ b/src/infrastructures/trpcBackend/routers/index.ts
@@ -57,6 +57,22 @@ export const backendRouter = router({
 
       await prisma.problemSubmission.create({ data: input });
     }),
+
+  countIncorrectSubmissions: procedure
+    .use(authorize)
+    .input(
+      z.object({
+        sessionId: z.number().int().positive(),
+      })
+    )
+    .query(async ({ input }) => {
+      return await prisma.problemSubmission.count({
+        where: {
+          sessionId: input.sessionId,
+          isCorrect: false,
+        },
+      });
+    }),
 });
 
 // export type definition of API