settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: add UI elements to disable or remove game

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/assets/icons/toggle.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

58
client/src/components/admin/GameInfoTile.vue
View File

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

2
client/src/components/admin/GameInfosTile.vue
View File

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

2
client/src/composables/engine.d.ts vendored
View File

@ -61,7 +61,7 @@ export type Round = {
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 = {
id: string

14
client/src/composables/engine/gameState.ts
View File

@ -35,3 +35,17 @@ export async function finishGame(this: EngineContext): Promise<void> {
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,
})
}

6
client/src/composables/useEngine.ts
View File

@ -4,7 +4,7 @@ import { start, stop } from '@/composables/engine/startStop'
import { fetchUpdate } from '@/composables/engine/fetchUpdate'
import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
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 type { Quotes, GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
@ -36,6 +36,8 @@ export interface useEngine {
continueGame: () => Promise<void>
resetGame: () => Promise<void>
finishGame: () => Promise<void>
disableGame: () => Promise<void>
removeGame: () => Promise<void>
saveSelection: (selection: string) => Promise<void>
fetchGameInfo: () => Promise<GameInfo>
fetchGameInfos: () => Promise<GameInfos>
@ -78,6 +80,8 @@ export default (): useEngine => {
continueGame: () => continueGame.apply(context),
resetGame: () => resetGame.apply(context),
finishGame: () => finishGame.apply(context),
disableGame: () => disableGame.apply(context),
removeGame: () => removeGame.apply(context),
saveSelection: (selection: string) => saveSelection.apply(context, [selection]),
fetchGameInfo: () => fetchGameInfo.apply(context),
fetchGameInfos: () => fetchGameInfos.apply(context),