1
0
forked from noxious/client

added paint feature

This commit is contained in:
Dennis Postma 2024-07-04 12:40:46 +02:00
parent 2fe6f8d9c0
commit 90121be472
4 changed files with 31 additions and 23 deletions

28
package-lock.json generated
View File

@ -2137,30 +2137,30 @@
} }
}, },
"node_modules/@volar/language-core": { "node_modules/@volar/language-core": {
"version": "2.4.0-alpha.13", "version": "2.4.0-alpha.14",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.13.tgz", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.14.tgz",
"integrity": "sha512-tHeJVIRTJ3dlsdNyRjBlqdKHocWkgORM5eXgf6xcGERoXYe6vBpQpxJgpK1pehA8psXNPqkMN1ryBseA0B+m8A==", "integrity": "sha512-R6eJcUKo/KftaWHwJrWjBgj/+vW9g4xTByVQEK3IHTciMKmomoSbxaNqolu1/sJKbH9Tdg0EAqTFqIzKU9iQHw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/source-map": "2.4.0-alpha.13" "@volar/source-map": "2.4.0-alpha.14"
} }
}, },
"node_modules/@volar/source-map": { "node_modules/@volar/source-map": {
"version": "2.4.0-alpha.13", "version": "2.4.0-alpha.14",
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.13.tgz", "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.14.tgz",
"integrity": "sha512-NABqcuA9QpHsU3FnA5BENP3PI1FOb6hDxqkV1KAHP7gt4fgfQOqSCWpqj3QAS7RV0PtiKTxiDMIJ7doMBhNm7w==", "integrity": "sha512-ACOsoDKvW29BIfdfnvQkm8S1m/RLARuHL9x7qS/9c6liMl1K0Y3RqXuC42HhWrWBm4hk0UyRKgdnv2R0teXPvg==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@volar/typescript": { "node_modules/@volar/typescript": {
"version": "2.4.0-alpha.13", "version": "2.4.0-alpha.14",
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.13.tgz", "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.14.tgz",
"integrity": "sha512-zW/MOPA9SwkCuuVPqADDYfAEPAh68aJQG3/EAqDYozSuK2YNYHEAC0BWYZESSNZC6jxwwx7w0U82fBkDZ9hHEw==", "integrity": "sha512-FQtQruOc7qQwcq5Q666pxF6ekRqZG5ILL3sS40Oac1V69QdAZ7q+IOQ2+z6SHJDENY49ygBv0hN9HrxRLtk15Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "2.4.0-alpha.13", "@volar/language-core": "2.4.0-alpha.14",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8" "vscode-uri": "^3.0.8"
} }
@ -5213,9 +5213,9 @@
} }
}, },
"node_modules/npm-run-all2": { "node_modules/npm-run-all2": {
"version": "6.2.1", "version": "6.2.2",
"resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.1.tgz", "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.2.tgz",
"integrity": "sha512-eX4MWsUYOSm1FhPh9LPAWbqq2quny3u8gEEWIY4HHECi10qOyi1dNaJFCyOOv2uP05ZuTPETwS2p1GZk9oLJsw==", "integrity": "sha512-Q+alQAGIW7ZhKcxLt8GcSi3h3ryheD6xnmXahkMRVM5LYmajcUrSITm8h+OPC9RYWMV2GR0Q1ntTUCfxaNoOJw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

View File

@ -77,7 +77,7 @@ const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer layer: Phaser.Tilemaps.TilemapLayer
}) })
const scene = useScene() const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'save']) const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save'])
// track select state // track select state
let selectPencilOpen = ref(false) let selectPencilOpen = ref(false)
@ -91,7 +91,7 @@ function setDrawMode(value: string) {
} }
function drawTile(pointer: Phaser.Input.Pointer) { function drawTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') { if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
return return
} }
@ -110,6 +110,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool === 'pencil') { if (zoneEditorStore.tool === 'pencil') {
emit('pencil', pointer_tile) emit('pencil', pointer_tile)
} }
if (zoneEditorStore.tool === 'paint') {
emit('paint', pointer_tile)
}
} }
function drawTiles(pointer: Phaser.Input.Pointer) { function drawTiles(pointer: Phaser.Input.Pointer) {
@ -126,7 +130,7 @@ onBeforeUnmount(() => {
}) })
function clear() { function clear() {
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 0))) zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
} }
</script> </script>

View File

@ -8,8 +8,8 @@
<Image v-for="object in zoneObjects" :key="object.id" :texture="object.object" :x="object.position_x" :y="object.position_y" /> <Image v-for="object in zoneObjects" :key="object.id" :texture="object.object" :x="object.position_x" :y="object.position_y" />
</Container> </Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" /> <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" /> <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
<Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" /> <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" /> <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
</template> </template>
@ -29,7 +29,6 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import { placeTile, tileToWorldXY } from '@/services/zone' import { placeTile, tileToWorldXY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets' import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue' import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import { randomUUID } from 'crypto'
const scene = useScene() const scene = useScene()
const socket = useSocketStore() const socket = useSocketStore()
@ -127,6 +126,11 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
} }
} }
function paint(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.selectedTile) return
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
}
function save() { function save() {
socket.connection.emit('gm:zone_editor:zone:save', { socket.connection.emit('gm:zone_editor:zone:save', {
zoneId: socket.character.zoneId, zoneId: socket.character.zoneId,

View File

@ -6,7 +6,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
name: '', name: '',
width: 10, width: 10,
height: 10, height: 10,
tiles: [] as number[][], tiles: [] as string[][],
objects: [] as number[][], objects: [] as number[][],
tool: 'move', tool: 'move',
drawMode: 'tile', drawMode: 'tile',
@ -27,10 +27,10 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
setHeight(height: number) { setHeight(height: number) {
this.height = height this.height = height
}, },
setTiles(tiles: number[][]) { setTiles(tiles: string[][]) {
this.tiles = tiles this.tiles = tiles
}, },
updateTile(x: number, y: number, tile: number) { updateTile(x: number, y: number, tile: string) {
this.tiles[y][x] = tile this.tiles[y][x] = tile
}, },
setObjects(objects: number[][]) { setObjects(objects: number[][]) {