113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<template>
|
|
<AdminInfoTile title="Game">
|
|
<table class="gameinfo-tile__table">
|
|
<tr class="gameinfo-tile__row">
|
|
<td>{{ $t('name') }}:</td>
|
|
<td>{{ gameinfo.name }}</td>
|
|
<td>
|
|
<div class="gameinfo-tile__edit" @click="editName">
|
|
<Icon name="edit-white" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row">
|
|
<td>{{ $t('language') }}:</td>
|
|
<td v-if="!editLangShowDropdown">{{ gameinfo.lang }}</td>
|
|
<td v-if="!editLangShowDropdown">
|
|
<div class="gameinfo-tile__edit" @click="editLang">
|
|
<Icon name="edit-white" />
|
|
</div>
|
|
</td>
|
|
<td v-if="editLangShowDropdown" colspan="2">
|
|
<select v-model="lang" @change="editLangChange">
|
|
<option value="en">en</option>
|
|
<option value="de">de</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row">
|
|
<td>{{ $t('created') }}:</td>
|
|
<td colspan="2">{{ date(gameinfo.created) }}</td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row">
|
|
<td>{{ $t('num-players') }}:</td>
|
|
<td colspan="2">{{ gameinfo.players.length }}</td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row">
|
|
<td>{{ $t('num-quotes-played') }}:</td>
|
|
<td colspan="2">{{ gameinfo.numQuotesTotal - gameinfo.numQuotesLeft }} / {{ gameinfo.numQuotesTotal }}</td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row" v-if="!showId" @click="showId = true">
|
|
<td colspan="3"> </td>
|
|
</tr>
|
|
<tr class="gameinfo-tile__row" v-if="showId">
|
|
<td colspan="3">{{ gameinfo.id }}</td>
|
|
</tr>
|
|
</table>
|
|
</AdminInfoTile>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import useI18n from '@/composables/useI18n'
|
|
import useDateFormatter from '@/composables/useDateFormatter';
|
|
import useEngine from '@/composables/useEngine'
|
|
import type { GameInfo } from '@/composables/engine.d'
|
|
|
|
const { date } = useDateFormatter()
|
|
|
|
const props = defineProps<{
|
|
gameinfo: GameInfo
|
|
}>()
|
|
const emit = defineEmits(['update'])
|
|
|
|
const { $t } = useI18n({
|
|
id: { en: 'Id', de: 'Id' },
|
|
name: { en: 'Name', de: 'Name' },
|
|
language: { en: 'Language', de: 'Sprache' },
|
|
created: { en: 'Created', de: 'Erstellt' },
|
|
'num-players': { en: '# Players', de: '# Spieler' },
|
|
'num-quotes-played': { en: '# Quotes played', de: '# Aussagen gespielt' },
|
|
'new-game-name': { en: 'New game name', de: 'Neuer Spielname' },
|
|
})
|
|
|
|
const showId = ref(false)
|
|
|
|
const editName = async (): Promise<void> => {
|
|
const name = window.prompt(`${$t('new-game-name')}: `)
|
|
if (name) {
|
|
await useEngine().setGameName(name)
|
|
emit('update')
|
|
}
|
|
}
|
|
|
|
const lang = ref(props.gameinfo.lang)
|
|
const editLangShowDropdown = ref(false)
|
|
const editLang = () => { editLangShowDropdown.value = true }
|
|
const editLangChange = async (): Promise<void> => {
|
|
editLangShowDropdown.value = false
|
|
await useEngine().setGameLang(lang.value)
|
|
emit('update')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.gameinfo-tile {
|
|
&__table {
|
|
margin-left: -12px;
|
|
border-collapse: separate;
|
|
border-spacing: 12px 0;
|
|
}
|
|
|
|
&__row {
|
|
height: 24px;
|
|
}
|
|
|
|
&__edit {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|