npm run format

2024-07-20 20:17:46 +02:00
parent dca773b8c9
commit 87815dd68e
10 changed files with 70 additions and 132 deletions
--- 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>
+</script>
--- 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>
+</script>
--- 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>
+</script>