add a pong easter pong

css/style.css

@@ -94,6 +94,43 @@ div a {
     text-align: right;
 }
 
+#super-secret-pong-game {
+    background-color: #000;
+    height: 200px;
+    width: 400px;
+    overflow: hidden;
+}
+
+#super-secret-pong-score {
+    position: relative;
+    color: #fff;
+    top: 4px;
+    right: 4px;
+    text-align: center;
+}
+
+.super-secret-pong-paddle {
+    position: relative;
+    background-color: #fff;
+    height: 32px;
+    width: 2px;
+}
+
+#super-secret-pong-left-paddle {
+    left: 16px;
+}
+
+#super-secret-pong-right-paddle {
+    left: 382px;
+}
+
+#super-secret-pong-ball {
+    position: relative;
+    background-color: #fff;
+    height: 4px;
+    width: 4px;
+}
+
 .draggable {
     top: 20%;
     left: 20%;

index.html

@@ -8,7 +8,7 @@
 <body>
     <main>
         <div id="topbar-div">
-            <h4>HarupiOS</h4>
+            <h4 id="harupios-btn" class="btn">HarupiOS</h4>
 
             <p id="date-and-time"></p>
             
@@ -19,6 +19,7 @@
             <img src="images/me.png" alt="My profile picture" id="welcome-div-open" class="btn">
             <p id="booklist-div-open" class="dock-icon btn closed">📚️</p>
             <p id="about-me-div-open" class="dock-icon btn closed">📃</p>
+            <p id="super-secret-pong-div-open" class="dock-icon btn hidden">🏓</p>
         </div>
     
         <div id="welcome-div" class="draggable">
@@ -88,6 +89,22 @@
                 <a href="mailto:hvrupi@proton.me" target="_blank">E-mail</a>
             </p>
         </div>
+        <div id="super-secret-pong-div" class="draggable hidden">
+            <span id="super-secret-pong-div-header" class="header">
+                <p id="super-secret-pong-div-icon">🏓</p>
+                <p>Super secret Pong</p>
+                <p id="super-secret-pong-div-close" class="btn">⨯</p>
+            </span>
+            <h4>Welcome to the super secret Pong !</h4>
+            <p>Play with ↑ and ↓</p>
+            <p id="super-secret-pong-start" class="btn"><b>Start</b></p>
+            <section id="super-secret-pong-game">
+                <section id="super-secret-pong-score">0</section>
+                <section id="super-secret-pong-left-paddle" class="super-secret-pong-paddle"></section>
+                <section id="super-secret-pong-right-paddle" class="super-secret-pong-paddle"></section>
+                <section id="super-secret-pong-ball"></section>
+            </section>
+        </div>
     </main>
     <script src="js/script.js"></script>
 </body>

js/script.js

@@ -125,3 +125,117 @@ document.getElementById("next-book-btn").addEventListener("click", nextBook);
 document.getElementById("previous-book-btn").addEventListener("click", previousBook);
 
 updateBook(currentbookid);
+
+// Super secret pong
+
+var pongscore = document.getElementById("super-secret-pong-score");
+var pongleftpaddle = document.getElementById("super-secret-pong-left-paddle");
+var pongleftpaddleoffset = - 19;
+var pongrightpaddle = document.getElementById("super-secret-pong-right-paddle");
+var pongrightpaddleoffset = - 51;
+var pongpaddlepos;
+var pongball = document.getElementById("super-secret-pong-ball");
+var pongballyoffset = -83;
+var pongballx;
+var pongballxvel;
+var pongbally;
+var pongballyvel;
+var ponginterval;
+var pongstatus = false;
+
+function pongResetScore() {
+    pongscore.textContent = "0";
+}
+
+function pongInit() {
+    pongpaddlepos = 18;
+    pongleftpaddle.style.top = "-1px";
+    pongrightpaddle.style.top = "-33px";
+    pongballx = 32;
+    pongball.style.left = "32px";
+    pongbally = 32;
+    pongball.style.top = "-51px";
+}
+
+function pongStart() {
+    pongInit();
+    pongstatus = true;
+    pongscore.textContent = "0";
+    pongballxvel = 6;
+    pongballyvel = 3;
+
+    ponginterval = setInterval(updateBall, 100);
+}
+
+function updateBall() {
+    if (0 > pongbally + pongballyvel || pongbally + pongballyvel > 196) {
+        if (pongballyvel > 0) {
+            pongballyvel = - Math.floor(Math.random() * 2) - pongballyvel;
+        } else {
+            pongballyvel = Math.floor(Math.random() * 2) - pongballyvel;
+        }
+    }
+
+    if (18 > pongballx + pongballxvel || pongballx + pongballxvel > 374) {
+        if (pongpaddlepos < pongbally + pongballyvel && pongbally + pongballyvel < pongpaddlepos + 32) {
+            if (pongballxvel > 0) {
+                pongballxvel = - Math.floor(Math.random() * 2) - pongballxvel;   
+            } else {
+                pongballxvel = Math.floor(Math.random() * 2) - pongballxvel; 
+            }
+            pongscore.textContent ++;
+        } else {
+            clearInterval(ponginterval);
+            pongstatus = false;
+            pongballx += pongballxvel;
+            pongbally += pongballyvel;
+            pongball.style.left = pongballx.toString() + "px";
+            var pongballywithoffset = pongbally + pongballyoffset;
+            pongball.style.top = pongballywithoffset.toString() + "px";
+        }
+    }
+
+    pongballx += pongballxvel;
+    pongbally += pongballyvel;
+    pongball.style.left = pongballx.toString() + "px";
+    var pongballywithoffset = pongbally + pongballyoffset;
+    pongball.style.top = pongballywithoffset.toString() + "px";
+}
+
+document.getElementById("super-secret-pong-start").addEventListener("click", pongStart);
+
+document.body.addEventListener("keydown", function(event) {
+    if (event.key == "ArrowUp" && pongstatus) {
+        if (0 < pongpaddlepos) {
+            pongpaddlepos -= 4;
+            var pongleftpaddleposwithoffset = pongpaddlepos + pongleftpaddleoffset;
+            var pongrightpaddleposwithoffset = pongpaddlepos + pongrightpaddleoffset;
+            pongleftpaddle.style.top = pongleftpaddleposwithoffset.toString() + "px";
+            pongrightpaddle.style.top = pongrightpaddleposwithoffset.toString() + "px";
+        }
+    } else if (event.key == "ArrowDown" && pongstatus) {
+        if (pongpaddlepos < 168) {
+            pongpaddlepos += 4;
+            var pongleftpaddleposwithoffset = pongpaddlepos + pongleftpaddleoffset;
+            var pongrightpaddleposwithoffset = pongpaddlepos + pongrightpaddleoffset;
+            pongleftpaddle.style.top = pongleftpaddleposwithoffset.toString() + "px";
+            pongrightpaddle.style.top = pongrightpaddleposwithoffset.toString() + "px";
+        }
+    }
+});
+
+pongInit();
+
+// Super secret button
+
+var supersecretcounter = 0;
+var pongSound = new Audio("../sounds/pong.mp3");
+
+document.getElementById("harupios-btn").addEventListener("click", function() {
+    supersecretcounter ++;
+    pongSound.play();
+    if (supersecretcounter == 8) {
+        document.getElementById("super-secret-pong-div-open").classList.remove("hidden");
+        document.getElementById("super-secret-pong-div").classList.remove("hidden");
+    }
+});