all repos — retro-website @ c28f8a2fe33f5a349ae848bebf6f5da189332e28 

code cleanup
Marco Andronaco andronacomarco@gmail.com
Mon, 19 Sep 2022 01:29:24 +0200
commit

c28f8a2fe33f5a349ae848bebf6f5da189332e28

parent

1ce53a4681cf20a81c4591a518c27d0e357772a9

11 files changed, 54 insertions(+), 92 deletions(-)

jump to
M index.html → index.html 
@@ -73,8 +73,8 @@ <div id="music-player-song" style="top: 100%;">
             <span id="song-text">Jay Tholen - Awesome Rap Beat (Hypnospace Outlaw Original Soundtrack, Vol. 2)</span>
         </div>
     </div>
-    <script src="res/script.js"></script>
     <script src="res/slow_load.js"></script>
+    <script src="res/script.js"></script>
 </body>
 
 </html>
M pages/about.html → pages/about.html 
@@ -6,9 +6,10 @@ <meta charset="UTF-8">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="about">
     <h1>About me</h1>
 
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/anime.html → pages/anime.html 
@@ -8,7 +8,7 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="anime">
     <h1>Anime I watched</h1>
     <!--
 JoJo's Bizarre Adventure

@@ -16,6 +16,7 @@ Gurren Lagann
 Dragon Quest Dai's Adventure (remake 2021)
     -->
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/dragonquest.html → pages/dragonquest.html 
@@ -8,9 +8,10 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="dragonquest">
     <h1>Dragon Quest</h1>
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/earthbound.html → pages/earthbound.html 
@@ -8,9 +8,10 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="earthbound">
     <h1>Earthbound</h1>
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/gf.html → pages/gf.html 
@@ -8,9 +8,11 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+
+<body data-page="gf">
     <h1>My love Giulia</h1>
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/indies.html → pages/indies.html 
@@ -8,7 +8,7 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="indies">
     <h1>Other indie masterpieces!</h1>
     <h2>Hypnospace Outlaw</h2>
     <h2>Terraria</h2>

@@ -19,6 +19,7 @@ <h2>Hylics</h2>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     <h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2>
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M pages/zelda.html → pages/zelda.html 
@@ -8,9 +8,10 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
 </head>
 
-<body>
+<body data-page="zelda">
     <h1>The Legend of Zelda</h1>
     
+    <script src="../res/slow_load.js"></script>
     <script src="../res/iframe.js"></script>
 </body>
M res/iframe.js → res/iframe.js 
@@ -1,59 +1,5 @@
-const loadAudio = [
-    new Audio(url="../res/sfx/os/loadelement1.ogg"),
-    new Audio(url="../res/sfx/os/loadelement2.ogg"),
-    new Audio(url="../res/sfx/os/loadelement3.ogg"),
-    new Audio(url="../res/sfx/os/loadelement4.ogg")
-]
-const not_allowed = ["AUDIO", "META", "TITLE", "LINK", "SOURCE", "SCRIPT", "BR"];
 
-function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    return Math.floor(Math.random() * (Math.floor(max) - min + 1)) + min;
-}
-
-function playAudio(audio){
-    audio.volume = 0.1;
-    audio.currentTime = 0;
-    audio.play();
-}
-
-const all = document.getElementsByTagName("*");
-let total = 0;
-for (i in all) {
-    const node = all[i];
-    if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){
-        total++;
-        node.setAttribute("data-display", node.style.display);
-        node.style.display = "none";
-    }
-}
-
-function start_loading(speed=parent.loadSpeed, not_allowed=[], callback) {
-
-    function onNodeLoaded(node){
-        node.style.display = node.getAttribute("data-display");
-        counter++;
-        ratio = counter / total * 100;
-        randomAudio();
-    
-        if (ratio >= 100 && callback)
-            callback()
-    }
-    
-    let counter = 0;
-    let i = 0;
-    for (element in all) {
-        const node = all[element];
-        if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){
+const this_page = document.body.getAttribute("data-page");
 
-            i += getRandomInt(250 / speed, 500 / speed);
-            setTimeout(() => { onNodeLoaded(node);}, i);
-        }
-    }
-}
-
-function randomAudio(){
-    const random_audio = getRandomInt(0, loadAudio.length - 1);
-    playAudio(loadAudio[random_audio]);
-}
-
+hide_all();
+parent.loadIFrame(() => parent.frameLoadedCallback(this_page));
M res/script.js → res/script.js 
@@ -81,7 +81,9 @@ function firstClickPlay(element) {
     const overlay = document.getElementById("overlay");
     if(overlay) {
         overlay.remove();
-        slow_load(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) });
+        hide_all();
+        start_loading(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) });
+        //slow_load(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) });
     }
 
     click1 = clickAudio1 || parent.clickAudio1;

@@ -92,18 +94,18 @@ element.onmousedown = () => playAudio(click1);
     element.onmouseup = () => playAudio(click2);
 }
 
+function frameLoadedCallback(page) {
+    controlsEnabled = true;
+    playPause(!play, page_tracks[page]);
+}
+
 function goToPage(page) {
     if (!controlsEnabled || currentPage == page) return
 
     music.pause()
     controlsEnabled = false;
     iframe.src = "pages/" + page + ".html";
-    
-    iframe.addEventListener("load", () => { loadIFrame(()=> { controlsEnabled = true; playPause(!play, page_tracks[page]); }); }, {once: true})
-
     currentPage = page;
-    
-    
 }
 
 function formatTrack(track) {
M res/slow_load.js → res/slow_load.js 
@@ -1,8 +1,8 @@
 const loadAudio = [
-    new Audio(url="res/sfx/os/loadelement1.ogg"),
-    new Audio(url="res/sfx/os/loadelement2.ogg"),
-    new Audio(url="res/sfx/os/loadelement3.ogg"),
-    new Audio(url="res/sfx/os/loadelement4.ogg")
+    new Audio(url="../res/sfx/os/loadelement1.ogg"),
+    new Audio(url="../res/sfx/os/loadelement2.ogg"),
+    new Audio(url="../res/sfx/os/loadelement3.ogg"),
+    new Audio(url="../res/sfx/os/loadelement4.ogg")
 ]
 const not_allowed = ["AUDIO", "META", "TITLE", "LINK", "SOURCE", "SCRIPT", "BR"];
 

@@ -17,37 +17,43 @@ audio.currentTime = 0;
     audio.play();
 }
 
-function slow_load(speed=10, not_allowed=[], callback) {
-    
-    function onFinish(node, initial_display){
-        node.style.display = initial_display;
+const all = document.getElementsByTagName("*");
+let total = 0;
+
+function hide_all() {
+    console.log("hide");
+    for (i in all) {
+        const node = all[i];
+        if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){
+            total++;
+            node.setAttribute("data-display", node.style.display);
+            node.style.display = "none";
+        }
+    }
+}
+
+function start_loading(speed, not_allowed=[], callback) {
+    console.log("show");
+
+    function onNodeLoaded(node){
+        node.style.display = node.getAttribute("data-display");
         counter++;
         ratio = counter / total * 100;
         
-        randomAudio();
+        playAudio(loadAudio[getRandomInt(0, loadAudio.length - 1)]);
     
         if (ratio >= 100 && callback)
             callback()
     }
     
-    const all = document.getElementsByTagName("*");
     let counter = 0;
-    let total = 0;
     let i = 0;
     for (element in all) {
-
         const node = all[element];
         if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){
+
             i += getRandomInt(250 / speed, 500 / speed);
-            total++;
-            const initial_display = node.style.display;
-            node.style.display = "none";
-            setTimeout(() => { onFinish(node, initial_display);}, i);
+            setTimeout(() => { onNodeLoaded(node);}, i);
         }
     }
 }
-
-function randomAudio(){
-    const random_audio = getRandomInt(0, loadAudio.length - 1);
-    playAudio(loadAudio[random_audio]);
-}