62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<ModalDialog v-if="show" :title="title" @close="emit('close')">
|
||
|
|
<label class="player-dialog__label">Name</label>
|
||
|
|
<input class="player-dialog__input" v-model="player.name" size="20" />
|
||
|
|
<label class="player-dialog__label">Score</label>
|
||
|
|
<input class="player-dialog__input" v-model="player.score" size="20" maxlength="4" />
|
||
|
|
<label class="player-dialog__label">Authcode</label>
|
||
|
|
<input class="player-dialog__input" v-model="player.authcode" size="20" maxlength="6" />
|
||
|
|
<div class="player-dialog__id-container" @click="showId = true">
|
||
|
|
<span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }" >{{ player.id }}</span>
|
||
|
|
</div>
|
||
|
|
<template v-slot:footer>
|
||
|
|
<Button @click="emit('submit')">{{ buttonText }}</Button>
|
||
|
|
</template>
|
||
|
|
</ModalDialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
import { PlayerEdit } from '@/composables/engine.d'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
title: string
|
||
|
|
show: boolean
|
||
|
|
buttonText: string
|
||
|
|
player: PlayerEdit
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits(['close', 'submit'])
|
||
|
|
const showId = ref(false)
|
||
|
|
watch([props], () => { showId.value = false }) // reset visibility each time the dialog is shown
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '~/assets/css/components';
|
||
|
|
|
||
|
|
.player-dialog {
|
||
|
|
&__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;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__id-container {
|
||
|
|
margin: 16px 0 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__id {
|
||
|
|
visibility: hidden;
|
||
|
|
|
||
|
|
&__show {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|