wip

frontend/src/App.js

@@ -40,6 +40,7 @@ function App() {
   const worldsMode = true;
   const [openedWorldId, setOpenedWorldId] = useState(0);
   const [activeWorld, setActiveWorld] = useState(null);
+  const [surroundingWorlds, setSurroundingWorlds] = useState([]);
 
   // Page management
   useEffect(() => {
@@ -52,10 +53,30 @@ function App() {
         if (response.data === undefined || response.data === null) {
           setActiveWorld(null);
           setOpenedWorldId(0);
+          setSurroundingWorlds([]);
           return;
+        } else {
+          setActiveWorld(response.data);
         }
 
         setOpenedWorldId(response.data);
+
+        // Fetch surrounding worlds
+        const surroundingResponse = await fetchWrapper('get-all-worlds');
+        if (surroundingResponse.data) {
+          // Filter out current world and take up to 12 worlds
+          const otherWorlds = surroundingResponse.data
+            .filter((world) => world.worldId !== response.data)
+            .slice(0, 12);
+
+          // Pad array with null values if less than 12 worlds
+          const paddedWorlds = [...otherWorlds];
+          while (paddedWorlds.length < 12) {
+            paddedWorlds.push(null);
+          }
+
+          setSurroundingWorlds(paddedWorlds);
+        }
       } else {
         const response = await fetchWrapper('get-world?worldId=0');
         if (response.data) {
@@ -1242,6 +1263,7 @@ function App() {
           setIsEraserMode={setIsEraserMode}
           clearExtraPixel={clearExtraPixel}
           setLastPlacedTime={setLastPlacedTime}
+          surroundingWorlds={surroundingWorlds}
         />
         {(!isMobile || activeTab === tabs[0]) && (
           <div className='App__logo'>

frontend/src/canvas/Canvas.js

@@ -26,6 +26,14 @@ const Canvas = (props) => {
 
   useEffect(() => {
     const fetchCanvas = async () => {
+      if (props.isEmpty) {
+        const canvas = props.canvasRef.current;
+        const context = canvas.getContext('2d');
+        context.fillStyle = '#f0f0f0';
+        context.fillRect(0, 0, props.width, props.height);
+        return;
+      }
+
       try {
         if (props.colors.length === 0) {
           return;
@@ -80,7 +88,7 @@ const Canvas = (props) => {
     };
 
     fetchCanvas();
-  }, [props.width, props.height, props.colors, props.openedWorldId]);
+  }, [props.colors, props.openedWorldId, props.isEmpty]);
 
   return (
     <canvas

frontend/src/canvas/CanvasContainer.js

@@ -667,7 +667,7 @@ const CanvasContainer = (props) => {
         </div>
 
         {/* 12 Surrounding Canvases */}
-        {Array.from({ length: 12 }).map((_, index) => {
+        {props.surroundingWorlds.slice(0, 12).map((world, index) => {
           const gridPositions = [
             { gridColumn: '2', gridRow: '1' }, // Top
             { gridColumn: '3', gridRow: '1' }, // Top
@@ -691,12 +691,18 @@ const CanvasContainer = (props) => {
                 width: Math.round(256 * canvasScale) + 'px',
                 height: Math.round(192 * canvasScale) + 'px',
                 gridColumn: gridPositions[index].gridColumn,
-                gridRow: gridPositions[index].gridRow
+                gridRow: gridPositions[index].gridRow,
+                cursor: world ? 'pointer' : 'default'
               }}
               key={`surrounding-${index}`}
+              onClick={() => {
+                if (world) {
+                  window.location.href = `/worlds/${world.name}`;
+                }
+              }}
             >
               <Canvas
-                openedWorldId={props.openedWorldId}
+                openedWorldId={world ? world.worldId : null}
                 canvasRef={React.createRef()}
                 width={256}
                 height={192}
@@ -706,6 +712,7 @@ const CanvasContainer = (props) => {
                 }}
                 colors={props.colors}
                 pixelClicked={pixelClicked}
+                isEmpty={!world}
               />
             </div>
           );