From 87815dd68ea19dd521108ce8c3bcd46aeb7beba0 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 20 Jul 2024 20:17:46 +0200
Subject: [PATCH] npm run format

---
 src/components/forms/ChipsInput.vue           | 24 +++++-----
 .../utilities/assetManager/AssetManager.vue   |  1 -
 .../assetManager/partials/ObjectDetails.vue   |  1 -
 .../assetManager/partials/ObjectList.vue      | 23 +++------
 .../assetManager/partials/TileList.vue        | 25 +++-------
 .../utilities/zoneEditor/Objects.vue          | 22 ++++-----
 .../zoneEditor/SelectedZoneObject.vue         | 47 +++++--------------
 src/components/utilities/zoneEditor/Tiles.vue | 33 +++++--------
 src/screens/Game.vue                          |  4 +-
 src/types.ts                                  | 22 ++++-----
 10 files changed, 70 insertions(+), 132 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 4a4415f..06c0019 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -4,12 +4,7 @@
       <span>{{ chip }}</span>
       <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
     </div>
-    <input
-      class="outline-none border-none max-w-[250px] p-1 m-1 text-white"
-      v-model="currentInput"
-      @keypress.enter.prevent="saveChip"
-      @keydown.delete="backspaceDelete"
-    />
+    <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
   </div>
 </template>
 
@@ -28,9 +23,13 @@ const emit = defineEmits(['update:modelValue'])
 const currentInput = ref('')
 const internalValue = ref(props.modelValue || [])
 
-watch(() => props.modelValue, (newVal) => {
-  internalValue.value = newVal || []
-}, { immediate: true })
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = newVal || []
+  },
+  { immediate: true }
+)
 
 const saveChip = (event) => {
   event.preventDefault()
@@ -42,7 +41,10 @@ const saveChip = (event) => {
 }
 
 const deleteChip = (index) => {
-  emit('update:modelValue', internalValue.value.filter((_, i) => i !== index))
+  emit(
+    'update:modelValue',
+    internalValue.value.filter((_, i) => i !== index)
+  )
 }
 
 const backspaceDelete = (event) => {
@@ -50,4 +52,4 @@ const backspaceDelete = (event) => {
     emit('update:modelValue', internalValue.value.slice(0, -1))
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index f8f48f3..c5294f0 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -63,5 +63,4 @@ import { useAssetManagerStore } from '@/stores/assetManager'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
-
 </script>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 9080d38..6b3469c 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -124,5 +124,4 @@ onMounted(() => {
 onBeforeUnmount(() => {
   assetManagerStore.setSelectedObject(null)
 })
-
 </script>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index f63fc92..b3c3da0 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -9,13 +9,7 @@
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a 
-        v-for="{ data: object } in list" 
-        :key="object.id" 
-        class="relative p-2.5 cursor-pointer block" 
-        :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" 
-        @click="assetManagerStore.setSelectedObject(object as Object)"
-      >
+      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <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/objects/${object.id}.png`" alt="Object" />
@@ -76,22 +70,17 @@ const filteredObjects = computed(() => {
   if (!searchQuery.value) {
     return assetManagerStore.objectList
   }
-  return assetManagerStore.objectList.filter((object) => 
-    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
+  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-  filteredObjects,
-  {
-    itemHeight: 48,
-  },
-)
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredObjects, {
+  itemHeight: 48
+})
 
 const virtualList = ref({ scrollTo })
 
 const onScroll = () => {
-  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
 
   if (scrollTop > 80) {
     hasScrolled.value = true
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 65ec03c..aff601c 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -9,13 +9,7 @@
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <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)"
-      >
+      <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.id}.png`" alt="Tile" />
@@ -76,22 +70,17 @@ 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, scrollTo } = useVirtualList(
-  filteredTiles,
-  {
-    itemHeight: 48,
-  },
-)
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredTiles, {
+  itemHeight: 48
+})
 
 const virtualList = ref({ scrollTo })
 
 const onScroll = () => {
-  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
 
   if (scrollTop > 80) {
     hasScrolled.value = true
@@ -109,4 +98,4 @@ onMounted(() => {
     assetManagerStore.setTileList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 237aec0..e2d82b5 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -19,13 +19,7 @@
       <template #modalBody>
         <div class="m-[15px]">
           <div class="mb-4 flex flex-wrap gap-2">
-            <button
-              v-for="tag in uniqueTags"
-              :key="tag"
-              @click="toggleTag(tag)"
-              class="btn-cyan"
-              :class="{ 'opacity-50': !selectedTags.includes(tag) }"
-            >
+            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
               {{ tag }}
             </button>
           </div>
@@ -70,21 +64,21 @@ watch(objectDepth, (depth) => {
 })
 
 const uniqueTags = computed(() => {
-  const allTags = zoneEditorStore.objectList.flatMap(obj => obj.tags || [])
+  const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const filteredObjects = computed(() => {
   return zoneEditorStore.objectList.filter((object) => {
-    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase());
-    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some(tag => object.tags.includes(tag)));
-    return matchesSearch && matchesTags;
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
+    return matchesSearch && matchesTags
   })
-});
+})
 
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
-    selectedTags.value = selectedTags.value.filter(t => t !== tag)
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
   } else {
     selectedTags.value.push(tag)
   }
@@ -98,4 +92,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/SelectedZoneObject.vue b/src/components/utilities/zoneEditor/SelectedZoneObject.vue
index 3c8a3af..9b3d3c4 100644
--- a/src/components/utilities/zoneEditor/SelectedZoneObject.vue
+++ b/src/components/utilities/zoneEditor/SelectedZoneObject.vue
@@ -3,41 +3,13 @@
     <div class="self-end mt-2 flex gap-2">
       <div>
         <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
-        <input
-          v-model="objectDepth"
-          @mousedown.stop
-          @input="handleDepthInput"
-          class="input-cyan max-w-[90px] px-2 py-1 border rounded"
-          type="number"
-          name="depth"
-          placeholder="Depth"
-          :disabled="!isObjectSelected"
-        />
+        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-[90px] px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
       </div>
-      <button
-        @mousedown.stop
-        @click="handleDelete"
-        class="btn-bordeaux py-1.5 px-[15px]"
-        :disabled="!isObjectSelected"
-      >
+      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-[15px]" :disabled="!isObjectSelected">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
-      <button
-        @mousedown.stop
-        @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)"
-        class="btn-cyan py-1.5 px-[15px]"
-        :disabled="!isObjectSelected"
-      >
-        S
-      </button>
-      <button
-        @mousedown.stop
-        @click="handleMove"
-        class="btn-cyan py-1.5 px-[15px] min-w-[100px]"
-        :disabled="!isObjectSelected"
-      >
-        Move
-      </button>
+      <button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-[15px]" :disabled="!isObjectSelected">S</button>
+      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-[15px] min-w-[100px]" :disabled="!isObjectSelected">Move</button>
     </div>
   </div>
 </template>
@@ -53,9 +25,12 @@ const objectDepth = ref(zoneEditorStore.objectDepth)
 
 const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
 
-watch(() => zoneEditorStore.selectedZoneObject, (selectedZoneObject) => {
-  objectDepth.value = selectedZoneObject?.depth ?? 0
-})
+watch(
+  () => zoneEditorStore.selectedZoneObject,
+  (selectedZoneObject) => {
+    objectDepth.value = selectedZoneObject?.depth ?? 0
+  }
+)
 
 const handleDepthInput = () => {
   const depth = parseFloat(objectDepth.value)
@@ -72,4 +47,4 @@ const handleDelete = () => {
   emit('delete', zoneEditorStore.selectedZoneObject?.id)
   zoneEditorStore.setSelectedZoneObject(null)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 80a4105..7eb0311 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -15,13 +15,7 @@
       <template #modalBody>
         <div class="m-[15px]">
           <div class="mb-4 flex flex-wrap gap-2">
-            <button
-              v-for="tag in uniqueTags"
-              :key="tag"
-              @click="toggleTag(tag)"
-              class="btn-cyan"
-              :class="{ 'opacity-50': !selectedTags.includes(tag) }"
-            >
+            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
               {{ tag }}
             </button>
           </div>
@@ -64,29 +58,26 @@ const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 
 const uniqueTags = computed(() => {
-  const allTags = zoneEditorStore.tileList.flatMap(tile => tile.tags || [])
+  const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const filteredTiles = computed(() => {
   return zoneEditorStore.tileList.filter((tile) => {
-    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase());
-    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some(tag => tile.tags.includes(tag)));
-    return matchesSearch && matchesTags;
+    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
+    return matchesSearch && matchesTags
   })
-});
+})
 
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-  filteredTiles,
-  {
-    itemHeight: 40,
-    itemWidth: 72,
-  },
-)
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredTiles, {
+  itemHeight: 40,
+  itemWidth: 72
+})
 
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
-    selectedTags.value = selectedTags.value.filter(t => t !== tag)
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
   } else {
     selectedTags.value.push(tag)
   }
@@ -98,4 +89,4 @@ onMounted(async () => {
     zoneEditorStore.setTileList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index e5b88ee..06aa84c 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -4,7 +4,7 @@
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
 
     <div v-if="!zoneEditorStore.active">
-      <Game :config="gameConfig" @create="createGame" >
+      <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
           <div class="flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0">
             <Hud />
@@ -21,7 +21,7 @@
     </div>
 
     <div v-if="zoneEditorStore.active">
-      <Game :config="gameConfig" @create="createGame" >
+      <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
           <ZoneEditor v-if="isLoaded" :key="zoneEditorStore.zone?.id ?? 0" />
         </Scene>
diff --git a/src/types.ts b/src/types.ts
index 5a2e2f8..45dc508 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,17 +11,17 @@ export type Asset = {
 }
 
 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;
+  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 = {