From 2bee6142be5668aa02b55a23c5b5d90af0de1a79 Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Mon, 2 Dec 2024 20:01:39 -0500
Subject: [PATCH] Revert "Attempt to migrate to a class for handling renders."

This reverts commit ac99ee6dd8ed4d670441a04d84754c36c91c5607.
---
 .../{4-color/index.mdx => 4-color.mdx}        |  0
 .../src/Canvas.tsx                            | 74 ++++++-------------
 2 files changed, 21 insertions(+), 53 deletions(-)
 rename blog/2024-11-15-playing-with-fire/{4-color/index.mdx => 4-color.mdx} (100%)

diff --git a/blog/2024-11-15-playing-with-fire/4-color/index.mdx b/blog/2024-11-15-playing-with-fire/4-color.mdx
similarity index 100%
rename from blog/2024-11-15-playing-with-fire/4-color/index.mdx
rename to blog/2024-11-15-playing-with-fire/4-color.mdx
diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
index 4a93195..9a9c998 100644
--- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
+++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
@@ -10,56 +10,6 @@ function invertImage(sourceImage: ImageData): ImageData {
     return image;
 }
 
-class RenderManager {
-    private isFinished: boolean = false;
-    private painter: Iterator<ImageData> = null;
-    constructor(private readonly setImage: (image: [ImageData]) => void) {
-        requestAnimationFrame(() => this.animate());
-    }
-
-    setPainter(painter: Iterator<ImageData>) {
-        console.log("Received next painter");
-        if (!this) {
-            console.log(this);
-            return;
-        }
-        this.painter = painter;
-    }
-
-    setFinished() {
-        console.log("Received finished");
-        if (!this) {
-            console.log(this);
-            return;
-        }
-        this.isFinished = true;
-    }
-
-    animate() {
-        console.log("Received next frame");
-        if (!this) {
-            console.log(this);
-            return;
-        }
-
-        if (this.isFinished) {
-            return;
-        }
-
-        if (!this.painter) {
-            requestAnimationFrame(() => this.animate());
-        }
-
-        const nextImage = this.painter.next().value;
-        if (nextImage) {
-            console.log("Received next image");
-            this.setImage([nextImage]);
-        }
-
-        requestAnimationFrame(() => this.animate());
-    }
-}
-
 type InvertibleCanvasProps = {
     width: number,
     height: number,
@@ -154,10 +104,28 @@ interface CanvasProps {
  */
 export default function Canvas({width, height, children}: CanvasProps) {
     const [image, setImage] = useState<[ImageData]>(null);
-    const [renderManager, _setRenderManager] = useState<RenderManager>(new RenderManager(setImage));
-    const setPainter = (painter: Iterator<ImageData>) => renderManager.setPainter.bind(renderManager)(painter);
+    const [painterHolder, setPainterHolder] = useState<[Iterator<ImageData>]>(null);
+    useEffect(() => {
+        if (!painterHolder) {
+            return;
+        }
 
-    useEffect(() => () => { renderManager.setFinished.bind(renderManager)(); }, []);
+        const painter = painterHolder[0];
+        const nextImage = painter.next().value;
+        if (nextImage) {
+            setImage([nextImage]);
+            setPainterHolder([painter]);
+        } else {
+            setPainterHolder(null);
+        }
+    }, [painterHolder]);
+
+    const [painter, setPainter] = useState<Iterator<ImageData>>(null);
+    useEffect(() => {
+        if (painter) {
+            setPainterHolder([painter]);
+        }
+    }, [painter]);
 
     width = width ?? 500;
     height = height ?? 500;