Added additional babble effect

css/main.css

@@ -256,12 +256,16 @@ button.accordion:focus {
 }
 
 #controls {
-    transform: translateY(-100%);
+    transform: translateY(-200%);
     color: grey;
     font-size: 175%;
     background-color: #242a3388;
     padding: 20px;
+}
+
+#controls.show {
     transition: transform 1s ease;
+    transform: translateY(0);
 }
 
 #controls p {
@@ -272,6 +276,29 @@ button.accordion:focus {
     width: 2rem;
 }
 
+#babble {
+    position: absolute;
+    z-index: 3;
+    transition: opacity .5s ease;    
+    font-size: xx-large;
+    color: white;
+}
+
+#babble.hidden {
+    opacity: 0;
+}
+
+#babble div {
+    animation: babble-anim 3s infinite both;
+}
+
+@keyframes babble-anim {
+    0% { opacity: 0; }
+    25% { opacity: 1; }
+    80% { opacity: 0; }
+    100% { opacity: 0; }
+}
+
 .page-title {
     font-size: xx-large;
     font-weight: 400;

index.html

@@ -7,6 +7,11 @@ favorites: [NaN, Tower Offense, Slime Chargers!]
 ---
 <div id="puppet">
     <div id="current_chat"></div>
+    <div id="babble" class="hidden">
+        <div style="animation-delay: 0s; transform: translate(-20px, -60px) rotate(-15deg);">Babble</div>
+        <div style="animation-delay: .85s; transform: translate(0px, -30px) rotate(2.5deg);">Babble</div>
+        <div style="animation-delay: 1.7s; transform: translate(10px, 2px) rotate(-5deg);">Babble</div>
+    </div>
 </div>
 
 <div id="controls">

js/home.js

@@ -64,8 +64,14 @@ window.onkeydown = function(e) {
     current_chat.style.display = 'none'
 
     if (key == 32) {
-        stage.getPuppet(1).setBabbling(true)
         e.preventDefault()
+        if (stage.getPuppet(1).babbling) return
+        stage.getPuppet(1).setBabbling(true)
+        var temp = babbleEl
+        babbleEl = babbleEl.cloneNode(true)
+        temp.parentNode.replaceChild(babbleEl, temp)
+        babbleEl.className = ''
+        interval = requestAnimationFrame(showBabble)
     }
 }
 window.onkeyup = function(e) {
@@ -78,11 +84,26 @@ window.onkeyup = function(e) {
     else if (key == 39) stage.getPuppet(1).moveRight()
     else if (key == 32) {
         stage.getPuppet(1).setBabbling(false)
+        babbleEl.className = 'hidden'
+        cancelAnimationFrame(interval)
         e.preventDefault()
     }
 }
 
 function showControls() {
-    controls.style.transform = 'translateY(0)'
+    controls.className = 'show'
 }
 setTimeout(showControls, 4000)
+
+var interval = null
+var babbleEl = document.getElementById("babble")
+function showBabble() {
+    var puppet = stage.getPuppet(1)
+    var x = puppet.container.x + 150
+    var y = puppet.container.y - 400
+    if (puppet.facingLeft)
+        x -= 450
+    babbleEl.style.top = y + "px"
+    babbleEl.style.left = x + "px"
+    interval = requestAnimationFrame(showBabble)
+}