Major refactoring

8 files changed, 378 insertions, 272 deletions

diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js
index a611b59..fbde422 100644
--- a/src/js/ui/footer.js
+++ b/src/js/ui/footer.js
@@ -1,43 +1,46 @@
 import { makeElement } from "../arching-kaos-generator.js";
 
-var footer = {
-    element:"div",
-    id:"footer",
-    innerHTML:[
-        {
-            element:"div",
-            innerHTML:[
-                {element:"p", innerText:"Arching Kaos 2019-2024"},
-                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
-                {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
-                {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
-            ]
-        },
-        {
-            element:"span",
-            innerText:"::"
-        },
+export function footerSpawn()
+{
+    var footer = {
+        element:"div",
+        id:"footer",
+        innerHTML:[
+            {
+                element:"div",
+                innerHTML:[
+                    {element:"p", innerText:"Arching Kaos 2019-2024"},
+                    {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
+                    {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
+                    {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
+                ]
+            },
+            {
+                element:"span",
+                innerText:"::"
+            },
 
-        {
-            element:"div",
-            innerHTML:[
-                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
-            ]
-        },
-        {
-            element:"span",
-            innerText:"::"
-        },
-        {
-            element:"div",
-            innerHTML:[
-                {
-                    element:"p",
-                    innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
-                }
-            ]
-        }
-    ]
-};
+            {
+                element:"div",
+                innerHTML:[
+                    {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
+                ]
+            },
+            {
+                element:"span",
+                innerText:"::"
+            },
+            {
+                element:"div",
+                innerHTML:[
+                    {
+                        element:"p",
+                        innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
+                    }
+                ]
+            }
+        ]
+    };
 
-makeElement(footer, document.querySelector('.footer'));
+    makeElement(footer, document.querySelector('.footer'));
+}
diff --git a/src/js/ui/header.js b/src/js/ui/header.js
index 18d8c2e..27c16ac 100644
--- a/src/js/ui/header.js
+++ b/src/js/ui/header.js
@@ -1,16 +1,19 @@
 import { makeElement } from "../arching-kaos-generator.js";
 
-var header = {
-    element: "div",
-    id: 'header',
-    className: 'header',
-    innerHTML: [
-        { element: "a", id:"logo-button", innerHTML:[
-            {element: "img", src:"./img/header-logo.png" }
-        ]},
-        { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
-    ],
-    onclick: 'menusel({id:"#/welcome-section"});'
-}
+export function headerSpawn()
+{
+    var header = {
+        element: "div",
+        id: 'header',
+        className: 'header',
+        innerHTML: [
+            { element: "a", id:"logo-button", innerHTML:[
+                {element: "img", src:"./img/header-logo.png" }
+            ]},
+            { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
+        ],
+        onclick: 'menusel({id:"#/welcome-section"});'
+    }
 
-makeElement(header, document.querySelector('#logo-title-placeholder'));
+    makeElement(header, document.querySelector('#logo-title-placeholder'));
+}
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
index f57be59..623166f 100644
--- a/src/js/ui/main.js
+++ b/src/js/ui/main.js
@@ -1,34 +1,97 @@
 import { makeElement } from "../arching-kaos-generator.js";
 
-var scripts = [
-    {
-        element:"script",
-        type:"module",
-        src:"./js/ui/sections/welcomeSection.js"
-    },
-    {
-        element:"script",
-        type:"module",
-        src:"./js/ui/sections/chatSection.js"
-    },
-    {
-        element:"script",
-        type:"module",
-        src:"./js/ui/sections/notFoundSection.js"
-    },
-    {
-        element:"script",
-        type:"module",
-        src:"./js/ui/sections/settingsSection.js"
-    },
+export function mainSpawn()
+{
+    var scripts = [
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/aboutSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/akNodeInfoSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/chatSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/commentsSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/filesSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/mixtapesSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/myPageSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/newsSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/notFoundSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/radioSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/settingsSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/statsSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/stellarBalancesSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/stellarDataConfigSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/stellarSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/welcomeSection.js"
+        },
+        {
+            element:"script",
+            type:"module",
+            src:"./js/ui/sections/zchainDataSection.js"
+        }
+    ];
+
+    for ( var i = 0; i < scripts.length; i++ )
     {
-        element:"script",
-        type:"module",
-        src:"./js/ui/sections/radioSection.js"
+        makeElement(scripts[i], document.querySelector('body'));
     }
-];
-
-for ( var i = 0; i < scripts.length; i++ )
-{
-    makeElement(scripts[i], document.querySelector('body'));
 }
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
index 6201e2b..5c0e0bf 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -1,28 +1,13 @@
 import { makeElement } from "../arching-kaos-generator.js";
+import { headerSpawn } from "./header.js";
+import { menuSpawn } from "./menu.js";
+import { mainSpawn } from "./main.js";
+import { footerSpawn } from "./footer.js";
 
-var scripts = [
-    {
-        element:"script",
-        type: "module",
-        src:"./js/ui/header.js"
-    },
-    {
-        element:"script",
-        type: "module",
-        src:"./js/ui/menu.js"
-    },
-    {
-        element:"script",
-        type: "module",
-        src:"./js/ui/main.js"
-    },
-    {
-        element:"script",
-        type: "module",
-        src:"./js/ui/footer.js"
-    }
-]
-for ( var i = 0; i < scripts.length; i++ )
+export function mainLayoutSpawn()
 {
-    makeElement(scripts[i], document.querySelector('body'));
+    headerSpawn();
+    menuSpawn();
+    mainSpawn();
+    footerSpawn();
 }
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
index 5344966..1c4a8e3 100644
--- a/src/js/ui/menu.js
+++ b/src/js/ui/menu.js
@@ -6,77 +6,118 @@
  *
  */
 import { makeElement } from "../arching-kaos-generator.js";
+import { locationHashSetter } from "../arching-kaos-spa-router.js";
+import { mainContainer } from "../app.js";
 
-var menuButton = {
-    element: "button",
-    id:"mobile-menu",
-    innerText:"Show menu"
-};
+export function doubleFloorMenu()
+{
+    return document.querySelector('#double-floor');
+}
+export function upperFloor()
+{
+    return document.querySelector('.upper-floor');
+}
 
-makeElement(menuButton, document.querySelector('#menu-placeholder'));
-
-document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
-
-var menuLayout = {
-    element: 'nav', id:"double-floor", innerHTML:[
-        { element: "div", id:"menu", className:"upper-floor", innerHTML: [
-            { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
-            { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
-            { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
-            { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
-            { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
-            { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
-            { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
-            { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
-        ]
-        },
-        { element: "div", id:"menu", className:"lower-floor"}
-    ]
-};
+export function lowerFloor()
+{
+    return document.querySelector('.lower-floor');
+}
 
-makeElement(menuLayout, document.querySelector('#menu-placeholder'));
-
-var modulesSubmenuTemplate = {
-    element: 'div',
-    className:"dropdown",
-    id:"modules-submenu",
-    innerHTML: [
-        { element:'button', onclick:"modulesSubToggle()", innerText:".."},
-        { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
-        { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
-        { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
-        { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
-    ]
-};
+export function modulesSubmenu()
+{
+    return document.querySelector('#modules-submenu');
+}
 
-makeElement(modulesSubmenuTemplate, document.querySelector('.lower-floor'));
+export function exploreSubmenu()
+{
+    return document.querySelector('#explore-submenu');
+}
 
-var exploreSubmenuTemplate = {
-    element: 'div',
-    className:"dropdown",
-    id:"explore-submenu",
-    innerHTML: [
-        { element:'button', onclick:"exploreSubToggle()", innerText:".."},
-        { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
-        { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
-    ]
-};
-makeElement(exploreSubmenuTemplate, document.querySelector('.lower-floor'));
-
-var stellarSubmenuTemplate = {
-    element: 'div',
-    className:"dropdown",
-    id:"stellar-submenu",
-    innerHTML: [
-        { element:'button', onclick:"stellarSubToggle()", innerText:".."},
-        { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
-        { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
-        { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
-        { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
-    ]
-};
+export function stellarSubmenu()
+{
+    return document.querySelector('#stellar-submenu');
+}
+
+
+export function menuSpawn()
+{
+    var menuButton = {
+        element: "button",
+        id:"mobile-menu",
+        innerText:"Show menu"
+    };
+
+    makeElement(menuButton, document.querySelector('#menu-placeholder'));
+
+    document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
+
+    var menuLayout = {
+        element: 'nav', id:"double-floor", innerHTML:[
+            { element: "div", id:"menu", className:"upper-floor", innerHTML: [
+                { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
+                { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
+                { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
+                { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
+                { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
+                { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
+                { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
+                { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
+            ]
+            },
+            { element: "div", id:"menu", className:"lower-floor"}
+        ]
+    };
+
+    makeElement(menuLayout, document.querySelector('#menu-placeholder'));
+
+    var modulesSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"modules-submenu",
+        innerHTML: [
+            { element:'button', onclick:"modulesSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
+            { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
+            { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
+            { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
+        ]
+    };
+
+    makeElement(modulesSubmenuTemplate, lowerFloor());
+
+    var exploreSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"explore-submenu",
+        innerHTML: [
+            { element:'button', onclick:"exploreSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
+            { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
+        ]
+    };
+    makeElement(exploreSubmenuTemplate, lowerFloor());
+
+    var stellarSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"stellar-submenu",
+        innerHTML: [
+            { element:'button', onclick:"stellarSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
+            { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
+            { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
+            { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
+        ]
+    };
+
+    makeElement(stellarSubmenuTemplate, lowerFloor());
 
-makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
+    upperFloor().style.display = 'flex';
+    lowerFloor().style.display = 'none';
+    modulesSubmenu().style.display = 'none';
+    exploreSubmenu().style.display = 'none';
+    stellarSubmenu().style.display = 'none';
+}
 
 /*
  * Menu bar management
@@ -84,70 +125,61 @@ makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
  * We change the visible floor according to menu selection.
  *
  */
-var upperFloor = document.querySelector('.upper-floor');
-var lowerFloor = document.querySelector('.lower-floor');
-var doubleFloorMenu = document.querySelector('#double-floor'); 
-
-upperFloor.style.display = 'flex';
-lowerFloor.style.display = 'none';
 
-var modulesSubmenu = document.querySelector('#modules-submenu');
-modulesSubmenu.style.display = 'none';
 export function modulesSubToggle(){
-    modulesSubmenu.style.display = modulesSubmenu.style.display === 'none' ? 'flex' : 'none';
-    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
-    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+    modulesSubmenu().style.display = modulesSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
 }
 
-var exploreSubmenu = document.querySelector('#explore-submenu');
-exploreSubmenu.style.display = 'none';
 export function exploreSubToggle(){
-    exploreSubmenu.style.display = exploreSubmenu.style.display === 'none' ? 'flex' : 'none';
-    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
-    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+    exploreSubmenu().style.display = exploreSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
 }
 
-var stellarSubmenu = document.querySelector('#stellar-submenu');
-stellarSubmenu.style.display = 'none';
 export function stellarSubToggle(){
-    stellarSubmenu.style.display = stellarSubmenu.style.display === 'none' ? 'flex' : 'none';
-    upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
-    lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
+    stellarSubmenu().style.display = stellarSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
 }
 /*
  * Array of all the menu-panes IDs
  */
-var menuids = [
-    '#welcome-section',
-    '#about-section',
-    '#zchain-data-section',
-    '#news-section',
-    '#comments-section',
-    '#stats-section',
-    '#mixtapes-section',
-    '#chat-section',
-    '#radio-section',
-    '#mypage-section',
-    '#stellar-balances',
-    '#stellar-data-config',
-    '#arching-kaos-node-info',
-    '#files-section',
-    '#settings-section',
-    '#stellar-section',
-    '#not-found-section'
-];
+export function menuids()
+{
+    return [
+        '#welcome-section',
+        '#about-section',
+        '#zchain-data-section',
+        '#news-section',
+        '#comments-section',
+        '#stats-section',
+        '#mixtapes-section',
+        '#chat-section',
+        '#radio-section',
+        '#mypage-section',
+        '#stellar-balances',
+        '#stellar-data-config',
+        '#arching-kaos-node-info',
+        '#files-section',
+        '#settings-section',
+        '#stellar-section',
+        '#not-found-section'
+    ]
+};
 
 // Function to hide all the panes
 export function menuinit(){
-    for ( var i = 0; i < menuids.length; i++ ){
-        var sec = document.querySelector(menuids[i]);
+    for ( var i = 0; i < menuids().length; i++ ){
+        var sec = document.querySelector(menuids()[i]);
         if ( sec !== null )
         {
             sec.hidden = true;
         }
         else
         {
-            console.log(`menuinit: ${menuids[i]} was not found`);
+            console.log(`menuinit: ${menuids()[i]} was not found`);
         }
     }
 }
@@ -160,16 +192,16 @@ export function menusel(m){
     menuinit();
     // document.querySelector(m.id.replace('/','')).hidden=false;
     locationHashSetter(m.id);
-    
-    mainContainer.style.display = 'block';
-    if ( isMobile ) {
-        doubleFloorMenu.style.display = 'none';
+
+    mainContainer().style.display = 'block';
+    if ( window.isMobile ) {
+        doubleFloorMenu().style.display = 'none';
     }
 }
 
 export function toggleMenu(){
-    mainContainer.style.display = 'none';
-    doubleFloorMenu.style.display = 'flex';
+    mainContainer().style.display = 'none';
+    doubleFloorMenu().style.display = 'flex';
 }
 
 // @license-end
diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js
index 5aaacc3..9c98ac0 100644
--- a/src/js/ui/sections/radioSection.js
+++ b/src/js/ui/sections/radioSection.js
@@ -1,7 +1,8 @@
 import { makeElement } from "../../arching-kaos-generator.js";
 
 var radioSection = {
-    element: 'radio-section',
+    element: "div",
+    id: 'radio-section',
     hidden: true,
     style: 'height: 100%;',
     innerHTML: [
diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js
index febd094..6f26393 100644
--- a/src/js/ui/sections/settingsSection.js
+++ b/src/js/ui/sections/settingsSection.js
@@ -1,21 +1,30 @@
 import { makeElement } from "../../arching-kaos-generator.js";
-import { settings } from "../../arching-kaos-web-ui-settings.js";
+import { getSettings, settings } from "../../arching-kaos-web-ui-settings.js";
+
+// var settings = getSettings();
+console.log(settings);
 
 var settingsSection = {
     element: 'div',
     id: "settings-section",
-    innerHTML: `
-        <div class="where-am-i">
-            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
-            <span>&gt;</span>
-            <h2>🔧 Settings</h2>
-        </div>
-                `
-}
+    innerHTML: [
+        {element: "div",
+            className:"where-am-i",
+            innerHTML:[
+                {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"},
+                {element: "span", innerText:">"},
+                {element: "h2", innerText:"🔧 Settings"}
+            ]
+        }
+    ]
+};
 
 makeElement(settingsSection, document.querySelector('.main'));
 
-var settingsPage = document.querySelector('#settings-section');
+export function settingsPage()
+{
+    return document.querySelector('#settings-section');
+}
 
 // var scripts = [
 //     {
@@ -24,21 +33,21 @@ var settingsPage = document.querySelector('#settings-section');
 //         src:"./js/arching-kaos-web-ui-settings.js"
 //     }
 // ];
-// 
+//
 // for ( var i = 0; i < scripts.length; i++ )
 // {
 //     makeElement(scripts[i], document.querySelector('body'));
 // }
 
-var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
-
-if ( settings.stellar.scan )
-{
-    scanStellarNetworkForPeers();
-}
+// var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
 
-if ( settings.ak.scan )
-{
-    ringlocalbell();
-    setInterval(ringlocalbell, 10*60*1000);
-}
+// if ( getSettings().stellar.scan )
+// {
+//     scanStellarNetworkForPeers();
+// }
+//
+// if ( getSettings().ak.scan )
+// {
+//     ringlocalbell();
+//     setInterval(ringlocalbell, 10*60*1000);
+// }
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index 7b4d6be..5636233 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -1,46 +1,56 @@
 import { makeElement } from "../../arching-kaos-generator.js";
 
-var welcomeSection = {
-    element: "div",
-    id: "welcome-section",
-    innerHTML: [
-        {
-            element : "div",
-            className:"where-am-i",
-            innerHTML: `
+var whereAmI = {
+    element : "div",
+    className:"where-am-i",
+    innerHTML: `
 
             <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
             <span>&gt;</span>
             <h2>Home</h2>
         `
-        },
-        {
-            element: "p",
-            innerText: "Welcome to Arching Kaos project."
-        },
-        {
-            element: "div",
-            id: "home-grid",
-            innerHTML: `
+};
+
+var greeting = {
+    element: "p",
+    innerText: "Welcome to Arching Kaos project."
+};
+
+var homeGrid = {
+    element: "div",
+        id: "home-grid",
+        innerHTML: `
                 <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)" style="background-image: url(img/mixtapes-logo.png); background-repeat: round;"></button>
                 <button class="menu-clickable" id="#/news-section" onclick="menusel(this)" style="background-image: url(img/news-logo.png); background-repeat: round;"></button>
                 <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)" style="background-image: url(img/chat-logo.png); background-repeat: round;"></button>
                 <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)" style="background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"></button>
                 <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
             `
-        },
-        {
-            element : "h3",
-            innerText: "Render explicit zblock"
-        },
-        {
-            element: "div",
-            style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
-            innerHTML: `
-            <input id="search-field" type="text" name="search" placeholder="Enter a zblock hash"/>
-            <button onclick="seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])">Render</button>
-            `
-        },
+};
+
+var renderTitle = {
+    element : "h3",
+    innerText: "Render explicit zblock"
+};
+
+var renderForm = {
+    element: "div",
+    style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+    innerHTML: `
+        <input id="search-field" type="text" name="search" placeholder="Enter a zblock hash"/>
+        <button onclick="seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])">Render</button>
+    `
+};
+
+var welcomeSection = {
+    element: "div",
+    id: "welcome-section",
+    innerHTML: [
+        whereAmI,
+        greeting,
+        homeGrid,
+        renderTitle,
+        renderForm,
         {
             element: "div",
             className: "results-area",