From afcedd44615d20423d58f4d9c9d8cfa3838a54d4 Mon Sep 17 00:00:00 2001
From: kaotisk <kaotisk@arching-kaos.org>
Date: Fri, 29 Nov 2024 16:23:39 +0200
Subject: Major refactoring

---
 src/index.html                            | 163 +------------------
 src/js/app.js                             | 142 ++++++++++------
 src/js/arching-kaos-fetch.js              |  52 +++---
 src/js/arching-kaos-generator.js          |   4 +-
 src/js/arching-kaos-log.js                |   8 +-
 src/js/arching-kaos-modules-comments.js   |  39 +++--
 src/js/arching-kaos-modules-files.js      |   5 +-
 src/js/arching-kaos-modules-mixtapes.js   |  13 +-
 src/js/arching-kaos-modules-news.js       |  37 ++++-
 src/js/arching-kaos-modules-references.js |  20 ++-
 src/js/arching-kaos-spa-router.js         |  28 +++-
 src/js/arching-kaos-stellar-network.js    |  68 ++++----
 src/js/arching-kaos-tools.js              | 180 +++++++++++----------
 src/js/arching-kaos-web-ui-settings.js    |  22 ++-
 src/js/environment-setup.js               | 177 +++++++++++++++-----
 src/js/ui/footer.js                       |  81 +++++-----
 src/js/ui/header.js                       |  29 ++--
 src/js/ui/main.js                         | 121 ++++++++++----
 src/js/ui/mainLayout.js                   |  33 ++--
 src/js/ui/menu.js                         | 260 +++++++++++++++++-------------
 src/js/ui/sections/radioSection.js        |   3 +-
 src/js/ui/sections/settingsSection.js     |  53 +++---
 src/js/ui/sections/welcomeSection.js      |  70 ++++----
 src/js/url-generators.js                  |  19 ++-
 24 files changed, 924 insertions(+), 703 deletions(-)

(limited to 'src')

diff --git a/src/index.html b/src/index.html
index 62e12d3..e4448b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,167 +25,14 @@
                 <div id="menu-placeholder"></div>
             </div>
             <div class="main">
-                <div id="welcome-section">
-                    <h2>🏡 Home</h2>
-                    <p>Welcome to Arching Kaos project.</p>
-                    <div id="home-grid">
-                        <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>
-                    </div>
-                    <h3>Render explicit zblock</h3>
-                    <div style="
-                             padding: 1vh 1vw;
-                             display: flex;
-                             flex-direction: row;
-                             align-items: center;
-                             gap: 10px;"
-                        >
-                        <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>
-                    </div>
-                    <div class="results-area">
-                        <h3>Results</h3>
-                    </div>
-                    <h3>Manual scan</h3>
-                    <div style="
-                             display: flex;
-                             flex-direction: row;
-                             justify-content: start;
-                             align-items: center;
-                             flex-wrap: wrap;
-                             gap: 5px;"
-                        >
-                        <button onclick="scanStellarNetworkForPeers()">Check Stellar Network</button>
-                        <button onclick="checkLocalNodeInfo()">Check local Node</button>
-                        <button onclick="checkLocalPeers()">Check local Peers</button>
-                        <button onclick="checkLocalSchain()">Check Local Schain</button>
-                    </div>
-                    <div class="dialog">
-                        <h3>Progress</h3>
-                        <progress id="total-progress"></progress>
-                        <progress id="http-progress"></progress>
-                        <pre id="current-log-message"></pre>
-                    </div>
-                    <div>
-                        <details id="logs-area">
-                            <summary>Logs (click to expand)</summary>
-                            <div id="logs-area-element">
-                            </div>
-                        </details>
-                    </div>
-                </div>
-                <div id="about-section">
-                    <h2>ℹ️ About</h2>
-                    <p>Arching Kaos is a project about radio, music, communications and decentralization.</p>
-                    <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p>
-                    <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p>
-                    <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p>
-                    <p>Furthermore, if you are using Freighter extension you can additionally see:</p>
-                    <ol>
-                        <li>Your balances on your wallet</li>
-                        <li>Your configuration IPNS address (if any)</li>
-                        <li>Your Arching Kaos configuration (if any)</li>
-                        <li>Your zchain (...)</li>
-                        <li>Your posted newsfeed (...)</li>
-                    </ol>
-                    <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p>
-                </div>
-                <div id="stellar-balances">
-                    <h2>Balances</h2>
-                    <em id="stellar-balances-not-found">No data found (yet?)!</em>
-                    <table id="stellar-balances-table"></table>
-                </div>
-                <div id="stellar-data-config">
-                    <h2>Data</h2>
-                    <em id="stellar-data-config-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="arching-kaos-node-info">
-                    <h2>Node Info</h2>
-                    <em id="node-info-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="stellar-section">
-                    <h2>Stellar dashboard</h2>
-                    <button class="sub-input" id="stellar-freigher-connect-address-button" onclick="connect()" >Connect with Stellar address</button>
-                </div>
-                <div id="mypage-section">
-                    <h2>My page</h2>
-                    <button id="stellar-freigher-connect-address-button" onclick="connect()">Connect with Freighter wallet</button>
-                    <div id="my-news">
-                        <h3>My news</h3>
-                        <em id="my-news-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                    <div id="my-mixtapes">
-                        <h3>My mixtapes</h3>
-                        <em id="my-mixtapes-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                    <div id="my-zchain">
-                        <h3>My zchain</h3>
-                        <em id="my-zchain-sec-not-found">No data found (yet?)!</em>
-                    </div>
-                </div>
-                <div id="zchain-data-section">
-                    <h2>zchains</h2>
-                    <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="news-section">
-                    <h2>News</h2>
-                    <em id="news-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="comments-section">
-                    <h2>Comments</h2>
-                    <em id="comments-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="mixtapes-section">
-                    <h2>Mixtapes</h2>
-                    <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="files-section">
-                    <h2>Files</h2>
-                    <em id="files-sec-not-found">No data found (yet?)!</em>
-                </div>
-                <div id="settings-section">
-                    <h2>🔧 Settings</h2>
-                </div>
-                <div id="chat-section" style="height: 100%;">
-                    <button style="position: fixed;" onclick="refreshChat()">Refresh</button>
-                    <iframe id="chat-iframe" src="https://irc.arching-kaos.net" style="width: 100%; height: 100%;"></iframe>
-                </div>
-                <div id="radio-section" style="height: 100%;">
-                    <button style="position: fixed;" onclick="refreshRadio()">Refresh</button>
-                    <iframe id="radio-iframe" src="https://radio.arching-kaos.com" style="width: 100%; height: 100%;"></iframe>
-                </div>
-                <div id="stats-section">
-                    <h2>Stats</h2>
-                    <div class="available-networks">
-                        <h3>Networks</h3>
-                        <details class="stellar-network">
-                            <summary>Stellar</summary>
-                        </details>
-                        <details class="aknet-network">
-                            <summary>Arching Kaos Experimental Instance</summary>
-                        </details>
-                        <details class="aknet-sblocks">
-                            <summary>Arching Kaos SBlocks</summary>
-                        </details>
-                    </div>
-                </div>
-                <div id="not-found-section">
-                    <h2>Not found</h2>
-                    <p>"Soft" 404</p>
-                    <p>Please select an entry from the menu</p>
-                </div>
             </div>
             <div class="footer">
             </div>
         </div>
-        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./external/stellarSdk.js"></script>
         <script src="./external/purify.min.js"></script>
+<!--        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./js/environment-setup.js"></script>
-        <script src="./js/arching-kaos-web-ui-settings.js"></script>
         <script src="./js/url-generators.js"></script>
         <script src="./js/arching-kaos-fetch.js"></script>
         <script src="./js/arching-kaos-log.js"></script>
@@ -196,11 +43,10 @@
         <script src="./js/arching-kaos-modules-references.js"></script>
         <script src="./js/arching-kaos-modules-comments.js"></script>
         <script src="./js/arching-kaos-tools.js"></script>
-        <script src="./js/arching-kaos-stellar-network.js"></script>
         <script src="./js/arching-kaos-decentralized-radio.js"></script>
-        <script src="./js/utils.js"></script>
-        <script src="./js/footer.js"></script>
-        <script src="./js/app.js"></script>
+        <script src="./js/arching-kaos-stellar-network.js"></script>
+        <script src="./js/utils.js"></script> -->
+        <script type="module" src="./js/app.js"></script>
     </body>
     <!--
         <script>
@@ -216,5 +62,4 @@
         </script>
         -->
 </html>
-
 <!-- vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
diff --git a/src/js/app.js b/src/js/app.js
index b84be92..fd92c87 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -10,40 +10,96 @@
  * TODO: Figure out why it doesn't work in fullscreen App mode (android)
  *
  */
-body.width = window.innerWidth;
-body.height = window.innerHeight;
-pageLayout.width = window.innerWidth;
-pageLayout.height = window.innerHeight;
-mainContainer.style.display = 'block';
-window.innerWidth <= 850 ? isMobile = true : isMobile = false;
+import { makeElement } from "./arching-kaos-generator.js";
+import { locationHashOnChange } from "./arching-kaos-spa-router.js";
+import { doubleFloorMenu, menuinit, menusel, stellarSubToggle, modulesSubToggle, exploreSubToggle } from './ui/menu.js';
+import { mainLayoutSpawn } from "./ui/mainLayout.js";
+import { scanStellarNetworkForPeers } from "./arching-kaos-stellar-network.js";
 
-function onWindowResize()
+window.menusel = menusel;
+window.locationHashOnChange = locationHashOnChange;
+window.stellarSubToggle = stellarSubToggle;
+window.modulesSubToggle = modulesSubToggle;
+window.exploreSubToggle = exploreSubToggle;
+window.scanStellarNetworkForPeers = scanStellarNetworkForPeers;
+
+export function body()
 {
-    body.width = window.innerWidth;
-    body.height = window.innerHeight;
-    pageLayout.width = window.innerWidth;
-    pageLayout.height = window.innerHeight;
-    window.innerWidth <= 850 ? isMobile = true : isMobile = false;
-    isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
+    return document.querySelector('body');
+}
+
+export function pageLayout()
+{
+    return document.querySelector('.page-layout');
 }
-window.addEventListener('resize', onWindowResize, false);
 
+export function mainContainer()
+{
+    return document.querySelector('.main');
+}
 
-progressPlaceholder.value = '0';
+window.isMobile = false;
 
-progressPlaceholder.max++;
+export function aknet()
+{
+    return document.querySelector('.aknet-network')
+}
+
+export function resultsArea()
+{
+    return document.querySelector('.results-area')
+}
+
+export function progressPlaceholder()
+{
+    return document.querySelector('#total-progress');
+}
+
+export function httpProgressPlaceholder()
+{
+    return document.querySelector('#http-progress');
+}
 
-if ( settings.stellar.scan )
+export function currentLogMessageElement()
 {
-    scanStellarNetworkForPeers();
+    return document.querySelector('#current-log-message');
 }
 
-if ( settings.ak.scan )
+export function logsAreaElement()
 {
-    ringlocalbell();
-    setInterval(ringlocalbell, 10*60*1000);
+    return document.querySelector("#logs-area-element");
 }
 
+export function radio()
+{
+    return document.querySelector("#radio-player");
+}
+
+export function radioButton()
+{
+    return document.querySelector("#radio-button-controller");
+}
+
+
+body().width = window.innerWidth;
+body().height = window.innerHeight;
+pageLayout().width = window.innerWidth;
+pageLayout().height = window.innerHeight;
+mainContainer().style.display = 'block';
+window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false;
+
+function onWindowResize()
+{
+    body.width = window.innerWidth;
+    body.height = window.innerHeight;
+    pageLayout.width = window.innerWidth;
+    pageLayout.height = window.innerHeight;
+    window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false;
+    window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex';
+}
+window.addEventListener('resize', onWindowResize, false);
+
+
 //scanStellarNetworkForPeers();
 // setInterval(scanStellarNetworkForPeers, 60000);
 
@@ -53,30 +109,24 @@ var root = {
     html: document.querySelector('html')
 };
 
-var scripts = [
-    {
-        element:"script",
-        src:"./js/ui/mainLayout.js"
-    }
-];
-//,
-//    {
-//        element:"script",
-//        src:"./js/page-navigation.js"
-//    },
-//    {
-//        element:"script",
-//        src:"./js/page-projects.js"
-//    },
-//    {
-//        element:"script",
-//        src:"./js/menu.js"
-//    }
-//];
-
-for ( var i = 0; i < scripts.length; i++ )
-{
-    makeElement(scripts[i], root.body);
-}
+// var scripts = [
+//     {
+//         element:"script",
+//         type: "module",
+//         src:"./js/ui/mainLayout.js"
+//     }
+// ];
+//
+// for ( var i = 0; i < scripts.length; i++ )
+// {
+//     makeElement(scripts[i], root.body);
+// }
+
+mainLayoutSpawn();
+// And call
+menuinit();
+locationHashOnChange();
+
+window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex';
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/arching-kaos-fetch.js b/src/js/arching-kaos-fetch.js
index 523baff..15394b2 100644
--- a/src/js/arching-kaos-fetch.js
+++ b/src/js/arching-kaos-fetch.js
@@ -5,7 +5,10 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function archingKaosFetchJSON( url, callback, params ){
+import { archingKaosLog } from "./arching-kaos-log.js";
+import { httpProgressPlaceholder, progressPlaceholder } from "./app.js";
+
+export function archingKaosFetchJSON( url, callback, params ){
     const request = new XMLHttpRequest();
     request.addEventListener("load", ()=>{
         var json = JSON.parse(request.response);
@@ -16,38 +19,49 @@ function archingKaosFetchJSON( url, callback, params ){
         }
     });
     request.addEventListener("error", ()=>{
-        console.log("An error occured.");
+        // console.log("An error occured.");
     });
     request.addEventListener("progress", (event)=>{
-        if (event.lengthComputable && progressPlaceholder){
-            httpProgressPlaceholder.value = (event.loaded / event.total) * 100;
+        if (event.lengthComputable && progressPlaceholder()){
+            httpProgressPlaceholder().value = (event.loaded / event.total) * 100;
         } else {
-            httpProgressPlaceholder.value = 0;
-            console.log("Supposingly zeroed progressPlaceholder");
+            httpProgressPlaceholder().value = 0;
+            // console.log("Supposingly zeroed progressPlaceholder");
         }
     });
     request.addEventListener("abort", ()=>{
-        console.log("Request aborted.");
+        // console.log("Request aborted.");
     });
     request.open("GET", url);
     request.send();
 
 }
 
-async function archingKaosFetchText( url, callback ){
-    return fetch(url, {
-        method:'GET',
-        headers:{
-            Accept: 'application/json'
+export async function archingKaosFetchText( url, callback, params ){
+    const request = new XMLHttpRequest();
+    request.addEventListener("load", ()=>{
+        var text = request.response;
+        if(request.status !== 404){
+            callback(text, params);
+        } else {
+            archingKaosLog(`ERROR ${request.status} while loading ${url}`);
         }
-    }).then(response=>{
-        if(response.ok){
-            response.text().then(text=>{
-                return callback(text);
-            })
+    });
+    request.addEventListener("error", ()=>{
+        // console.log("An error occured.");
+    });
+    request.addEventListener("progress", (event)=>{
+        if (event.lengthComputable && progressPlaceholder()){
+            httpProgressPlaceholder().value = (event.loaded / event.total) * 100;
         } else {
-            console.log(e);
+            httpProgressPlaceholder.value = 0;
+            // console.log("Supposingly zeroed progressPlaceholder");
         }
-    })
+    });
+    request.addEventListener("abort", ()=>{
+        // console.log("Request aborted.");
+    });
+    request.open("GET", url);
+    request.send();
 }
 // @license-end
diff --git a/src/js/arching-kaos-generator.js b/src/js/arching-kaos-generator.js
index 9c80954..9a0398d 100644
--- a/src/js/arching-kaos-generator.js
+++ b/src/js/arching-kaos-generator.js
@@ -5,7 +5,7 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function makeElement(obj, attachTo)
+export function makeElement(obj, attachTo)
 {
     if (obj.element !== 'head' && obj.element !== 'body' )
     {
@@ -50,7 +50,7 @@ function makeElement(obj, attachTo)
     attachTo.appendChild(temp);
 }
 
-function makeUpSite(tree, root){
+export function makeUpSite(tree, root){
     if ( tree !== undefined && Array.isArray(tree) )
     {
         for (var i = 0; i < tree.length; i++)
diff --git a/src/js/arching-kaos-log.js b/src/js/arching-kaos-log.js
index 1f79994..e348ee6 100644
--- a/src/js/arching-kaos-log.js
+++ b/src/js/arching-kaos-log.js
@@ -5,14 +5,16 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { currentLogMessageElement, logsAreaElement } from "./app.js";
+import { makeElement } from "./arching-kaos-generator.js";
 
-function archingKaosLog(message){
+export function archingKaosLog(message){
     var lts = new Date(Date.now());
     var sta = {
         element:"div",
         innerText: lts.toISOString() + " " + message
     };
-    currentLogMessageElement.innerText = sta.innerText;
-    makeElement(sta, logsAreaElement);
+    currentLogMessageElement().innerText = sta.innerText;
+    makeElement(sta, logsAreaElement());
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-comments.js b/src/js/arching-kaos-modules-comments.js
index aad581f..8db1b57 100644
--- a/src/js/arching-kaos-modules-comments.js
+++ b/src/js/arching-kaos-modules-comments.js
@@ -5,32 +5,37 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function akModuleComments(zblockIPFSHash, blockObject, json){
+import { makeElement } from "./arching-kaos-generator.js";
+import {
+    getFullText,
+    getNicknameAssossiatedWithGPG
+} from "./arching-kaos-tools.js";
+import { archingKaosFetchText } from "./arching-kaos-fetch.js";
+import { getIPFSURL } from "./url-generators.js";
+
+export function akModuleComments(zblockIPFSHash, blockObject, json){
     if (!document.querySelector('#comment-'+zblockIPFSHash)){
         var divs = document.querySelector('#comments-section');
         var art = {
             element:"article",
-            id: 'comment-'+zblockIPFSHash
+            id: `comment-${zblockIPFSHash}`,
+            innerHTML: [
+                {
+                    element:"p",
+                    innerText:"Published: " + new Date(json.datetime*1000)
+                },
+                {
+                    element:"p",
+                    innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg)
+                }
+            ]
         };
         makeElement(art, divs);
-        art = document.querySelector('#comment-'+zblockIPFSHash);
-        if(json.datetime){
-            var small = {
-                element:"p",
-                innerText:"Published: " + new Date(json.datetime*1000)
-            };
-            makeElement(small, art);
-        }
-        var small = {
-            element:"p",
-            innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg)
-        };
-        makeElement(small, art);
         if(json.ipfs){
-            getipfstext(json.ipfs,art.id);
+            archingKaosFetchText(getIPFSURL(json.ipfs), getFullText, [`#comment-${zblockIPFSHash}`]);
         }
         if (document.querySelector("#comments-sec-not-found")) document.querySelector("#comments-sec-not-found").hidden=true;
-        makeElement(document.createElement("hr"), divs);
+        makeElement({element:"hr"}, divs);
     }
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-files.js b/src/js/arching-kaos-modules-files.js
index b566226..fb325aa 100644
--- a/src/js/arching-kaos-modules-files.js
+++ b/src/js/arching-kaos-modules-files.js
@@ -5,7 +5,10 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function akModuleFiles(zblockIPFSHash, blockObject, json){
+import { getNicknameAssossiatedWithGPG } from "./arching-kaos-tools.js";
+import { makeElement } from "./arching-kaos-generator.js";
+
+export function akModuleFiles(zblockIPFSHash, blockObject, json){
     if (!document.querySelector('#file-'+zblockIPFSHash)){
         var divs = document.querySelector('#files-section');
         var art = {
diff --git a/src/js/arching-kaos-modules-mixtapes.js b/src/js/arching-kaos-modules-mixtapes.js
index ac23ed4..bf11d9d 100644
--- a/src/js/arching-kaos-modules-mixtapes.js
+++ b/src/js/arching-kaos-modules-mixtapes.js
@@ -5,8 +5,11 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { makeElement } from "./arching-kaos-generator.js";
+import { getIPFSURL } from "./url-generators.js";
+import { addMixtapeID, setMixtape, getMixtapes } from "./environment-setup.js";
 
-function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
+export function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
     if(!document.querySelector('#mixtape-'+zblockIPFSHash)){
         var divs = document.querySelector('#mixtapes-section');
         var art = {
@@ -37,10 +40,10 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
         makeElement(art, divs);
         var audio = document.querySelector('#mixtape-player-'+zblockIPFSHash);
         audio.setAttribute('controls','');
-        mixtapeIds.push('mixtape-player-'+zblockIPFSHash);
+        addMixtapeID(zblockIPFSHash);
         audio.addEventListener( "loadedmetadata", ()=>{
-            if ( mixtapes[zblockIPFSHash] === undefined ){
-                mixtapes[zblockIPFSHash]={
+            if ( getMixtapes()[zblockIPFSHash] === undefined ){
+                setMixtape(zblockIPFSHash, {
                     zblock:zblockIPFSHash,
                     block:zblockObject.block,
                     block_signature:zblockObject.block_signature,
@@ -52,7 +55,7 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){
                     gpg:blockObject.gpg,
                     timestamp:blockObject.timestamp,
                     audioDuration:audio.duration
-                };
+                });
             }
             /* console.log(
                                     zblockIPFSHash+"'s duration is: "+
diff --git a/src/js/arching-kaos-modules-news.js b/src/js/arching-kaos-modules-news.js
index d1ebc23..49dfb0a 100644
--- a/src/js/arching-kaos-modules-news.js
+++ b/src/js/arching-kaos-modules-news.js
@@ -5,8 +5,16 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { makeElement } from "./arching-kaos-generator.js";
+import { archingKaosFetchText } from "./arching-kaos-fetch.js";
+import {
+    getNicknameAssossiatedWithGPG,
+    getFullText,
+    getPreviewText
+} from "./arching-kaos-tools.js";
+import { getIPFSURL } from "./url-generators.js";
 
-function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
+export function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
     if (!document.querySelector('#news-'+zblockIPFSHash)){
         var newsSectionDivElement = document.querySelector('#news-section');
         var articleContainerElement = {
@@ -14,7 +22,9 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
             id:`news-${zblockIPFSHash}`,
             innerHTML: [
                 { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash },
+                { element:"span", innerText : ' '},
                 { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash },
+                { element:"p", innerText:`zblock: ${zblockIPFSHash}` },
                 { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) },
                 { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) },
                 { element:"hr" }
@@ -24,15 +34,28 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){
         if(json.ipfs){
             archingKaosFetchText(getIPFSURL(json.ipfs), getFullText,[`#news-${zblockIPFSHash}`]);
         }
+        if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true;
+        makeElement({ element:"hr"}, newsSectionDivElement);
+    }
+    if (!document.querySelector('#news-preview-'+zblockIPFSHash)){
+        var newsSectionDivElement = document.querySelector('.preview');
+        var articleContainerElement = {
+            element:"article",
+            id:`news-preview-${zblockIPFSHash}`,
+            innerHTML: [
+                { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash },
+                { element:"span", innerText : ' '},
+                { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash },
+                { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) },
+                { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) },
+                { element:"hr" }
+            ]
         };
-        makeElement(small, articleContainerElement);
-        var hr = { element:"hr" };
-        makeElement(hr, articleContainerElement);
+        makeElement(articleContainerElement, newsSectionDivElement);
         if(json.ipfs){
-            getipfstext(json.ipfs,articleContainerElement.id);
+            archingKaosFetchText(getIPFSURL(json.ipfs), getPreviewText, [`#news-preview-${zblockIPFSHash}`]);
         }
-        if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true;
-        makeElement(hr, newsSectionDivElement);
+        makeElement({ element:"hr"}, newsSectionDivElement);
     }
 }
 // @license-end
diff --git a/src/js/arching-kaos-modules-references.js b/src/js/arching-kaos-modules-references.js
index f609d3a..c6aca8a 100644
--- a/src/js/arching-kaos-modules-references.js
+++ b/src/js/arching-kaos-modules-references.js
@@ -5,17 +5,25 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
-function resolveReferences(references){
-    for( entry in references ){
+import {
+    getReferences,
+    setReference,
+    getReference
+} from "./environment-setup.js";
+
+export function resolveReferences(){
+    console.log(getReferences());
+    const references = getReferences();
+    for( var entry = 0; entry < references.length; entry++ ){
         var comment = document.querySelector('#comment-'+references[entry].dataExpansion.reference);
         var article = document.querySelector('#news-'+references[entry].dataExpansion.refer_to);
         article.appendChild(comment);
     }
 }
 
-function storeReference(zblockIPFSHash, zblockObject, blockObject, json, references){
-    if ( references[zblockIPFSHash] === undefined ){
-        references[zblockIPFSHash]={
+export function storeReference(zblockIPFSHash, zblockObject, blockObject, json, references){
+    if ( getReference(zblockIPFSHash) === undefined ){
+        setReference(zblockIPFSHash, {
             zblock:zblockIPFSHash,
             block:zblockObject.block,
             block_signature:zblockObject.block_signature,
@@ -26,7 +34,7 @@ function storeReference(zblockIPFSHash, zblockObject, blockObject, json, referen
             detach:blockObject.detach,
             gpg:blockObject.gpg,
             timestamp:blockObject.timestamp
-        };
+        });
     }
 }
 // @license-end
diff --git a/src/js/arching-kaos-spa-router.js b/src/js/arching-kaos-spa-router.js
index 1775d24..162a316 100644
--- a/src/js/arching-kaos-spa-router.js
+++ b/src/js/arching-kaos-spa-router.js
@@ -17,17 +17,31 @@
  * the "route" we got from `location.search`.
  *
  */
+import { menuinit, menuids } from "./ui/menu.js";
 
-function locationHashSetter(value){
+export function locationHashSetter(value)
+{
     window.location.hash = value;
     locationHashOnChange();
 }
 
-function locationHashGetter(){
+export function locationHashGetter()
+{
     return window.location.hash;
 }
 
-function locationHashOnChange(){
+export function getWelcomeSection()
+{
+    return document.querySelector('#welcome-section');
+}
+
+export function getSoftError()
+{
+    return document.querySelector('#not-found-section');
+}
+
+export function locationHashOnChange()
+{
     var route = new Object;
     route.full = locationHashGetter();
     route.args = route.full.split('/');
@@ -35,19 +49,19 @@ function locationHashOnChange(){
     route.subcommand = route.args[2];
     menuinit();
     if ( (locationHashGetter() !== 'undefined') && (locationHashGetter() === '') ){
-        document.querySelector('#welcome-section').hidden=false;
+        getWelcomeSection.hidden=false;
     }
     else if ( route.args[1] == "route" ) {
-        document.querySelector('#welcome-section').hidden=false;
+        getWelcomeSection.hidden=false;
         if ( route.args.length === 4 ) {
             if ( route.args[2] === "zblock" ) {
                 seekZblock(route.args[3], ['search', false]);
             }
         }
-    } else if ( (locationHashGetter() !== 'undefined') && ( menuids.includes(route.menuid))){
+    } else if ( (locationHashGetter() !== 'undefined') && ( menuids().includes(route.menuid))){
         document.querySelector(route.menuid).hidden=false;
     } else {
-        document.querySelector('#not-found-section').hidden=false;
+        getSoftError().hidden=false;
     }
 }
 
diff --git a/src/js/arching-kaos-stellar-network.js b/src/js/arching-kaos-stellar-network.js
index ca4d586..a08147e 100644
--- a/src/js/arching-kaos-stellar-network.js
+++ b/src/js/arching-kaos-stellar-network.js
@@ -5,21 +5,39 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { archingKaosLog } from "./arching-kaos-log.js";
+import { archingKaosFetchJSON } from "./arching-kaos-fetch.js";
+import {
+    getStellarConfigurationVariableURL,
+    getTrustlinesURL,
+    getHoldersOfActiveAssetURL
+} from "./url-generators.js";
+
+import { progressPlaceholder } from "./app.js";
+
+import {
+    increaseStellarNetworkConfiguredAddresses,
+    addToFoundHolders,
+    setStellarParticipants,
+    setStellarParticipantsScanned
+} from "./environment-setup.js";
+
+import { makeElement } from "./arching-kaos-generator.js";
+import { getConfiguration } from "./arching-kaos-tools.js";
+
+var lastPage = '';
 
 function getNumberOfTrustlinesAndRenderThem(json){
     var number = json._embedded.records[0].accounts.authorized;
     var stats = document.querySelector('.stellar-network').querySelector('summary');
 
     if(!document.querySelector("#stellar-participants-sum")){
-        var small = document.createElement("span");
-        small.id = 'stellar-participants-sum';
-        stats.appendChild(small);
+        makeElement({element: "span", id: 'stellar-participants-sum', innerText: `( ${number} )`}, stats);
     }
-    document.querySelector("#stellar-participants-sum").innerText = ' (' + number + ')';
     archingKaosLog("Loading trustlines... Found "+number+"!");
-    progressPlaceholder.value++;
-    stellarParticipants=number;
-    stellarParticipantsScanned=number;
+    progressPlaceholder().value++;
+    setStellarParticipants(number);
+    setStellarParticipantsScanned(number);
 }
 
 function renderStellarAddress(stellarAddress){
@@ -38,11 +56,11 @@ function renderStellarAddress(stellarAddress){
 
 function renderStellarAddressesAndProceed(json){
     var records = json._embedded.records;
-    for ( index in records ){
-        holders.push(records[index].account_id);
-        progressPlaceholder.max++;
-        renderStellarAddress(records[index].account_id);
-        checkAddressForConfigurationVariable(records[index].account_id);
+    for ( var i = 0; i < records.length; i++ ){
+        addToFoundHolders(records[i].account_id);
+        progressPlaceholder().max++;
+        renderStellarAddress(records[i].account_id);
+        checkAddressForConfigurationVariable(records[i].account_id);
     }
     if (json._links.next) getHolders(json._links.next.href);
 }
@@ -50,7 +68,7 @@ function renderStellarAddressesAndProceed(json){
 function renderConfigurationIPNSLinkAndProceed(json, stellarAddress){
     renderStellarAddress(stellarAddress);
     document.querySelector('#'+stellarAddress).style="color: #3dbb3d;"
-    stellarNetworkConfiguredAddresses += 1;
+    increaseStellarNetworkConfiguredAddresses();
     console.log(atob(json.value));
     console.log(stellarAddress);
     getConfiguration(atob(json.value),stellarAddress);
@@ -80,27 +98,17 @@ function getHolders(a=0){
     }
     lastPage=url;
     if (doIt) {
-        archingKaosFetchJSON(url, renderStellarAddressesAndProceed);
+        archingKaosFetchJSON(url, renderStellarAddressesAndProceed, null);
     }
     archingKaosLog("Searching holders... Done!");
 }
 
-function getStellarConfigurationVariableURL(stellarAddress){
-    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
-        'accounts/'+
-        stellarAddress+
-        '/data/'+
-        settings.stellar.variableNames.list[settings.stellar.variableNames.active];
-}
-
 function checkAddressForConfigurationVariable(stellarAddress) {
     archingKaosLog("Checking configuration for "+ stellarAddress+ "...");
     archingKaosFetchJSON(getStellarConfigurationVariableURL(stellarAddress), renderConfigurationIPNSLinkAndProceed, stellarAddress);
-    progressPlaceholder.value++;
+    progressPlaceholder().value++;
 }
 
-var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
-
 function steptwo(i){
     var ta=document.querySelector("#stellar-balances-table");
     for (b in i.balances) {
@@ -113,8 +121,8 @@ function steptwo(i){
             ]
         }
         makeElement(amount, ta);
-        progressPlaceholder.max++;
-        progressPlaceholder.value++;
+        progressPlaceholder().max++;
+        progressPlaceholder().value++;
         if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true;
     }
 }
@@ -144,8 +152,8 @@ async function fetchNodeInfoFromClientWallet(stellarAddress){
                     innerText:atob(json.value)
                 };
                 makeElement(cnf, document.querySelector('#stellar-data-config'));
-                progressPlaceholder.max++;
-                progressPlaceholder.value++;
+                progressPlaceholder().max++;
+                progressPlaceholder().value++;
                 getConfiguration(atob(json.value),stellarAddress);
             });
         }
@@ -186,7 +194,7 @@ function connect(){
 //    }
 }
 
-function scanStellarNetworkForPeers(){
+export function scanStellarNetworkForPeers(){
     getTrustlines();
     getHolders();
 }
diff --git a/src/js/arching-kaos-tools.js b/src/js/arching-kaos-tools.js
index 0f62fd5..1ebda52 100644
--- a/src/js/arching-kaos-tools.js
+++ b/src/js/arching-kaos-tools.js
@@ -5,6 +5,28 @@
  * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  *
  */
+import { archingKaosLog } from "./arching-kaos-log.js";
+import { makeElement } from "./arching-kaos-generator.js";
+import { progressPlaceholder } from "./app.js";
+import { archingKaosFetchJSON } from "./arching-kaos-fetch.js";
+import { getIPFSURL, getIPNSURL } from "./url-generators.js";
+import {
+    stellarParticipantInfo,
+    getStellarParticipantsScanned,
+    getStellarNetworkConfiguredAddresses,
+    setFullZblock,
+    setZblock,
+    setData,
+    getParticipants,
+    setZchainLoadingStatus,
+    getZchainLoadingStatuses
+} from "./environment-setup.js";
+import { akModuleComments } from "./arching-kaos-modules-comments.js";
+import { akModuleFiles } from "./arching-kaos-modules-files.js";
+import { akModuleMixtapes } from "./arching-kaos-modules-mixtapes.js";
+import { akModuleNews } from "./arching-kaos-modules-news.js";
+import { storeReference, resolveReferences } from "./arching-kaos-modules-references.js";
+
 function getArrayLength(array){
     var length = 0;
     for ( e in array ) {
@@ -52,28 +74,33 @@ function renderStellarAddressPlaceholder(stellarAddress){
 
 function nodeInfoRender(json, stellarAddress){
     var divs = renderStellarAddressPlaceholder(stellarAddress);
-    for( key in Object.keys(json) ){
-        if ( typeof(json[Object.keys(json)[key]]) === "string" ) {
-            if(!document.querySelector('#'+Object.keys(json)[key]+'-'+stellarAddress)){
-                var p = document.createElement("p");
-                p.id = Object.keys(json)[key]+'-'+stellarAddress;
-                p.innerText = Object.keys(json)[key] + ": " +json[Object.keys(json)[key]];
-                divs.appendChild(p);
+    console.log(json);
+    const keys = Object.keys(json);
+    for( var i = 0; i < keys.length; i++ )
+    {
+        if ( typeof(json[keys[i]]) === "string" ) {
+            if(!document.querySelector('#'+keys[i]+'-'+stellarAddress)){
+                var p = {
+                    element:"p",
+                    id: `${keys[i]}-${stellarAddress}`,
+                    innerText: `${keys[i]}: ${json[keys[i]]}`
+                };
+                makeElement(p, divs);
             }
         }
-        else if ( typeof(json[Object.keys(json)[key]]) === "Object"||"Array" ) {
-            nodeInfoRender(json[Object.keys(json)[key]], stellarAddress);
+        else if ( typeof(json[keys[i]]) === "Object"||"Array" ) {
+            nodeInfoRender(json[keys[i]], stellarAddress);
         }
     }
 }
 
 function nodeInfoRenderAndProceed(json, stellarAddress){
     nodeInfoRender(json, stellarAddress);
-    participants[stellarAddress]=json;
-    if ( stellarParticipantsScanned === 0 ) {
+    stellarParticipantInfo(stellarAddress, json);
+    if ( getStellarParticipantsScanned() === 0 ) {
         archingKaosLog('Scanned all Stellar participants');
     }
-    progressPlaceholder.value++;
+    progressPlaceholder().value++;
     if (json.zlatest) {
         seekZblock(json.zlatest, [json.gpg, json]);
     }
@@ -100,8 +127,8 @@ function renderZblockAndProceed(json, params){
         };
         makeElement(p, zblockElement);
     }
-    progressPlaceholder.max++;
-    progressPlaceholder.value++;
+    progressPlaceholder().max++;
+    progressPlaceholder().value++;
     //if (recursive) seekBlock(json.block,zblockIPFSHash,group,json);
     seekBlock(json.block,zblockIPFSHash,group,json,recursive);
 }
@@ -167,44 +194,34 @@ function blockRenderAndProceed(json, params){
         };
         if(detailsPlace!== null) makeElement(p, detailsPlace);
     }
-    progressPlaceholder.value++;
+    progressPlaceholder().value++;
     exe(json.action,json.data,json,zblockIPFSHash,group,zblockObject,recursive);
     if ( checkIfGenesis(json.previous) ){
         archingKaosLog("Done loading " + group + " zchain!")
-        progressPlaceholder.value++;
-        zchainLoadingStatus[group] = {loading: "completed"};
-        if ( getArrayLength(zchainLoadingStatus) === stellarNetworkConfiguredAddresses){
+        progressPlaceholder().value++;
+        setZchainLoadingStatus(group, {loading: "completed"});
+        if ( getZchainLoadingStatuses().length === getStellarNetworkConfiguredAddresses()){
             var x=0;
-            for ( element in zchainLoadingStatus ) {
-                if ( zchainLoadingStatus[element].loading === "completed" ){
+            for ( element in getZchainLoadingStatuses() ) {
+                if ( getZchainLoadingStatuses()[element].loading === "completed" ){
                     x++;
                 }
             }
-            if ( x === getArrayLength(zchainLoadingStatus) ){
+            if ( x === getZchainLoadingStatuses().length ){
                 archingKaosLog("Everything is completed!");
                 sortedMixtapes = mixtapes.sort(mixtapeSorting);
             }
         }
-        resolveReferences(references);
-        radioLoad();
+        resolveReferences();
+        //radioLoad();
     } else {
         console.log("deep in :" +group);
         if (recursive) seekZblock(json.previous, [group]);
     }
 }
 
-function getNicknameAssossiatedWithGPG(gpgIPFSHash){
-    for (let i in participants){
-        if ( participants[i].gpg === gpgIPFSHash ){
-            if (participants[i].profile.nickname){
-                return participants[i].profile.nickname;
-            }
-        }
-    }
-}
-
-function getConfiguration(nodeInfoIPNSLink,stellarAddress){
-    progressPlaceholder.max++;
+export function getConfiguration(nodeInfoIPNSLink,stellarAddress){
+    progressPlaceholder().max++;
     archingKaosLog("Parsing the configuration...")
     archingKaosFetchJSON(getIPNSURL(nodeInfoIPNSLink), nodeInfoRenderAndProceed, stellarAddress)
 }
@@ -250,7 +267,7 @@ function seekBlock(blockIPFSHash, zblockIPFSHash, group, zblockObject, recursive
     console.log(recursive);
     archingKaosLog("Seeking block "+blockIPFSHash+"...");
     // detailsPlace = document.querySelector('#zb-'+zblockIPFSHash);
-    progressPlaceholder.max++;
+    progressPlaceholder().max++;
     archingKaosFetchJSON(
         getIPFSURL(blockIPFSHash),
         blockRenderAndProceed,
@@ -258,12 +275,18 @@ function seekBlock(blockIPFSHash, zblockIPFSHash, group, zblockObject, recursive
     );
 }
 
-function getNicknameAssossiatedWithGPG(gpgIPFSHash){
-    for (let i in participants){
-        if ( participants[i].gpg === gpgIPFSHash ){
-            if (participants[i].profile.nickname !== 'undefined'){
+export function getNicknameAssossiatedWithGPG(gpgIPFSHash){
+    const participants = getParticipants();
+    for (var i = 0; i < participants.length; i++)
+    {
+        if ( participants[i].gpg === gpgIPFSHash )
+        {
+            if (participants[i].profile.nickname !== 'undefined')
+            {
                 return participants[i].profile.nickname;
-            } else {
+            }
+            else
+            {
                 return gpgIPFSHash;
             }
         }
@@ -319,12 +342,6 @@ function seekZblock(zblockIPFSHash, params){
     archingKaosFetchJSON(getIPFSURL(zblockIPFSHash), renderZblockAndProceed, [zblockIPFSHash, group, recursive]);
 }
 
-function getConfiguration(nodeInfoIPNSLink,stellarAddress){
-    progressPlaceholder.max++;
-    archingKaosLog("Parsing the configuration...")
-    archingKaosFetchJSON(getIPNSURL(nodeInfoIPNSLink), nodeInfoRenderAndProceed, stellarAddress)
-}
-
 function renderZblockAsModule(json, params){
     const [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive] = params;
     if (action == "files/add") {
@@ -358,7 +375,7 @@ function renderZblockAsModule(json, params){
 
 function saveDataAndFullZblocks(json,params){
     const [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive] = params;
-    fullZblocks[zblockIPFSHash]={
+    setFullZblock(zblockIPFSHash, {
         zblock:zblockIPFSHash,
         block:zblockObject.block,
         block_signature:zblockObject.block_signature,
@@ -369,16 +386,15 @@ function saveDataAndFullZblocks(json,params){
         detach:blockObject.detach,
         gpg:blockObject.gpg,
         timestamp:blockObject.timestamp
-    };
-    zblocks[group] = new Array;
-    zblocks[group].push(zblockIPFSHash);
-    data[blockObject.data]=json;
-    progressPlaceholder.max++;
-    progressPlaceholder.value++;
+    });
+    setZblock(group, zblockIPFSHash);
+    setData(blockObject.data, json);
+    progressPlaceholder().max++;
+    progressPlaceholder().value++;
 }
 
 function doStuffWithFetchedDataBlock(json, params){
-    saveDataAndFullZblocks(json,params);
+    saveDataAndFullZblocks(json, params);
     renderZblockAsModule(json, params);
 }
 
@@ -387,35 +403,37 @@ function exe(action,dataIPFSHash,blockObject,zblockIPFSHash,group,zblockObject,r
     archingKaosFetchJSON(
         getIPFSURL(dataIPFSHash),
         doStuffWithFetchedDataBlock,
-        [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive]
+        [action, group, zblockIPFSHash, zblockObject, blockObject, null, recursive]
     );
 }
 
-function getipfstext(ipfsHash, articleid){
-    fetch(getIPFSURL(ipfsHash), {
-        method:'GET',
-        headers:{
-            Accept: 'text/plain'
-        }
-    }).then(response=>{
-        if(response.ok){
-            response.text().then(text=>{
-                var divs = document.querySelector('#'+articleid);
-                if(text){
-                    var lines = text.split('\n');
-                    // remove one line, starting at the first position
-                    // lines.splice(0,1);
-                    var newtext = lines.join('\n');
-                    var pre = {
-                        element:"div",
-                        className:"news-text",
-                        innerHTML:DOMPurify.sanitize(marked.parse(newtext))
-                    };
-                    makeElement(pre, divs);
-                }
-            })
-        }
-    })
+export function getPreviewText(text, params)
+{
+    var [ articleid ] = params;
+    var divs = document.querySelector(articleid);
+    if(text){
+        var newtext = text.substring(0, 500);
+        var pre = {
+            element:"div",
+            className:"news-text",
+            innerHTML:DOMPurify.sanitize(marked.parse(newtext))
+        };
+        makeElement(pre, divs);
+    }
+}
+
+export function getFullText(text, params)
+{
+    var [ articleid ] = params;
+    var divs = document.querySelector(articleid);
+    if(text){
+        var pre = {
+            element:"div",
+            className:"news-text",
+            innerHTML:DOMPurify.sanitize(marked.parse(text))
+        };
+        makeElement(pre, divs);
+    }
 }
 
 function checkIfZchainAndProceed(json, params){
diff --git a/src/js/arching-kaos-web-ui-settings.js b/src/js/arching-kaos-web-ui-settings.js
index e170f4e..c6a5399 100644
--- a/src/js/arching-kaos-web-ui-settings.js
+++ b/src/js/arching-kaos-web-ui-settings.js
@@ -22,6 +22,9 @@
  * kays or other more personal stuff. Need to encrypt these with a password too!
  *
  */
+import { makeElement } from "./arching-kaos-generator.js";
+import { settingsPage } from "./ui/sections/settingsSection.js";
+
 var default_settings = {
     ipfs: {
         gateway: {
@@ -78,7 +81,7 @@ var default_settings = {
         },
         scan: false
     }
-}
+};
 
 // TODO: Make up a settings configuration page to set this up initially rather
 // than forcing visitors to just save them into their local storage.
@@ -93,7 +96,12 @@ var default_settings = {
 //
 // All comments above are replaced by temporary initializing without saving
 // anything in the localStorage
-var settings = default_settings;
+export function getSettings()
+{
+    return default_settings;
+}
+
+export var settings = default_settings;
 
 // Also, remove any settings stored from previous runs
 window.localStorage.removeItem("ak-settings");
@@ -112,8 +120,6 @@ if (( location.origin === "http://z.kaotisk-hund.com") ||
     settings.ipfs.gateway.active = 0;
 }
 
-var settingsPage = document.querySelector('#settings-section');
-
 var settingsKeys = Object.keys(settings);
 
 function renderCheck(container, value){
@@ -127,7 +133,7 @@ function renderCheck(container, value){
 
 function renderList(container, value){
     var selectOptions = document.createElement('select');
-    for ( i = 0 ; i < value.list.length; i++ ){
+    for ( var i = 0 ; i < value.list.length; i++ ){
         var option = document.createElement("option");
         if ( i === value.active ) {
             option.selected = true;
@@ -141,7 +147,7 @@ function renderList(container, value){
 
 function renderAssets(container, value){
     var selectOptions = document.createElement('select');
-    for ( i = 0 ; i < value.list.length; i++ ){
+    for ( var i = 0 ; i < value.list.length; i++ ){
         var option = document.createElement("option");
         if ( i === value.active ) {
             option.selected = true;
@@ -200,7 +206,7 @@ function settingPlaceToDOM(key, value){
         console.log(`Settings value: ${value}, type: ${typeof(value)}`);
 //        container.innerText = value;
     }
-    settingsPage.appendChild(container);
+    settingsPage().appendChild(container);
 }
 
 settingsKeys.forEach(
@@ -212,7 +218,7 @@ settingsKeys.forEach(
 /* Small dump as pre text */
 var predump = document.createElement('pre');
 predump.innerText = JSON.stringify(settings, null, 2);
-settingsPage.appendChild(predump);
+settingsPage().appendChild(predump);
 /* END of: Small dump as pre text */
 
 // console.log(settings.ipfsGatewayAddress[settings.ipfsSelectedGatewayAddress]);
diff --git a/src/js/environment-setup.js b/src/js/environment-setup.js
index 5daf7c7..b1eede8 100644
--- a/src/js/environment-setup.js
+++ b/src/js/environment-setup.js
@@ -6,53 +6,164 @@
  *
  */
 var mixtapeIds = new Array;
+export function addMixtapeID(zblockIPFSHash)
+{
+    mixtapeIds.push('mixtape-player-'+zblockIPFSHash);
+}
+
 var mixtapes = new Array;
+export function setMixtape(zblockIPFSHash, json)
+{
+    mixtapes[zblockIPFSHash] = json;
+}
+export function getMixtapes()
+{
+    return mixtapes;
+}
+
 var sortedMixtapes = new Array;
 var zchainsFound = 0;
-var holders = new Array;
+var foundHolders = new Array;
 var gpglist = new Array;
-var participants = new Array;
 var stellarNetworkConfiguredAddresses = 0;
 var stellarParticipants = 0;
+
+var participants = new Array;
+export function getParticipants()
+{
+    return participants;
+}
+
+export function stellarParticipantInfo(participant, info)
+{
+    participants[participant] = info;
+}
+
+export function getStellarNetworkConfiguredAddresses()
+{
+    return stellarNetworkConfiguredAddresses;
+}
+
+export function increaseStellarNetworkConfiguredAddresses()
+{
+    stellarNetworkConfiguredAddresses += 1;
+}
+
+export function getFoundHolders()
+{
+    return foundHolders;
+}
+
+export function addToFoundHolders(holder)
+{
+    foundHolders.push(holder);
+}
+
+export function getStellarParticipants()
+{
+    return stellarParticipants;
+}
+
+export function setStellarParticipants(i)
+{
+    stellarParticipants = i;
+}
+
+export function increaseStellarParticipants()
+{
+    stellarParticipants++;
+}
+
 var stellarParticipantsScanned = 0;
+
+export function getStellarParticipantsScanned()
+{
+    return stellarParticipantsScanned;
+}
+export function setStellarParticipantsScanned(i)
+{
+    stellarParticipantsScanned = i;
+}
+
 var zchainLoadingStatus = new Array;
+export function setZchainLoadingStatus(zchain, status)
+{
+    zchainLoadingStatus[zchain] = status;
+}
+export function getZchainLoadingStatus(zchain)
+{
+    return zchainLoadingStatus[zchain];
+}
+export function getZchainLoadingStatuses()
+{
+    return zchainLoadingStatus;
+}
+
 var zchains = new Array;
 var references = new Array;
+export function getReferences()
+{
+    return references;
+}
+
+export function getReference(zblock)
+{
+    return references[zblock];
+}
+
+export function setReference(zblock, data)
+{
+    references[zblock] = data;
+}
+
 var fullZblocks = new Array;
+export function getFullZblock(zblockIPFSHash)
+{
+    return fullZblocks[zblockIPFSHash];
+}
+
+export function getFullZblocks()
+{
+    return fullZblocks;
+}
+
+export function setFullZblock(zblockIPFSHash, data)
+{
+    fullZblocks[zblockIPFSHash] = data;
+}
+
 var zblocks = new Array;
+export function getZblocks()
+{
+    return zblocks;
+}
+
+export function getZblock(group)
+{
+    return zblocks[group];
+}
+
+export function setZblock(group, zblockIPFSHash)
+{
+    if ( zblocks[group] === undefined )
+    {
+        zblocks[group] = new Array;
+    }
+    zblocks[group].push(zblockIPFSHash);
+}
+
 var blocks = new Array;
 var data = new Array;
+
+export function setData(hash, json)
+{
+    data[hash] = json;
+}
+
 var nodeInfo = new Array;
-var body = document.querySelector('body');
-var pageLayout = document.querySelector('.page-layout');
-var mainContainer = document.querySelector('.main');
-var isMobile = false;
-var aknet = document.querySelector('.aknet-network')
-var resultsArea = document.querySelector('.results-area')
 
 
-/*
- * 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'
-];
+
 
 /*
  * We select our basic placeholders.
@@ -61,12 +172,6 @@ var menuids = [
  * to append data on specific places in the page.
  *
  */
-var progressPlaceholder = document.querySelector('#total-progress');
-var httpProgressPlaceholder = document.querySelector('#http-progress');
-var currentLogMessageElement = document.querySelector('#current-log-message');
-var logsAreaElement = document.querySelector("#logs-area-element");
-var radio = document.querySelector("#radio-player");
-var radioButton = document.querySelector("#radio-button-controller");
 
 /*
  * Get addresses that trust the asset
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/secti