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