Cooler animations

res/scoreboard.css

@@ -69,7 +69,7 @@ body {
 }
 
 /* Jammer indicators */
-.jammer {
+#jammer-a, #jammer-b {
     font-family: monospace;
     position: absolute;
     bottom: 0em;
@@ -150,7 +150,7 @@ body {
 
 
 /*
- * States timers can be in 
+ * States timers can be in
  */
 #jam.paused, #period.paused {
     color: #aaf;
@@ -169,37 +169,17 @@ body {
 /*
  * Notices
  */
-#notice div {
-    display: none;
-
-    background: silver;
-    border: solid white 10px;
-    border-radius: 90px;
-
-    font-size: 150%;
-    font-family: Magenta, sans-serif;
-    font-weight: normal;
-    text-align: center;
-    opacity: 0.9;
-    
+#notice {
     position: absolute;
     bottom: 1.3em;
     left: 50%;
-    width: 3em;
-    margin-left: -1.5em;
-}
-#notice .active {
-    display: inherit;
-    -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;}
+    width: 4em;
+	height: 3em;
+    margin-left: -2em;
+}
+
+#notice embed {
+	width: 100%;
+	height: 100%;
 }
 

res/scoreboard.js

@@ -29,7 +29,7 @@ tenths = true;
 
 /* State names */
 var SETUP = 0;                  // !P 30:00   !J 2:00
-var JAM = 1;                    //  P          J 2:00  
+var JAM = 1;                    //  P          J 2:00
 var LINEUP = 2;                 //  P          J 1:00
 var TIMEOUT = 3;                // !P          J 1:00
 
@@ -183,7 +183,7 @@ function transition(newstate) {
 
     // Reset lead jammer indicators
     e("jammer-a").className = "";
-    e("jammer-b").className = ""; 
+    e("jammer-b").className = "";
 }
 
 
@@ -191,30 +191,35 @@ function transition(newstate) {
 /***********************************
  * Notices
  */
+
+var notices = [
+	false,
+	'<embed src="res/Zounds.swf" type="text/html">',
+	'<embed src="res/Ouch.swf" type="text/html">',
+	'<embed src="res/Pow.swf" type="text/html">',
+	'<embed src="res/HolyShot.swf" type="text/html">',
+	'<embed src="res/FasterFaster.swf" type="text/html">',
+	'<embed src="res/BadGirl.swf" type="text/html">',
+];
+
 var notice_timer;
 
-function notice_expire(n) {
-    var p = document.getElementById("notice-vanish");
-    var pClassName = "";
+function notice_expire() {
+	var c = document.getElementById("notice");
 
-    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;
+	c.innerHTML = "";
 }
 
 function notice(n) {
-    clearTimeout(notice_timer);
-    notice_timer = setTimeout(function() {notice_expire()}, 8000);
-    notice_expire(n);
+    var c = document.getElementById("notice");
+
+    if (notices[n]) {
+        c.innerHTML = notices[n];
+        clearTimeout(notice_timer);
+        notice_timer = setTimeout(function() {notice_expire()}, 8000);
+    } else {
+        notice_expire();
+    }
 }
 
 function e(id) {

scoreboard.html

@@ -54,10 +54,6 @@
         </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 id="notice-4">OMG</div>
         </div>
     </body>
 </html>