From 33fd32348fca3e26c4337233938fa05d74d7f7b6 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 20 Jul 2024 15:18:06 +0200
Subject: [PATCH] Work on sprite stuff

---
 src/components/sprites/Character.vue          |   2 +-
 .../utilities/assetManager/AssetManager.vue   |  28 +++--
 .../assetManager/partials/SpriteDetails.vue   | 118 ++++++++++++++++++
 .../assetManager/partials/SpriteList.vue      |  70 +++++++++++
 .../assetManager/partials/TileList.vue        |  29 +++--
 src/stores/assetManager.ts                    |  33 +++--
 src/types.ts                                  |  14 +++
 7 files changed, 266 insertions(+), 28 deletions(-)
 create mode 100644 src/components/utilities/assetManager/partials/SpriteDetails.vue
 create mode 100644 src/components/utilities/assetManager/partials/SpriteList.vue

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index f53bb29..9f50363 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -62,7 +62,7 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
 
   gameStore.connection?.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
 
-  //Directions for player sprites + animations
+  //Directions for player sprite + animations
   if (px < 0 && py > 0) {
     console.log('down left')
   } else if (px < 0 && py < 0) {
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 9f1b147..b7764cc 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -11,13 +11,29 @@
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Loot</span>
+        <span>Items</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer">
         <span>NPC's</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Characters</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Mounts</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Pets</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprite' }" @click="() => (selectedCategory = 'sprite')">
+        <span>Sprites</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
     </div>
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
 
@@ -25,6 +41,7 @@
     <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
+      <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
     <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
@@ -34,28 +51,23 @@
 
     <!-- Asset details -->
     <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
-      <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
-      <ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
+      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
+      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useGameStore } from '@/stores/game'
 import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
 import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
 import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
 import ObjectDetails from '@/components/utilities/assetManager/partials/ObjectDetails.vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 
-const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
 
-const selectedTile = ref('')
-const selectedObject = ref('')
-
 const hasScrolled = ref(false)
 const elementToScroll = ref()
 
diff --git a/src/components/utilities/assetManager/partials/SpriteDetails.vue b/src/components/utilities/assetManager/partials/SpriteDetails.vue
new file mode 100644
index 0000000..459812c
--- /dev/null
+++ b/src/components/utilities/assetManager/partials/SpriteDetails.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col items-center justify-between h-[300px]">
+      <div class="filler"></div>
+      <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/sprites/${selectedSprite?.id}.png`" :alt="'Sprite ' + selectedSprite?.id" />
+      <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click.prevent="removeSprite">Remove</button>
+      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    </div>
+    <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">Tags</label>
+          <ChipsInput v-model="spriteTags" @update:modelValue="spriteTags = $event" />
+        </div>
+        <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const selectedSprite = computed(() => assetManagerStore.selectedSprite)
+
+const spriteName = ref('')
+const spriteTags = ref([] as string[])
+const spriteOriginX = ref(0)
+const spriteOriginY = ref(0)
+
+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
+}
+
+function removeSprite() {
+  gameStore.connection?.emit('gm:sprite:remove', { sprite: selectedSprite.value?.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove sprite')
+      return
+    }
+    refreshSpriteList()
+  })
+}
+
+function refreshSpriteList() {
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+    assetManagerStore.setSelectedSprite(null)
+  })
+}
+
+function saveSprite() {
+  if (!selectedSprite.value) {
+    console.error('No sprite selected')
+    return
+  }
+
+  console.log(spriteTags.value)
+  gameStore.connection?.emit(
+    'gm:sprite:update',
+    {
+      id: selectedSprite.value.id,
+      name: spriteName.value,
+      tags: spriteTags.value,
+      origin_x: spriteOriginX.value,
+      origin_y: spriteOriginY.value
+    },
+    (response: boolean) => {
+      if (!response) {
+        console.error('Failed to save sprite')
+        return
+      }
+      refreshSpriteList()
+    }
+  )
+}
+
+watch(selectedSprite, (sprite: Sprite | null) => {
+  if (!sprite) return
+  spriteName.value = sprite.name
+  spriteOriginX.value = sprite.origin_x
+  spriteOriginY.value = sprite.origin_y
+})
+
+onMounted(() => {
+  if (!selectedSprite.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedSprite(null)
+})
+</script>
diff --git a/src/components/utilities/assetManager/partials/SpriteList.vue b/src/components/utilities/assetManager/partials/SpriteList.vue
new file mode 100644
index 0000000..22bb102
--- /dev/null
+++ b/src/components/utilities/assetManager/partials/SpriteList.vue
@@ -0,0 +1,70 @@
+<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-[15px] 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-[1px] 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-[28px] w-[75px] max-w-[75px] flex justify-center">
+        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/sprites/${sprite.id}.png`" alt="Sprite" />
+      </div>
+      <span>{{ sprite.name }}</span>
+    </div>
+    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+  </a>
+</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'
+
+const gameStore = useGameStore()
+const spriteUploadField = ref(null)
+const assetManagerStore = useAssetManagerStore()
+const assetStore = useAssetStore()
+
+const searchQuery = ref('')
+
+const handleFileUpload = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (!files) return
+  gameStore.connection?.emit('gm:sprite:upload', files, (response: boolean) => {
+    if (!response) {
+      if (config.development) console.error('Failed to upload sprite')
+      return
+    }
+
+    assetStore.fetchAssets()
+
+    gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+      assetManagerStore.setSpriteList(response)
+    })
+  })
+}
+
+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
+}
+
+const filteredSprites = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.spriteList
+  }
+  return assetManagerStore.spriteList.filter((sprite) => sprite.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+onMounted(() => {
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+  })
+})
+</script>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 65637d7..91ae4b3 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -7,14 +7,20 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <div v-bind="containerProps">
+  <div v-bind="containerProps" style="height: 400px; overflow-y: auto;">
     <div v-bind="wrapperProps">
-      <a class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.data.id }" v-for="(tile, index) in list" :key="index" @click="assetManagerStore.setSelectedTile(tile.data as Tile)">
+      <a
+        v-for="{ data: tile } in list"
+        :key="tile.id"
+        class="relative p-2.5 cursor-pointer block"
+        :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }"
+        @click="assetManagerStore.setSelectedTile(tile)"
+      >
         <div class="flex items-center gap-2.5">
           <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.data.id}.png`" alt="Tile" />
+            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
           </div>
-          <span>{{ tile.data.name }}</span>
+          <span>{{ tile.name }}</span>
         </div>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
@@ -56,28 +62,31 @@ const handleFileUpload = (e: Event) => {
 }
 
 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
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
 }
 
 const filteredTiles = computed(() => {
   if (!searchQuery.value) {
     return assetManagerStore.tileList
   }
-  return assetManagerStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  return assetManagerStore.tileList.filter((tile) =>
+    tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
 })
 
-const { list, containerProps, wrapperProps } = useVirtualList(
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
   filteredTiles,
   {
-    // Keep `itemHeight` in sync with the item's row.
     itemHeight: 28,
   },
 )
 
+const virtualList = ref({ scrollTo })
+
 onMounted(() => {
   gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
     assetManagerStore.setTileList(response)
   })
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/stores/assetManager.ts b/src/stores/assetManager.ts
index eeba5d3..b1f2c5a 100644
--- a/src/stores/assetManager.ts
+++ b/src/stores/assetManager.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object } from '@/types'
+import type { Tile, Object, Sprite } from '@/types'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])
@@ -9,30 +9,45 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   const objectList = ref<Object[]>([])
   const selectedObject = ref<Object | null>(null)
 
+  const spriteList = ref<Sprite[]>([])
+  const selectedSprite = ref<Sprite | null>(null)
+
   function setTileList(tiles: Tile[]) {
     tileList.value = tiles
   }
 
-  function setObjectList(objects: Object[]) {
-    objectList.value = objects
-  }
-
   function setSelectedTile(tile: Tile | null) {
     selectedTile.value = tile
   }
 
+  function setObjectList(objects: Object[]) {
+    objectList.value = objects
+  }
+
   function setSelectedObject(object: Object | null) {
     selectedObject.value = object
   }
 
+  function setSpriteList(sprites: Sprite[]) {
+    spriteList.value = sprites
+  }
+
+  function setSelectedSprite(sprite: Sprite | null) {
+    selectedSprite.value = sprite
+  }
+
   return {
     tileList,
-    objectList,
-    setTileList,
-    setObjectList,
     selectedTile,
+    objectList,
     selectedObject,
+    spriteList,
+    selectedSprite,
+    setTileList,
     setSelectedTile,
-    setSelectedObject
+    setObjectList,
+    setSelectedObject,
+    setSpriteList,
+    setSelectedSprite
   }
 })
diff --git a/src/types.ts b/src/types.ts
index 86cf7d9..5a2e2f8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,6 +10,20 @@ export type Asset = {
   type: 'base64' | 'link'
 }
 
+export type Sprite = {
+  id: string;
+  name: string;
+  origin_x: number;
+  origin_y: number;
+  frameSpeed: number;
+  isAnimated: boolean;
+  isLooping: boolean;
+  isPlayableCharacter: boolean;
+  isEnemy: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
 export type Tile = {
   id: string
   name: string