absolute positioning layout

scoreboard.css

@@ -2,63 +2,142 @@
     font-family: Comunicacion Digital;
     src: url(Comunicacion.ttf);
 }
+@font-face {
+    font-family: Most Wazted;
+    src: url(Mostwasted.ttf);
+}
+
 #scoreboard {
     cursor: default;
-}
+    font-family: sans-serif;
-#scoreboard td {
+    font-weight: bold;
-    vertical-align: top;
-    text-align: center;
 }
 #scoreboard p {
     margin: 0;
 }
 #scoreboard *[id] {
     cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
 }
-.team {
+
-    font-family: Comunicacion Digital, sans-serif;
+#name-a, #name-b {
-    font-size: 90%;
+    display: none;
 }
-.team img {
+
-    max-width: 2em;
+#logo-a, #logo-b {
+    position: absolute;
+    top: 0;
+    max-width: 1.8em;
     max-height: 2em;
 }
-
+#logo-a {
-#timeouts-a, #timeouts-b, #score-a, #score-b, #jam, #period {
+    left: 0;
-    color: yellow;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 133%;
 }
+#logo-b {
+    right: 0;
+}
+
 #timeouts-a, #timeouts-b {
+    position: absolute;
     font-size: 50%;
-    color: fuchsia;
+    bottom: 1em;
+    color: #0f0;
 }
-#timeouts-a, #jammer-a {
+#timeouts-a {
-    float: left;
+    left: 0em;
 }
-#timeouts-b, #jammer-b {
+#timeouts-b {
-    float: right;
+    right: 0em;
 }
 
+/* Jammer indicators */
 #jammer-a, #jammer-b {
+    position: absolute;
+    bottom: 0em;
     color: #444;
 }
-
+#jammer-a.lead, #jammer-b.lead, #jamtext, #periodtext {
-#jammer-a.lead, #jammer-b.lead {
     color: yellow;
 }
+#jammer-a {
+    left: 0.5em;
+}
+#jammer-b {
+    right: 0.5em;
+}
 
 #jam, #period {
+    text-align: center;
     background: #000;
-    font-size: 150%;
     border-radius: 15px;
-    padding: 0 0.1em;
+}
+#period {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 3.4em;
+    margin-left: -1.7em;
 }
 
-/* States timers can be in */
+#jam {
+    position: absolute;
+    bottom: 0em;
+    left: 50%;
+    width: 4em;
+    margin-left: -2em;
+}
+
+#jamtext, #periodtext {
+    text-align: center;
+    font-family: Most Wazted, sans-serif;
+    font-weight: normal;
+    font-size: 75%;
+
+    position: absolute;
+    left: 50%;
+    width: 4em;
+    margin-left: -2em;
+}
+
+#periodtext {
+    top: 1.4em;
+}
+
+#jamtext {
+    bottom: 1.4em;
+}
+
+
+#score-a, #score-b {
+    position: absolute;
+    font-size: 1.2em;
+    top: 50%;
+    margin-top: -0.6em;
+}
+#score-a {
+    left: 0em;
+}
+#score-b {
+    right: 0em;
+}
+
+#jamno {
+    color: #0f0;
+    position: absolute;
+    font-size: 50%;
+    bottom: 2.2em;
+    left: 50%;
+    margin-left: 3em;
+}
+
+
+/*
+ * States timers can be in 
+ */
 #jam.paused, #period.paused {
-    color: #888;
+    color: #aaf;
 }
 #jam.lowtime, #period.lowtime {
     background: #f24;
@@ -71,52 +150,36 @@
 }
 
 
-/*
- * Penalties
- */
-#penalties-a {
-    float: left;
-    border-collapse: collapse;
-}
-#penalties-b {
-    float: right;
-    border-collapse: collapse;
-}
-
-#penalties td {
-    cursor: pointer;
-    border: 1px solid rgba(255, 255, 255, 0.075);
-    padding: 0;
-    vertical-align: bottom;
-}
-
-#penalties .minors td {
-    height: 3em;
-}
-#penalties .majors td {
-    height: 8em;
-}
-#penalties .minors div {
-    background-color: #880;
-    color: black;
-}
-#penalties .majors div {
-    background-color: #800;
-}
-#penalties .sk8ers td {
-    font-family: sans-serif;
-    vertical-align: top;
-    width: 1em;
-    line-height: 75%;
-}
-
-
 /*
  * Notices
  */
 #notice div {
     display: none;
+
+    font-family: Comunicacion Digital, sans-serif;
+    font-weight: normal;
+    text-align: center;
+    line-height: 1.1em;
+    opacity: 0.9;
+    
+    position: absolute;
+    bottom: 1.8em;
+    left: 50%;
+    width: 3em;
+    margin-left: -1.5em;
 }
 #notice .active {
-    display: block;
+    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;}
+}
+

scoreboard.html

@@ -21,102 +21,79 @@
     <title>LADD Scoreboard</title>
     <meta charset="utf-8">
     <style type="text/css">
-      @font-face {
-        font-family: Most Wazted;
-        src: url(Mostwasted.ttf);
-      }
 body {
     background: url(bg.jpg) #222;
     background-size: 100% auto;
     color: #eee;
-        font-family: Most Wazted, fantasy;
+    margin: 0;
-        text-align: center;
 }
 #scoreboard {
-        font-size: 5em;
     width: 100%;
 }
-#notice div {
-    font-family: Crack Babies, Comunicacion Digital, sans-serif;
-    font-size: 7em;
-    position: absolute;
-    top: 10px;
-    left: 20%;
-    width: 60%;
-    display: none;
-    background: black;
-}
-#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">
     <script type="text/javascript" src="logos.js"></script>
     <script type="text/javascript" src="scoreboard.js"></script>
     <script type="text/javascript">
+
+function resize() {
+    var b = document.getElementsByTagName("body")[0];
+    var w = window.innerWidth;
+    var h = window.innerHeight;
+   
+    w /= 7;
+    h /= 5;
+
+    var fs = Math.min(w, h);
+
+    b.style.fontSize = fs + 'px';
+}
+
+function localstart() {
+    start();
+    resize();
+}
+
+window.onresize = resize;
+window.onload = localstart;
 window.onkeypress = key;
         </script>
     </head>
     <body>
-    <table id="scoreboard">
+        <!-- 
-      <tr>
+            HTML5 says not to use tables for layout.  Since this is
-        <td width="20%" class="team">
+            a highly-styled page, it looks awful without CSS.  Sorry.
-          <span id="name-a" onclick="handle(event);">-</span>
+        -->
-          <br>
+        <div id="scoreboard">
-          <img src="" alt="☻" id="logo-a" onclick="handle(event);">
+            <p>
-        </td>
+                <span id="name-a" onclick="handle(event);">Home</span>
-        <td width="60%" rowspan="2">
+                <img src="" alt="A" id="logo-a" onclick="handle(event);">
+                <span id="timeouts-a" onclick="handle(event);">0</span>
+                <span id="jammer-a" onclick="handle(event);">★</span>
+                <span id="score-a" onclick="handle(event);">-</span>
+            </p>
+
             <p>
                 <span id="period" onclick="handle(event);">--:--</span>
-          </p>
+                <span id="periodtext" onclick="handle(event);"></span>
-          <p>
-            <span id="timeouts-a" onclick="handle(event);">0</span>
-            <span id="periodtext" onclick="handle(event);">-</span>
-            <span id="timeouts-b" onclick="handle(event);">0</span>
-          </p>
-          <p>
-            <span id="jammer-a" onclick="handle(event);">★</span>
-            <span id="jamtext">-</span>
-            <span id="jammer-b" onclick="handle(event);">★</span>
-          </p>
-          <p>
                 <span id="jam" onclick="handle(event);">-:--.-</span>
+                <span id="jamtext" onclick="handle(event);"></span>
+                <span id="jamno" onclick="handle(event);">0</span>
             </p>
-        </td>
-        <td width="20%" class="team">
-          <span id="name-b" onclick="handle(event);">-</span>
-          <br>
-          <img src="" alt="☻" id="logo-b" onclick="handle(event);">
-        </td>
-      </tr>
 
-      <tr>
+            <p>
-        <td>
+                <span id="name-b" onclick="handle(event);">Vis</span>
-          <span id="score-a" onclick="handle(event);">-</span>
+                <img src="" alt="B" id="logo-b" onclick="handle(event);">
-        </td>
+                <span id="timeouts-b" onclick="handle(event);">0</span>
-        <td>
+                <span id="jammer-b" onclick="handle(event);">★</span>
                 <span id="score-b" onclick="handle(event);">-</span>
-        </td>
+            </p>
-      </tr>
         </table>
 
         <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-3">Ouch</div>
             <div id="notice-4">OMG</div>
         </div>
     </body>

scoreboard.js

@@ -34,6 +34,7 @@ var TIMEOUT = 3;                // !P          J 1:00
 var periodtext = ["Period 1", "Halftime", "Period 2", "Break"];
 var jamtext = ["Jam", "Lineup", "Timeout", "Setup"];
 var period = 0;
+var jamno = 0;
 
 var state = SETUP;
 
@@ -144,6 +145,7 @@ function transition(newstate) {
     var jt = e("jam");
     var pt = e("period");
     var jtext = e("jamtext");
+    var jno = e("jamno");
 
     if ((newstate == undefined) || (newstate == state)) {
         return;
@@ -160,6 +162,8 @@ function transition(newstate) {
         jt.set(120000);
         jt.start();
         jtext.innerHTML = jamtext[0];
+        jamno += 1;
+        jno.innerHTML = jamno;
     } else if (state == LINEUP) {
         pt.start();
         jt.set(30000, "lineup");
@@ -345,6 +349,10 @@ function handle(event) {
             newstate = JAM;
         }
         break;
+    case "jamno":
+        jamno -= adj;
+        tgt.innerHTML = jamno;
+        break;
     case "score-a":
     case "score-b":
         if (state == SETUP) {

vertical.css

@@ -0,0 +1,126 @@
+@font-face {
+    font-family: Comunicacion Digital;
+    src: url(Comunicacion.ttf);
+}
+@font-face {
+    font-family: Most Wazted;
+    src: url(Mostwasted.ttf);
+}
+
+#scoreboard {
+    cursor: default;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+}
+#scoreboard p {
+    margin: 0;
+}
+#scoreboard *[id] {
+    cursor: pointer;
+}
+#name-a, #name-b {
+    font-family: Comunicacion Digital, sans-serif;
+}
+#logo-a, #logo-b {
+    max-width: 2em;
+    max-height: 2em;
+}
+
+#timeouts-a, #timeouts-b, #score-a, #score-b, #jam, #period {
+    color: yellow;
+    font-family: sans-serif;
+    font-weight: bold;
+}
+#timeouts-a, #timeouts-b {
+    font-size: 50%;
+    color: fuchsia;
+}
+#timeouts-a, #jammer-a {
+}
+#timeouts-b, #jammer-b {
+}
+
+#jammer-a, #jammer-b {
+    color: #444;
+}
+
+#jammer-a.lead, #jammer-b.lead {
+    color: yellow;
+}
+
+#jam, #period {
+    background: #000;
+    border-radius: 15px;
+    padding: 0 0.1em;
+}
+
+#jamtext, #periodtext {
+    font-family: Most Wazted, sans-serif;
+    font-size: 75%;
+}
+
+/* States timers can be in */
+#jam.paused, #period.paused {
+    color: #888;
+}
+#jam.lowtime, #period.lowtime {
+    background: #f24;
+}
+#jam.timeout {
+    background: #044;
+}
+#jam.lineup {
+    background: #060;
+}
+
+
+/*
+ * Penalties
+ */
+#penalties-a {
+    float: left;
+    border-collapse: collapse;
+}
+#penalties-b {
+    float: right;
+    border-collapse: collapse;
+}
+
+#penalties td {
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0.075);
+    padding: 0;
+    vertical-align: bottom;
+}
+
+#penalties .minors td {
+    height: 3em;
+}
+#penalties .majors td {
+    height: 8em;
+}
+#penalties .minors div {
+    background-color: #880;
+    color: black;
+}
+#penalties .majors div {
+    background-color: #800;
+}
+#penalties .sk8ers td {
+    font-family: sans-serif;
+    vertical-align: top;
+    width: 1em;
+    line-height: 75%;
+}
+
+
+/*
+ * Notices
+ */
+#notice div {
+    display: none;
+}
+#notice .active {
+    display: block;
+}