diff --git a/package-lock.json b/package-lock.json index 738a3e3..0e80758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1166,9 +1166,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.57.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", - "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz", + "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", "dev": true, "license": "MIT", "engines": { @@ -1176,14 +1176,14 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.14", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", - "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", + "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==", "deprecated": "Use @eslint/config-array instead", "dev": true, "license": "Apache-2.0", "dependencies": { - "@humanwhocodes/object-schema": "^2.0.2", + "@humanwhocodes/object-schema": "^2.0.3", "debug": "^4.3.1", "minimatch": "^3.0.5" }, @@ -1406,9 +1406,9 @@ } }, "node_modules/@polka/url": { - "version": "1.0.0-next.25", - "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz", - "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", + "version": "1.0.0-next.27", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.27.tgz", + "integrity": "sha512-MU0SYgcrBdSVLu7Tfow3VY4z1odzlaTYRjt3WQ0z8XbjDWReuy+EALt2HdjhrwD2HPiW2GY+KTSw4HLv4C/EOA==", "dev": true, "license": "MIT" }, @@ -1928,9 +1928,9 @@ "license": "ISC" }, "node_modules/@vitejs/plugin-vue": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz", - "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz", + "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==", "dev": true, "license": "MIT", "engines": { @@ -2965,41 +2965,19 @@ } }, "node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz", + "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==", "dev": true, "license": "MIT", "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" + "readdirp": "^4.0.1" }, "engines": { - "node": ">= 8.10.0" + "node": ">= 14.16.0" }, "funding": { "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" } }, "node_modules/color-convert": { @@ -3365,9 +3343,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.23", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.23.tgz", - "integrity": "sha512-mBhODedOXg4v5QWwl21DjM5amzjmI1zw9EPrPK/5Wx7C8jt33bpZNrC7OhHUG3pxRtbLpr3W2dXT+Ph1SsfRZA==", + "version": "1.5.25", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.25.tgz", + "integrity": "sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==", "dev": true, "license": "ISC" }, @@ -3506,17 +3484,17 @@ } }, "node_modules/eslint": { - "version": "8.57.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", - "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", + "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", "@eslint/eslintrc": "^2.1.4", - "@eslint/js": "8.57.0", - "@humanwhocodes/config-array": "^0.11.14", + "@eslint/js": "8.57.1", + "@humanwhocodes/config-array": "^0.13.0", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "@ungap/structured-clone": "^1.2.0", @@ -5483,9 +5461,9 @@ "license": "MIT" }, "node_modules/phaser": { - "version": "3.85.1", - "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.85.1.tgz", - "integrity": "sha512-SQdlYRciRUeh/5p7ErfE4lHcoZnLahBpOB2oXkqJEeBy3k33hqsQGi+SYEO1XPqDSd+X69Hniv82Qr/ybEKyMg==", + "version": "3.85.2", + "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.85.2.tgz", + "integrity": "sha512-bD/58E1gvCsEH0Lftb2BiJ8FQ86kb8HHOS656lLXPwg8ZXkskZGsfdyQO21Y57+neGOUEaUthSFfDyVULy5B1g==", "license": "MIT", "dependencies": { "eventemitter3": "^5.0.1" @@ -5913,16 +5891,17 @@ } }, "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz", + "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==", "dev": true, "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, "engines": { - "node": ">=8.10.0" + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" } }, "node_modules/regenerator-runtime": { @@ -6136,13 +6115,13 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.78.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz", - "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==", + "version": "1.79.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.1.tgz", + "integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==", "dev": true, "license": "MIT", "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, @@ -6544,9 +6523,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.11", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.11.tgz", - "integrity": "sha512-qhEuBcLemjSJk5ajccN9xJFtM/h0AVCPaA6C92jNP+M2J8kX+eMJHI7R2HFKUvvAsMpcfLILMCFYSeDwpMmlUg==", + "version": "3.4.12", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz", + "integrity": "sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==", "dev": true, "license": "MIT", "dependencies": { @@ -6581,6 +6560,57 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss/node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/tailwindcss/node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -6870,9 +6900,9 @@ "license": "MIT" }, "node_modules/vite": { - "version": "5.4.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz", - "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==", + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", + "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue index 18a4812..29aadc9 100644 --- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue +++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue @@ -53,11 +53,11 @@ const assetStore = useAssetStore() const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore) -const zoneTilemap = ref(createTilemap()) -const tiles = ref(createTileLayer()) -const zoneObjects = ref([]) -const zoneEventTiles = ref([]) -const tileArray = ref(createTileArray()) +const zoneTilemap = createTilemap() +const tiles = createTileLayer() +let zoneObjects = [] +let zoneEventTiles = [] +let tileArray = createTileArray() const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport') @@ -75,10 +75,10 @@ function createTilemap() { } function createTileLayer() { - const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y })) - tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y })) + const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y })) + tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y })) - const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer + const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer layer.setDepth(0) @@ -86,14 +86,14 @@ function createTileLayer() { } function createTileArray() { - return Array.from({ length: zoneTilemap.value.height || 0 }, () => Array.from({ length: zoneTilemap.value.width || 0 }, () => 'blank_tile')) + return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile')) } function getObjectImageProps(object: ZoneObject) { return { tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff, - x: tileToWorldX(zoneTilemap.value as any, object.positionX, object.positionY), - y: tileToWorldY(zoneTilemap.value as any, object.positionX, object.positionY), + x: tileToWorldX(zoneTilemap as any, object.positionX, object.positionY), + y: tileToWorldY(zoneTilemap as any, object.positionX, object.positionY), texture: object.object.id, originY: Number(object.object.originX), originX: Number(object.object.originY) @@ -102,27 +102,27 @@ function getObjectImageProps(object: ZoneObject) { function getEventTileImageProps(tile: ZoneEventTile) { return { - x: tileToWorldX(zoneTilemap.value as any, tile.positionX, tile.positionY), - y: tileToWorldY(zoneTilemap.value as any, tile.positionX, tile.positionY), + x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY), + y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY), texture: tile.type } } function eraser(tile: Phaser.Tilemaps.Tile) { if (eraserMode.value === 'tile') { - placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, tile.x, tile.y, 'blank_tile') - tileArray.value[tile.y][tile.x] = 'blank_tile' + placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile') + tileArray[tile.y][tile.x] = 'blank_tile' } else if (eraserMode.value === 'object') { - zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y) + zoneObjects = zoneObjects.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y) } else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') { - zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT)) + zoneEventTiles = zoneEventTiles.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT)) } } function pencil(tile: Phaser.Tilemaps.Tile) { if (drawMode.value === 'tile' && selectedTile.value) { - placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, tile.x, tile.y, selectedTile.value.id) - tileArray.value[tile.y][tile.x] = selectedTile.value.id + placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, selectedTile.value.id) + tileArray[tile.y][tile.x] = selectedTile.value.id } else if (drawMode.value === 'object' && selectedObject.value) { addZoneObject(tile) } else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') { @@ -132,7 +132,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) { function addZoneObject(tile: Phaser.Tilemaps.Tile) { // Check if object already exists on position - const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y) + const existingObject = zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y) if (existingObject) return const newObject = { @@ -145,12 +145,12 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) { positionX: tile.x, positionY: tile.y } - zoneObjects.value = [...new Set([...zoneObjects.value, newObject])] + zoneObjects = [...new Set([...zoneObjects, newObject])] } function addZoneEventTile(tile: Phaser.Tilemaps.Tile) { // Check if event tile already exists on position - const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y) + const existingEventTile = zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y) if (existingEventTile) return const newEventTile = { @@ -169,25 +169,25 @@ function addZoneEventTile(tile: Phaser.Tilemaps.Tile) { } : undefined } - zoneEventTiles.value = [...new Set([...zoneEventTiles.value, newEventTile])] as any + zoneEventTiles = [...new Set([...zoneEventTiles, newEventTile])] as any } function paint() { if (!selectedTile.value) return // Ensure tileArray is initialized with correct dimensions - if (!tileArray.value || tileArray.value.length !== zoneTilemap.value.height) { - tileArray.value = Array.from({ length: zoneTilemap.value.height }, () => Array.from({ length: zoneTilemap.value.width }, () => 'blank_tile')) + if (!tileArray || tileArray.length !== zoneTilemap.height) { + tileArray = Array.from({ length: zoneTilemap.height }, () => Array.from({ length: zoneTilemap.width }, () => 'blank_tile')) } // Set all tiles in the tilemap to the selected tile's id - for (let y = 0; y < zoneTilemap.value.height; y++) { - if (!tileArray.value[y]) { - tileArray.value[y] = Array(zoneTilemap.value.width).fill('blank_tile') + for (let y = 0; y < zoneTilemap.height; y++) { + if (!tileArray[y]) { + tileArray[y] = Array(zoneTilemap.width).fill('blank_tile') } - for (let x = 0; x < zoneTilemap.value.width; x++) { - placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, selectedTile.value.id) - tileArray.value[y][x] = selectedTile.value.id + for (let x = 0; x < zoneTilemap.width; x++) { + placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, selectedTile.value.id) + tileArray[y][x] = selectedTile.value.id } } } @@ -199,10 +199,10 @@ function save() { name: zoneEditorStore.zoneSettings.name, width: zoneEditorStore.zoneSettings.width, height: zoneEditorStore.zoneSettings.height, - tiles: tileArray.value, + tiles: tileArray, pvp: zone.value.pvp, - zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })), - zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY })) + zoneEventTiles: zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })), + zoneObjects: zoneObjects.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY })) } if (zoneEditorStore.isSettingsModalShown) { @@ -215,26 +215,26 @@ function save() { } function clear() { - for (let y = 0; y < zoneTilemap.value.height; y++) { - if (!tileArray.value[y]) { - tileArray.value[y] = Array(zoneTilemap.value.width).fill('blank_tile') + for (let y = 0; y < zoneTilemap.height; y++) { + if (!tileArray[y]) { + tileArray[y] = Array(zoneTilemap.width).fill('blank_tile') } - for (let x = 0; x < zoneTilemap.value.width; x++) { - placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, 'blank_tile') - tileArray.value[y][x] = 'blank_tile' + for (let x = 0; x < zoneTilemap.width; x++) { + placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, 'blank_tile') + tileArray[y][x] = 'blank_tile' } } - zoneEventTiles.value = [] - zoneObjects.value = [] + zoneEventTiles = [] + zoneObjects = [] } function updateZoneObjectDepth(depth: number) { - zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object)) + zoneObjects = zoneObjects.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object)) } function deleteZoneObject(objectId: string) { - zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId) + zoneObjects = zoneObjects.filter((object) => object.id !== objectId) } function handleMove() { @@ -242,28 +242,28 @@ function handleMove() { } onBeforeMount(() => { - tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))) + tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) if (zone.value?.tiles) { - setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles) - tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) + setAllTiles(zoneTilemap, tiles, zone.value.tiles) + tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) } - zoneEventTiles.value = zone.value?.zoneEventTiles ?? [] - zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [], zoneTilemap.value.width) + zoneEventTiles = zone.value?.zoneEventTiles ?? [] + zoneObjects = sortByIsometricDepth(zone.value?.zoneObjects ?? [], zoneTilemap.width) // Center camera - const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2 - const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2 + const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2 + const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2 scene.cameras.main.centerOn(centerX, centerY) }) onUnmounted(() => { - zoneEventTiles.value = [] - zoneObjects.value = [] - tiles.value?.destroy() - zoneTilemap.value?.removeAllLayers() - zoneTilemap.value?.destroy() + zoneEventTiles = [] + zoneObjects = [] + tiles?.destroy() + zoneTilemap?.removeAllLayers() + zoneTilemap?.destroy() zoneEditorStore.reset() }) @@ -271,7 +271,7 @@ onUnmounted(() => { watch( objectList, (newObjects) => { - zoneObjects.value = zoneObjects.value.map((zoneObject) => { + zoneObjects = zoneObjects.map((zoneObject) => { const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId) if (updatedObject) { return { diff --git a/src/components/zone/Tiles.vue b/src/components/zone/Tiles.vue index 56e7337..11176f4 100644 --- a/src/components/zone/Tiles.vue +++ b/src/components/zone/Tiles.vue @@ -18,9 +18,9 @@ const scene = useScene() const camera = ref(scene.cameras.main) const { zone } = storeToRefs(zoneStore) -const zoneTilemap = ref(createTilemap()) -const tiles = ref(createTileLayer()) -const tileArray = ref(createTileArray()) +const zoneTilemap = createTilemap() +const tiles = createTileLayer() +let tileArray = createTileArray() function createTilemap() { const zoneData = new Phaser.Tilemaps.MapData({ @@ -41,12 +41,12 @@ function createTileLayer() { const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean)) const tilesetImages = Array.from(uniqueTiles).map((tile, index) => { - return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }) + return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }) }) as any // Add blank tile - tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y })) - const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer + tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y })) + const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer layer.setDepth(0) @@ -59,16 +59,16 @@ function createTileArray() { onBeforeMount(() => { if (zone.value?.tiles) { - setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles) - tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) + setAllTiles(zoneTilemap, tiles, zone.value.tiles) + tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) } else { - tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))) + tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) } }) onBeforeUnmount(() => { - tiles.value?.destroy() - zoneTilemap.value.removeAllLayers() - zoneTilemap.value.destroy() + tiles?.destroy() + zoneTilemap.removeAllLayers() + zoneTilemap.destroy() }) diff --git a/src/screens/Game.vue b/src/screens/Game.vue index ee317fc..eaaab15 100644 --- a/src/screens/Game.vue +++ b/src/screens/Game.vue @@ -69,8 +69,6 @@ const gameConfig = { antialias: true, roundPixels: true }, - banner: false, // Disable Phaser banner - resolution: 5, pixelArt: true }