git rekt — retro-website.git: 01cd37a6289e6c6786134951c3b0adb291712ea4

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="height: 100%">
+<html lang="en" style="height: 100%" onclick="firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
@@ -13,43 +13,43 @@
 <body style='background-image: url("res/img/background.jpg"); height: 100%;'>
     <div id="main-container">
         <div class="center" style="padding-top:30px;">
-            <a data-page="about" id="aTitle">
+            <a onclick="goToPage('about')">
                 <img src="res/gif/text.gif" alt="BiRabittoh's cool website" class="hover-tilt">
             </a>
         </div>
-        <div id="background-orange" class="shadow">
-            <h1>My favorite things:</h1>
-            <a data-page="earthbound">
+        <div id="menu-div" class="shadow">
+            <h1 style="margin-top:0px;">My favorite things:</h1>
+            <a onclick="goToPage('earthbound')">
                 <div class="menu-item">
                     <span>Earthbound</span>
                     <img src="res/gif/ness1.gif">
                 </div>
             </a>
-            <a data-page="dragonquest">
+            <a onclick="goToPage('zelda')">
                 <div class="menu-item">
-                    <span>Dragon Quest</span>
-                    <img src="res/gif/slime1.gif">
+                    <span>Zelda</span>
+                    <img src="res/gif/linkmc.gif">
                 </div>
             </a>
-            <a data-page="zelda">
+            <a onclick="goToPage('dragonquest')">
                 <div class="menu-item">
-                    <span>Zelda</span>
-                    <img src="res/gif/linkmc.gif">
+                    <span>Dragon Quest</span>
+                    <img src="res/gif/slime1.gif">
                 </div>
             </a>
-            <a data-page="indies">
+            <a onclick="goToPage('indies')">
                 <div class="menu-item">
                     <span>Indies</span>
                     <img src="res/gif/tutoriel.gif">
                 </div>
             </a>
-            <a data-page="anime">
+            <a onclick="goToPage('anime')">
                 <div class="menu-item">
                     <span>Anime</span>
                     <img src="res/gif/jojo.gif">
                 </div>
             </a>
-            <a data-page="gf">
+            <a onclick="goToPage('gf')">
                 <div class="menu-item">
                     <span>My perfect gf</span>
                     <img src="res/gif/kirby.gif">
@@ -62,7 +62,7 @@ </div>
     <div id="music-player">
         <div id="music-player-base" onclick="playPause()">
             <div id="music-player-overlay"></div>
-            <audio controls loop id="music"><source id="music-source" src="res/mus/AwesomeRapBeat.opus"></audio>
+            <audio controls loop id="music"><source id="music-source" src="#"></audio>
         </div>
         <div id="music-player-song" style="top: 100%;">
             <span id="song-text">Jay Tholen - Awesome Rap Beat (Hypnospace Outlaw Original Soundtrack, Vol. 2)</span>

M pages/about.html → pages/about.html

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../res/style.css">
     <link href="https://pvinis.github.io/iosevka-webfont/3.4.1/iosevka.css" rel="stylesheet" />
 </head>

M pages/anime.html → pages/anime.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">

M pages/dragonquest.html → pages/dragonquest.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">

M pages/earthbound.html → pages/earthbound.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">

M pages/gf.html → pages/gf.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">

M pages/indies.html → pages/indies.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
@@ -11,14 +11,12 @@ </head>
 
 <body>
     <h1>Other indie masterpieces!</h1>
-    test<br />test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br><a href="#">test</a>test<br>
-    <!--
-Terraria
-Fran Bow
-Psychonauts
-Undertale
-Hylics
-    -->
+    <h2>Hypnospace Outlaw</h2>
+    <h2>Terraria</h2>
+    <h2>Fran Bow</h2>
+    <h2>Psychonauts</h2>
+    <h2>Undertale</h2>
+    <h2>Hylics</h2>
 </body>
 
 </html>

M pages/zelda.html → pages/zelda.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" onclick="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">

M res/script.js → res/script.js

@@ -1,4 +1,3 @@
-const menu_div = document.getElementById("background-orange");
 const iframe = document.getElementById("content-iframe");
 const music = document.getElementById("music");
 const source = document.getElementById("music-source");
@@ -57,33 +56,19 @@ }
 
 let play = false;
 let currentPage = "about";
-let currentTrack = page_tracks[currentPage];
+let currentTrack = "";
 let timeout;
 
-function firstMusicPlay() {
-    playPause(false);
-    document.removeEventListener('click', firstMusicPlay);
+function firstClickPlay(element) {
+    playPause(false, page_tracks[currentPage]);
+    element.onclick = null;
 }
-document.addEventListener('click', firstMusicPlay);
 
 function goToPage(page) {
     if(currentPage == page)
         return
     iframe.src = "pages/" + page + ".html";
-
-    const newTrack = page_tracks[page];
-
-    if(newTrack != currentTrack){
-        currentTrack = newTrack;
-
-        source.src = "res/mus/" + tracks[newTrack].file_name;
-        music.load();
-        if (play) {
-            music.play();
-            showTitle();
-        }
-    }
-        
+    playPause(!play, page_tracks[page])
     currentPage = page;
 }
 
@@ -92,15 +77,14 @@ return `${track.track_author} - ${track.track_name} (${track.track_from})`;
 }
 
 function showTitle(){
+    if (!currentTrack) return;
     clearTimeout(timeout);
     music_song_text.textContent = formatTrack(tracks[currentTrack]);
     music_song.style.top = "0";
-    timeout = setTimeout(() => {
-        music_song.style.top = "100%";
-    }, 3_000);
+    timeout = setTimeout(() => { music_song.style.top = "100%"; }, 3_000);
 }
 
-function playPause(toggle=play) {
+function playPause(toggle=play, track=currentTrack) {
     if (toggle){
         music_base.classList.remove("player-play");
         music.pause();
@@ -109,20 +93,13 @@ }
     else {
         music_base.classList.add("player-play");
         music.volume = 0.1;
-        music.play();
-        play = true
+        if (track != currentTrack) {
+            currentTrack = track;
+            source.src = "res/mus/" + tracks[currentTrack].file_name;
+            music.load();
+        }
         showTitle();
+        music.play().catch(() => {});
+        play = true
     }
 }
-
-// page logic
-const title = document.getElementById("aTitle");
-title.addEventListener("click", () => goToPage(title.getAttribute("data-page")));
-[ ...menu_div.childNodes ].forEach(element => {
-    try{
-        const page = element.getAttribute("data-page");
-        if (page){
-            element.addEventListener("click", () => goToPage(page));
-        }
-    } catch {}
-});

M res/style.css → res/style.css

@@ -1,5 +1,10 @@
+@font-face {
+    font-family: '04b_03';
+    src: url('ttf/04b03.ttf')  format('truetype');
+}
+
 html {
-    font-family: "Iosevka Web";
+    font-family: "04b_03";
     color: white;
     cursor: url("cur/cursor2x.cur"), auto;
 }
@@ -42,28 +47,27 @@ .shadow {
     text-shadow: 1px 1px #000000;
 }
 
-#background-orange {
-    /* background-color: rgb(255, 170, 60); */
+#menu-div {
+    text-align: center;
     background-image: url("img/orange-banner.jpg");
     background-size: cover;
     color: white;
-    padding-bottom:10px;
+    padding:15px;
 }
 
-#background-orange a {
+#menu-div a {
     color: white;
     text-decoration: none;
 }
 
-#background-orange h1 {
+#menu-div h1 {
     margin-left: 18px;
-    padding-top: 10px;
 }
 
 .menu-item {
     text-align: center;
     display: inline-block;
-    width: 110px;
+    width: 118px;
 }
 
 .menu-item img {

A res/ttf/04b03.ttf