git rekt — retro-website.git: 0dc78c932195996389c5df61be9dc69f4b7f0e5e

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="height: 100%" onclick="firstClickPlay(this);">
+<html lang="en" style="height: 100%" onmousedown="firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
@@ -59,7 +59,7 @@ </div>
         <!--<iframe id="content-iframe" name="content" src="pages/about.html" onload="this.height = (this.contentWindow.document.body.scrollHeight + 43) + 'px';"></iframe>-->
         <iframe id="content-iframe" name="content" src="pages/about.html"></iframe>
     </div>
-    <div id="music-player">
+    <div id="music-player" onmouseenter="showTitle()" onmouseleave="hideTitle()" style="bottom: -100%">
         <div id="music-player-base" onclick="playPause()">
             <div id="music-player-overlay"></div>
             <audio controls loop id="music"><source id="music-source" src="#"></audio>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,8 @@ const source = document.getElementById("music-source");
 const music_base = document.getElementById("music-player-base");
 const music_song = document.getElementById("music-player-song");
 const music_song_text = document.getElementById("song-text");
+const clickAudio1 = new Audio(url="res/sfx/os/click2.ogg");
+const clickAudio2 = new Audio(url="res/sfx/os/click1.ogg");
 
 const tracks = {
     "awesome": {
@@ -54,14 +56,31 @@ "indies": "earmint",
     "zelda": "forest",
 }
 
+let first = false;
 let play = false;
 let currentPage = "about";
 let currentTrack = "";
-let timeout;
+let showTimeout, hideTimeout;
+
+function playAudio(audio){
+    audio.volume = 0.1;
+    audio.currentTime = 0;
+    audio.play();
+}
 
 function firstClickPlay(element) {
+    click1 = clickAudio1 || parent.clickAudio1;
+    click2 = clickAudio2 || parent.clickAudio2;
+
+    playAudio(click1)
+    element.onmousedown = () => playAudio(click1);
+    element.onmouseup = () => playAudio(click2);
+
+    if(first) return;
+    document.getElementById("music-player").style.bottom = "0";
+    music.volume = 0.1;
     playPause(false, page_tracks[currentPage]);
-    element.onclick = null;
+    first = true;
 }
 
 function goToPage(page) {
@@ -78,28 +97,39 @@ }
 
 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);
+    hideTitle();
+    clearTimeout(showTimeout);
+    clearTimeout(hideTimeout);
+    
+    showTimeout = setTimeout(() => { 
+        music_song_text.textContent = formatTrack(tracks[currentTrack]);
+        music_song.style.top = "0";
+    }, 400);
+
+    hideTimeout = setTimeout(() => hideTitle(), 3_400);
+}
+
+function hideTitle(){
+    music_song.style.top = "100%";
 }
 
 function playPause(toggle=play, track=currentTrack) {
+
     if (toggle){
         music_base.classList.remove("player-play");
         music.pause();
         play = false
+        hideTitle();
     }
     else {
         music_base.classList.add("player-play");
-        music.volume = 0.1;
         if (track != currentTrack) {
             currentTrack = track;
             source.src = "res/mus/" + tracks[currentTrack].file_name;
             music.load();
         }
-        showTitle();
         music.play().catch(() => {});
+        showTitle();
         play = true
     }
 }

A res/sfx/os/click1.ogg

A res/sfx/os/click2.ogg

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

@@ -53,6 +53,7 @@ background-image: url("img/orange-banner.jpg");
     background-size: cover;
     color: white;
     padding:15px;
+    margin-top: -18px;
 }
 
 #menu-div a {
@@ -78,10 +79,10 @@ }
 
 #music-player {
     position: fixed;
-    bottom: 0;
     left: 5px;
     height: 66px;
     image-rendering: pixelated;
+    transition: bottom .4s ease-in-out;
 }
 
 #music-player-base {