Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <template> <div class="modal" role="dialog" aria-modal="true"> <h2 class="modal-title mb-2">{{ $t('modalStart.title') }}</h2> <p class="modal-info"> {{ $t('modalStart.noActiveGameInfo') }} </p> <InputField id="seed" v-model="localSeed" :label="$t('modalStart.seedLabel')" :placeholder="'np. awp-king'" :description="$t('modalStart.seed')" describedby="seed-desc" /> <SelectField id="difficulty" v-model="localDifficulty" :label="$t('modalStart.difficultyLabel')" :description="$t('modalStart.difficulty')" describedby="difficulty-desc" :options="difficulties" /> <p id="difficulty-desc" class="sr-only mb-2">{{ $t('modalStart.difficulty') }}</p> <div class="modal-actions"> <Button name="modalStart.button" :handleClick="startGame" /> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { useI18n } from 'vue-i18n'; defineOptions({ inheritAttrs: false, }); defineProps<{}>(); const { t } = useI18n(); const emit = defineEmits<{ (e: 'start', payload: { seed: string; difficulty: number }): void; }>(); const localSeed = ref(''); const localDifficulty = ref(1); const difficulties = computed(() => [ { id: 1, displayName: t('difficultyDict.easy') }, { id: 2, displayName: t('difficultyDict.medium') }, { id: 3, displayName: t('difficultyDict.hard') }, ]); function startGame() { emit('start', { seed: localSeed.value.trim(), difficulty: localDifficulty.value, }); } </script> |