Merge pull request #14 from ef81sp/show-mistake

Show-mistake

src/components/ExplanationBlocksSinglePaiList.vue

@@ -9,12 +9,12 @@ defineProps<{
 <template>
   <div class="flex items-center gap-x-2 lg:gap-x-4">
     <p class="flex min-w-fit items-center text-sm md:text-base lg:text-lg">{{ title }}</p>
-    <div class="scrollbar-thin flex overflow-x-scroll">
+    <div class="flex w-full overflow-x-scroll md:flex-nowrap">
       <VPai
         v-for="(p, i) in paiList"
         :pai-str="p"
         :key="i"
-        class="w-5 md:w-8 lg:w-10"
+        class="w-5 md:w-[calc(100%/14)]"
       />
     </div>
   </div>

src/components/HelpChangeLog.vue

@@ -4,7 +4,9 @@
   <h4>2025/01/06</h4>
   <ul>
     <li>不具合修正: 何待ち100本ノックの設定画面で特定の操作をすると設定値が不正となる問題を修正</li>
+    <li>不具合修正: 何待ち解説の牌姿の表示崩れを修正</li>
     <li>改善: 何待ちの回答をクリアできるボタンを追加</li>
+    <li>改善: 何待ち100本ノックの振り返りで誤った問題を強調表示</li>
   </ul>
 
   <h4>2025/01/05</h4>

src/components/Nanimachi100Playing.vue

@@ -21,7 +21,7 @@ const { pastTime } = defineProps<{
 
 const emit = defineEmits<{
   mounted: []
-  correct: [hand: 手牌, answer: PaiStr[]]
+  correct: [hand: 手牌, answer: PaiStr[], mistake: boolean]
   retire: []
 }>()
 
@@ -39,6 +39,7 @@ const generateQuestion = () => {
 
 const result = ref<string | null>(null)
 const showResult = ref(false)
+const mistake = ref(false)
 let timeoutId = 0
 const judge = () => {
   clearTimeout(timeoutId)
@@ -48,9 +49,11 @@ const judge = () => {
     const j = judgeNanimachi()
     if (j.result === 'correct') {
       result.value = '正解'
-      emit('correct', hand.value, correctAnswerStrArr.value)
+      emit('correct', hand.value, correctAnswerStrArr.value, mistake.value)
+      mistake.value = false
       generateQuestion()
     } else {
+      mistake.value = true
       result.value = '不正解'
     }
     showResult.value = true

src/components/Nanimachi100Result.vue

@@ -112,11 +112,12 @@ const showExplanation = async (index: number) => {
         />
         <ol>
           <Nanimachi100ResultFurikaeri
-            v-for="({ hand, answer, timeMs: time }, i) in questionList"
+            v-for="({ hand, answer, timeMs: time, mistake }, i) in questionList"
             :key="i"
             :hand="hand"
             :answer="answer"
             :timeMs="time"
+            :mistake="mistake"
             :index="i"
             @show-explaination="() => showExplanation(i)"
           />

src/components/Nanimachi100ResultFurikaeri.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Tag from 'primevue/tag'
 
 import type { PaiStr } from '@/composables/PaiStr.type'
 import type { 手牌 } from 'pairi'
@@ -12,18 +13,30 @@ export type Nanimachi100ResultFurikaeriProps = {
   answer: PaiStr[]
   index: number
   timeMs: number
+  mistake: boolean
 }
-const { hand: _hand, answer, index } = defineProps<Nanimachi100ResultFurikaeriProps>()
+const { hand: _hand, answer, index, mistake } = defineProps<Nanimachi100ResultFurikaeriProps>()
 defineEmits<{ 'show-explaination': [] }>()
 
 const hand = computed(() => _hand.牌List().map((p) => p.toString()))
 </script>
 
 <template>
   <li>
-    <div class="flex items-center gap-2 px-0 md:gap-8 md:px-4">
-      <div class="flex flex-col items-center">
-        <p class="text-sm md:text-base">Q{{ index + 1 }}</p>
+    <div
+      class="flex items-center gap-2 px-0 py-4 md:gap-8 md:px-4"
+      :class="mistake ? ['bg-red-50', 'border-red-600', 'border'] : []"
+    >
+      <div class="flex w-16 flex-col items-center md:w-20">
+        <p class="text-sm md:text-base">
+          Q{{ index + 1 }}
+          <span
+            v-if="mistake"
+            class="rounded border border-red-600 px-1 text-xs text-red-950"
+          >
+            誤
+          </span>
+        </p>
         <p class="text-sm md:text-base">{{ (timeMs / 1000).toFixed(1) }}秒</p>
         <Button
           size="small"
@@ -49,6 +62,6 @@ const hand = computed(() => _hand.牌List().map((p) => p.toString()))
         />
       </div>
     </div>
-    <hr class="my-4" />
+    <hr />
   </li>
 </template>

src/views/Nanimachi100View.vue

@@ -6,12 +6,9 @@ import Nanimachi100CountDown from '@/components/Nanimachi100CountDown.vue'
 import Nanimachi100Playing from '@/components/Nanimachi100Playing.vue'
 
 import Nanimachi100Result from '@/components/Nanimachi100Result.vue'
-import type { 手牌 } from 'pairi'
+import { 手牌 } from 'pairi'
 import type { PaiStr } from '@/composables/PaiStr.type'
-import { generateCorrectAnswerStrArr, generateHand } from '@/composables/nanimachiHand'
-import Nanimachi100ResultFurikaeri, {
-  type Nanimachi100ResultFurikaeriProps,
-} from '@/components/Nanimachi100ResultFurikaeri.vue'
+import { type Nanimachi100ResultFurikaeriProps } from '@/components/Nanimachi100ResultFurikaeri.vue'
 
 const qAmount = ref(100)
 const nowQuestion = ref(1)
@@ -84,13 +81,14 @@ type questionList = Omit<Nanimachi100ResultFurikaeriProps, 'index'>[]
 const questionList = ref<questionList>([]) as Ref<questionList>
 
 let previousTimeMs = 0
-const handleCorrect = (hand: 手牌, answer: PaiStr[]) => {
+const handleCorrect = (hand: 手牌, answer: PaiStr[], mistake: boolean) => {
   const timeMs = pastTime.value - previousTimeMs
   previousTimeMs = pastTime.value
   questionList.value.push({
     hand,
     answer,
     timeMs,
+    mistake,
   })
 
   if (nowQuestion.value === qAmount.value) {