Feat : card distribute

components/AnimatedBackground.vue

@@ -3,7 +3,9 @@ const settingsStore = useSettingsStore()
 
 import gsap from 'gsap';
 import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
-import goStore from '~/netcode';
+import type { Game } from '~/netcode/interfaces';
+
+const emit = defineEmits(["ready"])
 const worker = new ShaderWorker()
 
 const canvas = ref<HTMLCanvasElement | null>(null)
@@ -27,18 +29,29 @@ const _colorEnd = reactive(props.colorEnd)
 
 
 function initShader() {
-    if (!canvas.value) { return }
-    const offscreen = canvas.value?.transferControlToOffscreen()
-    worker.postMessage({
-        command: "initShader",
-        canvas: offscreen,
-        screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
-        shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
-    }, [offscreen])
-    if (settingsStore.shaderFramerate == 0) {
-        killShader()
-    }
-    resizeShader()
+    return new Promise<void>((resolve, reject) => {
+        if (!canvas.value) {
+            reject("canvas is null");
+            return
+        }
+        const offscreen = canvas.value?.transferControlToOffscreen()
+        worker.postMessage({
+            command: "initShader",
+            canvas: offscreen,
+            screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
+            shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
+        }, [offscreen])
+        if (settingsStore.shaderFramerate == 0) {
+            killShader()
+        }
+        resizeShader()
+        worker.onmessage = (e) => {
+            if (e.data == "ready") {
+                resolve()
+            }
+        }
+    })
+
 }
 
 function recolorShader() {
@@ -83,15 +96,15 @@ watch(() => [settingsStore.shaderQuality], () => {
     resizeShader()
 })
 
-watch(() => [goStore.current_game?.current_turn], () => {
-    if (goStore.current_game?.current_turn != goStore.self?.team) {
-        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
-        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
-    } else {
-        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
-        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
-    }
-}, { immediate: true })
+// watch(() => [props.game.currentTurn], () => {
+//     if (props.game.teams.find() != goStore.self?.team) {
+//         gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
+//         gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
+//     } else {
+//         gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
+//         gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
+//     }
+// }, { immediate: true })
 
 
 watch([_colorEnd, _colorStart], () => {
@@ -99,18 +112,16 @@ watch([_colorEnd, _colorStart], () => {
 })
 
 onMounted(async () => {
-    nextTick(() => {
-        recolorShader()
-        initShader()
-        window.addEventListener("resize", resizeShader, true)
-    })
+    recolorShader()
+    await initShader()
+    window.addEventListener("resize", resizeShader, true)
+    emit("ready")
 })
 
 onUnmounted(() => {
     window.removeEventListener("resize", resizeShader)
     killShader()
 })
-
 </script>
 
 <template>
@@ -124,7 +135,6 @@ onUnmounted(() => {
     position: absolute;
     height: 100%;
     width: 100%;
-    image-rendering: smooth;
 }
 
 #background.pixelated {