feat: add functionality to delete player

client/src/assets/css/colors.scss

@@ -39,6 +39,14 @@ $button-disabled-text-color: #102028;
 $button-disabled-border: 4px solid transparent;
 $button-disabled-border-border: 4px solid #004060;
 
+$button-caution-background-color: #a04040;
+$button-caution-border: 4px solid #b05050;
+$button-caution-text-color: #ffffff;
+
+$button-caution-hover-background-color: #e06060;
+$button-caution-hover-border: 4px solid #f07070;
+$button-caution-hover-text-color: $button-caution-text-color;
+
 // Topbar
 $topbar-background-color: #006898;
 $topbar-separator-color: #ffffff;

client/src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button :type="type" class="button__button"
-    :class="{ 'button__button__disabled': disabled, 'button__button__border': border }">
+    :class="{ 'button__button__disabled': disabled, 'button__button__border': border, 'button__button__caution': cssClass==='caution' }">
     <slot />
   </button>
 </template>
@@ -19,6 +19,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  cssClass: {
+    type: String,
+    default: '',
+  },
 })
 </script>
 
@@ -69,7 +73,18 @@ defineProps({
         border: $button-disabled-border-border;
       }
     }
-    
+
+    &__caution {
+      background-color: $button-caution-background-color;
+      border: $button-caution-border;
+      color: $button-caution-text-color;
+
+      &:hover {
+        background-color: $button-caution-hover-background-color;
+        border: $button-caution-hover-border;
+        color: $button-caution-hover-text-color;
+      }
+    }
   }
 }
 </style>

client/src/components/admin/PlayerDialog.vue

@@ -10,8 +10,10 @@
       <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span>
     </div>
     <template v-slot:footer>
-      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button" :border="['primary', 'caution'].indexOf(button.type) >= 0"
+      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button"
-        @click="emit('submit', button.id)">{{ button.name }}</Button>
+        :css-class="button.type === 'caution' ? button.type : ''" :border="['primary', 'caution'].indexOf(button.type) >= 0"
+        @click="emit('submit', button.id)">{{ button.name
+        }}</Button>
     </template>
   </ModalDialog>
 </template>
@@ -61,7 +63,7 @@ watch([props], () => { showId.value = false })  // reset visibility each time th
     }
   }
 
-  &__button ~ &__button {
+  &__button~&__button {
     margin-left: 16px;
   }
 }

client/src/components/admin/PlayersTile.vue

@@ -93,6 +93,10 @@ const playerDialogSubmit = async (action: ButtonAction): Promise<void> => {
       emit('update')
       break
     case 'delete':
+      if (confirm(`"${playerDialogPlayer.value.name}" löschen?`)) {
+        await useEngine().deletePlayer(playerDialogPlayer.value.id)
+        emit('update')
+      }
       break
   }
 }

client/src/composables/engine/gamemaster.ts

@@ -71,3 +71,11 @@ export async function savePlayer(this: EngineContext, player: PlayerEdit): Promi
   })
 }
 
+export async function deletePlayer(this: EngineContext, id: string): Promise<void> {
+  const userInfoStore = useUserinfoStore()
+  await this.callApi('/api/deletePlayer', {
+    g: userInfoStore.gameId,
+    id,
+  })
+}
+

client/src/composables/useEngine.ts

@@ -3,7 +3,7 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
 import { start, stop } from '@/composables/engine/startStop'
 import { fetchUpdate } from '@/composables/engine/fetchUpdate'
 import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
-import { collectQuotes, startGame, continueGame, resetGame, finishGame, fetchGameInfo, setGameLang, setGameName, savePlayer } from '@/composables/engine/gamemaster'
+import { collectQuotes, startGame, continueGame, resetGame, finishGame, fetchGameInfo, setGameLang, setGameName, savePlayer, deletePlayer } from '@/composables/engine/gamemaster'
 import { saveSelection } from '@/composables/engine/play'
 import type { Quotes, GameInfo, PlayerEdit } from '@/composables/engine.d'
 
@@ -40,6 +40,7 @@ export interface useEngine {
     setGameLang: (lang: string) => Promise<void>
     setGameName: (name: string) => Promise<void>
     savePlayer: (player: PlayerEdit) => Promise<void>
+    deletePlayer: (id: string) => Promise<void>
 }
 
 export default (): useEngine => {
@@ -77,5 +78,6 @@ export default (): useEngine => {
         setGameLang: (lang: string) => setGameLang.apply(context, [lang]),
         setGameName: (name: string) => setGameName.apply(context, [name]),
         savePlayer: (player: PlayerEdit) => savePlayer.apply(context, [player]),
+        deletePlayer: (id: string) => deletePlayer.apply(context, [id]),
     }
 }