From 51ec1161ad58ee6833668aed6e97a6010e2e18c2 Mon Sep 17 00:00:00 2001
From: metacryst <samrussell99@gmail.com>
Date: Mon, 29 Dec 2025 18:35:37 -0600
Subject: [PATCH] performant rendering of 30k

---
 cave/index.js | 59 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/cave/index.js b/cave/index.js
index 3878f41..c1fb227 100644
--- a/cave/index.js
+++ b/cave/index.js
@@ -101,23 +101,54 @@ class Canvas {
         }
 
         let drawSpaces = () => {
-            for(let i=0; i<this.rects.length; i++) {
-                let rect = this.rects[i]
+            ctx.translate(this.c.width / 2, this.c.height / 2);
+            ctx.scale(scale, scale);
+            ctx.translate(-camera.x, -camera.y);
 
-                let x = -300 + i
-                let y = -200 + i
-                let w = 600 + i
-                let h = 400 + i
+            ctx.strokeStyle = this.STROKE_COLOR;
+            ctx.lineWidth = 0.5 / scale;
 
-                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()