Fix : prevent render retrigger when color changes

assets/workers/ShaderWorker.ts

@@ -11,11 +11,14 @@ const shaderOptions = { quality: 6, framerate: 1000 / 60 }
 const bounds = { left: 0, bottom: 0 }
 const screen = { width: 0, height: 0, devicePixelRatio: 0 }
 
+const _colorStart = [0, 0, 0]
+const _colorEnd = [0, 0, 0]
+
 let fragmentShader = resolveLygia(noise);
 
 let canvas: OffscreenCanvas
 
-async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStart: [number, number, number], _colorEnd: [number, number, number]) {
+async function main(canvas: OffscreenCanvas, fragmentShader2: string) {
     const gl = canvas.getContext("webgl");
     if (!gl) {
         return;
@@ -109,9 +112,7 @@ async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStar
 
 
         const aspectRatio = Math.max(screen.width, screen.height) * screen.devicePixelRatio
-
         gl2.uniform2f(offset, bounds.left, -bounds.bottom);
-        // console.log(canvas.getBoundingClientRect().left * window.devicePixelRatio)
         gl2.uniform1i(quality, shaderOptions.quality)
         gl2.uniform2f(resolutionLocation, aspectRatio, aspectRatio);
         gl2.uniform3f(colorStart, _colorStart[0], _colorStart[1], _colorStart[2]);
@@ -122,9 +123,11 @@ async function main(canvas: OffscreenCanvas, fragmentShader2: string, _colorStar
             0,     // offset
             6,     // num vertices to process
         );
+        requestAnimationFrame(render)
     }
-    self.clearInterval(interval)
+    // self.clearInterval(interval)
-    interval = self.setInterval(() => requestAnimationFrame(render), shaderOptions.framerate)
+    // interval = self.setInterval(() => requestAnimationFrame(render), shaderOptions.framerate)
+    requestAnimationFrame(render)
 }
 
 self.addEventListener("message", (e) => {
@@ -132,25 +135,31 @@ self.addEventListener("message", (e) => {
     if (data.command == "initShader") {
         canvas = data.canvas
     } else if (data.command == "killShader") {
+        console.log("killShader")
         self.clearInterval(interval)
     } else {
+        console.log(screen.devicePixelRatio)
         bounds.bottom = data.bounds.bottom
         bounds.left = data.bounds.left
         screen.devicePixelRatio = data.screen.devicePixelRatio
         screen.width = data.screen.width
         screen.height = data.screen.height
+        _colorStart[0] = data.colorStart[0]
+        _colorStart[1] = data.colorStart[1]
+        _colorStart[2] = data.colorStart[2]
+        _colorEnd[0] = data.colorEnd[0]
+        _colorEnd[1] = data.colorEnd[1]
+        _colorEnd[2] = data.colorEnd[2]
         if (data.command == "reloadShader") {
             shaderOptions.quality = data.shaderOptions.quality
             shaderOptions.framerate = data.shaderOptions.framerate
-
+            reloadShader()
-            reloadShader(data.canvas, data.colorStart, data.colorEnd)
         }
     }
 })
 
-async function reloadShader(canvas: OffscreenCanvas, _colorStart: [number, number, number], _colorEnd: [number, number, number]) {
+async function reloadShader() {
     if (!canvas) { return }
     let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + shaderOptions.quality);
-    self.clearInterval(interval)
+    main(canvas, fragmentShader2);
-    main(canvas, fragmentShader2, _colorStart, _colorEnd);
 }

components/AnimatedBackground.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const settingsStore = useSettingsStore()
-import { off } from 'process';
+
 import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
 const worker = new ShaderWorker()
 
@@ -49,6 +49,8 @@ function resizeShader() {
         command: 'changeBounds',
         bounds: { left: bounds.left, bottom: bounds.bottom },
         screen: { height: window.screen.height, width: window.screen.width, devicePixelRatio },
+        colorStart: props.colorStart,
+        colorEnd: props.colorEnd
     })
 }
 
@@ -58,11 +60,22 @@ function endShader() {
     })
 }
 
-watch(() => [settingsStore.shaderQuality, settingsStore.shaderFramerate, props.colorEnd, props.colorStart], () => {
+watch(() => [settingsStore.shaderQuality, settingsStore.shaderFramerate], () => {
     safeReloadShader()
 })
 
 
+let has_resized = false
+watch(() => [props.colorEnd, props.colorStart], () => {
+    if (!has_resized) {
+        has_resized = true
+        nextTick(() => {
+            resizeShader()
+            has_resized = false
+        })
+    }
+})
+
 onMounted(async () => {
     nextTick(() => {
         initShader()

components/PlayerSlot.vue

@@ -60,7 +60,6 @@ function can_buy_fire_gem(): boolean {
 
 function checkEndTurn() {
     // TODO: Add a confirmation dialog if resources are left
-    console.log("Checking end turn")
     if (
         (!warning.value)
         && has_actions_remaining()) {