#41

frontend/src/pages/GekanatorPage.tsx

@@ -18,7 +18,14 @@ import type { GekanatorAnswerLog,
 	      GekanatorQuestion } from '@/lib/gekanator'
 import type { Post } from '@/types'
 
-type Phase = 'intro' | 'question' | 'guess' | 'continue' | 'review' | 'learned'
+type Phase =
+    | 'intro'
+    | 'question'
+    | 'guess'
+    | 'continue'
+    | 'end'
+    | 'review'
+    | 'learned'
 
 type AnswerOption = {
     label:  string
@@ -687,9 +694,11 @@ const GekanatorPage: FC = () => {
       }
   }
 
-  const startReview = (correctPostId: number) => {
+  const finishGame = (correctPostId: number) => {
     const guessedPostId =
-	phase === 'continue'
+	phase === 'end' || phase === 'review'
+	  ? reviewGuessedPostId
+	  : phase === 'continue'
 	  ? lastRejectedGuessId ?? displayedGuess?.id
 	  : displayedGuess?.id ?? lastRejectedGuessId
     if (!(guessedPostId))
@@ -700,6 +709,16 @@ const GekanatorPage: FC = () => {
     setReviewCorrectPostId (correctPostId)
     setSearch ('')
     setSelectingCorrectPost (false)
+    setPhase ('end')
+  }
+
+  const startReview = () => {
+    if (reviewGuessedPostId === null || reviewCorrectPostId === null)
+      return
+
+    saveMutation.reset ()
+    setSelectingCorrectPost (false)
+    setSearch ('')
     setPhase ('review')
   }
 
@@ -805,7 +824,7 @@ const GekanatorPage: FC = () => {
 	return
       }
 
-    startReview (post.id)
+    finishGame (post.id)
   }
 
   const filteredPosts = posts
@@ -963,7 +982,7 @@ const GekanatorPage: FC = () => {
 				       hover:bg-pink-500"
 			    onClick={() => {
 			      if (displayedGuess)
-				startReview (displayedGuess.id)
+				finishGame (displayedGuess.id)
 			    }}>
 			  当たり
 			</button>
@@ -1022,6 +1041,67 @@ const GekanatorPage: FC = () => {
 		      </div>
 		    </div>)}
 
+		{phase === 'end' && (
+		    <div className="space-y-4">
+		      <div>
+			<p className="text-sm text-neutral-500">ゲーム終了</p>
+			<p className="text-xl font-bold">今回の結果を保存できます。</p>
+		      </div>
+
+		      {reviewGuessedPost && (
+			  <div className="space-y-2">
+			    <div className="font-bold">推測した投稿</div>
+			    <PostMiniCard post={reviewGuessedPost}/>
+			  </div>)}
+
+		      <div className="space-y-2">
+			<div className="font-bold">正解の投稿</div>
+			{reviewCorrectPost
+			 ? <PostMiniCard post={reviewCorrectPost}/>
+			 : <p className="text-sm text-red-600">正解投稿を選んでください。</p>}
+			<button
+			    type="button"
+			    className="rounded border border-yellow-300 px-3 py-2
+				       hover:bg-yellow-100 dark:border-red-700
+				       dark:hover:bg-red-900"
+			    onClick={() => setSelectingCorrectPost (true)}>
+			  正解投稿を変更
+			</button>
+		      </div>
+
+		      {reviewGuessedPostId !== null && reviewCorrectPostId !== null && (
+			  <p className="text-sm text-neutral-600 dark:text-neutral-300">
+			    判定: {reviewGuessedPostId === reviewCorrectPostId ? '当たり' : '違ひ'}
+			  </p>)}
+
+		      {saveMutation.isError && (
+			  <p className="text-sm text-red-600">
+			    学習ログの保存に失敗しました。もう一度試せます。
+			  </p>)}
+
+		      <div className="flex flex-wrap gap-2">
+			<button
+			    type="button"
+			    className="rounded bg-pink-600 px-4 py-2 font-bold text-white
+				       hover:bg-pink-500 disabled:opacity-50"
+			    disabled={
+			      reviewCorrectPostId === null || saveMutation.isPending || saved
+			    }
+			    onClick={saveReviewedResult}>
+			  保存
+			</button>
+			<button
+			    type="button"
+			    className="rounded border border-yellow-300 px-4 py-2
+				       hover:bg-yellow-100 dark:border-red-700
+				       dark:hover:bg-red-900"
+			    disabled={reviewCorrectPostId === null || saveMutation.isPending || saved}
+			    onClick={startReview}>
+			  質問と回答を訂正する
+			</button>
+		      </div>
+		    </div>)}
+
 		{phase === 'review' && (
 		    <div className="space-y-4">
 		      <div>
@@ -1105,7 +1185,7 @@ const GekanatorPage: FC = () => {
 			    className="rounded border border-neutral-300 px-4 py-2
 				       hover:bg-neutral-100 dark:border-neutral-700
 				       dark:hover:bg-red-900"
-			    onClick={() => setPhase ('guess')}>
+			    onClick={() => setPhase ('end')}>
 			  戻る
 			</button>
 		      </div>
@@ -1126,7 +1206,7 @@ const GekanatorPage: FC = () => {
 	    </div>
 	  </section>
 
-	  {['guess', 'continue', 'question', 'review'].includes (phase)
+	  {['guess', 'continue', 'question', 'end', 'review'].includes (phase)
 	   && selectingCorrectPost && (
 	      <section className="rounded-lg border border-yellow-300 bg-white p-4
 				  dark:border-red-800 dark:bg-red-950">