ring of worlds

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

Hide file tree

Showing 2 changed files with 125 additions and 61 deletions.
diff --git a/frontend/src/canvas/CanvasContainer.css b/frontend/src/canvas/CanvasContainer.css
@@ -6,15 +6,17 @@
 }
 
 .CanvasContainer__grid {
-  /* background: rgba(0, 0, 0, 0.2); */
   padding: 20px;
   border-radius: 8px;
 }
 
+.CanvasContainer__grid > div {
+  transition: all 0.3s ease-in-out;
+}
+
 .CanvasContainer__grid > div:hover {
-  opacity: 1;
-  transform: scale(1.02);
-  transition: all 0.2s ease;
+  opacity: 1 !important;
+  transform: translate(-50%, -50%) scale(1.02) !important;
   z-index: 1;
 }
 

diff --git a/frontend/src/canvas/CanvasContainer.js b/frontend/src/canvas/CanvasContainer.js
@@ -195,19 +195,19 @@ const CanvasContainer = (props) => {
   };
 
   useEffect(() => {
-    canvasContainerRef.current.addEventListener('wheel', zoom);
-    canvasContainerRef.current.addEventListener('touchstart', handleTouchStart);
-    canvasContainerRef.current.addEventListener('touchmove', handleTouchMove);
+    const currentRef = canvasContainerRef.current;
+    if (!currentRef) return;
+
+    currentRef.addEventListener('wheel', zoom);
+    currentRef.addEventListener('touchstart', handleTouchStart);
+    currentRef.addEventListener('touchmove', handleTouchMove);
+
     return () => {
-      canvasContainerRef.current.removeEventListener('wheel', zoom);
-      canvasContainerRef.current.removeEventListener(
-        'touchstart',
-        handleTouchStart
-      );
-      canvasContainerRef.current.removeEventListener(
-        'touchmove',
-        handleTouchMove
-      );
+      if (currentRef) {
+        currentRef.removeEventListener('wheel', zoom);
+        currentRef.removeEventListener('touchstart', handleTouchStart);
+        currentRef.removeEventListener('touchmove', handleTouchMove);
+      }
     };
   }, [canvasScale, canvasX, canvasY, touchInitialDistance]);
 
@@ -563,6 +563,42 @@ const CanvasContainer = (props) => {
   // Add state for hover
   const [hoveredWorld, setHoveredWorld] = useState(null);
 
+  const getGridPositions = (totalWorlds) => {
+    if (totalWorlds <= 0) return [];
+
+    // Calculate the required grid size
+    // Start with 1x1, then 3x3, 5x5, 7x7, etc.
+    let gridSize = 1;
+    while (gridSize * gridSize < totalWorlds) {
+      gridSize += 2;
+    }
+
+    const positions = [];
+    const center = Math.floor(gridSize / 2);
+
+    // Generate positions in a spiral pattern from center
+    for (let layer = 0; layer <= center; layer++) {
+      if (layer === 0) {
+        // Center position
+        positions.push([0, 0]);
+        continue;
+      }
+
+      // Generate positions for current layer (ring)
+      for (let i = -layer; i <= layer; i++) {
+        for (let j = -layer; j <= layer; j++) {
+          // Skip if not on the edge of the current layer
+          if (Math.abs(i) !== layer && Math.abs(j) !== layer) continue;
+          positions.push([i, j]);
+        }
+      }
+    }
+
+    return positions.slice(0, totalWorlds);
+  };
+
+  console.log('all worlds: ', props.worlds);
+
   return (
     <div
       ref={canvasContainerRef}
@@ -573,58 +609,84 @@ const CanvasContainer = (props) => {
       <div
         className='CanvasContainer__grid'
         style={{
-          display: 'grid',
-          gridTemplateColumns: `repeat(${GRID_SIZE}, ${props.width}px)`,
-          gridGap: '20px',
           position: 'absolute',
           top: '50%',
           left: '50%',
           transform: `translate(-50%, -50%) scale(${canvasScale})`,
           transformOrigin: 'center'
         }}
       >
-        {props.worlds?.map((world) => {
-          const isCenter = world.worldId === props.openedWorldId;
-
-          return (
-            <div
-              key={`grid-${world.worldId}`}
-              style={{
-                position: 'relative',
-                width: `${props.width}px`,
-                height: `${props.height}px`,
-                border: '1px solid rgba(255, 255, 255, 0.1)',
-                cursor: 'pointer',
-                opacity: isCenter ? 1 : 0.7
-              }}
-              onMouseEnter={() => setHoveredWorld(world.worldId)}
-              onMouseLeave={() => setHoveredWorld(null)}
-              onClick={() => {
-                if (!isCenter) {
-                  props.setOpenedWorldId(world.worldId);
-                  // Update URL
-                  window.history.pushState({}, '', `/worlds/${world.worldId}`);
-                }
-              }}
-            >
-              <CanvasContainerItem
-                height={props.height}
-                width={props.width}
-                canvasX={0}
-                canvasY={0}
-                titleScale={titleScale}
-                canvasScale={1}
-                selectedBoxShadow={selectedBoxShadow}
-                selectedBackgroundColor={selectedBackgroundColor}
-                {...props}
-                pixelClicked={isCenter ? pixelClicked : () => {}}
-                openedWorldId={world.worldId}
-                showTitle={hoveredWorld === world.worldId}
-                worldName={world.name}
-              />
-            </div>
-          );
-        })}
+        {(() => {
+          if (!props.worlds || !props.worlds.length) return null;
+
+          const positions = getGridPositions(props.worlds.length);
+          const centerIndex = 0; // Center position is always first
+
+          return props.worlds.map((world, index) => {
+            if (!world) return null;
+
+            const isCenter = world.worldId === props.openedWorldId;
+            let position = positions[index];
+
+            // Swap position with center if this is the selected world
+            if (isCenter && index !== centerIndex) {
+              position = positions[centerIndex];
+            } else if (!isCenter && index === centerIndex) {
+              const selectedIndex = props.worlds.findIndex(
+                (w) => w?.worldId === props.openedWorldId
+              );
+              if (selectedIndex !== -1 && selectedIndex < positions.length) {
+                position = positions[selectedIndex];
+              }
+            }
+
+            return (
+              <div
+                key={`grid-${world.worldId}`}
+                style={{
+                  position: 'absolute',
+                  width: `${props.width}px`,
+                  height: `${props.height}px`,
+                  left: `${position[0] * (props.width + 20)}px`,
+                  top: `${position[1] * (props.height + 20)}px`,
+                  transform: `translate(-50%, -50%)`,
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
+                  cursor: 'pointer',
+                  opacity: isCenter ? 1 : 0.7,
+                  transition: 'all 0.3s ease-in-out'
+                }}
+                onMouseEnter={() => setHoveredWorld(world.worldId)}
+                onMouseLeave={() => setHoveredWorld(null)}
+                onClick={() => {
+                  if (!isCenter) {
+                    props.setOpenedWorldId(world.worldId);
+                    window.history.pushState(
+                      {},
+                      '',
+                      `/worlds/${world.worldId}`
+                    );
+                  }
+                }}
+              >
+                <CanvasContainerItem
+                  height={props.height}
+                  width={props.width}
+                  canvasX={0}
+                  canvasY={0}
+                  titleScale={titleScale}
+                  canvasScale={1}
+                  selectedBoxShadow={selectedBoxShadow}
+                  selectedBackgroundColor={selectedBackgroundColor}
+                  {...props}
+                  pixelClicked={isCenter ? pixelClicked : () => {}}
+                  openedWorldId={world.worldId}
+                  showTitle={hoveredWorld === world.worldId}
+                  worldName={world.name}
+                />
+              </div>
+            );
+          });
+        })()}
       </div>
     </div>
   );