94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<ModalDialog @close="closeModalDialog" :title="$t('create-team')">
|
|
<div class="create-team-dialog__description">{{ $t('description') }}</div>
|
|
<div class="create-team-dialog__form">
|
|
<label class="create-team-dialog__label">{{ $t('your-name') }}</label>
|
|
<input id="create-team-dialog-name" class="create-team-dialog__input" v-model="playerName" size="40"/>
|
|
<label class="create-team-dialog__label">{{ $t('team-name') }}</label>
|
|
<input class="create-team-dialog__input" v-model="teamName" size="40"/>
|
|
<label class="create-team-dialog__label">{{ $t('language') }}</label>
|
|
<select class="create-team-dialog__select" v-model="lang">
|
|
<option value="en">EN</option>
|
|
<option value="de">DE</option>
|
|
</select>
|
|
|
|
</div>
|
|
<template v-slot:footer>
|
|
<Button class="create-team-dialog__button" :border="true" @click="createTeam">{{ $t('create-team') }}</Button>
|
|
<Button class="create-team-dialog__button" :border="false" @click="closeModalDialog">{{ $t('cancel') }}</Button>
|
|
</template>
|
|
</ModalDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import useI18n from '@/composables/useI18n'
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const { $t, getLang } = useI18n({
|
|
'create-team': { en: 'Create Team', de: 'Team erstellen' },
|
|
'cancel': { en: 'Cancel', de: 'abbrechen' },
|
|
'description': { en: 'Create an account for you as a gamemaster and set team name.', de: 'Erstelle einen Useraccount für Dich als Gamemaster und setze den Teamnamen.' },
|
|
'your-name': { en: 'Your name', de: 'Dein Name' },
|
|
'team-name': { en: 'Team name', de: 'Teamname' },
|
|
'language': { en: 'Language', de: 'Sprache' },
|
|
'names-missing': { en: 'Please enter a user name and a team name.', de: 'Bitte wähle einen Benutzernamen und Teamnamen.' },
|
|
})
|
|
|
|
const closeModalDialog = () => { emit('close') }
|
|
const playerName = ref('')
|
|
const teamName = ref('')
|
|
const lang = ref(getLang())
|
|
|
|
const createTeam = () => {
|
|
if (playerName.value.length == 0 || teamName.value.length == 0) {
|
|
alert($t('names-missing'))
|
|
return
|
|
}
|
|
alert('not yet implemented')
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.setTimeout(() => {
|
|
document.getElementById('create-team-dialog-name')?.focus()
|
|
}, 0)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.create-team-dialog {
|
|
&__description {
|
|
font-family: $font-secondary;
|
|
font-size: 18px;
|
|
}
|
|
|
|
&__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
&__label {
|
|
display: block;
|
|
margin: 16px 0 4px 0;
|
|
}
|
|
|
|
&__input {
|
|
border: 1px solid white;
|
|
background-color: $modal-dialog-background-color;
|
|
color: $modal-dialog-text-color;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&__select {
|
|
margin-right: auto;
|
|
}
|
|
|
|
&__button~&__button {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
</style> |