forked from noxious/client
71 lines
3.4 KiB
Vue
71 lines
3.4 KiB
Vue
<template>
|
|
<div class="flex h-full w-full relative">
|
|
<div class="w-2/12 flex flex-col relative">
|
|
<!-- Asset Categories -->
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
|
|
<span>Tiles</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
|
|
<span>Objects</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
|
|
<span>Sprites</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer">
|
|
<span>Items</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px 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-px 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-px 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-px 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-px bg-cyan-200"></div>
|
|
</a>
|
|
</div>
|
|
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
|
|
|
|
<!-- Assets list -->
|
|
<div class="overflow-auto h-full w-4/12 flex flex-col relative">
|
|
<TileList v-if="selectedCategory === 'tiles'" />
|
|
<ObjectList v-if="selectedCategory === 'objects'" />
|
|
<SpriteList v-if="selectedCategory === 'sprites'" />
|
|
</div>
|
|
|
|
<div class="absolute w-px 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 v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
|
|
<ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
|
|
<SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
|
import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
|
|
import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
|
|
import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
|
|
import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
|
|
import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
|
|
import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
|
|
|
|
const assetManagerStore = useAssetManagerStore()
|
|
const selectedCategory = ref('tiles')
|
|
</script>
|