change import logic and display

app.js

@@ -1,38 +1,77 @@
 import * as FSHandle from "./store-directory-handle.js";
 
+const H =(type, attributes={}, ...children)=> {
+  const el =document.createElement(type);
+  Object.entries(attributes).forEach(([name, data])=>{
+    if(name.startsWith("on"))
+    {
+      el.addEventListener(name.substring(2), data);
+    }
+    else
+    {
+      el.setAttribute(name, data)
+    }
     
+  });
+  
+  children.forEach(child=>
+  {
+    el.appendChild(typeof child == "string" ? document.createTextNode(child) : child);
+  });
+  return el;
+}
+const button = H("button");
+const listRoom = H("ul");
+
+async function getFolderHandle(dirHandle)
+{
+  try
+  {
+    const workingFolder = await dirHandle.getDirectoryHandle("room");
+
+    const module = await import("./data/room.js");
+    const rooms = module.default(workingFolder);
+    button.innerText = "change directory";
+
+    listRoom.innerHTML = "";
+    Object.entries(rooms).forEach(([roomID, roomData])=>
+    {
+      const listPass = H("ul");
+      Object.entries(roomData.Pass).forEach(([passID, passData])=>{
+        listPass.appendChild(H("li", {}, 
+          H("button", { onclick(){ passData.load();console.log(roomData.Part); } }, passID)
+        ))
+      });
+
+      listRoom.appendChild(
+        H("li", {},
+          H("div", {}, roomID),
+          listPass
+        )
+      );
+    })
 
-async function getFolderHandle(dirHandle) {
-  try {
-    globalThis.FOLDER = await dirHandle.getDirectoryHandle("room");
     return true;
-  } catch (err) {
+  }
+  catch (err)
+  {
+    button.innerText = "select directory";
     console.error("Folder selection cancelled or failed:", err);
     return false;
   }
 }
 
-const d =(...args)=> document.createElement(...args);
 
 let handle = false;
-let valid = false;
-handle = await FSHandle.getDirectoryHandle();
-console.log("handle:", handle);
-if(handle)
-{
-  valid = await getFolderHandle(handle);
-}
 
-const button = d("button");
-button.innerText = valid ? "change directory" : "select directory";
-button.addEventListener("click", async()=>{
+handle = await FSHandle.getDirectoryHandle();
+await getFolderHandle(handle);
+button.addEventListener("click", async()=>
+{
   const directory = await globalThis.showDirectoryPicker();
   await FSHandle.setDirectoryHandle(directory);
   await getFolderHandle(directory);
-  console.log("about to spoof user filesystem as remote...");
-  const module = await import("./data/room.js");
-  console.log("module loaded", module);
-  button.innerText = "change directory"
 });
 
 document.body.appendChild(button);
+document.body.appendChild(listRoom);

data/room.js

@@ -1,7 +1,7 @@
-import {Graph} from "../graph.js";
+import Graph from "../graph.js";
 import User from "./user.js";
 
-Graph(
+export default Graph(
     {
         room_01:{
             user:User,

graph.js

@@ -1,7 +1,7 @@
 /** @import * as TYPES from "./types.ts" */
 
 /** @type {TYPES.GraphBuilder} */
-export default function Builder({user, role, part, desk, pass}, folderHandle, folderName)
+function Builder({user, role, part, desk, pass}, folderHandle, folderName)
 {
 
 // mutate users
@@ -160,13 +160,16 @@ export default function Builder({user, role, part, desk, pass}, folderHandle, fo
 }
 
 /** @type {TYPES.MassDscription} */
-export function Graph(params)
+export default function Graph(params)
 {   
-    Object.entries(params).forEach( ([roomFolderName, roomData])=>
-    {
-        globalThis.ROOMS = Builder(roomData, globalThis.FOLDER, roomFolderName);
-        console.log(globalThis.ROOMS);
-    });
+    return (folderHandle)=>{
+        Object.entries(params).forEach( ([roomFolderName, roomData])=>
+        {
+            params[roomFolderName] = Builder(roomData, folderHandle, roomFolderName);
+        });
+        return params;
+    }
+
 }
 
 const Scan =(desk)=>

types.ts

@@ -36,4 +36,4 @@ export type MassDscription=
 (
     params:Record<string, Parameters<GraphBuilder>[0]>
 )
-=>void
+=>(folder:FileSystemDirectoryHandle)=>Record<string, ReturnType<GraphBuilder>>