infinity mirror effect

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,50 @@ 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 = () => {
-            ctx.translate(this.c.width / 2, this.c.height / 2);
-            ctx.scale(scale, scale);
-            ctx.translate(-camera.x, -camera.y);
+        let drawSpaces = () => {
+            for(let i=0; i<this.rects.length; i++) {
+                let rect = this.rects[i]
 
-            ctx.strokeStyle = this.STROKE_COLOR;
-            ctx.lineWidth = 0.5 / scale;
-            ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+                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);
+            }
         }
 
         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 +145,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) => {