feat: accessibility settings, subtitle/QTE improvements, docs update

src/components/ChoicePanel.vue

@@ -2,6 +2,7 @@
 import { ref, watch, nextTick } from 'vue'
 import type { Choice } from '@engine/types'
 import { useI18n } from '@/composables/useI18n'
+import { useGameStore } from '@/stores/gameStore'
 
 const props = defineProps<{
   choices: Choice[]
@@ -15,8 +16,11 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const store = useGameStore()
 const focusIndex = ref(0)
 const btnRefs = ref<(HTMLButtonElement | null)[]>([])
+const choiceEnabled = ref(!store.antiMistap)
+let enableTimer: ReturnType<typeof setTimeout> | null = null
 
 function timerPercent(): number {
   if (props.timerTotal <= 0) return 0
@@ -34,6 +38,13 @@ function setRef(el: HTMLButtonElement | null, index: number) {
 
 watch(() => props.choices.length, async (len) => {
   if (len > 0) {
+    if (store.antiMistap) {
+      choiceEnabled.value = false
+      if (enableTimer) clearTimeout(enableTimer)
+      enableTimer = setTimeout(() => { choiceEnabled.value = true }, 500)
+    } else {
+      choiceEnabled.value = true
+    }
     focusIndex.value = 0
     await nextTick()
     btnRefs.value[0]?.focus()
@@ -55,6 +66,7 @@ function onKeydown(e: KeyboardEvent, index: number) {
 }
 
 function handleChoose(index: number) {
+  if (!choiceEnabled.value) return
   const choice = props.choices[index]
   if (choice?.prompt) {
     emit('prompt', choice.prompt)
@@ -74,7 +86,7 @@ function handleChoose(index: number) {
       <span class="timer-text">{{ timerRemaining.toFixed(1) }}s</span>
     </div>
     <div class="choice-prompt">{{ t('ui.choose') }}</div>
-    <div class="choice-list">
+    <div class="choice-list" :class="{ disabled: !choiceEnabled }">
       <button
         v-for="(choice, index) in choices"
         :key="index"
@@ -145,6 +157,11 @@ function handleChoose(index: number) {
   margin: 0 auto;
 }
 
+.choice-list.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .choice-btn {
   position: relative;
   padding: 14px 24px;