From dfe5550fa6943103930f13633a67c9d622b283ea Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 6 Jul 2024 23:31:37 +0200
Subject: [PATCH] Optimization, small tailwind tweaks

---
 src/components/forms/ChipsInput.vue           |  2 +-
 src/components/gui/Chat.vue                   | 12 +---
 src/components/gui/Hud.vue                    |  2 +-
 src/components/utilities/GmTools.vue          |  1 -
 .../utilities/assetManager/AssetManager.vue   |  2 +-
 .../utilities/zoneEditor/Objects.vue          | 10 +--
 src/components/utilities/zoneEditor/Tiles.vue | 20 +++++-
 .../utilities/zoneEditor/ZoneEditor.vue       |  2 +-
 .../utilities/zoneEditor/ZoneSettings.vue     |  2 +-
 src/screens/Characters.vue                    | 14 ++---
 src/screens/Game.vue                          | 61 +++++++++----------
 src/screens/Login.vue                         |  2 +-
 src/stores/assetManager.ts                    |  2 +-
 src/stores/assets.ts                          |  2 +-
 14 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index cc490d7..04e9825 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -31,4 +31,4 @@ const backspaceDelete = (event) => {
     modelValue.value = modelValue.value.slice(0, -1)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 6c27211..14b7a42 100644
--- a/src/components/gui/Chat.vue
+++ b/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>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index ce944db..d79c141 100644
--- a/src/components/gui/Hud.vue
+++ b/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">
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index 6c0ce9e..c8e09fb 100644
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@@ -19,4 +19,3 @@ import { useGmPanelStore } from '@/stores/gmPanel'
 const zoneEditorStore = useZoneEditorStore()
 const gmPanelStore = useGmPanelStore()
 </script>
-
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 7865605..ecbae3f 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/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>
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index f35646a..a2d0ff6 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/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>
-             <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-             <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
-           </div>
+            <div>
+              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
+            </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" />
@@ -56,4 +56,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 43bfeaa..bdbc79e 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/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 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 }" />
+            <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
+              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>
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 46994bd..42a6efc 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/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')))
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 6a7526f..161a0b0 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -53,4 +53,4 @@ watch(width, (value) => {
 watch(height, (value) => {
   zoneEditorStore.setHeight(parseInt(value))
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 9dec069..8d4bf48 100644
--- a/src/screens/Characters.vue
+++ b/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';
-
-.characters-wrapper {
-  .character {
-    &.active {
-      .selected-character {
-        @apply max-w-[170px];
-      }
+.character {
+  &.active {
+    .selected-character {
+      @apply max-w-[170px];
     }
   }
 }
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 2f92834..515a000 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -78,13 +78,13 @@ const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Create loading bar
    */
-  const width = scene.cameras.main.width;
-  const height = scene.cameras.main.height;
+  const width = scene.cameras.main.width
+  const height = scene.cameras.main.height
 
-  const progressBox = scene.add.graphics();
-  const progressBar = scene.add.graphics();
-  progressBox.fillStyle(0x222222, 0.8);
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50);
+  const progressBox = scene.add.graphics()
+  const progressBar = scene.add.graphics()
+  progressBox.fillStyle(0x222222, 0.8)
+  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.fillStyle(0x368f8b, 1);
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30);
-  });
+    progressBar.clear()
+    progressBar.fillStyle(0x368f8b, 1)
+    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
+  })
 
   scene.load.on('complete', function () {
-    progressBar.destroy();
-    progressBox.destroy();
-    loadingText.destroy();
+    progressBar.destroy()
+    progressBox.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) => {
-        if (asset.type === 'link') {
-          scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
-        }
-        if (asset.type === 'base64') {
-          scene.textures.addBase64(asset.key, asset.value)
-        }
-      })
+    newAssets.forEach((asset) => {
+      if (asset.type === 'link') {
+        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.start()
+    scene.load.start()
 
-      scene.load.once('complete', () => {
-        console.log('assets re-loaded')
-      })
-    }
-  )
+    scene.load.once('complete', () => {
+      console.log('assets re-loaded')
+    })
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index ffe1b41..7a047bd 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -101,4 +101,4 @@ async function registerFunc() {
   socket.setToken(response.token)
   socket.initConnection()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/stores/assetManager.ts b/src/stores/assetManager.ts
index 43c29dd..8b4af45 100644
--- a/src/stores/assetManager.ts
+++ b/src/stores/assetManager.ts
@@ -33,6 +33,6 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedTile,
     selectedObject,
     setSelectedTile,
-    setSelectedObject,
+    setSelectedObject
   }
 })
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
index 5694a5d..c9b54ae 100644
--- a/src/stores/assets.ts
+++ b/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[]) {