Chore : attempt to reduce loading times

components/AnimatedBackground.vue

@@ -3,7 +3,6 @@ const settingsStore = useSettingsStore();
 
 import gsap from "gsap";
 import ShaderWorker from "~/assets/workers/ShaderWorker?worker";
-import type { Game } from "~/netcode/interfaces";
 
 const emit = defineEmits<{
   ready: [];
@@ -25,6 +24,14 @@ const props = withDefaults(defineProps<Props>(), {
 const _colorStart = reactive([0, 0.3, 0]);
 const _colorEnd = reactive([0, 1, 0]);
 
+if (props.isTurn) {
+  Object.assign(_colorStart, [0, 0.3, 0]);
+  Object.assign(_colorEnd, [0, 1, 0]);
+} else {
+  Object.assign(_colorStart, [0, 0.2, 0.3]);
+  Object.assign(_colorEnd, [0, 1, 1]);
+}
+
 function initShader() {
   return new Promise<void>((resolve, reject) => {
     if (!canvas.value) {
@@ -127,20 +134,20 @@ watch(
       gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: 0.2, 2: 0.3 });
       gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 });
     }
-  },
-  { immediate: true }
+  }
 );
 
 watch([_colorEnd, _colorStart], () => {
   recolorShader();
 });
 
-onMounted(async () => {
+onMounted(() => {
   worker = new ShaderWorker();
   recolorShader();
-  await initShader();
+  initShader().then(() => {
+    emit("ready");
+  });
   window.addEventListener("resize", resizeShader, true);
-  emit("ready");
 });
 
 onUnmounted(() => {
@@ -150,13 +157,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <canvas
-    ref="canvas"
-    id="background"
-    :class="{ pixelated: settingsStore.shaderPixelated }"
-    width="480"
-    height="270"
-  ></canvas>
+  <canvas ref="canvas" id="background" :class="{ pixelated: settingsStore.shaderPixelated }" width="480"
+    height="270"></canvas>
 </template>
 
 <style scoped>

components/PlayerSlot.vue

@@ -214,7 +214,7 @@ function discardCardClick(card: Card) {
         @discardCardClick="discardCardClick"
       >
       </CardsGrouped>
-
+      <br>
       <!-- <div class="cards_container"> -->
       <!-- HAND -->
       <!-- <template v-if="isSelf">