add notices

scoreboard.html

@@ -37,6 +37,28 @@
         width: 100%;
       }
 
+#penalties.notice {
+    display: none;
+}
+#notice div {
+    font-family: sans-serif;
+    font-size: 800%;
+    display: none;
+}
+#notice .active {
+    display: block;
+    -moz-animation-duration: 0.5s;
+    -moz-animation-name: grow;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-direction: alternate;
+}  
+    
+@-moz-keyframes grow {  
+  0%   {color: red;}
+  50%  {color: yellow;}
+  75%  {color: blue;}
+  100% {color: magenta;}
+}
 
     </style>
     <link rel="stylesheet" type="text/css" href="scoreboard.css">
@@ -44,6 +66,32 @@
     <script type="text/javascript" src="scoreboard.js"></script>
     <script type="text/javascript" src="penalties.js"></script>
     <script type="text/javascript">
+var notice_timer;
+
+function notice_expire(n) {
+    var p = document.getElementById("penalties");
+    var pClassName = "";
+
+    for (var i = 0; i < 10; i += 1) {
+        var e = document.getElementById("notice-" + i);
+        
+        if (! e) continue;
+        if (i == n) {
+            e.className = "active";
+            pClassName = "notice";
+        } else {
+            e.className = "";
+        }
+    }
+    if (p) p.className = pClassName;
+}
+
+function notice(n) {
+    clearTimeout(notice_timer);
+    notice_timer = setTimeout(function() {notice_expire()}, 8000);
+    notice_expire(n);
+}
+
       window.onkeypress = key;
     </script>
   </head>
@@ -101,5 +149,10 @@
         <tr class="sk8ers"></tr>
       </table>
     </div>
+    <div id="notice">
+      <div id="notice-1">Power Jam</div>
+      <div id="notice-2">Grand Slam</div>
+      <div id="notice-3">Ouch!</div>
+    </div>
   </body>
 </html>

scoreboard.js

@@ -308,9 +308,10 @@ function handle(event) {
 }
 
 function key(event) {
+    var c = String.fromCharCode(event.which || 0);
     var newstate;
 
-    switch (String.fromCharCode(event.which || 0)) {
+    switch (c) {
     case " ":
         if (state == JAM) {
             newstate = LINEUP;
@@ -333,6 +334,20 @@ function key(event) {
     case "B":
         score('b', -1);
         break;
+    case "1":
+    case "2":
+    case "3":
+    case "4":
+    case "5":
+    case "6":
+    case "7":
+    case "8":
+    case "9":
+        var n = Number(c);
+
+        if (window.notice) {
+            window.notice(n);
+        }
     }
 
     transition(newstate);