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

Worked on zone objects, tile tags and searching

Browse Source
This commit is contained in:
Dennis Postma
2024-07-04 02:07:45 +02:00
parent 2cfe80de11
commit 2fe6f8d9c0
22 changed files with 468 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/utilities/zoneEditor/Decorations.vue
View File

@ -1,120 +0,0 @@
<template>
<Teleport to="body">
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="745" :modal-height="460">
<template #modalHeader>
<h3 class="modal-title">Decorations</h3>
</template>
<template #modalBody>
<div class="container decorations">
<div class="buttons">
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
</div>
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
<div class="decorations">
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
</div>
</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 decorationWidth = config.wall_size.x
const decorationHeight = config.wall_size.y
const decorations = ref<number[][]>([])
const selectedDecoration = 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 splitDecorations = (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 decorationsetWidth = img.width
const decorationsetHeight = img.height
const columns = Math.floor(decorationsetWidth / decorationWidth)
const rows = Math.floor(decorationsetHeight / decorationHeight)
decorations.value = []
selectedDecoration.value = null
for (let row = 0; row < rows; row++) {
for (let col = 0; col < columns; col++) {
const x = col * decorationWidth
const y = row * decorationHeight
ctx.clearRect(0, 0, decorationWidth, decorationHeight)
ctx.drawImage(img, x, y, decorationWidth, decorationHeight, 0, 0, decorationWidth, decorationHeight)
const decorationDataURL = canvas.value.toDataURL()
decorations.value.push(decorationDataURL)
}
}
}
const selectDecoration = (index: number) => {
selectedDecoration.value = index
}
onMounted(async () => {
isModalOpen.value = true
const img = await loadImage(imagePath)
await nextTick()
splitDecorations(img)
})
</script>
<style lang="scss">
@import '@/assets/scss/main';
.decorations {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.decorations img {
width: 30px;
height: 130px;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.3s ease;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.decorations img.selected {
border: 2px solid $red;
}
</style>

65
src/components/utilities/zoneEditor/Objects.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<Teleport to="body">
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
<template #modalHeader>
<h3 class="modal-title">Objects</h3>
</template>
<template #modalBody>
<div class="container objects">
<div class="objects">
<img v-for="(object, index) in objects" :key="index" :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" @click="zoneEditorStore.setSelectedObject(object)" :class="{ selected: zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object }" />
</div>
</div>
</template>
</Modal>
</Teleport>
</template>
<script setup lang="ts">
import config from '@/config'
import { ref, onMounted } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import Modal from '@/components/utilities/Modal.vue'
const socket = useSocketStore()
const objects = ref<string[]>([])
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
onMounted(async () => {
isModalOpen.value = true
socket.connection.emit('gm:object:list', {}, (response: string[]) => {
objects.value = response
})
})
</script>
<style lang="scss">
@import '@/assets/scss/main.scss';
/**
@TODO add masonry layout
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
*/
.objects {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-auto-rows: auto;
gap: 10px;
}
.objects img {
width: 100%;
height: auto;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.3s ease;
}
.objects img.selected {
border: 2px solid $red;
}
</style>

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

@ -31,7 +31,7 @@ const zoneEditorStore = useZoneEditorStore()
onMounted(async () => {
isModalOpen.value = true
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response;
tiles.value = response
})
})
</script>

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

@ -17,7 +17,7 @@
</div>
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="option" @click="setDrawMode('tile')">Tile</span>
<span class="option" @click="setDrawMode('decoration')">Decoration</span>
<span class="option" @click="setDrawMode('object')">Object</span>
<span class="option" @click="setDrawMode('teleport')">Teleport</span>
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
@ -26,6 +26,12 @@
<div class="divider"></div>
<button class="tool paint" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
<img src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
</button>
<div class="divider"></div>
<button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
@ -43,6 +49,7 @@
</button>
<div class="divider"></div>
<button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()">
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button>
@ -61,9 +68,7 @@
<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue'
import { useScene } from 'phavuer'
import { getTile, tileToWorldXY } from '@/services/zone'
import config from '@/config'
import { useZoneStore } from '@/stores/zone'
import { getTile } from '@/services/zone'
import { useZoneEditorStore } from '@/stores/zoneEditor'
const zoneEditorStore = useZoneEditorStore()

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

@ -4,14 +4,13 @@
<Controls :layer="tiles" />
<!-- @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
<Container>
<!-- <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />-->
<!-- <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />-->
<!-- <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />-->
<!-- <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />-->
<Image v-for="object in zoneObjects" :key="object.id" :texture="object.object" :x="object.position_x" :y="object.position_y" />
</Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
<Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
<Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
</template>
@ -20,17 +19,17 @@ import config from '@/config'
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
import { onBeforeMount, onBeforeUnmount, onMounted, toRaw } from 'vue'
import { onBeforeMount, onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
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 Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
import { placeTile, tileToWorldXY } from '@/services/zone'
import GmPanel from '@/components/utilities/GmPanel.vue'
import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import { randomUUID } from 'crypto'
const scene = useScene()
const socket = useSocketStore()
@ -48,12 +47,20 @@ const zoneData = new Phaser.Tilemaps.MapData({
})
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
const tilesetImages: Tileset[] = [];
const tilesetImages: Tileset[] = []
type ZoneObject = {
id: string
object: string
position_x: number
position_y: number
}
const zoneObjects = ref<ZoneObject[]>([])
/**
* Walk through tiles and add them to the zone as tilesetImages
*/
let tileCount = 1;
let tileCount = 1
toRaw(assetStore.assets).forEach((asset) => {
if (asset.group !== 'tiles') return
tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
@ -65,7 +72,6 @@ const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Ar
placeTile(zone, tiles, 0, 0, 'blank_tile')
const pos = tileToWorldXY(tiles, 1, 1)
const pos2 = tileToWorldXY(tiles, 1, 2)
const pos3 = tileToWorldXY(tiles, 2, 1)
@ -108,11 +114,16 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
// zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
}
if (zoneEditorStore.drawMode === 'wall') {
if (zoneEditorStore.drawMode === 'object') {
// @TODO fix position
if (zoneEditorStore.selectedWall === null) return
walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y)
zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall)
if (zoneEditorStore.selectedObject === null) return
if (config.development) console.log('placing object', tile.x, tile.y, zoneEditorStore.selectedObject)
zoneObjects.value.push({
id: Math.random().toString(10),
object: zoneEditorStore.selectedObject,
position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
})
}
}
@ -123,7 +134,7 @@ function save() {
width: zoneEditorStore.width,
height: zoneEditorStore.height,
tiles: zoneEditorStore.tiles,
walls: zoneEditorStore.walls
objects: zoneEditorStore.objects
})
}