diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss index 7084211..177fc65 100644 --- a/client/src/assets/css/colors.scss +++ b/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; diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue index ff7bc63..84f6194 100644 --- a/client/src/components/Button.vue +++ b/client/src/components/Button.vue @@ -1,6 +1,6 @@ @@ -19,6 +19,10 @@ defineProps({ type: Boolean, default: true, }, + cssClass: { + type: String, + default: '', + }, }) @@ -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; + } + } } } diff --git a/client/src/components/admin/PlayerDialog.vue b/client/src/components/admin/PlayerDialog.vue index 35fa99b..e0b200a 100644 --- a/client/src/components/admin/PlayerDialog.vue +++ b/client/src/components/admin/PlayerDialog.vue @@ -10,8 +10,10 @@ {{ player.id }} @@ -61,7 +63,7 @@ watch([props], () => { showId.value = false }) // reset visibility each time th } } - &__button ~ &__button { + &__button~&__button { margin-left: 16px; } } diff --git a/client/src/components/admin/PlayersTile.vue b/client/src/components/admin/PlayersTile.vue index 973e0c0..67bafc3 100644 --- a/client/src/components/admin/PlayersTile.vue +++ b/client/src/components/admin/PlayersTile.vue @@ -93,6 +93,10 @@ const playerDialogSubmit = async (action: ButtonAction): Promise => { emit('update') break case 'delete': + if (confirm(`"${playerDialogPlayer.value.name}" löschen?`)) { + await useEngine().deletePlayer(playerDialogPlayer.value.id) + emit('update') + } break } } diff --git a/client/src/composables/engine/gamemaster.ts b/client/src/composables/engine/gamemaster.ts index 4fe80e1..5ff0f9a 100644 --- a/client/src/composables/engine/gamemaster.ts +++ b/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 { + const userInfoStore = useUserinfoStore() + await this.callApi('/api/deletePlayer', { + g: userInfoStore.gameId, + id, + }) +} + diff --git a/client/src/composables/useEngine.ts b/client/src/composables/useEngine.ts index fbcd1e5..c976b0a 100644 --- a/client/src/composables/useEngine.ts +++ b/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 setGameName: (name: string) => Promise savePlayer: (player: PlayerEdit) => Promise + deletePlayer: (id: string) => Promise } 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]), } } \ No newline at end of file