Merge pull request #4 from ef81sp/add-explain

Add explain

src/assets/main.css

@@ -7,3 +7,6 @@
 a {
   @apply underline;
 }
+ul {
+  @apply mx-5 list-outside list-disc space-y-2;
+}

src/components/HelpChangeLog.vue

@@ -4,6 +4,7 @@
   <h4>2024/04/14</h4>
   <ul>
     <li>改善: 設定を変更せずに設定モーダルを閉じたとき、問題を保持するよう修正</li>
+    <li>改善: わかりやすくなるよう、説明を追加・見直し</li>
   </ul>
   <h4>2024/02/05</h4>
   <ul>

src/components/HelpMain.vue

@@ -91,7 +91,4 @@ h3 {
 h4 {
   @apply mb-2 mt-4 text-lg font-bold;
 }
-ul {
-  @apply mx-5 list-outside list-disc space-y-2;
-}
 </style>

src/components/NanikiruOptionDialog.vue

@@ -42,6 +42,15 @@ watchEffect(() => {
     :breakpoints="{ '960px': '75vw', '640px': '85vw' }"
     @hide="handleHide"
   >
+    <div class="mx-auto mb-8 flex flex-wrap gap-8 *:text-sm sm:justify-start md:justify-center">
+      <ul class="px-auto text-sm *:leading-4">
+        <li>
+          <strong>7枚形</strong>の練習には「枚数: <strong>7</strong>」「出題タイプ:
+          <strong>多面待ち</strong>」
+        </li>
+        <li>「牌の範囲」は<strong>狭いほど難しい</strong>(密集するから)</li>
+      </ul>
+    </div>
     <div class="m-4 mx-auto flex flex-wrap gap-8 *:text-sm sm:justify-start md:justify-center">
       <div class="flex flex-col gap-2 *:flex *:items-center *:justify-start *:gap-2">
         <p class="font-bold">枚数</p>

src/components/NanimachiAnswerButton.vue

@@ -26,11 +26,10 @@ const options = computed(() => {
     v-model="answerNanimachi"
     :options="options"
     multiple
-    class="*:max-w-[calc(100%/9)] *:px-1 *:py-2 *:md:w-[calc(120%/9)] *:md:px-2 *:md:py-3"
+    class="*:max-w-[calc(100%/9)] *:px-1 *:py-2 *:md:w-[calc(120%/9)] *:md:px-2 *:md:py-3 *:justify-center"
   >
     <template #option="{ option }">
       <VPai :pai-str="option" />
     </template>
   </SelectButton>
 </template>
-@/composables/option@/composables/nanimachiOption@/composables/nanimachiAnswer

src/components/NanimachiOptionDialog.vue

@@ -21,6 +21,15 @@ const handleHide = () => {
     :breakpoints="{ '960px': '75vw', '640px': '85vw' }"
     @hide="handleHide"
   >
+    <div class="mx-auto mb-8 flex flex-wrap gap-8 *:text-sm sm:justify-start md:justify-center">
+      <ul class="px-auto text-sm *:leading-4">
+        <li>
+          <strong>7枚形</strong>の練習には「枚数: <strong>7</strong>」「出題タイプ:
+          <strong>多面待ち</strong>」
+        </li>
+        <li>「牌の範囲」は<strong>狭いほど難しい</strong>(密集するから)</li>
+      </ul>
+    </div>
     <div class="m-4 mx-auto flex flex-wrap gap-8 *:text-sm sm:justify-start md:justify-center">
       <div class="flex flex-col gap-2 *:flex *:items-center *:justify-start *:gap-2">
         <p class="font-bold">枚数</p>

src/views/NanimachiView.vue

@@ -4,20 +4,20 @@ import Message from 'primevue/message'
 import Checkbox from 'primevue/checkbox'
 import VPai from '@/components/VPai.vue'
 import { hand, generateHand } from '@/composables/nanimachiHand'
-import { isChanged, save } from '@/composables/nanimachiOption'
+import * as nanimachiOption from '@/composables/nanimachiOption'
 import { showNanimachiExplanation, showNanimachiOption } from '@/composables/dialogController'
 import NanimachiOption from '@/components/NanimachiOptionDialog.vue'
 import NanimachiAnswerButton from '@/components/NanimachiAnswerButton.vue'
 import { answerAll, clearAnswerNanimachi, judgeNanimachi } from '@/composables/nanimachiAnswer'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import NanimachiExplanationDialog from '@/components/NanimachiExplanationDialog.vue'
 
 const result = ref<string | null>(null)
 
 const handleHideOption = () => {
-  if (isChanged.value) {
+  if (nanimachiOption.isChanged.value) {
     generateQuestion()
-    save()
+    nanimachiOption.save()
   }
 }
 const generateQuestion = () => {
@@ -34,6 +34,12 @@ const judge = () => {
     result.value = '不正解'
   }
 }
+
+const showAllCheckbox = computed(
+  () =>
+    nanimachiOption.length.value === 13 &&
+    (nanimachiOption.type.value === 'noten' || nanimachiOption.type.value === 'gochamaze'),
+)
 </script>
 
 <template>
@@ -69,20 +75,22 @@ const judge = () => {
     <div class="mt-6 flex-col text-center md:w-4/5">
       <h3>選択欄</h3>
       <NanimachiAnswerButton />
-      <p class="mt-2">
+      <p class="mt-2" v-if="showAllCheckbox">
         <Checkbox
           v-model="answerAll"
           input-id="answer-all"
           :binary="true"
         />
         <label
           for="answer-all"
-          class="ml-1"
-          >34種全ての牌</label
+          class="ml-1 leading-4"
+          >手牌にない牌すべて<br /><small
+            >※(稀)チートイツで、何を引いてもシャンテン数が進むときだけ選択</small
+          ></label
         >
       </p>
     </div>
-    <div class="my-4 flex w-full flex-col items-center gap-y-2">
+    <div class="my-8 flex w-full flex-col items-center gap-y-2">
       <div class="*:text-sm">
         <p>※ノーテンの場合、有効牌を選んで「判定」ボタン</p>
         <p>※順子が完成する場合のみ、4枚使いの5枚目も回答に含む</p>