All files / repo/src/components StartModal.vue

0% Statements 0/43
100% Branches 1/1
100% Functions 1/1
0% Lines 0/43

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>