Forgor styling on the other tiles, fix tab closing

This commit is contained in:
Colin Kallemein 2025-01-31 22:57:14 +01:00
parent d665ac989c
commit 67f83c3447
2 changed files with 10 additions and 7 deletions

View File

@ -25,13 +25,13 @@
<div class="grid grid-cols-4 gap-2 justify-items-center"> <div class="grid grid-cols-4 gap-2 justify-items-center">
<div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative"> <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
<img <img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`" :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
:alt="group.parent.name" :alt="group.parent.name"
@click="openGroup(group)" @click="openGroup(group)"
@load="() => processTile(group.parent)" @load="() => processTile(group.parent)"
:class="{ :class="{
'border-cyan shadow-lg scale-105': isActiveTile(group.parent), 'border-cyan shadow-lg': isActiveTile(group.parent),
'border-transparent hover:border-gray-300': !isActiveTile(group.parent) 'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
}" }"
/> />
@ -48,15 +48,15 @@
<div class="p-4"> <div class="p-4">
<button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button> <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
<h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4> <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
<div class="grid grid-cols-8 gap-2 justify-items-center"> <div class="grid grid-cols-4 gap-2 justify-items-center">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img <img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`" :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
:alt="selectedGroup.parent.name" :alt="selectedGroup.parent.name"
@click="selectTile(selectedGroup.parent.id)" @click="selectTile(selectedGroup.parent.id)"
:class="{ :class="{
'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent), 'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent) 'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
}" }"
/> />
@ -64,12 +64,12 @@
</div> </div>
<div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center"> <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
<img <img
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
:src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`" :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
:alt="childTile.name" :alt="childTile.name"
@click="selectTile(childTile.id)" @click="selectTile(childTile.id)"
:class="{ :class="{
'border-cyan shadow-lg scale-105': isActiveTile(childTile), 'border-cyan shadow-lg': isActiveTile(childTile),
'border-transparent hover:border-gray-300': !isActiveTile(childTile) 'border-transparent hover:border-gray-300': !isActiveTile(childTile)
}" }"
/> />

View File

@ -139,6 +139,9 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
function handleClick(tool: string) { function handleClick(tool: string) {
if (tool === 'settings') { if (tool === 'settings') {
emit('open-settings') emit('open-settings')
emit('close-lists')
} else if (tool === 'move') {
emit('close-lists')
} else { } else {
mapEditor.setTool(tool) mapEditor.setTool(tool)
} }