Add shake on loss in Repeat

Author: Neil Fraser

favicon.ico

@@ -4,6 +4,9 @@
     <title>Beaver Games</title>
     <link rel="stylesheet" href="common.css">
     <style>
+      table {
+        margin: 2em 0;
+      }
       td {
         padding: 1em;
       }
@@ -51,6 +54,7 @@ <h1>Beaver Games</h1>
         </td>
       </tr>
     </table>
-
+    <hr>
+    All code is <a href="https://github.com/NeilFraser/beaver-games">open source</a>.
   </body>
 </html>

index.html

@@ -78,6 +78,25 @@
       #difficulty {
         float: right;
       }
+
+      body.fail {
+        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+        transform: translate(0, 0);
+      }
+      @keyframes shake {
+        10%, 90% {
+          transform: translate(-1px, 0);
+        }
+        20%, 80% {
+          transform: translate(2px, -2px);
+        }
+        30%, 50%, 70% {
+          transform: translate(-4px, 0);
+        }
+        40%, 60% {
+          transform: translate(4px, 2px);
+        }
+      }
     </style>
     <script src="index.js"></script>
   </head>

repeat/index.html

@@ -82,6 +82,7 @@ function initTimeline() {
 
 // Show the start button and disable the controls.
 function showStart() {
+  document.body.className = '';
   var startButton = document.getElementById('start');
   startButton.style.display = '';
   var table = document.getElementById('controls');
@@ -160,6 +161,7 @@ function startHuman() {
 
 // Human pressed the wrong note.  End game, show start button.
 function fail() {
+  document.body.className = 'fail';
   document.getElementById('fail').play();
   mode = modes.START;
   setTimeout(showStart, 1000);