transition from parchment to downloads

2025-12-18 17:18:09 -06:00
parent 0f4d8e5eb9
commit 4d969864a5
10 changed files with 651 additions and 271 deletions
--- a/ui/components/DownloadsPanel.js
+++ b/ui/components/DownloadsPanel.js
@@ -0,0 +1,94 @@
+class DownloadsPanel extends Shadow {
+    render() {
+        ZStack(() => {
+            input("", "60vw")
+                .backgroundColor("var(--accent3)")
+                .color("var(--accent)")
+                .border("none")
+                .borderTop("1px solid var(--accent)")
+                .borderBottom("1px solid var(--accent)")
+                .outline("0.5px solid black")
+                .borderRadius(7, px)
+                .transition("padding .2s")
+                .padding(0.5, em)
+                .position("absolute")
+                .x(50, vw).y(7, em)
+                .transform("translate(-50%, -50%)")
+                .onInput(() => {
+                    console.log('typing')
+                })
+                .onFocus(function (focusing) {
+                    if(focusing) {
+                        this.style.padding = "1em"
+                        this.style.borderColor = "var(--darkred)"
+                    } else {
+                        this.style.padding = "0.5em"
+                        this.style.borderColor = "var(--accent)"
+                    }
+                })
+            
+            // VStack(() => {
+            //     const json = this.getJSONData()
+
+            //     p(json.length + " Entries")
+            //         .marginBottom(2, em)
+
+            //     // Split into two alternating columns
+            //     const left = []
+            //     const right = []
+                
+            //     for (let i = 0; i < 200; i++) {
+            //         if (i % 2 === 0) {
+            //             left.push(json[i])
+            //         } else {
+            //             right.push(json[i])
+            //         }
+            //     }
+                
+            //     console.log(left)
+            //     HStack(() => {
+            //         // LEFT COLUMN
+            //         VStack(() => {
+            //             for (let item of left) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+
+            //         // RIGHT COLUMN
+            //         VStack(() => {
+            //             for (let item of right) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+            //         .marginLeft(3, em) // spacing between columns
+            //     })
+            // })
+            // .paddingLeft(5, em)
+            // .paddingTop(10, em)
+        })
+    }
+
+    getJSONData() {
+        const script = document.getElementById('jsonData');
+        if (!script) {
+            console.warn('initial-data script not found');
+            return null;
+        }
+
+        try {
+            // script.textContent is the raw JSON string
+            const data = JSON.parse(script.textContent);
+            console.log(data)
+            return data;
+        } catch (err) {
+            console.error('Failed to parse initial-data JSON:', err);
+            return null;
+        }
+    }
+}
+
+register(DownloadsPanel)