imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Small styling adjustment on buttons. Some zone editor stuff.

Browse Source
This commit is contained in:
Dennis Postma
2024-07-07 04:32:16 +02:00
parent 317906eab5
commit 89a781470b
7 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utilities/assetManager/AssetManager.vue
View File

@ -24,7 +24,7 @@
<!-- 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'" />
<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 bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">

3
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -12,7 +12,7 @@
<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" />
</div>
<span class="flex-shrink-0">{{ object.name }}</span>
<span>{{ object.name }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@ -64,7 +64,6 @@ const filteredObjects = computed(() => {
onMounted(() => {
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
if (config.development) console.log(response)
assetManagerStore.setObjectList(response)
})
})

18
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -7,14 +7,15 @@
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div>
<a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5">
<!-- TODO make all img have same width so text aligns nicely -->
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
<span class="flex-shrink-0">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
<div>
<a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
<span class="">{{ tile }}</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
</div>
</template>
<script setup lang="ts">
@ -62,7 +63,6 @@ const filteredTiles = computed(() => {
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
if (config.development) console.log(response)
assetManagerStore.setTileList(response)
})
})