feat: add UI elements to disable or remove game

This commit is contained in:
Settel 2022-12-10 19:11:32 +01:00
parent 74e797a328
commit 5550341359
6 changed files with 85 additions and 5 deletions

View File

@ -0,0 +1,4 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15.5C6.21517 15.5 4.72218 14.137 4.53599 12.3681C4.51034 12.1245 4.51034 11.8755 4.53599 11.6319C4.72218 9.86302 6.21516 8.5 8 8.5C9.78483 8.5 11.2778 9.86302 11.464 11.6319C11.4896 11.8755 11.4896 12.1245 11.464 12.3681C11.2778 14.137 9.78483 15.5 8 15.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07434 18.75H15.9257C19.2472 18.75 22.075 16.3336 22.5931 13.0527C22.7032 12.3552 22.7032 11.6448 22.5931 10.9473C22.075 7.6664 19.2472 5.25 15.9257 5.25H8.07434C4.75284 5.25 1.92497 7.6664 1.40694 10.9473C1.29681 11.6448 1.29681 12.3552 1.40694 13.0527C1.92497 16.3336 4.75284 18.75 8.07434 18.75ZM8.07434 17.25C5.49095 17.25 3.2915 15.3706 2.88859 12.8188C2.80293 12.2763 2.80293 11.7237 2.88859 11.1812C3.2915 8.62942 5.49095 6.75 8.07434 6.75L15.9257 6.75C18.5091 6.75 20.7085 8.62942 21.1114 11.1812C21.1971 11.7237 21.1971 12.2763 21.1114 12.8188C20.7085 15.3706 18.5091 17.25 15.9257 17.25H8.07434Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -29,6 +29,10 @@
<td>{{ $t('created') }}:</td> <td>{{ $t('created') }}:</td>
<td colspan="2">{{ date(gameinfo.created) }}</td> <td colspan="2">{{ date(gameinfo.created) }}</td>
</tr> </tr>
<tr class="gameinfo-tile__row">
<td>{{ $t('state') }}:</td>
<td colspan="2">{{ gameinfo.state }}</td>
</tr>
<tr class="gameinfo-tile__row"> <tr class="gameinfo-tile__row">
<td>{{ $t('num-players') }}:</td> <td>{{ $t('num-players') }}:</td>
<td colspan="2">{{ gameinfo.players.length }}</td> <td colspan="2">{{ gameinfo.players.length }}</td>
@ -40,9 +44,32 @@
<tr class="gameinfo-tile__row" v-if="!showId" @click="showId = true"> <tr class="gameinfo-tile__row" v-if="!showId" @click="showId = true">
<td colspan="3">&nbsp;</td> <td colspan="3">&nbsp;</td>
</tr> </tr>
<tr class="gameinfo-tile__row" v-if="showId"> <template v-if="showId">
<tr class="gameinfo-tile__row">
<td colspan="3">{{ gameinfo.id }}</td> <td colspan="3">{{ gameinfo.id }}</td>
</tr> </tr>
<template v-if="user.userInfo.isCameo">
<tr class="gameinfo-tile__row">
<td colspan="3">&nbsp;</td>
</tr>
<tr class="gameinfo-tile__row">
<td>{{ gameinfo.state == 'disabled' ? 'enable game' : 'disable game' }}</td>
<td colspan="2">
<div class="gameinfo-tile__settings-item" @click="disableGame">
<nuxt-icon name="toggle" />
</div>
</td>
</tr>
<tr class="gameinfo-tile__row">
<td>delete game</td>
<td colspan="2">
<div class="gameinfo-tile__settings-item" @click="removeGame">
<nuxt-icon name="trash" />
</div>
</td>
</tr>
</template>
</template>
</table> </table>
</AdminInfoTile> </AdminInfoTile>
</template> </template>
@ -52,6 +79,7 @@ import { ref } from 'vue'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
import useDateFormatter from '@/composables/useDateFormatter'; import useDateFormatter from '@/composables/useDateFormatter';
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
import { useUserinfoStore } from "@/stores/UserinfoStore"
import type { GameInfo } from '@/composables/engine.d' import type { GameInfo } from '@/composables/engine.d'
const { date } = useDateFormatter() const { date } = useDateFormatter()
@ -64,6 +92,7 @@ const emit = defineEmits(['update'])
const { $t } = useI18n({ const { $t } = useI18n({
id: { en: 'Id', de: 'Id' }, id: { en: 'Id', de: 'Id' },
name: { en: 'Name', de: 'Name' }, name: { en: 'Name', de: 'Name' },
state: { en: 'State', de: 'Status' },
language: { en: 'Language', de: 'Sprache' }, language: { en: 'Language', de: 'Sprache' },
created: { en: 'Created', de: 'Erstellt' }, created: { en: 'Created', de: 'Erstellt' },
'num-players': { en: '# Players', de: '# Spieler' }, 'num-players': { en: '# Players', de: '# Spieler' },
@ -72,6 +101,7 @@ const { $t } = useI18n({
}) })
const showId = ref(false) const showId = ref(false)
const user = useUserinfoStore()
const editName = async (): Promise<void> => { const editName = async (): Promise<void> => {
const name = window.prompt(`${$t('new-game-name')}: `) const name = window.prompt(`${$t('new-game-name')}: `)
@ -89,6 +119,20 @@ const editLangChange = async (): Promise<void> => {
await useEngine().setGameLang(lang.value) await useEngine().setGameLang(lang.value)
emit('update') emit('update')
} }
const disableGame = async (): Promise<void> => {
if (props.gameinfo.state == 'disabled') {
await useEngine().resetGame()
} else {
await useEngine().disableGame()
}
emit('update')
}
const removeGame = async (): Promise<void> => {
if (confirm('remove game and wipe all of it\'s data?')) {
await useEngine().removeGame()
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
@ -108,5 +152,17 @@ const editLangChange = async (): Promise<void> => {
height: 16px; height: 16px;
cursor: pointer; cursor: pointer;
} }
&__settings-item {
cursor: pointer;
width: 18px;
height: 24px;
padding: 7px;
font-size: 18px;
&:hover {
background-color: #606060;
}
}
} }
</style> </style>

View File

@ -7,6 +7,7 @@
<th class="gameinfos-tile__table-head">{{ $t('state')}}</th> <th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th> <th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th> <th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th>
<th class="gameinfos-tile__table-head">&nbsp;</th>
</tr> </tr>
<tr class="gameinfos-tile__row" v-for="game in games" :key="game.id" @click="selectGame(game)"> <tr class="gameinfos-tile__row" v-for="game in games" :key="game.id" @click="selectGame(game)">
<td class="gameinfos-tile__cell">{{ game.name }}</td> <td class="gameinfos-tile__cell">{{ game.name }}</td>
@ -14,6 +15,7 @@
<td class="gameinfos-tile__cell">{{ game.state }}</td> <td class="gameinfos-tile__cell">{{ game.state }}</td>
<td class="gameinfos-tile__cell">{{ game.players.length }}</td> <td class="gameinfos-tile__cell">{{ game.players.length }}</td>
<td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td> <td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td>
<td class="gameinfos-tile__cell"><nuxt-icon name="toggle" /></td>
</tr> </tr>
</table> </table>
</AdminInfoTile> </AdminInfoTile>

View File

@ -61,7 +61,7 @@ export type Round = {
export type Lang = 'de' | 'en' export type Lang = 'de' | 'en'
export type State = 'idle' | 'collect' | 'ready-set' | 'play' | 'finish' export type State = 'idle' | 'collect' | 'ready-set' | 'play' | 'finish' | 'disabled'
export type GameInfo = { export type GameInfo = {
id: string id: string

View File

@ -35,3 +35,17 @@ export async function finishGame(this: EngineContext): Promise<void> {
g: userInfoStore.gameId, g: userInfoStore.gameId,
}) })
} }
export async function disableGame(this: EngineContext): Promise<void> {
const userInfoStore = useUserinfoStore()
await this.callApi('/api/disableGame', {
g: userInfoStore.gameId,
})
}
export async function removeGame(this: EngineContext): Promise<void> {
const userInfoStore = useUserinfoStore()
await this.callApi('/api/removeGame', {
g: userInfoStore.gameId,
})
}

View File

@ -4,7 +4,7 @@ import { start, stop } from '@/composables/engine/startStop'
import { fetchUpdate } from '@/composables/engine/fetchUpdate' import { fetchUpdate } from '@/composables/engine/fetchUpdate'
import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes' import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
import { fetchGameInfo, fetchGameInfos, setGameLang, setGameName, savePlayer, deletePlayer, createGame, cameo, logoutCameo } from '@/composables/engine/gameManagement' import { fetchGameInfo, fetchGameInfos, setGameLang, setGameName, savePlayer, deletePlayer, createGame, cameo, logoutCameo } from '@/composables/engine/gameManagement'
import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/gameState' import { collectQuotes, startGame, continueGame, resetGame, finishGame, disableGame, removeGame } from '@/composables/engine/gameState'
import { saveSelection } from '@/composables/engine/play' import { saveSelection } from '@/composables/engine/play'
import type { Quotes, GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d' import type { Quotes, GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
@ -36,6 +36,8 @@ export interface useEngine {
continueGame: () => Promise<void> continueGame: () => Promise<void>
resetGame: () => Promise<void> resetGame: () => Promise<void>
finishGame: () => Promise<void> finishGame: () => Promise<void>
disableGame: () => Promise<void>
removeGame: () => Promise<void>
saveSelection: (selection: string) => Promise<void> saveSelection: (selection: string) => Promise<void>
fetchGameInfo: () => Promise<GameInfo> fetchGameInfo: () => Promise<GameInfo>
fetchGameInfos: () => Promise<GameInfos> fetchGameInfos: () => Promise<GameInfos>
@ -78,6 +80,8 @@ export default (): useEngine => {
continueGame: () => continueGame.apply(context), continueGame: () => continueGame.apply(context),
resetGame: () => resetGame.apply(context), resetGame: () => resetGame.apply(context),
finishGame: () => finishGame.apply(context), finishGame: () => finishGame.apply(context),
disableGame: () => disableGame.apply(context),
removeGame: () => removeGame.apply(context),
saveSelection: (selection: string) => saveSelection.apply(context, [selection]), saveSelection: (selection: string) => saveSelection.apply(context, [selection]),
fetchGameInfo: () => fetchGameInfo.apply(context), fetchGameInfo: () => fetchGameInfo.apply(context),
fetchGameInfos: () => fetchGameInfos.apply(context), fetchGameInfos: () => fetchGameInfos.apply(context),