Tile asset management 90% done

package-lock.json

@@ -2137,30 +2137,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.0-alpha.3",
+      "version": "2.4.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.3.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.12.tgz",
-      "integrity": "sha512-hLVn1t7dfvJcZgiXG/83fg6zvzigLYOVyCEG51uRGAnWV+kfPw2/v5iRKIStlcYb1MqCEZXDiLsIm3gWvN1JAQ==",
+      "integrity": "sha512-Dj9qTifcGGgzFLfMbU5dCo13kHyNuEyvPJhtWDnoVBBmgwW3GMwFmgWnNxBhjf63m5x0gux1okaxX2CLN7qSww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.4.0-alpha.3"
+        "@volar/source-map": "2.4.0-alpha.12"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.0-alpha.3",
+      "version": "2.4.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.3.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.12.tgz",
-      "integrity": "sha512-tqXfx43WvKvjatkoBKkMpLu5akV/p/hPf2MWdAHmK4W6cGDvNinmPlnp/nxIL0WZGvX76y4XhYb3LQQeN5/nIw==",
+      "integrity": "sha512-LXATFSj4D7T9sEm7FFj6iBgHjKjrdhAgRPcechVKiNCMQdr3r3GVkkeu8aM+1peaMH3LsCqoDxVZEmh2r7CHiw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.0-alpha.3",
+      "version": "2.4.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.3.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.12.tgz",
-      "integrity": "sha512-fjWaXUlPLedDCyTc4YpDN5c6T7JK/mA7tmSSSirpQOX5CW/gdy3vpC+XbQta/KjVrRRFNYC2pncTBPyethdyxA==",
+      "integrity": "sha512-mLg+OQauMTv/+08a7WBWJo1sev/wc8t2is0zhBZIlFU+j5mG89FM4+4089c2p/zoUFZ400Q/VNg2BPfhpZ8wSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.4.0-alpha.3",
+        "@volar/language-core": "2.4.0-alpha.12",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
@@ -2959,9 +2959,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001638",
+      "version": "1.0.30001639",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
-      "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+      "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
       "dev": true,
       "funding": [
         {
@@ -3448,9 +3448,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.815",
+      "version": "1.4.816",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
-      "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
+      "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
       "dev": true,
       "license": "ISC"
     },
@@ -3668,9 +3668,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.26.0",
+      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
-      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+      "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3680,7 +3680,7 @@
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.15",
         "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "vue-eslint-parser": "^9.4.3",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -5636,14 +5636,14 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.2.tgz",
-      "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
+      "integrity": "sha512-VEGf1he2DR5yowYRl0XJhWJq5ktm9gYIsH+y8sNJpHlxch7JPDaufgrsl4vYjd9hMUY8QVjoNncKbow9I7exyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.7",
-        "mlly": "^1.7.0",
+        "mlly": "^1.7.1",
         "pathe": "^1.1.2"
       }
     },

src/components/forms/ChipsInput.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="chip-container">
+    <div v-for="(chip, i) in chips" :key="i" class="chip">
+      {{ chip }}
+      <i class="delete-icon" @click="deleteChip(i)">X</i>
+    </div>
+    <input
+      v-model="currentInput"
+      @keypress.enter="saveChip"
+      @keydown.delete="backspaceDelete"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+  set: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const chips = ref([])
+const currentInput = ref('')
+
+const saveChip = () => {
+  if ((props.set && !chips.value.includes(currentInput.value)) || !props.set) {
+    chips.value.push(currentInput.value)
+  }
+  currentInput.value = ''
+}
+
+const deleteChip = (index) => {
+  chips.value.splice(index, 1)
+}
+
+const backspaceDelete = (event) => {
+  if (event.key === 'Backspace' && currentInput.value === '') {
+    chips.value.pop()
+  }
+}
+</script>
+
+<style scoped>
+.chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  background-color: #e0e0e0;
+  border-radius: 16px;
+  padding: 0 8px;
+  margin: 4px;
+}
+
+.chip i {
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: 4px;
+}
+
+input {
+  border: none;
+  outline: none;
+  padding: 4px;
+  margin: 4px;
+}
+
+.delete-icon {
+  cursor: pointer;
+  color: red;
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+</style>

src/components/utilities/GmPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="1000" :modal-height="650">
+  <Modal :isModalOpen="gmPanelStore.isOpen" :modal-width="1000" :modal-height="650">
     <template #modalHeader>
       <h3 class="modal-title">GM Panel</h3>
       <div class="gm-selector">
@@ -21,6 +21,9 @@
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
+import { useGmPanelStore } from '@/stores/gmPanel'
+
+const gmPanelStore = useGmPanelStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/utilities/GmTools.vue

@@ -1,14 +1,12 @@
 <template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="260">
+  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="160">
     <template #modalHeader>
       <h3 class="modal-title">GM tools</h3>
     </template>
     <template #modalBody>
       <div class="content">
+        <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Tooggle GM panel</button>
         <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
-        <button class="btn-cyan w-full" type="button">Player manager</button>
-        <button class="btn-cyan w-full" type="button">Item manager</button>
-        <button class="btn-cyan w-full" type="button">NPC manager</button>
       </div>
     </template>
   </Modal>
@@ -16,8 +14,11 @@
 <script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGmPanelStore } from '@/stores/gmPanel'
+
 
 const zoneEditorStore = useZoneEditorStore()
+const gmPanelStore = useGmPanelStore()
 </script>
 
 <style lang="scss">

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="image-container">
-    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}`" alt="Tile" />
+    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}.png`" alt="Tile" />
   </div>
   <div class="modal-form asset-manager">
+    <ChipsInput />
     <form class="form-fields">
       <div class="form-field name">
         <label for="name">Name</label>
@@ -21,6 +22,7 @@
 import config from '@/config'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useSocketStore } from '@/stores/socket'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
 
 const socket = useSocketStore()
 const assetManagerStore = useAssetManagerStore()

src/components/utilities/assetManager/partials/TileList.vue

@@ -8,7 +8,7 @@
   </div>
   <a class="asset" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
     <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" alt="Tile" />
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
       <span class="asset-name">{{ tile }}</span>
     </div>
   </a>

src/components/utilities/zoneEditor/Tiles.vue

@@ -7,7 +7,8 @@
       <template #modalBody>
         <div class="container tiles">
           <div class="tiles">
-            <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+            <img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
+            <img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
           </div>
         </div>
       </template>
@@ -30,7 +31,7 @@ const zoneEditorStore = useZoneEditorStore()
 onMounted(async () => {
   isModalOpen.value = true
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response.map((tile) => `${config.server_endpoint}/assets/tiles/${tile}`)
+    tiles.value = response;
   })
 })
 </script>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -4,16 +4,15 @@
   <Controls :layer="tiles" />
   <!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
   <Container>
-    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
+<!--    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />-->
-    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
+<!--    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />-->
-    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
+<!--    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />-->
   </Container>
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
   <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
-  <GmPanel />
 </template>
 
 <script setup lang="ts">
@@ -29,7 +28,7 @@ import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
-import { tileToWorldXY } from '@/services/zone'
+import { placeTile, tileToWorldXY } from '@/services/zone'
 import GmPanel from '@/components/utilities/GmPanel.vue'
 import { useAssetStore } from '@/stores/assets'
 
@@ -49,8 +48,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
 })
 
 const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-
+const tilesetImages: Tileset[] = [];
-let tilesetImages: Tileset[] = [];
 
 /**
  * Walk through tiles and add them to the zone as tilesetImages
@@ -60,19 +58,14 @@ toRaw(assetStore.assets).forEach((asset) => {
   if (asset.group !== 'tiles') return
   tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
 })
+tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
 
 const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
-const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
+const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
 
-function placeTile(layer: TilemapLayer, x: number, y: number, tileName: string) {
+placeTile(zone, tiles, 0, 0, 'blank_tile')
-  let tileImg = zone.getTileset(tileName) as Tileset;
-  if (!tileImg) return
-  layer.putTileAt(tileImg.firstgid, x, y);
-}
 
-placeTile(tiles, 0, 0, 'tile_0.png')
 
-onMounted(() => {})
 const pos = tileToWorldXY(tiles, 1, 1)
 const pos2 = tileToWorldXY(tiles, 1, 2)
 const pos3 = tileToWorldXY(tiles, 2, 1)
@@ -97,20 +90,21 @@ console.log(pos)
 
 function eraser(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
-    placeTile(tiles, tile.x, tile.y, 'tile_0.png')
+    placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
     zoneEditorStore.updateTile(tile.x, tile.y, 0)
   }
 
-  if (zoneEditorStore.drawMode === 'wall') {
+  // if (zoneEditorStore.drawMode === 'wall') {
-    walls.putTileAt(0, tile.x, tile.y)
+  //   walls.putTileAt(0, tile.x, tile.y)
-    zoneEditorStore.updateWall(tile.x, tile.y, 0)
+  //   zoneEditorStore.updateWall(tile.x, tile.y, 0)
-  }
+  // }
 }
 
 function pencil(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
-    if (zoneEditorStore.selectedTile === null) return
+    if (!zoneEditorStore.selectedTile) return
-    placeTile(tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
+    console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
+    placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
     // zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
   }
 
@@ -133,8 +127,9 @@ function save() {
   })
 }
 
+onMounted(() => {})
 onBeforeMount(() => {
-  // exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(tiles, x, y, 'tile_2.png')))
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 

src/screens/Game.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="game-container">
+    <GmPanel />
     <GmTools />
+
     <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
         <div class="top-ui">
@@ -37,7 +39,7 @@ import Chat from '@/components/gui/Chat.vue'
 import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/utilities/GmTools.vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
-import type { Asset } from '@/types'
+import GmPanel from '@/components/utilities/GmPanel.vue'
 
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
@@ -75,16 +77,14 @@ const preloadScene = (scene: Phaser.Scene) => {
    */
   toRaw(assetStore.assets).forEach((asset) => {
     if (asset.type === 'link') {
-      scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
+      scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
     }
     if (asset.type === 'base64') {
       scene.textures.addBase64(asset.key, asset.value)
     }
   })
 
-  scene.load.image('walls', '/assets/zone/walls.png')
+  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
-  scene.load.image('wall1', '/assets/zone/wall1.png')
-  scene.load.image('wall2', '/assets/zone/wall2.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
   scene.textures.addBase64(
     'character',

src/screens/Login.vue

@@ -50,7 +50,7 @@ onMounted(async () => {
   /**
    * Fetch assets from the server
    */
-  await assetStore.fetchAssets();
+  assetStore.fetchAssets();
 
   const response = await login('ethereal', 'kanker123')
 

src/services/zone.ts

@@ -1,4 +1,7 @@
 import config from '@/config'
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+import Tileset = Phaser.Tilemaps.Tileset
 
 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -23,4 +26,10 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
   return { position_x, position_y }
 }
 
+export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
+  const tileImg = zone.getTileset(tileName) as Tileset;
+  if (!tileImg) return
+  layer.putTileAt(tileImg.firstgid, x, y);
+}
+
 export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}

src/stores/gmPanel.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import type { Character } from '@/types'
+import config from '@/config'
+
+export const useGmPanelStore = defineStore('gmPanel', {
+  state: () => ({
+    isOpen: false,
+  }),
+  actions: {
+    toggle() {
+      this.isOpen = !this.isOpen
+    },
+    open() {
+      this.isOpen = true
+    },
+    close() {
+      this.isOpen = false
+    },
+  }
+})