Optimization, small tailwind tweaks

src/components/gui/Chat.vue

@@ -1,15 +1,5 @@
 <template>
   <div class="chat-wrapper w-full h-full flex justify-start items-center">
-    <input class="max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
+    <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
   </div>
 </template>
-
-<style scoped lang="scss">
-
-.chat-wrapper {
-  input {
-    // @TODO: find Tailwind alternative as calc() doesnt work
-    background-position: calc(100% - 25px) center;
-  }
-}
-</style>

src/components/gui/Hud.vue

@@ -25,7 +25,7 @@
   <!-- TODO: Replace socket.character with other (selected) player's -->
   <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
     <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
-      <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]"draggable="false" src="/assets/avatar/default/head.png" />
+      <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
     <div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">

src/components/utilities/GmTools.vue

@@ -19,4 +19,3 @@ import { useGmPanelStore } from '@/stores/gmPanel'
 const zoneEditorStore = useZoneEditorStore()
 const gmPanelStore = useGmPanelStore()
 </script>
-

src/components/utilities/assetManager/AssetManager.vue

@@ -6,7 +6,7 @@
         <span>Tiles</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="relative p-2.5  hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span>Objects</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>

src/components/utilities/zoneEditor/Objects.vue

@@ -5,10 +5,10 @@
         <h3 class="text-lg">Objects</h3>
         <div class="flex">
           <div class="w-full flex gap-1.5 flex-row">
-           <div>
+            <div>
-             <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-             <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
-           </div>
+            </div>
             <div>
               <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
               <input @mousedown.stop class="input-cyan" type="number" name="z-index" placeholder="Z-index" />

src/components/utilities/zoneEditor/Tiles.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true"  :modal-width="645" :modal-height="260">
+    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
       <template #modalHeader>
         <h3 class="m-0 font-medium shrink-0">Tiles</h3>
         <div class="flex">
@@ -15,8 +15,22 @@
       <template #modalBody>
         <div class="m-[15px]">
           <div class="flex flex-wrap gap-2.5">
-            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
+            <img
-            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in zoneEditorStore.tileList" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
+              src="/assets/zone/blank_tile.png"
+              alt="Blank tile"
+              @click="zoneEditorStore.setSelectedTile('blank_tile')"
+              :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
+            />
+            <img
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
+              v-for="(tile, index) in zoneEditorStore.tileList"
+              :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>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -133,7 +133,7 @@ watch(objectList, (newObjects) => {
       object: newObject
     }
   })
-});
+})
 
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))

src/screens/Characters.vue

@@ -3,7 +3,7 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
       <div class="filler"></div>
-      <div class="characters-wrapper flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
+      <div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
         <div v-for="character in characters" :key="character.id" class="character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
@@ -116,14 +116,10 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/main';
+.character {
-
+  &.active {
-.characters-wrapper {
+    .selected-character {
-  .character {
+      @apply max-w-[170px];
-    &.active {
-      .selected-character {
-        @apply max-w-[170px];
-      }
     }
   }
 }

src/screens/Game.vue

@@ -78,13 +78,13 @@ const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Create loading bar
    */
-  const width = scene.cameras.main.width;
+  const width = scene.cameras.main.width
-  const height = scene.cameras.main.height;
+  const height = scene.cameras.main.height
 
-  const progressBox = scene.add.graphics();
+  const progressBox = scene.add.graphics()
-  const progressBar = scene.add.graphics();
+  const progressBar = scene.add.graphics()
-  progressBox.fillStyle(0x222222, 0.8);
+  progressBox.fillStyle(0x222222, 0.8)
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50);
+  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
 
   const loadingText = scene.make.text({
     x: width / 2,
@@ -94,21 +94,21 @@ const preloadScene = (scene: Phaser.Scene) => {
       font: '20px monospace',
       fill: '#ffffff'
     }
-  });
+  })
-  loadingText.setOrigin(0.5, 0.5);
+  loadingText.setOrigin(0.5, 0.5)
 
   scene.load.on('progress', function (value: any) {
-    progressBar.clear();
+    progressBar.clear()
-    progressBar.fillStyle(0x368f8b, 1);
+    progressBar.fillStyle(0x368f8b, 1)
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30);
+    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
-  });
+  })
 
   scene.load.on('complete', function () {
-    progressBar.destroy();
+    progressBar.destroy()
-    progressBox.destroy();
+    progressBox.destroy()
-    loadingText.destroy();
+    loadingText.destroy()
     isLoaded.value = true
-  });
+  })
 
   /**
    * Load the assets into the Phaser scene
@@ -144,21 +144,20 @@ const createScene = (scene: Phaser.Scene) => {
    * Watch for changes in assets and reload them
    */
   watch(assets, (newAssets) => {
-      newAssets.forEach((asset) => {
+    newAssets.forEach((asset) => {
-        if (asset.type === 'link') {
+      if (asset.type === 'link') {
-          scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
+        scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
-        }
+      }
-        if (asset.type === 'base64') {
+      if (asset.type === 'base64') {
-          scene.textures.addBase64(asset.key, asset.value)
+        scene.textures.addBase64(asset.key, asset.value)
-        }
+      }
-      })
+    })
 
-      scene.load.start()
+    scene.load.start()
 
-      scene.load.once('complete', () => {
+    scene.load.once('complete', () => {
-        console.log('assets re-loaded')
+      console.log('assets re-loaded')
-      })
+    })
-    }
+  })
-  )
 }
 </script>

src/stores/assetManager.ts

@@ -33,6 +33,6 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedTile,
     selectedObject,
     setSelectedTile,
-    setSelectedObject,
+    setSelectedObject
   }
 })

src/stores/assets.ts

@@ -6,7 +6,7 @@ export const useAssetStore = defineStore('assets', {
   state: () => ({
     assets: [] as Asset[],
     tiles: [] as string[],
-    objects: [] as Object[],
+    objects: [] as Object[]
   }),
   actions: {
     setAssets(assets: Asset[]) {