diff --git a/package-lock.json b/package-lock.json index f7d9b25..f91a0ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1221,6 +1221,7 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "deprecated": "Use @eslint/config-array instead", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -1274,6 +1275,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", + "deprecated": "Use @eslint/object-schema instead", "dev": true, "license": "BSD-3-Clause" }, diff --git a/public/assets/icons/zoneEditor/eraser-tool.svg b/public/assets/icons/zoneEditor/eraser-tool.svg deleted file mode 100644 index c0e1bf9..0000000 --- a/public/assets/icons/zoneEditor/eraser-tool.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/icons/zoneEditor/eraser.svg b/public/assets/icons/zoneEditor/eraser.svg new file mode 100644 index 0000000..94962b4 --- /dev/null +++ b/public/assets/icons/zoneEditor/eraser.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/zoneEditor/move.svg b/public/assets/icons/zoneEditor/move.svg new file mode 100644 index 0000000..5946299 --- /dev/null +++ b/public/assets/icons/zoneEditor/move.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/zoneEditor/tiles.svg b/public/assets/icons/zoneEditor/tiles.svg index 26cad8a..5a815b3 100644 --- a/public/assets/icons/zoneEditor/tiles.svg +++ b/public/assets/icons/zoneEditor/tiles.svg @@ -1,18 +1,29 @@ - + - + + + + + + + + + + + + + + + + diff --git a/src/App.vue b/src/App.vue index 10285f8..0a0551b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,7 +18,8 @@ import Game from '@/components/Game.vue' const screen: Ref = ref('login') const socket = useSocketStore() -socket.$subscribe((mutation, state) => { +socket.$subscribe( + (mutation, state) => { if (!state.connection) { screen.value = 'login' } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index ad7825c..b7811f5 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -12,4 +12,4 @@ $blue-gray: #778899; $cyan: #368f8b; $dark-cyan: #376362; $light-cyan: #00b3b3; -$green: #09ad19; \ No newline at end of file +$green: #09ad19; diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index c9bf4df..1353186 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -15,22 +15,34 @@ body { user-select: none; /* Standard syntax */ } -h1, h2, h3, h4, h5, h6, button, a { - font-family: "Poppins", serif; +h1, +h2, +h3, +h4, +h5, +h6, +button, +a { + font-family: 'Poppins', serif; color: $white; font-weight: 500; } -p, span, li, label { - font-family: "Inter", serif; +p, +span, +li, +label { + font-family: 'Inter', serif; color: $white; } -button, a { +button, +a { font-weight: 500; text-shadow: 0 4px 6px rgba($black, 0.25); } -button, input { +button, +input { border: none; background-color: transparent; } @@ -60,4 +72,4 @@ button { ::-webkit-scrollbar { display: none; -} \ No newline at end of file +} diff --git a/src/components/Game.vue b/src/components/Game.vue index c2ca608..fe699a2 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -1,25 +1,18 @@
- -
- -
- - - - + + + +
+
+ +
+
+
+ +
- -
-
- - -
-
- -
-
@@ -27,25 +20,28 @@ import 'phaser' import { Game, Scene } from 'phavuer' import World from '@/components/World.vue' -import Pointer = Phaser.Input.Pointer -import { useSocketStore } from '@/stores/socket' -import Hud from '@/components/game/Hud.vue' -import Chat from '@/components/game/Chat.vue' -import Menubar from '@/components/game/Menu.vue' +import Hud from '@/components/gui/Hud.vue' +import Chat from '@/components/gui/Chat.vue' +import Menubar from '@/components/gui/Menu.vue' import { onUnmounted } from 'vue' -import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue' -import Modal from '@/components/utilities/Modal.vue' import GmTools from '@/components/utilities/GmTools.vue' -import { useZoneStore } from '@/stores/zone' -import ZoneEditorToolbar from '@/components/utilities/zoneEditor/ZoneEditorToolbar.vue' +import { useSocketStore } from '@/stores/socket' +import { useZoneEditorStore } from '@/stores/zoneEditor' +import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue' +import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue' const socket = useSocketStore() -const zone = useZoneStore() +const zoneEditorStore = useZoneEditorStore() onUnmounted(() => { socket.disconnectSocket() }) +// on page close +addEventListener('beforeunload', () => { + socket.disconnectSocket() +}) + const gameConfig = { name: 'New Quest', width: window.innerWidth, @@ -55,7 +51,7 @@ const gameConfig = { } const createGame = (game: Phaser.Game) => { - window.addEventListener('resize', () => { + addEventListener('resize', () => { game.scale.resize(window.innerWidth, window.innerHeight) }) } @@ -75,25 +71,23 @@ const preloadScene = (scene: Phaser.Scene) => { scene.load.spritesheet('characterW', '/assets/avatar/default/walk.png', { frameWidth: 36, frameHeight: 94 }) } -const playScene = (scene: Phaser.Scene) => { -} +const playScene = (scene: Phaser.Scene) => {} const createScene = (scene: Phaser.Scene) => { // Camera drag system let cam = scene.cameras.main - scene.input.on('pointermove', function (pointer: Pointer) { + scene.input.on('pointermove', function (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 }) scene.anims.create({ - key: "walk", + key: 'walk', frameRate: 7, - frames: scene.anims.generateFrameNumbers("characterW", { start: 0, end: 3 }), - repeat: -1, - }); - + frames: scene.anims.generateFrameNumbers('characterW', { start: 0, end: 3 }), + repeat: -1 + }) // const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff0000, 0.5).setOrigin(0, 0); // @@ -132,4 +126,4 @@ const createScene = (scene: Phaser.Scene) => { bottom: 100px; height: 100px; } - \ No newline at end of file + diff --git a/src/components/World.vue b/src/components/World.vue index bbffa75..fdb185e 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -1,9 +1,9 @@ \ No newline at end of file + diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue index af4cfc4..1cf166c 100644 --- a/src/components/utilities/Modal.vue +++ b/src/components/utilities/Modal.vue @@ -4,7 +4,7 @@
- +
@@ -45,7 +45,9 @@ const properties = defineProps({ } }) -watch(() => properties.isModalOpen, (value) => { +watch( + () => properties.isModalOpen, + (value) => { isModalOpenRef.value = value } ) @@ -122,12 +124,16 @@ const stopDrag = () => { isDragging.value = false } -watch(() => properties.modalWidth, (value) => { +watch( + () => properties.modalWidth, + (value) => { width.value = value } ) -watch(() => properties.modalHeight, (value) => { +watch( + () => properties.modalHeight, + (value) => { height.value = value } ) @@ -148,14 +154,25 @@ onUnmounted(() => { removeEventListener('resize', handleResize) }) - // Make sure modal doesn't go off screen -watch(() => x.value, (value) => { - if (value < 0) { x.value = 0 } else if (value + width.value > window.innerWidth) { x.value = window.innerWidth - width.value } +watch( + () => x.value, + (value) => { + if (value < 0) { + x.value = 0 + } else if (value + width.value > window.innerWidth) { + x.value = window.innerWidth - width.value + } } ) -watch(() => y.value, (value) => { - if (value < 0) { y.value = 0 } else if (value + height.value > window.innerHeight) { y.value = window.innerHeight - height.value } +watch( + () => y.value, + (value) => { + if (value < 0) { + y.value = 0 + } else if (value + height.value > window.innerHeight) { + y.value = window.innerHeight - height.value + } } ) @@ -264,12 +281,12 @@ function handleResize() { label { margin-bottom: 10px; - font-family: "Poppins"; + font-family: 'Poppins'; } input { max-width: 250px; - font-family: "Poppins"; + font-family: 'Poppins'; border: 1px solid $cyan; border-radius: 5px; background-color: rgba($white, 0.8); @@ -296,4 +313,4 @@ function handleResize() { } } } - \ No newline at end of file + diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue index 8498e06..a08942c 100644 --- a/src/components/utilities/Notifications.vue +++ b/src/components/utilities/Notifications.vue @@ -15,7 +15,7 @@ import { useNotificationStore } from '@/stores/notifications' import { useSocketStore } from '@/stores/socket' import Modal from '@/components/utilities/Modal.vue' -import { onMounted, onUnmounted, ref, watch } from 'vue' +import { onBeforeMount, onBeforeUnmount, watch } from 'vue' const notifications = useNotificationStore() const socket = useSocketStore() @@ -32,14 +32,14 @@ function setupNotificationListener(connection: any) { }) } -onMounted(() => { - const connection = socket.getConnection +onBeforeMount(() => { + const connection = socket.connection if (connection) { setupNotificationListener(connection) } else { // Watch for changes in the socket connection watch( - () => socket.getConnection, + () => socket.connection, (newConnection) => { if (newConnection) setupNotificationListener(newConnection) } @@ -47,8 +47,8 @@ onMounted(() => { } }) -onUnmounted(() => { - const connection = socket.getConnection +onBeforeUnmount(() => { + const connection = socket.connection if (connection) { connection.off('notification') } diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue new file mode 100644 index 0000000..9e943e7 --- /dev/null +++ b/src/components/utilities/zoneEditor/Tiles.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue new file mode 100644 index 0000000..e64785c --- /dev/null +++ b/src/components/utilities/zoneEditor/Toolbar.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index ce6c7e4..a4a3f7a 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -1,99 +1,73 @@ - - \ No newline at end of file diff --git a/src/components/utilities/zoneEditor/ZoneEditorToolbar.vue b/src/components/utilities/zoneEditor/ZoneEditorToolbar.vue deleted file mode 100644 index 6187f16..0000000 --- a/src/components/utilities/zoneEditor/ZoneEditorToolbar.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/services/authentication.ts b/src/services/authentication.ts index c874e6d..566614b 100644 --- a/src/services/authentication.ts +++ b/src/services/authentication.ts @@ -7,7 +7,7 @@ export async function register(username: string, password: string, socketStore = try { const response = await axios.post(`${config.server_endpoint}/register`, { username, password }) useCookies().set('token', response.data.token as string) - return { success: true, token: response.data.token} + return { success: true, token: response.data.token } } catch (error: any) { return { error: error.response.data.message } } @@ -17,7 +17,7 @@ export async function login(username: string, password: string, socketStore = us try { const response = await axios.post(`${config.server_endpoint}/login`, { username, password }) useCookies().set('token', response.data.token as string) - return { success: true, token: response.data.token} + return { success: true, token: response.data.token } } catch (error: any) { return { error: error.response.data.message } } diff --git a/src/services/zone.ts b/src/services/zone.ts index 3eb7203..f8c9cef 100644 --- a/src/services/zone.ts +++ b/src/services/zone.ts @@ -2,7 +2,7 @@ import config from '@/config' export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined { const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y) - if (!tile) return undefined; + if (!tile) return undefined return tile } @@ -22,4 +22,4 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number const position_y = worldPoint.y return { position_x, position_y } -} \ No newline at end of file +} diff --git a/src/stores/socket.ts b/src/stores/socket.ts index f23a15b..068460e 100644 --- a/src/stores/socket.ts +++ b/src/stores/socket.ts @@ -11,12 +11,6 @@ export const useSocketStore: StoreDefinition = defineStore('socket', { user: null as User | null, character: null as Character | null }), - getters: { - getToken: (state: any) => state.token as string, - getConnection: (state: any) => state.connection as Socket, - getUser: (state: any) => state.user as User, - getCharacter: (state: any) => state.character as Character - }, actions: { initConnection() { this.connection = io(config.server_endpoint, { diff --git a/src/stores/zone.ts b/src/stores/zone.ts index 9e9b61f..c5079bd 100644 --- a/src/stores/zone.ts +++ b/src/stores/zone.ts @@ -3,21 +3,12 @@ import type { Character } from '@/types' export const useZoneStore = defineStore('zone', { state: () => ({ - loaded: false, - tiles: undefined, - characters: [] as Character[], - editorIsOpen: true + tiles: [] as number[][], + characters: [] as Character[] }), - getters: { - isLoaded: (state) => state.loaded, - getTiles: (state) => state.tiles, - getCharacters: (state) => state.characters, - getEditorIsOpen: (state) => state.editorIsOpen - }, actions: { - loadTiles(tiles: any) { + setTiles(tiles: number[][]) { this.tiles = tiles - this.loaded = true }, setCharacters(characters: Character[]) { this.characters = characters @@ -25,19 +16,13 @@ export const useZoneStore = defineStore('zone', { addCharacter(character: Character) { this.characters.push(character) }, - removeCharacter(character: Character) { - this.characters = this.characters.filter((c: Character) => c.id !== character.id) - }, updateCharacter(character: Character) { const index = this.characters.findIndex((c) => c.id === character.id) - if (index !== -1) { - this.characters[index] = character - } else { - console.error(`Character with id ${character.id} not found`) - } + if (index === -1) return + this.characters[index] = character }, - setEditorIsOpen(isOpen: boolean) { - this.editorIsOpen = isOpen + removeCharacter(character: Character) { + this.characters = this.characters.filter((c: Character) => c.id !== character.id) } } }) diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts index d411022..f27d703 100644 --- a/src/stores/zoneEditor.ts +++ b/src/stores/zoneEditor.ts @@ -1,18 +1,20 @@ import { defineStore } from 'pinia' +import config from '@/config' export const useZoneEditorStore = defineStore('zoneEditor', { state: () => ({ - loaded: false, - tiles: undefined, + active: true }), getters: { - isLoaded: (state) => state.loaded, - getTiles: (state) => state.tiles, + isActive: (state) => state.active }, actions: { - loadTiles(tiles: any) { - this.tiles = tiles - this.loaded = true - }, + toggleActive() { + this.active = !this.active + } } }) + +/** + * [[0,0,0,0,0,0,0,0,0,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,1,1,1,1,1,1,1,1,0],[0,0,0,0,0,0,0,0,0,0]] + */