noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix select styling tiles and synced styling with objects

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-07 14:27:21 +02:00
parent 03ba9c7a25
commit 922ae6474e
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/utilities/zoneEditor/Objects.vue
View File

@ -21,12 +21,13 @@
<div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4"> <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
<div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4"> <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
<img <img
class="border-2 border-solid"
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
alt="Object" alt="Object"
@click="zoneEditorStore.setSelectedObject(object)" @click="zoneEditorStore.setSelectedObject(object)"
:class="{ :class="{
'w-full h-auto cursor-pointer border-2 transition-all duration-300': true, 'w-full h-auto cursor-pointer transition-all duration-300': true,
'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id, 'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id 'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
}" }"
/> />

14
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -16,20 +16,26 @@
<div class="m-[15px]"> <div class="m-[15px]">
<div class="flex flex-wrap gap-2.5"> <div class="flex flex-wrap gap-2.5">
<img <img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition-all ease duration-300"
src="/assets/zone/blank_tile.png" src="/assets/zone/blank_tile.png"
alt="Blank tile" alt="Blank tile"
@click="zoneEditorStore.setSelectedTile('blank_tile')" @click="zoneEditorStore.setSelectedTile('blank_tile')"
:class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" :class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === 'blank_tile',
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== 'blank_tile'
}"
/> />
<img <img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" class="w-[64px] h-[32px] cursor-pointer border-2 border-solid transition-all ease duration-300"
v-for="(tile, index) in zoneEditorStore.tileList" v-for="(tile, index) in zoneEditorStore.tileList"
:key="index" :key="index"
:src="`${config.server_endpoint}/assets/tiles/${tile}.png`" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
alt="Tile" alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)" @click="zoneEditorStore.setSelectedTile(tile)"
:class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" :class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === tile,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== tile
}"
/> />
</div> </div>
</div> </div>