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

Loading world works

Browse Source
This commit is contained in:
Dennis Postma
2024-07-12 12:44:37 +02:00
parent 79bef033f3
commit 0fcd5c4d76
20 changed files with 228 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/utilities/zoneEditor/Objects.vue
View File

@ -7,14 +7,7 @@
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input
@mousedown.stop
class="input-cyan"
type="text"
name="search"
placeholder="Search"
v-model="searchQuery"
/>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
</div>
<div>
<label class="mb-1.5 font-titles hidden" for="depth">Depth</label>
@ -68,9 +61,7 @@ const filteredObjects = computed(() => {
if (!searchQuery.value) {
return zoneEditorStore.objectList
}
return zoneEditorStore.objectList.filter(object =>
object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
return zoneEditorStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
})
onMounted(async () => {
@ -81,4 +72,4 @@ onMounted(async () => {
zoneEditorStore.setObjectList(response)
})
})
</script>
</script>

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

@ -7,14 +7,7 @@
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input
@mousedown.stop
class="input-cyan"
type="text"
name="search"
placeholder="Search"
v-model="searchQuery"
/>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
</div>
</div>
</div>
@ -59,9 +52,7 @@ const filteredTiles = computed(() => {
if (!searchQuery.value) {
return zoneEditorStore.tileList
}
return zoneEditorStore.tileList.filter(tile =>
tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
return zoneEditorStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
})
onMounted(async () => {
@ -70,4 +61,4 @@ onMounted(async () => {
zoneEditorStore.setTileList(response)
})
})
</script>
</script>

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

@ -149,7 +149,7 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onMounted(() => {
addEventListener('keydown', initKeyShortcuts)
});
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
@ -157,9 +157,8 @@ onBeforeUnmount(() => {
removeEventListener('keydown', initKeyShortcuts)
})
// Key bindings
function initKeyShortcuts (event: KeyboardEvent) {
function initKeyShortcuts(event: KeyboardEvent) {
if (!zoneEditorStore.zone) return
// prevent if focussed on input

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

@ -1,9 +1,18 @@
<template>
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="tiles" />
<Container :depth="2">
<Image v-for="object in zoneObjects" :depth="object.depth" :key="object.object.id" :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)" :y="tileToWorldY(zoneTilemap, object.position_x, 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="object.depth"
:key="object.object.id"
:x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
:y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
:texture="object.object.id"
:originY="Number(object.object.origin_x)"
:originX="Number(object.object.origin_y)"
/>
</Container>
<Container :depth="3">
@ -37,9 +46,7 @@ import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
function uuidv4() {
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
(+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
);
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
}
const scene = useScene()
@ -65,7 +72,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
*/
const tilesetImages: Tileset[] = []
const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
let zoneTiles = [] as string[][];
let zoneTiles = [] as string[][]
const zoneObjects = ref<ZoneObject[]>([])
const zoneEventTiles = ref<ZoneEventTile[]>([])
@ -163,7 +170,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
function paint(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.selectedTile === null) return
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile.id))
zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
}
function save() {
@ -175,14 +182,14 @@ function save() {
width: zoneEditorStore.zone.width,
height: zoneEditorStore.zone.height,
tiles: zoneTiles,
zoneEventTiles: toRaw(zoneEventTiles.value).map(tile => ({
zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({
id: tile.id,
zoneId: tile.zoneId,
type: tile.type,
position_x: tile.position_x,
position_y: tile.position_y
})),
zoneObjects: toRaw(zoneObjects.value).map(obj => ({
zoneObjects: toRaw(zoneObjects.value).map((obj) => ({
id: obj.id,
zoneId: obj.zoneId,
objectId: obj.objectId,
@ -190,13 +197,13 @@ function save() {
position_x: obj.position_x,
position_y: obj.position_y
}))
};
}
gameStore.connection.emit('gm:zone_editor:zone:update', data);
gameStore.connection.emit('gm:zone_editor:zone:update', data)
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
zoneEditorStore.setZone(response)
});
})
if (zoneEditorStore.isSettingsModalShown) {
zoneEditorStore.toggleSettingsModal()
@ -215,27 +222,27 @@ onBeforeMount(() => {
zoneTiles = exampleTilesArray
if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles);
zoneTiles = zoneEditorStore.zone.tiles;
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
zoneTiles = zoneEditorStore.zone.tiles
// Determine the current zone dimensions
const currentZoneWidth = zoneEditorStore.zone.width ?? 0;
const currentZoneHeight = zoneEditorStore.zone.height ?? 0;
const currentZoneWidth = zoneEditorStore.zone.width ?? 0
const currentZoneHeight = zoneEditorStore.zone.height ?? 0
// Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
for (let y = 0; y < currentZoneHeight; y++) {
zoneTiles[y] = zoneTiles[y] || []; // Ensure the row exists
zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
for (let x = 0; x < currentZoneWidth; x++) {
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'; // Fill missing tiles with 'blank_tile'
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
}
}
// Update the tilemap with any new 'blank_tile' entries
zoneTiles.forEach((row, y) => {
row.forEach((tileId, x) => {
placeTile(zoneTilemap, tiles, x, y, tileId);
});
});
placeTile(zoneTilemap, tiles, x, y, tileId)
})
})
}
zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []

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

@ -53,7 +53,7 @@ function loadZone(id: number) {
console.log('loadZone', id)
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
zoneEditorStore.setZone(response)
});
})
zoneEditorStore.toggleZoneListModal()
}