Animate shader background

components/AnimatedBackground.vue

@@ -1,21 +1,31 @@
 <script setup lang="ts">
 const settingsStore = useSettingsStore()
 
+import gsap from 'gsap';
 import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
+import goStore from '~/netcode';
 const worker = new ShaderWorker()
 
 const canvas = ref<HTMLCanvasElement | null>(null)
 const canvas_resize_temp = ref<HTMLCanvasElement | null>(null)
 
+
 export interface Props {
     colorStart?: [number, number, number]
     colorEnd?: [number, number, number]
 }
+
+
+
 const props = withDefaults(defineProps<Props>(), {
     colorStart: () => [0, .3, 0],
     colorEnd: () => [0, 1, 0]
 })
 
+const _colorStart = reactive(props.colorStart)
+const _colorEnd = reactive(props.colorEnd)
+
+
 function initShader() {
     if (!canvas.value) { return }
     const offscreen = canvas.value?.transferControlToOffscreen()
@@ -34,8 +44,8 @@ function initShader() {
 function recolorShader() {
     worker.postMessage({
         command: 'recolorShader',
-        colorStart: props.colorStart,
-        colorEnd: props.colorEnd
+        colorStart: [..._colorStart],
+        colorEnd: [..._colorEnd]
     })
 }
 
@@ -73,7 +83,18 @@ watch(() => [settingsStore.shaderQuality], () => {
     resizeShader()
 })
 
-watch(() => [props.colorEnd, props.colorStart], () => {
+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([_colorEnd, _colorStart], () => {
     recolorShader()
 })