From 71e50698573e97b13eb056adfd403255aca8c79d Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 22 Jul 2024 15:39:55 +0200
Subject: [PATCH] Typescript enhancements, fixed character disconnect emit

---
 src/components/World.vue                      |   4 +-
 .../assetManager/partials/ObjectDetails.vue   |   5 +-
 .../assetManager/partials/SpriteList.vue      | 171 +++++++++++++-----
 src/screens/Game.vue                          |   9 +-
 src/stores/zone.ts                            |   4 +-
 5 files changed, 135 insertions(+), 58 deletions(-)

diff --git a/src/components/World.vue b/src/components/World.vue
index 03a2b4c..15d3979 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -82,8 +82,8 @@ gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
 })
 
 // Listen for user:disconnect
-gameStore.connection?.on('zone:character:leave', (data: CharacterT) => {
-  zoneStore.removeCharacter(data)
+gameStore.connection?.on('zone:character:leave', (character_id: number) => {
+  zoneStore.removeCharacter(character_id)
 })
 
 gameStore.connection?.on('character:moved', (data: CharacterT) => {
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 1e90ab4..ef7adaa 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -73,8 +73,9 @@ const objectFrameSpeed = ref(0)
 const objectFrameWidth = ref(0)
 const objectFrameHeight = ref(0)
 
-function updateObjectIsAnimated(event) {
-  objectIsAnimated.value = event.target.value === 'true';
+function updateObjectIsAnimated(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  objectIsAnimated.value = target.value === 'true';
 }
 
 if (!selectedObject.value) {
diff --git a/src/components/utilities/assetManager/partials/SpriteList.vue b/src/components/utilities/assetManager/partials/SpriteList.vue
index f0d8249..d957cb3 100644
--- a/src/components/utilities/assetManager/partials/SpriteList.vue
+++ b/src/components/utilities/assetManager/partials/SpriteList.vue
@@ -1,70 +1,151 @@
 <template>
-  <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-4 inline-flex hover:bg-cyan hover:cursor-pointer">
-      <input class="hidden" id="upload-asset" ref="spriteUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-      Upload sprite(s)
-    </label>
-    <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-  </div>
-  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" v-for="(sprite, index) in filteredSprites" :key="index" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
-    <div class="flex items-center gap-2.5">
-      <div class="h-7 w-16 max-w-16 flex justify-center">
-        <img class="h-7" :src="`${config.server_endpoint}/assets/sprites/${sprite.id}.png`" alt="Sprite" />
-      </div>
-      <span>{{ sprite.name }}</span>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
+      <div class="filler"></div>
+      <img class="max-h-56" :src="`${config.server_endpoint}/assets/sprites/${selectedSprite?.id}.png`" :alt="'Sprite ' + selectedSprite?.id" />
+      <button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeSprite">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
     </div>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-  </a>
+    <div class="m-2.5 p-2.5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="name">Name</label>
+          <input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
+          <input v-model="spriteOriginX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
+          <input v-model="spriteOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+        </div>
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="origin-x">Is animated</label>
+          <select :value="spriteIsAnimated.toString()" @change="updateSpriteIsAnimated" class="input-cyan" name="is-animated">
+            <option value="false">No</option>
+            <option value="true">Yes</option>
+          </select>
+        </div>
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
+          <input v-model="spriteFrameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
+          <input v-model="spriteFrameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
+          <input v-model="spriteFrameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
+        </div>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+      </form>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import config from '@/config'
-import { useGameStore } from '@/stores/game'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
 import type { Sprite } from '@/types'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useGameStore } from '@/stores/game'
+import config from '@/config'
 
 const gameStore = useGameStore()
-const spriteUploadField = ref(null)
 const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
 
-const searchQuery = ref('')
+const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
-const handleFileUpload = (e: Event) => {
-  const files = (e.target as HTMLInputElement).files
-  if (!files) return
-  gameStore.connection?.emit('gm:sprite:upload', files, (response: boolean) => {
+const spriteName = ref('')
+const spriteOriginX = ref(0)
+const spriteOriginY = ref(0)
+const spriteIsAnimated = ref(false)
+const spriteFrameSpeed = ref(0)
+const spriteFrameWidth = ref(0)
+const spriteFrameHeight = ref(0)
+
+function updateSpriteIsAnimated(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  spriteIsAnimated.value = target.value === 'true';
+}
+
+if (!selectedSprite.value) {
+  console.error('No sprite selected')
+}
+
+if (selectedSprite.value) {
+  spriteName.value = selectedSprite.value.name
+  spriteOriginX.value = selectedSprite.value.origin_x
+  spriteOriginY.value = selectedSprite.value.origin_y
+  spriteIsAnimated.value = selectedSprite.value.isAnimated
+}
+
+function removeSprite() {
+  gameStore.connection?.emit('gm:sprite:remove', { sprite: selectedSprite.value?.id }, (response: boolean) => {
     if (!response) {
-      if (config.development) console.error('Failed to upload sprite')
+      console.error('Failed to remove sprite')
       return
     }
-
-    assetStore.fetchAssets()
-
-    gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
-      assetManagerStore.setSpriteList(response)
-    })
+    refreshSpriteList()
   })
 }
 
-const handleSearch = () => {
-  // The filtering is handled by the computed property, so we don't need to do anything here
-  // This function is kept in case you want to add debounce or other functionality later
+function refreshSpriteList(unsetSelectedSprite = true) {
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+
+    if (unsetSelectedSprite) {
+      assetManagerStore.setSelectedSprite(null)
+    }
+  })
 }
 
-const filteredSprites = computed(() => {
-  if (!searchQuery.value) {
-    return assetManagerStore.spriteList
+function saveSprite() {
+  if (!selectedSprite.value) {
+    console.error('No sprite selected')
+    return
   }
-  return assetManagerStore.spriteList.filter((sprite) => sprite.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+
+  console.log(spriteTags.value)
+  gameStore.connection?.emit(
+    'gm:sprite:update',
+    {
+      id: selectedSprite.value.id,
+      name: spriteName.value,
+      origin_x: spriteOriginX.value,
+      origin_y: spriteOriginY.value,
+      isAnimated: spriteIsAnimated.value,
+      frameSpeed: spriteFrameSpeed.value,
+      frameWidth: spriteFrameWidth.value,
+      frameHeight: spriteFrameHeight.value
+    },
+    (response: boolean) => {
+      if (!response) {
+        console.error('Failed to save sprite')
+        return
+      }
+      refreshSpriteList(false)
+    }
+  )
+}
+
+watch(selectedSprite, (sprite: Sprite | null) => {
+  if (!sprite) return
+  spriteName.value = sprite.name
+  spriteOriginX.value = sprite.origin_x
+  spriteOriginY.value = sprite.origin_y
+  spriteIsAnimated.value = sprite.isAnimated
+  spriteFrameSpeed.value = sprite.frameSpeed
+  spriteFrameWidth.value = sprite.frameWidth
+  spriteFrameHeight.value = sprite.frameHeight
 })
 
 onMounted(() => {
-  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
-    assetManagerStore.setSpriteList(response)
-  })
+  if (!selectedSprite.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedSprite(null)
 })
 </script>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index bbee8c2..46bab16 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { onUnmounted, watch, ref } from 'vue'
+import { onUnmounted, watch, ref, onBeforeUnmount } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
@@ -52,12 +52,7 @@ const assetStore = useAssetStore()
 const isLoaded = ref(false)
 const { assets } = storeToRefs(assetStore)
 
-onUnmounted(() => {
-  gameStore.disconnectSocket()
-})
-
-// On page close
-addEventListener('beforeunload', () => {
+onBeforeUnmount(() => {
   gameStore.disconnectSocket()
 })
 
diff --git a/src/stores/zone.ts b/src/stores/zone.ts
index 58ebcfb..83ce746 100644
--- a/src/stores/zone.ts
+++ b/src/stores/zone.ts
@@ -21,8 +21,8 @@ export const useZoneStore = defineStore('zone', {
       if (index === -1) return
       this.characters[index] = character
     },
-    removeCharacter(character: Character) {
-      this.characters = this.characters.filter((c: Character) => c.id !== character.id)
+    removeCharacter(character_id: number) {
+      this.characters = this.characters.filter((c) => c.id !== character_id)
     },
     reset() {
       this.zone = null