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

npm update & npm run format

Browse Source
This commit is contained in:
Dennis Postma 2024-09-10 12:58:30 +02:00
parent c03c71a1b5
commit 5edf197533
17 changed files with 329 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

@ -1256,9 +1256,9 @@
} }
}, },
"node_modules/@isaacs/cliui/node_modules/ansi-regex": { "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
"version": "6.0.1", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -2171,9 +2171,9 @@
} }
}, },
"node_modules/@vue/devtools-api": { "node_modules/@vue/devtools-api": {
"version": "6.6.3", "version": "6.6.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
"integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==", "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vue/devtools-core": { "node_modules/@vue/devtools-core": {
@ -2873,9 +2873,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001658", "version": "1.0.30001660",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz",
"integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==", "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -6333,9 +6333,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/string-width/node_modules/ansi-regex": { "node_modules/string-width/node_modules/ansi-regex": {
"version": "6.0.1", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -6612,9 +6612,9 @@
} }
}, },
"node_modules/tinyspy": { "node_modules/tinyspy": {
"version": "3.0.0", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz", "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
"integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==", "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -7333,9 +7333,9 @@
} }
}, },
"node_modules/wrap-ansi/node_modules/ansi-regex": { "node_modules/wrap-ansi/node_modules/ansi-regex": {
"version": "6.0.1", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {

25
src/components/forms/ChipsInput.vue
View File

@ -2,22 +2,9 @@
<div class="flex flex-wrap items-center input-cyan gap-1"> <div class="flex flex-wrap items-center input-cyan gap-1">
<div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2"> <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
<span class="text-xs">{{ chip }}</span> <span class="text-xs">{{ chip }}</span>
<button <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
type="button"
class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50"
@click="deleteChip(i)"
aria-label="Remove chip"
>
×
</button>
</div> </div>
<input <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
class="outline-none border-none p-1"
placeholder="Tag name"
v-model="currentInput"
@keypress.enter.prevent="addChip"
@keydown.backspace="handleBackspace"
/>
</div> </div>
</template> </template>
@ -41,9 +28,13 @@ const currentInput: Ref<string> = ref('')
const internalValue = ref<string[]>([]) const internalValue = ref<string[]>([])
// Initialize internalValue with props.modelValue // Initialize internalValue with props.modelValue
watch(() => props.modelValue, (newValue) => { watch(
() => props.modelValue,
(newValue) => {
internalValue.value = newValue ? [...newValue] : [] internalValue.value = newValue ? [...newValue] : []
}, { immediate: true }) },
{ immediate: true }
)
const addChip = () => { const addChip = () => {
const trimmedInput = currentInput.value.trim() const trimmedInput = currentInput.value.trim()

22
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -231,9 +231,11 @@ onBeforeUnmount(() => {
}) })
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
watch(objectList, (newObjects) => { watch(
zoneObjects.value = zoneObjects.value.map(zoneObject => { objectList,
const updatedObject = newObjects.find(obj => obj.id === zoneObject.objectId); (newObjects) => {
zoneObjects.value = zoneObjects.value.map((zoneObject) => {
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
if (updatedObject) { if (updatedObject) {
return { return {
...zoneObject, ...zoneObject,
@ -242,21 +244,23 @@ watch(objectList, (newObjects) => {
originX: updatedObject.originX, originX: updatedObject.originX,
originY: updatedObject.originY originY: updatedObject.originY
} }
};
} }
return zoneObject; }
}); return zoneObject
})
// Update selectedObject if it exists // Update selectedObject if it exists
if (zoneEditorStore.selectedObject) { if (zoneEditorStore.selectedObject) {
const updatedObject = newObjects.find(obj => obj.id === zoneEditorStore.selectedObject?.id); const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
if (updatedObject) { if (updatedObject) {
zoneEditorStore.setSelectedObject({ zoneEditorStore.setSelectedObject({
...zoneEditorStore.selectedObject, ...zoneEditorStore.selectedObject,
originX: updatedObject.originX, originX: updatedObject.originX,
originY: updatedObject.originY originY: updatedObject.originY
}); })
} }
} }
}, { deep: true }) },
{ deep: true }
)
</script> </script>

2
src/components/gui/Chat.vue
View File

@ -33,7 +33,7 @@ const chatWindow = ref<HTMLElement | null>(null)
const sendMessage = () => { const sendMessage = () => {
if (!message.value.trim()) return if (!message.value.trim()) return
gameStore.connection?.emit('chat:send_message', { message: message.value }, (response: boolean) => {}); gameStore.connection?.emit('chat:send_message', { message: message.value }, (response: boolean) => {})
message.value = '' message.value = ''
} }

29
src/components/gui/UserPanel.vue
View File

@ -4,10 +4,10 @@
<div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200"> <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
<h3 class="m-0 font-medium shrink-0">Game menu</h3> <h3 class="m-0 font-medium shrink-0">Game menu</h3>
<div class="hidden sm:flex gap-1.5 flex-wrap"> <div class="hidden sm:flex gap-1.5 flex-wrap">
<button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button> <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
<button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button> <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button> <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button> <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div> </div>
<div class="flex gap-2.5"> <div class="flex gap-2.5">
<button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel"> <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
@ -15,10 +15,10 @@
</button> </button>
</div> </div>
<div class="flex sm:hidden gap-1.5 flex-wrap"> <div class="flex sm:hidden gap-1.5 flex-wrap">
<button @click.stop="userPanelScreen = 'inventory'" :class="{ 'active': userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button> <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
<button @click.stop="userPanelScreen = 'equipment'" :class="{ 'active': userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button> <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ 'active': userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button> <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
<button @click.stop="userPanelScreen = 'settings'" :class="{ 'active': userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button> <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
</div> </div>
</div> </div>
<Inventory v-show="userPanelScreen === 'inventory'" /> <Inventory v-show="userPanelScreen === 'inventory'" />
@ -30,14 +30,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { useGameStore } from '@/stores/game'; import { useGameStore } from '@/stores/game'
import Inventory from '@/components/gui/partials/Inventory.vue'; import Inventory from '@/components/gui/partials/Inventory.vue'
import Equipment from '@/components/gui/partials/Equipment.vue'; import Equipment from '@/components/gui/partials/Equipment.vue'
import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'; import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
import Settings from '@/components/gui/partials/Settings.vue'; import Settings from '@/components/gui/partials/Settings.vue'
const gameStore = useGameStore() const gameStore = useGameStore()
let userPanelScreen = ref('inventory') let userPanelScreen = ref('inventory')
</script> </script>

1
src/components/gui/partials/CharacterScreen.vue
View File

@ -65,5 +65,4 @@
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
const gameStore = useGameStore() const gameStore = useGameStore()
</script> </script>

1
src/components/gui/partials/Equipment.vue
View File

@ -86,5 +86,4 @@
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
const gameStore = useGameStore() const gameStore = useGameStore()
</script> </script>

2
src/components/gui/partials/Settings.vue
View File

@ -33,7 +33,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue' import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
let settingCategory = ref('character') let settingCategory = ref('character')

4
src/components/gui/partials/settings/CharacterSettings.vue
View File

@ -6,11 +6,11 @@
<form class="flex gap-2.5 flex-wrap"> <form class="flex gap-2.5 flex-wrap">
<div class="form-field-half max-w-[300px]"> <div class="form-field-half max-w-[300px]">
<label for="name">Name</label> <label for="name">Name</label>
<input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" /> <input class="input-cyan" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
</div> </div>
<div class="form-field-half max-w-[300px] relative"> <div class="form-field-half max-w-[300px] relative">
<label for="class">Class</label> <label for="class">Class</label>
<select class="input-cyan" v-model="characterClass" :class="{'inactive': !editCharacter}" name="class" :disabled="!editCharacter"> <select class="input-cyan" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
<option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option> <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
<option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option> <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
</select> </select>

7
src/components/utilities/ConfirmationModal.vue
View File

@ -30,15 +30,15 @@ const props = defineProps({
watch( watch(
() => props.modalOpened, () => props.modalOpened,
(val) => { (val) => {
modalOpened.value = val; modalOpened.value = val
} }
) )
const modalOpened = ref(props.modalOpened); const modalOpened = ref(props.modalOpened)
</script> </script>
<template> <template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => modalOpened = !modalOpened" :modal-width="300" :modal-height="190"> <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
<template #modalHeader> <template #modalHeader>
<div class="text-white"> <div class="text-white">
<slot name="modalHeader"></slot> <slot name="modalHeader"></slot>
@ -51,7 +51,6 @@ const modalOpened = ref(props.modalOpened);
<slot name="modalBody"></slot> <slot name="modalBody"></slot>
</span> </span>
<div class="flex justify-between p-2"> <div class="flex justify-between p-2">
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()"> <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
{{ props.cancelButtonText }} {{ props.cancelButtonText }}
</button> </button>

8
src/components/zone/Objects.vue
View File

@ -1,7 +1,3 @@
<template> <template></template>
</template> <script setup lang="ts"></script>
<script setup lang="ts">
</script>

12
src/components/zone/Tiles.vue
View File

@ -53,21 +53,15 @@ function createTileLayer() {
} }
function createTileArray() { function createTileArray() {
return Array.from({ length: zone.value?.width ?? 0 }, () => return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile')
)
} }
onBeforeMount(() => { onBeforeMount(() => {
if (zone.value?.tiles) { if (zone.value?.tiles) {
setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles) setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
tileArray.value = zone.value.tiles.map(row => tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
row.map(tileId => tileId || 'blank_tile')
)
} else { } else {
tileArray.value.forEach((row, y) => tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))
)
} }
}) })

14
src/components/zone/Zone.vue
View File

@ -48,18 +48,20 @@ gameStore.connection?.on('character:move', (data: ExtendedCharacterT) => {
zoneStore.updateCharacter(data) zoneStore.updateCharacter(data)
}) })
watch(() => zoneStore.zone, (newZone) => { watch(
() => zoneStore.zone,
(newZone) => {
console.log('Zone changed:', newZone) console.log('Zone changed:', newZone)
}, { deep: true }) },
{ deep: true }
)
onBeforeMount(() => { onBeforeMount(() => {})
});
onBeforeUnmount(() => { onBeforeUnmount(() => {
gameStore.connection?.off('zone:teleport') gameStore.connection?.off('zone:teleport')
gameStore.connection?.off('zone:character:join') gameStore.connection?.off('zone:character:join')
gameStore.connection?.off('zone:character:leave') gameStore.connection?.off('zone:character:leave')
gameStore.connection?.off('character:move') gameStore.connection?.off('character:move')
}); })
</script> </script>

9
src/composables/usePointerHandlers.ts
View File

@ -11,7 +11,7 @@ export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.T
const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera, isDragging) const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera, isDragging)
const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging) const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
let currentHandlers = computed(() => zoneEditorStore.active ? zoneEditorHandlers : gameHandlers) let currentHandlers = computed(() => (zoneEditorStore.active ? zoneEditorHandlers : gameHandlers))
const setupPointerHandlers = () => { const setupPointerHandlers = () => {
currentHandlers.value.setupPointerHandlers() currentHandlers.value.setupPointerHandlers()
@ -21,12 +21,15 @@ export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.T
currentHandlers.value.cleanupPointerHandlers() currentHandlers.value.cleanupPointerHandlers()
} }
watch(() => zoneEditorStore.active, (newValue, oldValue) => { watch(
() => zoneEditorStore.active,
(newValue, oldValue) => {
if (newValue !== oldValue) { if (newValue !== oldValue) {
cleanupPointerHandlers() cleanupPointerHandlers()
setupPointerHandlers() setupPointerHandlers()
} }
}) }
)
return { setupPointerHandlers, cleanupPointerHandlers } return { setupPointerHandlers, cleanupPointerHandlers }
} }

30
src/screens/Characters.vue
View File

@ -3,17 +3,13 @@
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div> <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="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
<div class="filler"></div> <div class="filler"></div>
<ConfirmationModal <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
v-if="deletingCharacter != null"
:confirm-function="delete_character.bind(this, deletingCharacter.id)"
:cancel-function="(() => deletingCharacter = null).bind(this)"
confirm-button-text="Delete"
>
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium">Deleting character</h3> <h3 class="m-0 font-medium">Deleting character</h3>
</template> </template>
<template #modalBody> <template #modalBody>
You are about to delete <span class="font-extrabold">{{deletingCharacter.name}}</span>, are you sure about that? You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
>, are you sure about that?
</template> </template>
</ConfirmationModal> </ConfirmationModal>
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading"> <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
@ -26,7 +22,14 @@
<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" /> <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> <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>
<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 }"> <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" /> <img draggable="false" src="/assets/icons/trashcan.svg" />
</button> </button>
@ -50,7 +53,10 @@
</div> </div>
<div class="button-wrapper flex gap-8" v-if="!isLoading"> <div class="button-wrapper flex gap-8" v-if="!isLoading">
<button class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" @click="gameStore.disconnectSocket()"> <button
class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
@click="gameStore.disconnectSocket()"
>
<img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" /> <img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" />
</button> </button>
<button <button
@ -97,7 +103,7 @@ import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
const isLoading = ref(true) const isLoading = ref(true)
const characters = ref([]) const characters = ref([])
const gameStore = useGameStore() const gameStore = useGameStore()
const deletingCharacter = ref(null); const deletingCharacter = ref(null)
// Fetch characters // Fetch characters
gameStore.connection?.on('character:list', (data: any) => { gameStore.connection?.on('character:list', (data: any) => {
@ -116,7 +122,7 @@ onMounted(() => {
const selected_character = ref(null) const selected_character = ref(null)
function select_character() { function select_character() {
if (!selected_character.value) return if (!selected_character.value) return
deletingCharacter.value = null; deletingCharacter.value = null
console.log('selected_character', selected_character.value) console.log('selected_character', selected_character.value)
gameStore.connection?.emit('character:connect', { character_id: selected_character.value }) gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data)) gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
@ -125,7 +131,7 @@ function select_character() {
// Delete character logics // Delete character logics
function delete_character(character_id: number) { function delete_character(character_id: number) {
if (!character_id) return if (!character_id) return
deletingCharacter.value = null; deletingCharacter.value = null
gameStore.connection?.emit('character:delete', { character_id: character_id }) gameStore.connection?.emit('character:delete', { character_id: character_id })
} }

4
src/screens/Login.vue
View File

@ -47,9 +47,9 @@ onMounted(async () => {
* Fetch assets from the server * Fetch assets from the server
*/ */
const token = useCookies().get('token'); const token = useCookies().get('token')
if (token) { if (token) {
gameStore.setToken(token); gameStore.setToken(token)
gameStore.initConnection() gameStore.initConnection()
} }