zone editor stuff

src/components/utilities/zoneEditor/Toolbar.vue

@@ -10,24 +10,17 @@
 
         <button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
           <img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
-          <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
-            <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
-            <option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
-            <option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
-            <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
-            <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
-          </select>
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
             <div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
               {{ zoneEditorStore.drawMode }}
               <img src="/assets/icons/zoneEditor/chevron.svg"/>
             </div>
             <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="option" data-value="tile">Tile</span>
-              <span class="option" data-value="wall">Wall</span>
-              <span class="option" data-value="decoration">Decoration</span>
-              <span class="option" data-value="teleport">Teleport</span>
-              <span class="option" data-value="blocking_tile">Blocking tile</span>
+              <span class="option" @click="setDrawMode('tile')">Tile</span>
+              <span class="option" @click="setDrawMode('wall')">Wall</span>
+              <span class="option" @click="setDrawMode('decoration')">Decoration</span>
+              <span class="option" @click="setDrawMode('teleport')">Teleport</span>
+              <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -36,24 +29,17 @@
 
         <button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
-          <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
-            <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
-            <option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
-            <option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
-            <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
-            <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
-          </select>
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
               {{ zoneEditorStore.drawMode }}
               <img src="/assets/icons/zoneEditor/chevron.svg"/>
             </div>
             <div class="options" v-show="selectEraserOpen">
-              <span class="option" data-value="tile">Tile</span>
-              <span class="option" data-value="wall">Wall</span>
-              <span class="option" data-value="decoration">Decoration</span>
-              <span class="option" data-value="teleport">Teleport</span>
-              <span class="option" data-value="blocking_tile">Blocking tile</span>
+              <span class="option" @click="setDrawMode('tile')">Tile</span>
+              <span class="option" @click="setDrawMode('wall')">Wall</span>
+              <span class="option" @click="setDrawMode('decoration')">Decoration</span>
+              <span class="option" @click="setDrawMode('teleport')">Teleport</span>
+              <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -94,14 +80,12 @@ const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
 let selectPencilOpen = ref(false);
 let selectEraserOpen = ref(false);
 
-
 // drawMode
-const drawMode = ref('tile')
-
-// on change of select
-watch(drawMode, (value) => {
+function setDrawMode(value: string) {
   zoneEditorStore.setDrawMode(value)
-})
+  selectPencilOpen.value = false
+  selectEraserOpen.value = false
+}
 
 function drawTile(pointer: Phaser.Input.Pointer) {
   if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') {
@@ -139,7 +123,7 @@ onBeforeUnmount(() => {
 })
 
 function clear() {
-  zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.zoneSettings?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zoneSettings?.height ?? 10 }, () => 0)))
+  zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 0)))
 }
 </script>
 

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -2,8 +2,8 @@
   <TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
   <Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
-  <Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
-  <Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
+  <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
+  <Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
 </template>
 
@@ -28,7 +28,7 @@ let scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 
-let tileMap = generateTilemap(scene, 10, 10);
+let tileMap = generateTilemap(scene, zoneEditorStore.width, zoneEditorStore.height);
 let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
 let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
 
@@ -41,25 +41,25 @@ onBeforeMount(() => {
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 
-const tiles = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 0))
+const tiles = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
 zoneEditorStore.setTiles(tiles)
 zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
 
 // Watch for changes in the zoneStore and update the layer
-watch(
-  () => zoneEditorStore.tiles,
-  () => {
-    // @TODO : change to zone for when loading other maps
-    zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
-  },
-  { deep: true }
-)
+// watch(
+//   () => zoneEditorStore.tiles,
+//   () => {
+//     // @TODO : change to zone for when loading other maps
+//     zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
+//   },
+//   { deep: true }
+// )
 
 socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
   tileMap = generateTilemap(scene, data.width, data.height);
   zoneEditorStore.setName(data.name)
   zoneEditorStore.setWidth(data.width)
-  zoneEditorStore.setTiles(data.tiles)
+  zoneEditorStore.setTiles(data.tilesForPublic)
 })
 
 function eraser(tile: Phaser.Tilemaps.Tile) {

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -13,11 +13,11 @@
           </div>
           <div>
             <label for="name">Width</label>
-            <input v-model="width" name="name" id="name" />
+            <input v-model="width" name="name" id="name" type="number" />
           </div>
           <div>
             <label for="name">Height</label>
-            <input v-model="height" name="name" id="name" />
+            <input v-model="height" name="name" id="name" type="number" />
           </div>
           <div>
             <label for="name">PVP enabled</label>
@@ -45,10 +45,10 @@ watch(name, (value) => {
 })
 
 watch(width, (value) => {
-  zoneEditorStore.setWidth(value)
+  zoneEditorStore.setWidth(parseInt(value))
 })
 
 watch(height, (value) => {
-  zoneEditorStore.setHeight(value)
+  zoneEditorStore.setHeight(parseInt(value))
 })
 </script>

src/types.ts

@@ -3,47 +3,85 @@ export type Notification = {
   message: string
 }
 
+// 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[][]
-  characters: Character[]
-  chats: Chat[]
-}
+  id: number;
+  name: string;
+  width: number;
+  height: number;
+  tiles: ZoneTile[];
+  decorations: ZoneDecoration[];
+  walls: ZoneWall[];
+  characters: Character[];
+  chats: Chat[];
+  createdAt: Date;
+  updatedAt: Date;
+};
 
+// ZoneTile model
+export type ZoneTile = {
+  id: number;
+  zone: Zone;
+  zoneId: number;
+  x: number;
+  y: number;
+  type: number;
+};
+
+// ZoneDecoration model
+export type ZoneDecoration = {
+  id: number;
+  zone: Zone;
+  zoneId: number;
+  x: number;
+  y: number;
+  type: number;
+};
+
+// ZoneWall model
+export type ZoneWall = {
+  id: number;
+  zone: Zone;
+  zoneId: number;
+  x: number;
+  y: number;
+  type: 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;
+};