104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
|
|
<template #modalHeader>
|
|
<h3 class="modal-title">Tiles</h3>
|
|
</template>
|
|
<template #modalBody>
|
|
<canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
|
|
<div class="tiles">
|
|
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="selectTile(index)" :class="{ selected: selectedTile === index }" />
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
import config from '@/config'
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
|
|
const tileWidth = config.tile_size.x
|
|
const tileHeight = config.tile_size.y
|
|
const tiles = ref<string[]>([])
|
|
const selectedTile = ref<number | null>(null)
|
|
const canvas = ref<HTMLCanvasElement | null>(null)
|
|
const isModalOpen = ref(false)
|
|
|
|
// Hardcoded image path
|
|
const imagePath = '/assets/tiles/default.png'
|
|
|
|
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
|
return new Promise((resolve) => {
|
|
const img = new Image()
|
|
img.onload = () => resolve(img)
|
|
img.src = src
|
|
})
|
|
}
|
|
|
|
const splitTiles = (img: HTMLImageElement) => {
|
|
if (!canvas.value) {
|
|
console.error('Canvas not found')
|
|
return
|
|
}
|
|
const ctx = canvas.value.getContext('2d')
|
|
if (!ctx) {
|
|
console.error('Failed to get canvas context')
|
|
return
|
|
}
|
|
|
|
const tilesetWidth = img.width
|
|
const tilesetHeight = img.height
|
|
const columns = Math.floor(tilesetWidth / tileWidth)
|
|
const rows = Math.floor(tilesetHeight / tileHeight)
|
|
|
|
tiles.value = []
|
|
selectedTile.value = null
|
|
|
|
for (let row = 0; row < rows; row++) {
|
|
for (let col = 0; col < columns; col++) {
|
|
const x = col * tileWidth
|
|
const y = row * tileHeight
|
|
|
|
ctx.clearRect(0, 0, tileWidth, tileHeight)
|
|
ctx.drawImage(img, x, y, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight)
|
|
|
|
const tileDataURL = canvas.value.toDataURL()
|
|
tiles.value.push(tileDataURL)
|
|
}
|
|
}
|
|
}
|
|
|
|
const selectTile = (index: number) => {
|
|
selectedTile.value = index
|
|
}
|
|
|
|
onMounted(async () => {
|
|
isModalOpen.value = true
|
|
const img = await loadImage(imagePath)
|
|
await nextTick()
|
|
splitTiles(img)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tiles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tiles img {
|
|
width: 64px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: border 0.3s ease;
|
|
}
|
|
|
|
.tiles img.selected {
|
|
border: 2px solid #ff0000;
|
|
}
|
|
</style>
|