67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template>
|
|
<AdminTile class="admin-tile-gameinfo" title="Game">
|
|
<table>
|
|
<tr>
|
|
<td>Name:</td>
|
|
<td>{{ gameinfo.name }}</td>
|
|
<td><div class="admin-tile-gameinfo__edit-game-name" @click="editName()"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Created:</td>
|
|
<td colspan="2">{{ $formatter.date(gameinfo.created) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td># Players:</td>
|
|
<td colspan="2">{{ players.length }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td># Quotes played:</td>
|
|
<td colspan="2">
|
|
{{ gameinfo.numQuotesTotal - gameinfo.numQuotesLeft }} / {{ gameinfo.numQuotesTotal }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!showId">
|
|
<td colspan="3" @click="showId=true"> </td>
|
|
</tr>
|
|
<tr v-if="showId">
|
|
<td colspan="3">{{ gameinfo.id }}</td>
|
|
</tr>
|
|
</table>
|
|
</AdminTile>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['gameinfo', 'players'],
|
|
data() {
|
|
return {
|
|
showId: false,
|
|
}
|
|
},
|
|
methods: {
|
|
async editName() {
|
|
const name = window.prompt('new game name: ')
|
|
if (name) {
|
|
const g = this.$store.state.engine.user.game
|
|
await this.$engine.setGameName({ g, name })
|
|
await this.$engine.fetchGameInfo({ g })
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.admin-tile-gameinfo {
|
|
&__edit-game-name {
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: #a0a0a0;
|
|
}
|
|
&::after {
|
|
content: '✎';
|
|
}
|
|
}
|
|
}
|
|
</style>
|