Forgor styling on the other tiles, fix tab closing
This commit is contained in:
parent
d665ac989c
commit
67f83c3447
@ -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)
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user