feat: add UI elements to disable or remove game

client/src/assets/icons/toggle.svg

@@ -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>

client/src/components/admin/GameInfoTile.vue

@@ -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>

client/src/components/admin/GameInfosTile.vue

@@ -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>

client/src/composables/engine.d.ts

@@ -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

client/src/composables/engine/gameState.ts

@@ -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,
+  })
+}

client/src/composables/useEngine.ts

@@ -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),