:bug: Small bugfixes

1 files changed, 21 insertions, 6 deletions

diff --git a/src_frontend/Components/Editor/Simulation.svelte b/src_frontend/Components/Editor/Simulation.svelte
index abe202c..86cc66c 100644
--- a/src_frontend/Components/Editor/Simulation.svelte
+++ b/src_frontend/Components/Editor/Simulation.svelte
@@ -5,6 +5,7 @@
 
     let svg;
     let pixels = [];
+    let pixelBuffer = [];
 
     function updateMatrix(matrix) {
         if (matrix == null) { return; }
@@ -24,12 +25,26 @@
     }
 
     async function updateColors(colors) {
-        for (let i = 0; i+2 < colors.length; i+=3) {
-            try {
-            document.querySelector("#sim-pixel-"+(i/3)).style.setProperty("fill", `rgb(${colors[i]}, ${colors[i+1]}, ${colors[i+2]})`);
-            } catch(e) {}
-        }
+        pixelBuffer = colors;
+    }
+
+    async function flushPixelBuffer() {
+        //console.log(pixelBuffer);
+        window.requestAnimationFrame((ts) => {
+            for (let i = 0; i+2 < pixelBuffer.length; i+=3) {
+                try {
+                    document.querySelector("#sim-pixel-"+(i/3))
+                            .style
+                            .setProperty(
+                                "fill",
+                                `rgb(${pixelBuffer[i]}, ${pixelBuffer[i+1]}, ${pixelBuffer[i+2]})`);
+                } catch(e) {
+                    console.log(e);
+                }
+            }
+        });
     }
+    setInterval(flushPixelBuffer, 50);
 
     onMount(() => {
         authorizedSocket.on("matrix", updateMatrix);
@@ -58,4 +73,4 @@
             <rect id="sim-pixel-{pixel.n}" x="{pixel.x*2+1}" y="{pixel.y*2+1}" width="1" height="1" style="fill:rgb(0,0,0);filter:blur(0.2px);" />
         {/each}
     </svg>
-</div>
\ No newline at end of file
+</div>