Updated tiles, improved folder & file structure, npm update, more progress on zone editor

package-lock.json

@@ -3411,9 +3411,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.796",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.796.tgz",
-      "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==",
+      "version": "1.4.798",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.798.tgz",
+      "integrity": "sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==",
       "dev": true,
       "license": "ISC"
     },
@@ -5625,9 +5625,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.1.tgz",
-      "integrity": "sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5915,9 +5915,9 @@
       }
     },
     "node_modules/rrweb-cssom": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.0.tgz",
-      "integrity": "sha512-KlSv0pm9kgQSRxXEMgtivPJ4h826YHsuob8pSHcfSZsSXGtvpEAie8S0AnXuObEJ7nhikOb4ahwxDm0H2yW17g==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
       "dev": true,
       "license": "MIT"
     },

src/App.vue

@@ -10,10 +10,10 @@
 import { type Ref, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket'
 import Notifications from '@/components/utilities/Notifications.vue'
-import Login from '@/components/screens/Login.vue'
-import Register from '@/components/screens/Register.vue'
-import Characters from '@/components/screens/Characters.vue'
-import Game from '@/components/Game.vue'
+import Login from '@/screens/Login.vue'
+import Register from '@/screens/Register.vue'
+import Characters from '@/screens/Characters.vue'
+import Game from '@/screens/Game.vue'
 
 const screen: Ref<string> = ref('login')
 const socket = useSocketStore()

src/components/utilities/Controls.vue

@@ -4,10 +4,14 @@
 
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
-import { onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import config from '@/config'
 import { getTile, tileToWorldXY } from '@/services/zone'
+import { useZoneStore } from '@/stores/zone'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
+const zoneStore = useZoneStore();
+const zoneEditorStore = useZoneEditorStore();
 const scene = useScene()
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
@@ -38,7 +42,29 @@ function onPointerMove(pointer: Phaser.Input.Pointer) {
 
 scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
 
+// Zone camera system
+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
+}
+let cam = scene.cameras.main
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+
+watch(
+  () => zoneEditorStore.tool, () => {
+    // @TODO : change to tiles 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 }
+)
+
+// Unload funcs
 onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
 })
 </script>

src/components/utilities/zoneEditor/Tiles.vue

@@ -7,7 +7,7 @@
       <template #modalBody>
         <canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
         <div class="tiles">
-          <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="selectTile(index)" :class="{ selected: selectedTile === index }" />
+          <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
         </div>
       </template>
     </Modal>
@@ -18,6 +18,7 @@
 import { ref, onMounted, nextTick } from 'vue'
 import config from '@/config'
 import Modal from '@/components/utilities/Modal.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 const tileWidth = config.tile_size.x
 const tileHeight = config.tile_size.y
@@ -25,6 +26,7 @@ const tiles = ref<string[]>([])
 const selectedTile = ref<number | null>(null)
 const canvas = ref<HTMLCanvasElement | null>(null)
 const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
 
 // Hardcoded image path
 const imagePath = '/assets/tiles/default.png'

src/components/utilities/zoneEditor/Toolbar.vue

@@ -2,16 +2,16 @@
   <div class="wrapper">
     <div class="toolbar">
       <div class="tools">
-        <button :class="{ active: activeTool === 'move' }" @click="activeTool = 'move'">
-          <img src="/assets/icons/zoneEditor/move.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+          <img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
         <div class="divider"></div>
-        <button :class="{ active: activeTool === 'tiles' }" @click="activeTool = 'tiles'">
-          <img src="/assets/icons/zoneEditor/tiles.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'tile' }" @click="zoneEditorStore.setTool('tile')">
+          <img src="/assets/icons/zoneEditor/tiles.svg" alt="Draw tiles" />
         </button>
         <div class="divider"></div>
-        <button :class="{ active: activeTool === 'eraser' }" @click="activeTool = 'eraser'">
-          <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
+          <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
         </button>
       </div>
       <div class="buttons">
@@ -38,10 +38,11 @@ const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
-const activeTool = ref('move')
 const emit = defineEmits(['erase', 'move', 'tile'])
 
-function onPointerClick(pointer: Phaser.Input.Pointer) {
+function drawTiles(pointer: Phaser.Input.Pointer) {
+  if (!pointer.isDown) return
+
   const px = scene.cameras.main.worldView.x + pointer.x
   const py = scene.cameras.main.worldView.y + pointer.y
 
@@ -50,15 +51,19 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
     return
   }
 
-  if (activeTool.value === 'eraser') {
+  if (zoneEditorStore.tool === 'eraser') {
     emit('erase', pointer_tile)
   }
+
+  if (zoneEditorStore.tool === 'tile') {
+    emit('tile', pointer_tile)
+  }
 }
 
-scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 
 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerClick)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 })
 </script>
 

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -16,6 +16,7 @@ import { useSocketStore } from '@/stores/socket'
 import { useZoneStore } from '@/stores/zone'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 // Phavuer logic
 let scene = useScene()
@@ -39,6 +40,7 @@ scene.cameras.main.centerOn(centerX, centerY)
 
 // Multiplayer / server logics
 const zoneStore = useZoneStore()
+const zoneEditorStore = useZoneEditorStore()
 const socket = useSocketStore()
 
 zoneStore.setTiles([
@@ -66,8 +68,11 @@ watch(
 )
 
 function erase(tile: Phaser.Tilemaps.Tile) {
-  layer.removeTileAt(tile.x, tile.y)
+  layer.putTileAt(0, tile.x, tile.y)
 }
 
-function tile() {}
+function tile(tile: Phaser.Tilemaps.Tile) {
+  if (zoneEditorStore.selectedTile === null) return
+  layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
+}
 </script>

src/screens/Game.vue

@@ -3,7 +3,7 @@
     <Game class="game" :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
         <GmTools />
-        <div v-if="!zoneEditorStore.isActive">
+        <div v-if="!zoneEditorStore.active">
           <div class="top-ui"><Hud /></div>
           <World />
           <div class="bottom-ui"><Chat /> <Menubar /></div>
@@ -27,7 +27,6 @@ import { onUnmounted } from 'vue'
 import GmTools from '@/components/utilities/GmTools.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()
@@ -74,14 +73,6 @@ const preloadScene = (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: 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',
     frameRate: 7,

src/screens/Login.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useNotificationStore } from '@/stores/notifications'
 import { useSocketStore } from '@/stores/socket'
@@ -43,6 +43,18 @@ const notifications = useNotificationStore()
 const username = ref('')
 const password = ref('')
 
+// automatic login because of development
+onMounted(async () => {
+  const response = await login('ethereal', 'kanker123')
+
+  if (response.success === undefined) {
+    notifications.addNotification({ message: response.error })
+  }
+
+  socket.setToken(response.token)
+  socket.initConnection()
+})
+
 async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {

src/stores/zoneEditor.ts

@@ -3,15 +3,20 @@ import config from '@/config'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
-    active: true
+    active: true,
+    tool: 'move',
+    selectedTile: null,
   }),
-  getters: {
-    isActive: (state) => state.active
-  },
   actions: {
     toggleActive() {
       this.active = !this.active
-    }
+    },
+    setTool(tool: string) {
+      this.tool = tool
+    },
+    setSelectedTile(tile: any) {
+      this.selectedTile = tile
+    },
   }
 })