90 lines
3.3 KiB
Vue
90 lines
3.3 KiB
Vue
<template>
|
|
<div class="flex h-full w-full relative">
|
|
<div class="w-[15%] flex flex-col relative">
|
|
<!-- Asset Categories -->
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
|
|
<span>Tiles</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="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
|
|
<span>Objects</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>Loot</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>
|
|
</div>
|
|
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
|
|
|
|
<!-- Assets list -->
|
|
<div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
|
|
<TileList v-if="selectedCategory === 'tiles'" />
|
|
<ObjectList :name="selectedCategory" 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 bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
|
|
<img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
|
</button>
|
|
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
|
|
|
|
<!-- 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" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useSocketStore } from '@/stores/socket'
|
|
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 socket = useSocketStore()
|
|
const assetManagerStore = useAssetManagerStore()
|
|
const selectedCategory = ref('tiles')
|
|
|
|
const selectedTile = ref('')
|
|
const selectedObject = ref('')
|
|
|
|
const hasScrolled = ref(false)
|
|
const elementToScroll = ref()
|
|
|
|
const onScroll = (e: Event) => {
|
|
let scrollTop = (e.target as HTMLBodyElement).scrollTop
|
|
|
|
if (scrollTop > 200) {
|
|
hasScrolled.value = true
|
|
} else if (scrollTop <= 200) {
|
|
hasScrolled.value = false
|
|
}
|
|
}
|
|
|
|
function toTop() {
|
|
elementToScroll.value.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.category,
|
|
.asset,
|
|
.image-container {
|
|
&.selected {
|
|
@apply bg-cyan bg-opacity-80;
|
|
}
|
|
}
|
|
</style>
|