noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated tiles, improved folder & file structure, npm update, more progress on zone editor

Browse Source
This commit is contained in:
Dennis Postma
2024-06-11 17:15:53 +02:00
parent 44814907a0
commit 4dcc11706a
12 changed files with 90 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -7,7 +7,7 @@
<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 }" />
<img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
</div>
</template>
</Modal>
@ -18,6 +18,7 @@
import { ref, onMounted, nextTick } from 'vue'
import config from '@/config'
import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
const tileWidth = config.tile_size.x
const tileHeight = config.tile_size.y
@ -25,6 +26,7 @@ const tiles = ref<string[]>([])
const selectedTile = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
// Hardcoded image path
const imagePath = '/assets/tiles/default.png'

27
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -2,16 +2,16 @@
<div class="wrapper">
<div class="toolbar">
<div class="tools">
<button :class="{ active: activeTool === 'move' }" @click="activeTool = 'move'">
<img src="/assets/icons/zoneEditor/move.svg" alt="Eraser tool" />
<button :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button>
<div class="divider"></div>
<button :class="{ active: activeTool === 'tiles' }" @click="activeTool = 'tiles'">
<img src="/assets/icons/zoneEditor/tiles.svg" alt="Eraser tool" />
<button :class="{ active: zoneEditorStore.tool === 'tile' }" @click="zoneEditorStore.setTool('tile')">
<img src="/assets/icons/zoneEditor/tiles.svg" alt="Draw tiles" />
</button>
<div class="divider"></div>
<button :class="{ active: activeTool === 'eraser' }" @click="activeTool = 'eraser'">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser tool" />
<button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
</button>
</div>
<div class="buttons">
@ -38,10 +38,11 @@ const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer
})
const scene = useScene()
const activeTool = ref('move')
const emit = defineEmits(['erase', 'move', 'tile'])
function onPointerClick(pointer: Phaser.Input.Pointer) {
function drawTiles(pointer: Phaser.Input.Pointer) {
if (!pointer.isDown) return
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
@ -50,15 +51,19 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
return
}
if (activeTool.value === 'eraser') {
if (zoneEditorStore.tool === 'eraser') {
emit('erase', pointer_tile)
}
if (zoneEditorStore.tool === 'tile') {
emit('tile', pointer_tile)
}
}
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerClick)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
})
</script>

9
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -16,6 +16,7 @@ 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'
// Phavuer logic
let scene = useScene()
@ -39,6 +40,7 @@ scene.cameras.main.centerOn(centerX, centerY)
// Multiplayer / server logics
const zoneStore = useZoneStore()
const zoneEditorStore = useZoneEditorStore()
const socket = useSocketStore()
zoneStore.setTiles([
@ -66,8 +68,11 @@ watch(
)
function erase(tile: Phaser.Tilemaps.Tile) {
layer.removeTileAt(tile.x, tile.y)
layer.putTileAt(0, tile.x, tile.y)
}
function tile() {}
function tile(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.selectedTile === null) return
layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
}
</script>