91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<ModalDialog :title="title" @close="emit('close')">
|
|
<label class="player-dialog__label">Name</label>
|
|
<input id="player-dialog-name" class="player-dialog__input" v-model="player.name" size="60" />
|
|
<label class="player-dialog__label">Score</label>
|
|
<input class="player-dialog__input" v-model="player.score" size="60" maxlength="4" />
|
|
<label class="player-dialog__label">Authcode</label>
|
|
<div class="player-dialog__input-box">
|
|
<input class="player-dialog__input" v-model="player.authcode" size="40" maxlength="6" />
|
|
<Button class="player-dialog__generate" :border="false" css-class="mini" @click="generate">generate</Button>
|
|
</div>
|
|
<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 v-for="button in buttons" :key="button.id" class="player-dialog__button"
|
|
:css-class="button.type === 'caution' ? button.type : ''"
|
|
:border="['primary', 'caution'].indexOf(button.type) >= 0" @click="emit('submit', button.id)">{{ button.name
|
|
}}</Button>
|
|
</template>
|
|
</ModalDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { PlayerEdit } from '@/composables/engine.d'
|
|
import type { Button } from '@/components/admin/PlayerModal'
|
|
|
|
const props = defineProps<{
|
|
title: string
|
|
buttons: Array<Button>
|
|
player: PlayerEdit
|
|
}>()
|
|
|
|
const emit = defineEmits(['close', 'submit'])
|
|
const showId = ref(false)
|
|
onMounted(() => {
|
|
window.setTimeout(() => {
|
|
document.getElementById('player-dialog-name')?.focus()
|
|
}, 0)
|
|
})
|
|
|
|
const generate = () => {
|
|
props.player.authcode = ''
|
|
for (var i = 0; i < 6; i++) {
|
|
props.player.authcode += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
|
|
&__input-box {
|
|
display: flex;
|
|
}
|
|
|
|
&__generate {
|
|
margin-left: auto;
|
|
}
|
|
|
|
&__button~&__button {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
</style> |