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

Added game store, stupid tile shit

Browse Source
This commit is contained in:
Dennis Postma
2024-07-07 20:57:10 +02:00
parent 16d830df66
commit 7ec1c73f1f
8 changed files with 69 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div class="flex justify-center m-2.5">
<div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
<div class="tools flex gap-2.5">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button>
@ -68,15 +68,15 @@
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()">
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button>
</div>
<div class="flex gap-2.5 ml-auto">
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
<button class="btn-cyan px-3.5" @click="() => emit('clear')">Clear</button>
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
</div>
</div>

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

@ -3,7 +3,7 @@
<Controls :layer="tiles" />
<Container>
<Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
<Image v-for="object in zoneObjects" :depth="3" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
</Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
@ -15,9 +15,7 @@
<script setup lang="ts">
import config from '@/config'
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
@ -25,19 +23,14 @@ 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 { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
import { getTiles, placeTile, setAllTiles, tileToWorldXY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import type { Object } from '@/types'
import type { ZoneObject } from '@/types'
import { storeToRefs } from 'pinia'
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
type ZoneObject = {
id: number
object: Object
position_x: number
position_y: number
}
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const scene = useScene()
const socket = useSocketStore()
@ -89,7 +82,10 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
}
if (zoneEditorStore.drawMode === 'object') {
zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
zoneObjects.value = zoneObjects.value.filter((object) => {
const worldXY = tileToWorldXY(tiles, tile.x, tile.y)
return object.position_x !== worldXY.position_x || object.position_y !== worldXY.position_y
})
}
}
@ -100,13 +96,21 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
}
if (zoneEditorStore.drawMode === 'object') {
if (zoneEditorStore.zone === null) return
if (zoneEditorStore.selectedObject === null) return
zoneObjects.value.push({
id: zoneObjects.value.length + 1,
id: Math.random(),
zoneId: zoneEditorStore.zone.id,
zone: zoneEditorStore.zone,
objectId: zoneEditorStore.selectedObject.id,
object: zoneEditorStore.selectedObject,
position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
})
// remove duplicates based on object, pos x and y
zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
}
}
@ -116,18 +120,34 @@ function paint(tile: Phaser.Tilemaps.Tile) {
}
function save() {
console.log(getTiles(zoneTilemap))
if (!zoneEditorStore.zone) return
console.log(getTiles);
const tilesArray = []
socket.connection.emit('gm:zone_editor:zone:update', {
zoneId: zoneEditorStore.zone.id,
name: zoneEditorStore.zone.name,
width: zoneTilemap.width,
height: zoneTilemap.height,
tiles: tilesArray,
objects: zoneObjects.value
})
}
onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
if (zoneEditorStore.zone) {
if (zoneEditorStore.zone.tiles) setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
}
})
onBeforeUnmount(() => {
tiles.destroy()
zoneTilemap.removeAllLayers()
zoneTilemap.destroy()
// zoneEditorStore.reset()
zoneEditorStore.reset()
})
// center camera