performant rendering of 30k

cave/index.js

@@ -24,12 +24,7 @@ class Canvas {
     /* -----------------------------
     Rectangle
     ----------------------------- */
-    rect = {
-        x: -300,
-        y: -200,
-        w: 600,
-        h: 400
-    };
+    rects = [];
 
     resize = () => {
         // Make Canvas Fill Screen
@@ -97,40 +92,81 @@ class Canvas {
         ctx.clearRect(0, 0, this.c.width, this.c.height);
 
         let drawMenus = () => {
-
-            ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform for UI
-            ctx.fillStyle = "rgba(30,30,30,0.8)";
-            ctx.fillRect(10,10,150,100);
-
             ctx.fillStyle = "#FEB279";
-            ctx.fillRect(20,20,120,30);
-            ctx.fillRect(20,60,120,30);
+            ctx.strokeRect(20,20,220,100);
 
             ctx.fillStyle = "#000";
             ctx.font = "60px arial";
-            ctx.fillText("Button 1", 20, 40);
-            ctx.fillText("Button 2", 20, 80);
+            // ctx.fillText("Button 1", 20, 100);
         }
 
-        let drawSpace = () => {
+        let drawSpaces = () => {
             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(rect.x, rect.y, rect.w, rect.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()
 
-        drawSpace()
+        drawSpaces()
 
         ctx.restore()
 
         drawMenus(ctx);
     }
 
+    async fetchDownloads() {
+        let res = await fetch("/downloads", {method: "GET"})
+        console.log(res)
+        let json = await res.json()
+        console.log(json)
+        this.rects = json
+    }
+
     constructor() {
         document.body.appendChild(this.c)
         this.ctx = this.c.getContext("2d");
@@ -140,6 +176,8 @@ class Canvas {
 
         this.c.addEventListener("wheel", this.onWheel, { passive: false });
         this.draw()
+
+        this.fetchDownloads()
     }
 }
 

flame/index.js

@@ -8,18 +8,21 @@ import forms from 'forms'
 
 import { initWebSocket } from './ws.js'
 import util from './util.js'
+import getAllDownloadsFiles from "./getDownloads.js"
 
 export default class Server {
     store;
 
     registerRoutes(router) {
+        router.get('/downloads', this.getDownloads)
         router.get('/*', this.get)
         return router
     }
 
-    index = async (req, res) => {
-        let filePath = path.join(util.CAVE_PATH, "index.html");
-        res.sendFile(filePath)
+    getDownloads = async (req, res) => {
+        let arr = await getAllDownloadsFiles()
+        console.log(arr)
+        res.json(arr)
     }
 
     get = async (req, res) => {