added easter eggs

- fixed formatting issue
- added bttf
- console log codes
- easter egg pack

3 files changed, 177 insertions, 3 deletions

diff --git a/konami/css/main.css b/konami/css/main.css
index fb6298e..8e34ca6 100644
--- a/konami/css/main.css
+++ b/konami/css/main.css
@@ -210,3 +210,50 @@ main {
         border-right: 0.08em solid #222;
     }
 }
+
+/* BIFF, MARTY, EMMETT, GOLDIE */
+.eggsfound {
+    background: red;
+    color: white;
+    font-weight: bold;
+    opacity: 0;
+    left: 50%;
+    position: fixed;
+    top: 0;
+    width: 300px;
+    margin-left: -150px;
+    z-index: -300;
+    transition: opacity 0.5s ease;
+    padding: 10px;
+    text-align: center;
+}
+
+.eggsfound.animate {
+    opacity: 1;
+    z-index: 999;
+}
+
+img.marty,
+img.docbrown,
+img.biff,
+img.goldie {
+    bottom: -376px;
+    position: fixed;
+    right: 0;
+    transition: bottom 0.3s ease;
+    z-index: 9999;
+}
+
+.marty-show img.marty,
+.docbrown-show img.docbrown,
+.biff-show img.biff,
+.goldie-show img.goldie {
+    bottom: 0;
+}
+
+p {
+    text-align: center;
+    font-weight: bold;
+    margin: 50vh 0 0 0;
+    font-family: sans-serif;
+}
\ No newline at end of file
diff --git a/konami/index.html b/konami/index.html
index 1fc4fea..b2a1a29 100644
--- a/konami/index.html
+++ b/konami/index.html
@@ -22,6 +22,8 @@
         <script src="/cdn-cgi/apps/head/_vFlzwEWzfnxN-k3KPkfOrUdyXo.js"></script>
         <script src="https://www.googletagmanager.com/gtag/js?id=UA-30692517-4"></script>
         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+        <script src="https://rawgit.com/WeiChiaChang/Easter-egg/master/easter-eggs-collection.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
         <link rel="apple-touch-icon" sizes="128x128" href="/konami/assets/images/small-spinning-globe3.gif">
         <link rel="icon" type="image/gif" href="/konami/assets/images/small-spinning-globe3.gif" sizes="128x128">
         <link rel="canonical" href="https://s1n.pw/">
@@ -100,9 +102,25 @@
 
         <!-- Toasty -->
         <img class='toasty' src='https://s3-eu-west-1.amazonaws.com/wdildnproject2/toasty.png'>
+        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 
-        <script src="https://code.jquery.com/jquery-3.2.1.min.js"
-            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+        <!-- Marty -->
+        <audio class="marty" src="https://jigowatt.co.uk/wp-content/themes/client/dist/audio/marty.mp3" preload="auto"></audio>
+        <img class="marty" src="https://jigowatt.co.uk/wp-content/themes/client/dist/img/marty.png" alt="marty">
+        
+        <!-- Doc -->
+        <audio class="docbrown" src="https://jigowatt.co.uk/wp-content/themes/client/dist/audio/docbrown.mp3"
+            preload="auto"></audio>
+        <img class="docbrown" src="https://jigowatt.co.uk/wp-content/themes/client/dist/img/docbrown.png" alt="doc">
+        
+        <!-- Biff -->
+        <audio class="biff" src="https://jigowatt.co.uk/wp-content/themes/client/dist/audio/biff.mp3" preload="auto"></audio>
+        <img class="biff" src="https://jigowatt.co.uk/wp-content/themes/client/dist/img/biff.png" alt="biff">
+        
+        <!-- Goldie -->
+        <audio class="goldie" src="https://jigowatt.co.uk/wp-content/themes/client/dist/audio/goldie.mp3"
+            preload="auto"></audio>
+        <img class="goldie" src="https://jigowatt.co.uk/wp-content/themes/client/dist/img/goldie.png" alt="goldie">
 
         <!-- Background Music
             // CREDITS: //
diff --git a/konami/js/main.js b/konami/js/main.js
index 47e21f7..9ffed54 100644
--- a/konami/js/main.js
+++ b/konami/js/main.js
@@ -1,3 +1,10 @@
+// LOADER ANIMATION
+$(window).on("load", function () {
+    console.log("UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A")
+    console.log("Biff, Marty, Emmett, Goldie")
+    console.log("pie, ufo, walk, cool, balloon, hangover, kirby, no, onmyway, haters, board, snorlax, fly, earth, thankyou, swim, penguin, handsome, tank, jump, winner, fox, mario, joker, rabbit, piggy, psyduck, dragon, salamander, airguitar, pikachu, bravo, ghost, britney, pikarun, catrun, koggy, sonic, doggy, spongebob, gun, money, bird, piqiu, lol, ohhh, nyancat")
+})
+
 // SCROLLING TITLE
 var space = " ";
 var speed = "60";
@@ -109,4 +116,106 @@ window.onload = function () {
             new TxtRotate(elements[i], JSON.parse(toRotate), period);
         }
     }
-};
\ No newline at end of file
+};
+
+// BIFF, MARTY, EMMETT, GOLDIE
+
+// give $ to jQuery
+(function ($) {
+
+    /**==============================================================
+         * BTTF CHARACTER EASTER EGGS
+         * ==============================================================
+         */
+    var characters = {};
+    var pressedKeys = [];
+
+	/**
+	 * Plays the audio clip for a specific easter egg character
+	 * @param  {string} character name of character
+	 */
+    function playAudio(character) {
+        setTimeout(function () {
+            characters[character].audioFile.play();
+            setTimeout(function () {
+                toggleShowChar(character);
+                updateEggs();
+            }, characters[character].audioLength);
+        }, 300);
+    }
+
+	/**
+	 * Toggles the display of an easter egg character
+	 * @param  {string} character character name
+	 */
+    function toggleShowChar(character) {
+        $('body').toggleClass(characters[character].name + '-show');
+    }
+
+	/**
+	 * Add characters' information once page loads
+	 */
+    $(document).ready(function () {
+        characters = {
+            'guessed': [],
+            'marty': {
+                'name': 'marty',
+                'nameKeys': "77,65,82,84,89",
+                'audioFile': $('audio.marty')[0],
+                'audioLength': 1300,
+            },
+            'docbrown': {
+                'name': 'docbrown',
+                'nameKeys': "69,77,77,69,84,84",
+                'audioFile': $('audio.docbrown')[0],
+                'audioLength': 2500,
+            },
+            'biff': {
+                'name': 'biff',
+                'nameKeys': "66,73,70,70",
+                'audioFile': $('audio.biff')[0],
+                'audioLength': 1100,
+            },
+            'goldie': {
+                'name': 'goldie',
+                'nameKeys': "71,79,76,68,73,69",
+                'audioFile': $('audio.goldie')[0],
+                'audioLength': 4000,
+            }
+        };
+    });
+
+	/**
+	 * Track character names being typed
+	 */
+    $(window).keydown(function (e) {
+
+        pressedKeys.push(e.keyCode);
+
+        // loop through characters
+        for (var character in characters) {
+
+            // if the "pressedKeys" contains the current character name
+            if (pressedKeys.toString().indexOf(characters[character].nameKeys) >= 0) {
+
+                // reset the pressedKeys array
+                pressedKeys = [];
+
+                // add "show" class to animate the character in
+                toggleShowChar(character);
+
+                if ($.inArray(character, characters.guessed) === -1) {
+                    characters.guessed.push(character);
+                }
+
+                // wait a second and play the character's audio file
+                playAudio(character);
+            }
+        }
+
+        // reset pressedKeys at 50 keypresses to save memory
+        if (pressedKeys.length > 500) { pressedKeys = []; }
+
+    });
+
+})(jQuery);
\ No newline at end of file