imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Confirmation on deletion of characters.

Browse Source
This commit is contained in:
Zaxiure
2024-09-08 14:22:33 +02:00
parent b24e292c63
commit 3763bd5415
2 changed files with 86 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/screens/Characters.vue
View File

@ -3,6 +3,19 @@
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
<div class="filler"></div>
<ConfirmationModal
v-if="deletingCharacter != null"
:confirm-function="delete_character.bind(this, deletingCharacter.id)"
:cancel-function="(() => deletingCharacter = null).bind(this)"
confirm-button-text="Delete"
>
<template #modalHeader>
Deleting character
</template>
<template #modalBody>
You are about to delete <span class="font-extrabold">{{deletingCharacter.name}}</span>, are you sure about that?
</template>
</ConfirmationModal>
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
<div
v-for="character in characters"
@ -12,8 +25,8 @@
>
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
<!-- @TODO : Add a confirmation dialog -->
<button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
<button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="() => { deletingCharacter = character }">
<img draggable="false" src="/assets/icons/trashcan.svg" />
</button>
@ -79,10 +92,12 @@ import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import { type Character as CharacterT } from '@/types'
import { useZoneStore } from '@/stores/zone'
import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
const isLoading = ref(true)
const characters = ref([])
const gameStore = useGameStore()
const deletingCharacter = ref(null);
// Fetch characters
gameStore.connection?.on('character:list', (data: any) => {
@ -101,6 +116,7 @@ onMounted(() => {
const selected_character = ref(null)
function select_character() {
if (!selected_character.value) return
deletingCharacter.value = null;
console.log('selected_character', selected_character.value)
gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
@ -109,6 +125,7 @@ function select_character() {
// Delete character logics
function delete_character(character_id: number) {
if (!character_id) return
deletingCharacter.value = null;
gameStore.connection?.emit('character:delete', { character_id: character_id })
}