imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests 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

2
src/components/utilities/GmPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="gmPanelStore.isOpen" :modal-width="1000" :modal-height="650">
<Modal :isModalOpen="gmPanelStore.isOpen" @modal:close="() => gmPanelStore.toggle()" :modal-width="1000" :modal-height="650">
<template #modalHeader>
<h3 class="modal-title">GM Panel</h3>
<div class="gm-selector">

1
src/components/utilities/GmTools.vue
View File

@ -16,7 +16,6 @@ import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGmPanelStore } from '@/stores/gmPanel'
const zoneEditorStore = useZoneEditorStore()
const gmPanelStore = useGmPanelStore()
</script>

4
src/components/utilities/assetManager/AssetManager.vue
View File

@ -31,16 +31,18 @@
<!-- Asset details -->
<div class="asset-info">
<TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
<ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
import ObjectDetails from '@/components/utilities/assetManager/partials/ObjectDetails.vue'
import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore()

81
src/components/utilities/assetManager/partials/ObjectDetails.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="object-manager">
<div class="image-container">
<img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field name">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="form-field name">
<label for="name">Origin X</label>
<!-- @TODO only allow numbers here -->
<input class="input-cyan" type="text" name="name" placeholder="Origin X" />
</div>
<div class="form-field name">
<label for="name">Origin Y</label>
<!-- @TODO only allow numbers here -->
<input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
</div>
<div class="submit">
<button class="btn-cyan" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux" type="button" @click="removeObject">Remove</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket'
import config from '@/config'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectImageUrl = computed(() => `${config.server_endpoint}/assets/objects/${selectedObject.value}.png`)
const objectDetails = computed(() => assetManagerStore.objectDetails)
function removeObject() {
socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => {
if (!response) {
console.error('Failed to remove object')
return
}
refreshObjectList()
})
}
function refreshObjectList() {
socket.connection.emit('gm:object:list', {}, (response: string[]) => {
assetManagerStore.setObjectList(response)
assetManagerStore.setSelectedObject('')
})
}
onMounted(() => {
if (!selectedObject.value) {
return
}
socket.connection.emit('gm:object:details', { object: selectedObject.value }, (response: any) => {
assetManagerStore.setObjectDetails(response)
})
})
onBeforeUnmount(() => {
assetManagerStore.setSelectedObject('')
})
</script>
<style lang="scss">
/**
* @TODO when scrolling here, the vertical line is cut off
*/
.modal-form {
padding: 10px; // @TODO why dis no work? fixme
}
</style>

41
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -1,45 +1,47 @@
<template>
<div class="asset">
<div class="asset add-new">
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
<input class="input-cyan search-field" placeholder="Search..." />
</div>
<!-- TODO: use the passed :name in props to switch out assets-->
<a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
<a class="asset" :class="{ active: assetManagerStore.selectedObject === object }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object)">
<div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span>
<img :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" />
<span class="asset-name">{{ object }}</span>
</div>
</a>
</template>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import config from '@/config'
import { onMounted, ref, defineProps } from 'vue'
const props = defineProps<{ name: string }>()
import { useSocketStore } from '@/stores/socket'
import { onMounted, ref } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref()
const objectUploadField = ref(null)
const assetManagerStore = useAssetManagerStore()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
socket.connection.emit('gm:object:upload', files, (response: boolean) => {
if (!response) {
console.error('Failed to upload tile')
if (config.development) console.error('Failed to upload object')
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
socket.connection.emit('gm:object:list', {}, (response: string[]) => {
assetManagerStore.setObjectList(response)
})
})
}
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
socket.connection.emit('gm:object:list', {}, (response: string[]) => {
if (config.development) console.log(response)
assetManagerStore.setObjectList(response)
})
})
</script>
@ -48,9 +50,10 @@ onMounted(() => {
@import '@/assets/scss/main';
.asset {
cursor: pointer;
&.add-new {
display: flex;
align-items: center;
gap: 10px 20px;
flex-wrap: wrap;
.asset-name {

107
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -1,45 +1,94 @@
<template>
<div class="image-container">
<img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}.png`" alt="Tile" />
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field name">
<label for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="E.g. grass" />
</div>
<div class="form-field tags">
<label for="tags">Tags</label>
<ChipsInput />
</div>
<div class="submit">
<button class="btn-cyan" type="submit">Save</button>
<button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
</div>
</form>
<div class="tile-manager">
<div class="image-container">
<img :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
</div>
<div class="modal-form asset-manager">
<form class="form-fields" @submit.prevent>
<div class="form-field tags">
<label for="tags">Tags</label>
<ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
</div>
<div class="submit">
<button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import config from '@/config'
import { ref, computed, watch, onBeforeUnmount, onMounted } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket'
import ChipsInput from '@/components/forms/ChipsInput.vue'
import config from '@/config'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
function removeTile() {
socket.connection.emit('gm:tile:remove', { tile: assetManagerStore.selectedTile }, (response: boolean) => {
if (!response) {
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
assetManagerStore.setTileList(response)
assetManagerStore.setSelectedTile('')
})
const tags = ref<string[]>([])
const selectedTile = computed(() => assetManagerStore.selectedTile)
const tileImageUrl = computed(() => `${config.server_endpoint}/assets/tiles/${selectedTile.value}.png`)
watch(selectedTile, fetchTileTags)
function fetchTileTags(tile: string) {
if (config.development) console.log('P241 selectedTile', tile)
socket.connection.emit('gm:tile:tags', { tile }, (response: string[]) => {
tags.value = response
})
}
function handleTagsUpdate(newTags: string[]) {
if (config.development) console.log(newTags)
saveTags(newTags)
}
function saveTags(tagsToSave: string[]) {
socket.connection.emit(
'gm:tile:tags:update',
{
tile: selectedTile.value,
tags: tagsToSave
},
(response: boolean) => {
if (!response) console.error('Failed to save tags')
}
)
}
function removeTile() {
socket.connection.emit('gm:tile:remove', { tile: selectedTile.value }, (response: boolean) => {
if (!response) {
console.error('Failed to remove tile')
return
}
refreshTileList()
})
}
function refreshTileList() {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
assetManagerStore.setTileList(response)
assetManagerStore.setSelectedTile('')
})
}
onMounted(() => {
if (!selectedTile.value) return
fetchTileTags(selectedTile.value)
})
onBeforeUnmount(() => {
assetManagerStore.setSelectedTile('')
})
</script>
<style lang="scss"></style>
<style lang="scss">
.modal-form {
padding: 10px; // @TODO why dis no work? fixme
}
</style>

3
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -29,7 +29,7 @@ const handleFileUpload = (e: Event) => {
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
if (!response) {
console.error('Failed to upload tile')
if (config.development) console.error('Failed to upload tile')
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
@ -40,6 +40,7 @@ const handleFileUpload = (e: Event) => {
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
if (config.development) console.log(response)
assetManagerStore.setTileList(response)
})
})

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
})
}