From 270b14d8e5e1026efbc89ba481970879835a5e01 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Sat, 29 Jun 2024 22:39:22 +0200 Subject: [PATCH] asset mngr stuff --- package-lock.json | 20 ++-- src/assets/scss/_variables.scss | 2 +- src/assets/scss/main.scss | 15 +-- src/components/World.vue | 4 +- src/components/gui/Chat.vue | 3 +- src/components/utilities/Controls.vue | 22 +++-- src/components/utilities/GmPanel.vue | 51 +++++----- src/components/utilities/Modal.vue | 1 - src/components/utilities/Notifications.vue | 8 +- .../utilities/assetManager/AssetManager.vue | 44 +++++---- .../assetManager/partials/ObjectList.vue | 80 ++++++++++++++++ .../assetManager/partials/TileDetails.vue | 31 ++++-- .../assetManager/partials/TileList.vue | 33 +++---- src/components/utilities/zoneEditor/Tiles.vue | 73 ++------------ .../utilities/zoneEditor/Toolbar.vue | 8 +- .../utilities/zoneEditor/ZoneEditor.vue | 34 ++++--- .../utilities/zoneEditor/ZoneSettings.vue | 2 +- src/screens/Game.vue | 20 ++-- src/services/zone.ts | 4 +- src/stores/assetManager.ts | 20 ++++ src/stores/zoneEditor.ts | 8 +- src/types.ts | 94 +++++++++---------- 22 files changed, 316 insertions(+), 261 deletions(-) create mode 100644 src/components/utilities/assetManager/partials/ObjectList.vue create mode 100644 src/stores/assetManager.ts diff --git a/package-lock.json b/package-lock.json index ce4587e..71cf6a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2070,9 +2070,9 @@ } }, "node_modules/@vitest/runner/node_modules/yocto-queue": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", - "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.0.tgz", + "integrity": "sha512-cMojmlnwkAgIXqga+2sXshlgrrcI0QEPJ5n58pEvtuFo4PaekfomlCudArDD7hj8Hkswjl0/x4eu4q+Xa0WFgQ==", "dev": true, "license": "MIT", "engines": { @@ -3448,9 +3448,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.814", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.814.tgz", - "integrity": "sha512-GVulpHjFu1Y9ZvikvbArHmAhZXtm3wHlpjTMcXNGKl4IQ4jMQjlnz8yMQYYqdLHKi/jEL2+CBC2akWVCoIGUdw==", + "version": "1.4.815", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz", + "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==", "dev": true, "license": "ISC" }, @@ -5648,9 +5648,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "funding": [ { "type": "opencollective", @@ -5668,7 +5668,7 @@ "license": "MIT", "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "source-map-js": "^1.2.0" }, "engines": { diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 1e2fe8c..ccd1ddb 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -19,4 +19,4 @@ $green: #09ad19; // Fonts $titles: 'Poppins', serif; -$default: 'Inter', serif; \ No newline at end of file +$default: 'Inter', serif; diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 9af5a41..c5a47f6 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -47,13 +47,13 @@ input { border: none; background-color: transparent; - &[type="number"] { + &[type='number'] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } - &[type=number]::-webkit-inner-spin-button, - &[type=number]::-webkit-outer-spin-button { + &[type='number']::-webkit-inner-spin-button, + &[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; } } @@ -64,7 +64,8 @@ input { border: 1px solid $cyan; background-color: rgba($white, 0.8); border-radius: 5px; - &:focus, &:focus-visible { + &:focus, + &:focus-visible { outline: $cyan auto 2px; } } @@ -82,7 +83,8 @@ button { border-radius: 5px; text-shadow: 0 3px 6px rgba($black, 0.2); - &.active, &:hover { + &.active, + &:hover { background-color: $cyan; } } @@ -93,7 +95,8 @@ button { border-radius: 5px; text-shadow: 0 3px 6px rgba($black, 0.2); - &.active, &:hover { + &.active, + &:hover { background-color: $bordeaux; } } diff --git a/src/components/World.vue b/src/components/World.vue index fc4701a..40d74b1 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -23,7 +23,7 @@ import { generateTilemap } from '@/services/zone' let scene = useScene() let tilemapLayer = ref() -const tileMap = generateTilemap(scene, 10, 10); +const tileMap = generateTilemap(scene, 10, 10) let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer @@ -77,7 +77,7 @@ socket.connection.on('character:moved', (data: CharacterType) => { }) onBeforeUnmount(() => { - zoneStore.reset(); + zoneStore.reset() socket.connection.emit('character:zone:leave') socket.connection.off('character:zone:load') socket.connection.off('zone:character:join') diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue index 8391ed6..b3d97ee 100644 --- a/src/components/gui/Chat.vue +++ b/src/components/gui/Chat.vue @@ -26,7 +26,7 @@ background-color: rgba($white, 0.85); border: 2px solid $white; color: $gray-2; - background-image: url("/assets/icons/submit-icon.svg"); + background-image: url('/assets/icons/submit-icon.svg'); background-repeat: no-repeat; background-size: 30px; background-position: calc(100% - 25px) center; @@ -37,7 +37,6 @@ left: 500px; width: 30px; height: 30px; - } } } diff --git a/src/components/utilities/Controls.vue b/src/components/utilities/Controls.vue index 4ac6571..449fb3f 100644 --- a/src/components/utilities/Controls.vue +++ b/src/components/utilities/Controls.vue @@ -10,8 +10,8 @@ import { getTile, tileToWorldXY } from '@/services/zone' import { useZoneStore } from '@/stores/zone' import { useZoneEditorStore } from '@/stores/zoneEditor' -const zoneStore = useZoneStore(); -const zoneEditorStore = useZoneEditorStore(); +const zoneStore = useZoneStore() +const zoneEditorStore = useZoneEditorStore() const scene = useScene() const props = defineProps({ layer: Phaser.Tilemaps.TilemapLayer @@ -43,7 +43,7 @@ function onPointerMove(pointer: Phaser.Input.Pointer) { scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove) // Zone camera system -function dragZone (pointer: Phaser.Input.Pointer) { +function dragZone(pointer: Phaser.Input.Pointer) { if (!pointer.isDown) return cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom @@ -52,14 +52,16 @@ let cam = scene.cameras.main scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) watch( - () => zoneEditorStore.tool, () => { + () => zoneEditorStore.tool, + () => { // @TODO : change to zone for when loading other maps - if (zoneEditorStore.tool === 'move') { - scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) - } else { - scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone) - } - }, { deep: true } + if (zoneEditorStore.tool === 'move') { + scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) + } else { + scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone) + } + }, + { deep: true } ) // Unload funcs diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue index fc09c53..d299322 100644 --- a/src/components/utilities/GmPanel.vue +++ b/src/components/utilities/GmPanel.vue @@ -1,22 +1,20 @@ \ No newline at end of file +.modal-notif { + margin: 15px; +} + diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue index 5440e42..13cbc1b 100644 --- a/src/components/utilities/assetManager/AssetManager.vue +++ b/src/components/utilities/assetManager/AssetManager.vue @@ -1,16 +1,15 @@ @@ -72,7 +75,7 @@ function toTop() { .container { &.gm-panel { height: 100%; - margin: 0!important; + margin: 0 !important; } } .assets-container { @@ -103,7 +106,7 @@ function toTop() { width: 50px; height: 50px; border-radius: 8px; - background-color: rgba($cyan, 0.5); + background-color: rgba($cyan, 0.5); padding: 0; img { position: absolute; @@ -119,14 +122,14 @@ function toTop() { background-color: rgba($cyan, 0.8); } } - + .asset-categories { width: 15%; display: flex; } .assets { - overflow:auto; + overflow: auto; height: 100%; width: 35%; display: flex; @@ -171,7 +174,6 @@ function toTop() { .asset-details { display: flex; - justify-content: center; align-items: center; gap: 10px; img { @@ -185,11 +187,15 @@ function toTop() { } } - .asset-categories, .assets, .asset-info { + .asset-categories, + .assets, + .asset-info { flex-direction: column; position: relative; - .category, .asset, .image-container { + .category, + .asset, + .image-container { position: relative; padding: 10px; &::after { @@ -204,9 +210,7 @@ function toTop() { &.selected { background-color: rgba($cyan, 0.8); } - } } - } - \ No newline at end of file + diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue new file mode 100644 index 0000000..ae0d37d --- /dev/null +++ b/src/components/utilities/assetManager/partials/ObjectList.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue index 9fb497c..7f5b2cc 100644 --- a/src/components/utilities/assetManager/partials/TileDetails.vue +++ b/src/components/utilities/assetManager/partials/TileDetails.vue @@ -1,28 +1,41 @@ - \ No newline at end of file + diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue index 73ebda2..8d0c325 100644 --- a/src/components/utilities/assetManager/partials/TileList.vue +++ b/src/components/utilities/assetManager/partials/TileList.vue @@ -1,34 +1,28 @@ @@ -55,9 +49,10 @@ onMounted(() => { @import '@/assets/scss/main'; .asset { + cursor: pointer; + &.add-new { display: flex; - align-items: center; gap: 10px 20px; flex-wrap: wrap; .asset-name { @@ -79,9 +74,9 @@ onMounted(() => { background-color: $cyan; cursor: pointer; } - input[type="file"] { + input[type='file'] { display: none; } } } - \ No newline at end of file + diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue index d865b1c..7981312 100644 --- a/src/components/utilities/zoneEditor/Tiles.vue +++ b/src/components/utilities/zoneEditor/Tiles.vue @@ -6,9 +6,8 @@ @@ -17,73 +16,22 @@ @@ -107,5 +55,4 @@ onMounted(async () => { .tiles img.selected { border: 2px solid $red; } - - \ No newline at end of file + diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue index ee24ab6..115e6e6 100644 --- a/src/components/utilities/zoneEditor/Toolbar.vue +++ b/src/components/utilities/zoneEditor/Toolbar.vue @@ -13,7 +13,7 @@
{{ zoneEditorStore.drawMode }} - +
Tile @@ -31,7 +31,7 @@
{{ zoneEditorStore.drawMode }} - +
Tile @@ -75,8 +75,8 @@ const scene = useScene() const emit = defineEmits(['move', 'eraser', 'pencil', 'save']) // track select state -let selectPencilOpen = ref(false); -let selectEraserOpen = ref(false); +let selectPencilOpen = ref(false) +let selectEraserOpen = ref(false) // drawMode function setDrawMode(value: string) { diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index 18e7e11..fcd532f 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -2,11 +2,11 @@ - + - - - + + + @@ -38,7 +38,6 @@ let scene = useScene() const socket = useSocketStore() const zoneEditorStore = useZoneEditorStore() - // Tile tilemap const tileMapData = new Phaser.Tilemaps.MapData({ width: zoneEditorStore.width, @@ -48,18 +47,17 @@ const tileMapData = new Phaser.Tilemaps.MapData({ orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, format: Phaser.Tilemaps.Formats.ARRAY_2D }) -let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData); +let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData) let tilesImg = tileTilemap.addTilesetImage('default', 'tiles') let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1)) -onMounted(() => { -}) - const pos = tileToWorldXY(exampleTiles, 1, 1); - const pos2 = tileToWorldXY(exampleTiles, 1, 2); - const pos3 = tileToWorldXY(exampleTiles, 2, 1); -console.log(pos); +onMounted(() => {}) +const pos = tileToWorldXY(exampleTiles, 1, 1) +const pos2 = tileToWorldXY(exampleTiles, 1, 2) +const pos3 = tileToWorldXY(exampleTiles, 2, 1) +console.log(pos) // center camera const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2 const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2 @@ -91,12 +89,12 @@ onBeforeMount(() => { function eraser(tile: Phaser.Tilemaps.Tile) { if (zoneEditorStore.drawMode === 'tile') { tiles.putTileAt(0, tile.x, tile.y) - zoneEditorStore.updateTile(tile.x, tile.y, 0); + zoneEditorStore.updateTile(tile.x, tile.y, 0) } if (zoneEditorStore.drawMode === 'wall') { - walls.putTileAt(0, tile.x, tile.y ) - zoneEditorStore.updateWall(tile.x, tile.y, 0); + walls.putTileAt(0, tile.x, tile.y) + zoneEditorStore.updateWall(tile.x, tile.y, 0) } } @@ -104,14 +102,14 @@ function pencil(tile: Phaser.Tilemaps.Tile) { if (zoneEditorStore.drawMode === 'tile') { if (zoneEditorStore.selectedTile === null) return tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y) - zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile); + zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile) } if (zoneEditorStore.drawMode === 'wall') { // @TODO fix position if (zoneEditorStore.selectedWall === null) return walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y) - zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall); + zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall) } } @@ -127,7 +125,7 @@ function save() { } onBeforeUnmount(() => { - zoneEditorStore.reset(); + zoneEditorStore.reset() }) /** diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue index 36e75a6..61441c0 100644 --- a/src/components/utilities/zoneEditor/ZoneSettings.vue +++ b/src/components/utilities/zoneEditor/ZoneSettings.vue @@ -55,4 +55,4 @@ watch(width, (value) => { watch(height, (value) => { zoneEditorStore.setHeight(parseInt(value)) }) - \ No newline at end of file + diff --git a/src/screens/Game.vue b/src/screens/Game.vue index 2b03ee4..af0123a 100644 --- a/src/screens/Game.vue +++ b/src/screens/Game.vue @@ -4,16 +4,16 @@ -
- -
-
- -
-
- - -
+
+ +
+
+ +
+
+ + +
diff --git a/src/services/zone.ts b/src/services/zone.ts index b62794f..6d015d0 100644 --- a/src/services/zone.ts +++ b/src/services/zone.ts @@ -23,6 +23,4 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number return { position_x, position_y } } -export function generateTilemap(scene: Phaser.Scene, width: number, height: number) { - -} \ No newline at end of file +export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {} diff --git a/src/stores/assetManager.ts b/src/stores/assetManager.ts new file mode 100644 index 0000000..691ff2d --- /dev/null +++ b/src/stores/assetManager.ts @@ -0,0 +1,20 @@ +import { defineStore } from 'pinia' + +export const useAssetManagerStore = defineStore('assetManager', { + state: () => ({ + tileList: [] as string[], + selectedTile: '' + }), + actions: { + setTileList(tiles: string[]) { + this.tileList = tiles + }, + setSelectedTile(tile: string) { + this.selectedTile = tile + }, + reset() { + this.tileList = [] + this.selectedTile = '' + } + } +}) diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts index 8d2ade2..39fe5f7 100644 --- a/src/stores/zoneEditor.ts +++ b/src/stores/zoneEditor.ts @@ -10,7 +10,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', { decorations: [] as number[][], tool: 'move', drawMode: 'tile', - selectedTile: null, + selectedTile: '', selectedWall: null, selectedDecoration: null, isSettingsModalShown: false @@ -46,7 +46,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', { setDrawMode(mode: string) { this.drawMode = mode }, - setSelectedTile(tile: any) { + setSelectedTile(tile: string) { this.selectedTile = tile }, setSelectedWall(wall: any) { @@ -65,7 +65,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', { this.tiles = [] this.tool = 'move' this.drawMode = 'tile' - this.selectedTile = null + this.selectedTile = '' this.selectedWall = null this.selectedDecoration = null this.isSettingsModalShown = false @@ -77,4 +77,4 @@ export const useZoneEditorStore = defineStore('zoneEditor', { * Resources: * https://www.html5gamedevs.com/topic/21908-phaser-is-there-any-tutorial-on-how-to-do-an-isometric-game/ * http://murdochcarpenter.com/isometric-starling-part-i/ - */ \ No newline at end of file + */ diff --git a/src/types.ts b/src/types.ts index 8748651..93e8fef 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,62 +5,62 @@ export type Notification = { // User model export type User = { - id: number; - username: string; - password: string; - characters: Character[]; -}; + id: number + username: string + password: string + characters: Character[] +} // Character model export type Character = { - id: number; - userId: number; - user: User; - name: string; - hitpoints: number; - mana: number; - level: number; - experience: number; - role: string; - position_x: number; - position_y: number; - rotation: number; - zoneId: number; - zone: Zone; - chats: Chat[]; -}; + id: number + userId: number + user: User + name: string + hitpoints: number + mana: number + level: number + experience: number + role: string + position_x: number + position_y: number + rotation: number + zoneId: number + zone: Zone + chats: Chat[] +} // Zone model export type Zone = { - id: number; - name: string; - width: number; - height: number; - tiles: number[][]; - walls: number[][]; - decorations: ZoneDecoration[]; - characters: Character[]; - chats: Chat[]; - createdAt: Date; - updatedAt: Date; -}; + id: number + name: string + width: number + height: number + tiles: number[][] + walls: number[][] + decorations: ZoneDecoration[] + characters: Character[] + chats: Chat[] + createdAt: Date + updatedAt: Date +} export type ZoneDecoration = { - id: number; - zoneId: number; - zone: Zone; - type: number; - position_x: number; - position_y: number; + id: number + zoneId: number + zone: Zone + type: number + position_x: number + position_y: number } // Chat model export type Chat = { - id: number; - characterId: number; - character: Character; - zoneId: number; - zone: Zone; - message: string; - createdAt: Date; -}; + id: number + characterId: number + character: Character + zoneId: number + zone: Zone + message: string + createdAt: Date +}