performant rendering of 30k

cave/index.js

@@ -101,24 +101,55 @@ class Canvas {
         }
 
         let drawSpaces = () => {
-            for(let i=0; i<this.rects.length; i++) {
-                let rect = this.rects[i]
-
-                let x = -300 + i
-                let y = -200 + i
-                let w = 600 + i
-                let h = 400 + i
-
             ctx.translate(this.c.width / 2, this.c.height / 2);
             ctx.scale(scale, scale);
             ctx.translate(-camera.x, -camera.y);
 
             ctx.strokeStyle = this.STROKE_COLOR;
             ctx.lineWidth = 0.5 / scale;
-                ctx.strokeRect(x, y, w, h);
+
+            const baseRadius = 40;     // distance of first ring
+            const ringSpacing = 70;   // distance between rings
+            const dotRadius = 18;     // circle size
+
+            let index = 0;
+            let ring = 0;
+
+            while (index < this.rects.length) {
+                // how many items fit on this ring
+                const circumference = 2 * Math.PI * (baseRadius + ring * ringSpacing);
+                const itemsInRing = Math.max(6, Math.floor(circumference / (dotRadius * 2.5)));
+
+                for (let i = 0; i < itemsInRing && index < this.rects.length; i++) {
+                    const angle = (i / itemsInRing) * Math.PI * 2;
+
+                    const r = baseRadius + ring * ringSpacing;
+                    const x = Math.cos(angle) * r;
+                    const y = Math.sin(angle) * r;
+
+                    ctx.beginPath();
+                    ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
+                    ctx.stroke();
+
+                    const cssDiameter = dotRadius * 2 * scale;
+
+                    if (cssDiameter >= 30) {
+                        ctx.fillStyle = "#000";
+                        ctx.font = `${3}px Arial`;
+                        ctx.textAlign = "center";
+                        ctx.textBaseline = "middle";
+                        ctx.fillText(this.rects[index].name, x, y);
                     }
+
+
+                    index++;
                 }
 
+                ring++;
+            }
+        };
+
+
         ctx.save()
 
         drawSpaces()