Added game store, stupid tile shit

src/App.vue

@@ -7,16 +7,18 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
-import { useSocketStore } from '@/stores/socket'
+import { useGameStore } from '@/stores/game'
 import Notifications from '@/components/utilities/Notifications.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'
+import { storeToRefs } from 'pinia'
+import { useSocketStore } from '@/stores/socket'
 
-const screen: Ref<string> = ref('login')
 const socket = useSocketStore()
+const gameStore = useGameStore()
+const {screen} = storeToRefs(gameStore);
 
 socket.$subscribe(
   (mutation, state) => {

src/components/World.vue

@@ -17,13 +17,12 @@ import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneStore } from '@/stores/zone'
-import { generateTilemap } from '@/services/zone'
 
 // Phavuer logic
 let scene = useScene()
 let tilemapLayer = ref()
 
-const tileMap = generateTilemap(scene, 10, 10)
+const tileMap = null
 let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
 let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
 

src/components/utilities/zoneEditor/Toolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center m-2.5">
     <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
-      <div class="tools flex gap-2.5">
+      <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
@@ -68,15 +68,15 @@
 
         <div class="w-[1px] bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
         </button>
       </div>
 
       <div class="flex gap-2.5 ml-auto">
         <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('clear')">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
         <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
       </div>
     </div>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -3,7 +3,7 @@
   <Controls :layer="tiles" />
 
   <Container>
-    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
+    <Image v-for="object in zoneObjects" :depth="3" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
   </Container>
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
@@ -15,9 +15,7 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import Tileset = Phaser.Tilemaps.Tileset
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
+import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
 import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
@@ -25,19 +23,14 @@ import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
-import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
+import { getTiles, placeTile, setAllTiles, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import type { Object } from '@/types'
+import type { ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
-
-type ZoneObject = {
-  id: number
-  object: Object
-  position_x: number
-  position_y: number
-}
+import Tileset = Phaser.Tilemaps.Tileset
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const scene = useScene()
 const socket = useSocketStore()
@@ -89,7 +82,10 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
   }
 
   if (zoneEditorStore.drawMode === 'object') {
-    zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
+    zoneObjects.value = zoneObjects.value.filter((object) => {
+      const worldXY = tileToWorldXY(tiles, tile.x, tile.y)
+      return object.position_x !== worldXY.position_x || object.position_y !== worldXY.position_y
+    })
   }
 }
 
@@ -100,13 +96,21 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
   }
 
   if (zoneEditorStore.drawMode === 'object') {
+    if (zoneEditorStore.zone === null) return
     if (zoneEditorStore.selectedObject === null) return
+
     zoneObjects.value.push({
-      id: zoneObjects.value.length + 1,
+      id: Math.random(),
+      zoneId: zoneEditorStore.zone.id,
+      zone: zoneEditorStore.zone,
+      objectId: zoneEditorStore.selectedObject.id,
       object: zoneEditorStore.selectedObject,
       position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
       position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
     })
+
+    // remove duplicates based on object, pos x and y
+    zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
   }
 }
 
@@ -116,18 +120,34 @@ function paint(tile: Phaser.Tilemaps.Tile) {
 }
 
 function save() {
-  console.log(getTiles(zoneTilemap))
+
+  if (!zoneEditorStore.zone) return
+console.log(getTiles);
+  const tilesArray = []
+
+  socket.connection.emit('gm:zone_editor:zone:update', {
+    zoneId: zoneEditorStore.zone.id,
+    name: zoneEditorStore.zone.name,
+    width: zoneTilemap.width,
+    height: zoneTilemap.height,
+    tiles: tilesArray,
+    objects: zoneObjects.value
+  })
 }
 
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
+  if (zoneEditorStore.zone) {
+    if (zoneEditorStore.zone.tiles) setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
+    zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
+  }
 })
 
 onBeforeUnmount(() => {
   tiles.destroy()
   zoneTilemap.removeAllLayers()
   zoneTilemap.destroy()
-  // zoneEditorStore.reset()
+  zoneEditorStore.reset()
 })
 
 // center camera

src/services/zone.ts

@@ -9,6 +9,10 @@ export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLaye
   return tile
 }
 
+export function getTiles(layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile[] {
+  return layer.getTilesWithin()
+}
+
 export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number) {
   const worldPoint = layer.tileToWorldX(pos_x)
   return worldPoint + config.tile_size.y
@@ -32,17 +36,13 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
   layer.putTileAt(tileImg.firstgid, x, y)
 }
 
-export function getTiles(zone: Tilemap): string[][] {
-  const tiles = []
+export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
   for (let y = 0; y < zone.height; y++) {
-    const row = []
     for (let x = 0; x < zone.width; x++) {
-      const tile = zone.getTileAt(x, y)
-      row.push(!tile?.index ? 'blank_tile' : zone.tilesets[tile.index].name)
+      let tileName = tiles[y][x]
+      const tileImg = zone.getTileset(tileName ?? 'blank_tile') as Tileset
+      if (!tileImg) continue
+      placeTile(zone, layer, x, y, tileName)
     }
-    tiles.push(row)
   }
-  return tiles
 }
-
-export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}

src/stores/game.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useGameStore = defineStore('game', {
+  state: () => ({
+    screen: 'login',
+  }),
+  actions: {
+    setScreen(screen: string) {
+      this.screen = screen
+    },
+  }
+})

src/stores/zone.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import type { Character } from '@/types'
-import config from '@/config'
 
 export const useZoneStore = defineStore('zone', {
   state: () => ({

src/stores/zoneEditor.ts

@@ -51,7 +51,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isCreateZoneModalShown = !this.isCreateZoneModalShown
     },
     reset() {
-      this.zone = null
       this.tileList = []
       this.objectList = []
       this.tool = 'move'