i dont even remember, something, something, zone editor
This commit is contained in:
105
src/components/utilities/zoneEditor/Decorations.vue
Normal file
105
src/components/utilities/zoneEditor/Decorations.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Walls</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
|
||||
<div class="walls">
|
||||
<img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === 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'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const wallWidth = config.wall_size.x
|
||||
const wallHeight = config.wall_size.y
|
||||
const walls = ref<string[]>([])
|
||||
const selectedWall = ref<number | null>(null)
|
||||
const canvas = ref<HTMLCanvasElement | null>(null)
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
// Hardcoded image path
|
||||
const imagePath = '/assets/zone/walls.png'
|
||||
|
||||
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image()
|
||||
img.onload = () => resolve(img)
|
||||
img.src = src
|
||||
})
|
||||
}
|
||||
|
||||
const splitWalls = (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 wallsetWidth = img.width
|
||||
const wallsetHeight = img.height
|
||||
const columns = Math.floor(wallsetWidth / wallWidth)
|
||||
const rows = Math.floor(wallsetHeight / wallHeight)
|
||||
|
||||
walls.value = []
|
||||
selectedWall.value = null
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < columns; col++) {
|
||||
const x = col * wallWidth
|
||||
const y = row * wallHeight
|
||||
|
||||
ctx.clearRect(0, 0, wallWidth, wallHeight)
|
||||
ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
|
||||
|
||||
const wallDataURL = canvas.value.toDataURL()
|
||||
walls.value.push(wallDataURL)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectWall = (index: number) => {
|
||||
selectedWall.value = index
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
const img = await loadImage(imagePath)
|
||||
await nextTick()
|
||||
splitWalls(img)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.walls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.walls img {
|
||||
width: 30px;
|
||||
height: 130px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.3s ease;
|
||||
}
|
||||
|
||||
.walls img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
}
|
||||
</style>
|
||||
@ -29,7 +29,7 @@ const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
// Hardcoded image path
|
||||
const imagePath = '/assets/tiles/default.png'
|
||||
const imagePath = '/assets/zone/tiles.png'
|
||||
|
||||
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
return new Promise((resolve) => {
|
||||
|
||||
@ -6,31 +6,36 @@
|
||||
<img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button :class="{ active: zoneEditorStore.tool === 'tile' }" @click="zoneEditorStore.setTool('tile')">
|
||||
<img src="/assets/icons/zoneEditor/tiles.svg" alt="Draw tiles" />
|
||||
<button :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
|
||||
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
|
||||
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
|
||||
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
|
||||
<option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
|
||||
<option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
|
||||
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
|
||||
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
|
||||
</select>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
|
||||
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
|
||||
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'eraser'">
|
||||
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
|
||||
<option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
|
||||
<option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
|
||||
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
|
||||
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
|
||||
</select>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button>
|
||||
<button @click="() => zoneEditorStore.toggleZoneSettings()">
|
||||
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button>
|
||||
<img src="/assets/icons/zoneEditor/monster.svg" alt="Zone settings" />
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button>
|
||||
<img src="/assets/icons/zoneEditor/cart.svg" alt="Zone settings" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="btn-cyan">Save as new</button>
|
||||
<button class="btn-cyan">Save</button>
|
||||
<button class="btn-cyan">Load</button>
|
||||
<button class="btn-cyan">Clear</button>
|
||||
<button class="btn-cyan" @click="clear">Clear</button>
|
||||
<button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,7 +43,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, ref } from 'vue'
|
||||
import { onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { getTile, tileToWorldXY } from '@/services/zone'
|
||||
import config from '@/config'
|
||||
@ -51,7 +56,15 @@ const props = defineProps({
|
||||
layer: Phaser.Tilemaps.TilemapLayer
|
||||
})
|
||||
const scene = useScene()
|
||||
const emit = defineEmits(['erase', 'move', 'tile'])
|
||||
const emit = defineEmits(['move', 'eraser', 'pencil'])
|
||||
|
||||
// drawMode
|
||||
const drawMode = ref('tile')
|
||||
|
||||
// on change of select
|
||||
watch(drawMode, (value) => {
|
||||
zoneEditorStore.setDrawMode(value)
|
||||
})
|
||||
|
||||
function drawTiles(pointer: Phaser.Input.Pointer) {
|
||||
if (!pointer.isDown) return
|
||||
@ -65,11 +78,11 @@ function drawTiles(pointer: Phaser.Input.Pointer) {
|
||||
}
|
||||
|
||||
if (zoneEditorStore.tool === 'eraser') {
|
||||
emit('erase', pointer_tile)
|
||||
emit('eraser', pointer_tile)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.tool === 'tile') {
|
||||
emit('tile', pointer_tile)
|
||||
if (zoneEditorStore.tool === 'pencil') {
|
||||
emit('pencil', pointer_tile)
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,6 +91,10 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
})
|
||||
|
||||
function clear() {
|
||||
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.zoneSettings?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zoneSettings?.height ?? 10 }, () => 0)))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
105
src/components/utilities/zoneEditor/Walls.vue
Normal file
105
src/components/utilities/zoneEditor/Walls.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Walls</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
|
||||
<div class="walls">
|
||||
<img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === 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'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const wallWidth = config.wall_size.x
|
||||
const wallHeight = config.wall_size.y
|
||||
const walls = ref<string[]>([])
|
||||
const selectedWall = ref<number | null>(null)
|
||||
const canvas = ref<HTMLCanvasElement | null>(null)
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
// Hardcoded image path
|
||||
const imagePath = '/assets/zone/walls.png'
|
||||
|
||||
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image()
|
||||
img.onload = () => resolve(img)
|
||||
img.src = src
|
||||
})
|
||||
}
|
||||
|
||||
const splitWalls = (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 wallsetWidth = img.width
|
||||
const wallsetHeight = img.height
|
||||
const columns = Math.floor(wallsetWidth / wallWidth)
|
||||
const rows = Math.floor(wallsetHeight / wallHeight)
|
||||
|
||||
walls.value = []
|
||||
selectedWall.value = null
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < columns; col++) {
|
||||
const x = col * wallWidth
|
||||
const y = row * wallHeight
|
||||
|
||||
ctx.clearRect(0, 0, wallWidth, wallHeight)
|
||||
ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
|
||||
|
||||
const wallDataURL = canvas.value.toDataURL()
|
||||
walls.value.push(wallDataURL)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectWall = (index: number) => {
|
||||
selectedWall.value = index
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
const img = await loadImage(imagePath)
|
||||
await nextTick()
|
||||
splitWalls(img)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.walls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.walls img {
|
||||
width: 30px;
|
||||
height: 130px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.3s ease;
|
||||
}
|
||||
|
||||
.walls img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="tileMap" :tileset="zoneStore.tiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<Controls :layer="layer" />
|
||||
<Toolbar :layer="layer" @erase="erase" @tile="tile" />
|
||||
<Tiles />
|
||||
<ZoneSettings />
|
||||
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" />
|
||||
<Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
|
||||
<Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
|
||||
<ZoneSettings v-if="zoneEditorStore.zoneSettingsOpen" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -11,27 +12,22 @@ import config from '@/config'
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
||||
import { onBeforeMount, ref, type Ref, watch } from 'vue'
|
||||
import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import { useZoneStore } from '@/stores/zone'
|
||||
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
|
||||
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
|
||||
import Walls from '@/components/utilities/zoneEditor/Walls.vue'
|
||||
import { generateTilemap } from '@/services/zone'
|
||||
|
||||
// Phavuer logic
|
||||
let scene = useScene()
|
||||
let tilemapLayer = ref()
|
||||
let zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: 10, // @TODO : get this from the server
|
||||
height: 10, // @TODO : get this from the server
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
let tileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
let tileMap = generateTilemap(scene, 10, 10);
|
||||
let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
|
||||
let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
|
||||
|
||||
@ -40,41 +36,40 @@ const centerY = (tileMap.height * tileMap.tileHeight) / 2
|
||||
const centerX = (tileMap.width * tileMap.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
|
||||
// Multiplayer / server logics
|
||||
const zoneStore = useZoneStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const socket = useSocketStore()
|
||||
onBeforeMount(() => {
|
||||
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
|
||||
})
|
||||
|
||||
zoneStore.setTiles([
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
])
|
||||
zoneStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
|
||||
const tiles = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 0))
|
||||
zoneEditorStore.setTiles(tiles)
|
||||
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
|
||||
|
||||
// Watch for changes in the zoneStore and update the layer
|
||||
watch(
|
||||
() => zoneStore.tiles,
|
||||
() => zoneEditorStore.tiles,
|
||||
() => {
|
||||
// @TODO : change to tiles for when loading other maps
|
||||
zoneStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
|
||||
// @TODO : change to zone for when loading other maps
|
||||
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
function erase(tile: Phaser.Tilemaps.Tile) {
|
||||
socket.connection.on('gm:zone_editor:zone:load', (data) => {
|
||||
tileMap = generateTilemap(scene, data.zone.width, data.zone.height);
|
||||
zoneEditorStore.setZoneSettings(data.zone)
|
||||
zoneEditorStore.setTiles(data.zone.tiles)
|
||||
})
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
layer.putTileAt(0, tile.x, tile.y)
|
||||
}
|
||||
|
||||
function tile(tile: Phaser.Tilemaps.Tile) {
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.selectedTile === null) return
|
||||
layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
zoneEditorStore.reset();
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="properties.isModalOpen" @modal:close="() => console.log(1)">
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleZoneSettings()">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Zone settings</h3>
|
||||
</template>
|
||||
@ -9,25 +9,22 @@
|
||||
<div class="form-fields">
|
||||
<div>
|
||||
<label for="name">Name</label>
|
||||
<input v-model="name" name="name" id="name" />
|
||||
<input name="name" id="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="name">Width</label>
|
||||
<input v-model="name" name="name" id="name" />
|
||||
|
||||
<input name="name" id="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="name">Height</label>
|
||||
<input v-model="name" name="name" id="name" />
|
||||
<input name="name" id="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="name">PVP enabled</label>
|
||||
<input v-model="name" name="name" id="name" />
|
||||
<input name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn-cyan" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn-cyan" @click="() => console.log(1)">Cancel</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -35,8 +32,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const properties = ref({
|
||||
isModalOpen: true
|
||||
})
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
</script>
|
||||
Reference in New Issue
Block a user