ring of worlds

keep-starknet-strange · Dec 13, 2024 · 9b661c0 · 9b661c0
1 parent a0178fb
commit 9b661c0
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/frontend/src/canvas/Canvas.js b/frontend/src/canvas/Canvas.js
@@ -12,20 +12,41 @@ const Canvas = (props) => {
   );
 
   useEffect(() => {
-    const fetchCanvas = async () => {
+    const renderCanvas = async () => {
       try {
-        if (props.colors.length === 0) {
-          return;
-        }
+        if (props.colors.length === 0) return;
+
         const canvas = props.canvasRef.current;
         const context = canvas.getContext('2d');
         context.imageSmoothingEnabled = false;
 
+        // If we have direct pixel data, use it
+        if (props.pixelData) {
+          const imageDataArray = [];
+          for (let i = 0; i < props.pixelData.length; i++) {
+            const color = '#' + props.colors[props.pixelData[i]] + 'FF';
+            const [r, g, b, a] = color
+              .match(/\w\w/g)
+              .map((x) => parseInt(x, 16));
+            imageDataArray.push(r, g, b, a);
+          }
+          const uint8ClampedArray = new Uint8ClampedArray(imageDataArray);
+          const imageData = new ImageData(
+            uint8ClampedArray,
+            props.width,
+            props.height
+          );
+          draw(context, imageData);
+          return;
+        }
+
+        // Otherwise fetch from backend
         let getCanvasEndpoint =
           backendUrl +
           (props.openedWorldId === null
             ? '/get-canvas'
             : `/get-world-canvas?worldId=${props.openedWorldId}`);
+
         let response = await fetch(getCanvasEndpoint);
         let canvasData = await response.arrayBuffer();
 
@@ -66,8 +87,14 @@ const Canvas = (props) => {
       }
     };
 
-    fetchCanvas();
-  }, [props.width, props.height, props.colors, props.openedWorldId]);
+    renderCanvas();
+  }, [
+    props.width,
+    props.height,
+    props.colors,
+    props.openedWorldId,
+    props.pixelData
+  ]);
 
   return (
     <canvas

diff --git a/frontend/src/canvas/CanvasContainer.js b/frontend/src/canvas/CanvasContainer.js
@@ -599,6 +599,32 @@ const CanvasContainer = (props) => {
 
   console.log('all worlds: ', props.worlds);
 
+  useEffect(() => {
+    const loadWorldsData = async () => {
+      if (!props.worlds) return;
+
+      // Load data for each world if not already loaded
+      for (const world of props.worlds) {
+        if (!world.pixelData) {
+          try {
+            const response = await fetchWrapper(
+              `get-world-data/${world.worldId}`
+            );
+            // You'll need to implement this function to update the world data
+            props.updateWorldData(world.worldId, response.data);
+          } catch (error) {
+            console.error(
+              `Failed to load data for world ${world.worldId}:`,
+              error
+            );
+          }
+        }
+      }
+    };
+
+    loadWorldsData();
+  }, [props.worlds]);
+
   return (
     <div
       ref={canvasContainerRef}
@@ -682,6 +708,9 @@ const CanvasContainer = (props) => {
                   openedWorldId={world.worldId}
                   showTitle={hoveredWorld === world.worldId}
                   worldName={world.name}
+                  pixelData={world.pixelData}
+                  canvasData={world.canvasData}
+                  isPreview={!isCenter}
                 />
               </div>
             );

diff --git a/frontend/src/canvas/CanvasContainerItem.js b/frontend/src/canvas/CanvasContainerItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Canvas from './Canvas';
 import ExtraPixelsCanvas from './ExtraPixelsCanvas';
 import TemplateOverlay from './TemplateOverlay';
@@ -18,6 +18,9 @@ const CanvasContainerItem = ({
   showTitle,
   ...props
 }) => {
+  const worldCanvasRef = useRef(null);
+  const worldExtraPixelsCanvasRef = useRef(null);
+
   return (
     <div
       style={{
@@ -59,7 +62,7 @@ const CanvasContainerItem = ({
       )}
       <Canvas
         openedWorldId={props.openedWorldId}
-        canvasRef={props.canvasRef}
+        canvasRef={worldCanvasRef}
         width={width}
         height={height}
         style={{
@@ -68,10 +71,12 @@ const CanvasContainerItem = ({
         }}
         colors={props.colors}
         pixelClicked={props.pixelClicked}
+        worldId={props.worldId}
+        pixelData={props.pixelData}
       />
       {props.availablePixels > 0 && (
         <ExtraPixelsCanvas
-          extraPixelsCanvasRef={props.extraPixelsCanvasRef}
+          extraPixelsCanvasRef={worldExtraPixelsCanvasRef}
           width={width}
           height={height}
           style={{