diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue index 66feb9e..9455f67 100644 --- a/src/components/gameMaster/zoneEditor/partials/TileList.vue +++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue @@ -42,35 +42,37 @@ </div> </div> </div> - <div v-else class="p-4"> - <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button> - <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4> - <div class="grid grid-cols-8 gap-2 justify-items-center"> - <div class="flex flex-col items-center justify-center"> - <img - class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" - :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`" - :alt="selectedGroup.parent.name" - @click="selectTile(selectedGroup.parent)" - :class="{ - 'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent), - 'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent) - }" - /> - <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span> - </div> - <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center"> - <img - class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" - :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`" - :alt="childTile.name" - @click="selectTile(childTile)" - :class="{ - 'border-cyan shadow-lg scale-105': isActiveTile(childTile), - 'border-transparent hover:border-gray-300': !isActiveTile(childTile) - }" - /> - <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span> + <div v-else class="h-full overflow-auto"> + <div class="p-4"> + <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button> + <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4> + <div class="grid grid-cols-8 gap-2 justify-items-center"> + <div class="flex flex-col items-center justify-center"> + <img + class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" + :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`" + :alt="selectedGroup.parent.name" + @click="selectTile(selectedGroup.parent)" + :class="{ + 'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent), + 'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent) + }" + /> + <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span> + </div> + <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center"> + <img + class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300" + :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`" + :alt="childTile.name" + @click="selectTile(childTile)" + :class="{ + 'border-cyan shadow-lg scale-105': isActiveTile(childTile), + 'border-transparent hover:border-gray-300': !isActiveTile(childTile) + }" + /> + <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span> + </div> </div> </div> </div>