Optimization, small tailwind tweaks

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];
     }
   }
 }

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>
+</script>

src/screens/Login.vue

@@ -101,4 +101,4 @@ async function registerFunc() {
   socket.setToken(response.token)
   socket.initConnection()
 }
-</script>
+</script>