Merge branch 'reflow'

Conflicts:
	scoreboard.css
	scoreboard.html

index.html

@@ -112,6 +112,9 @@
       <li>
         Free to use, share, and change (GPLv3)
       </li>
+      <li>
+        No Internet connection required
+      </li>
       <li>
         Easy mouse-driven (with hotkeys) setup and operation
       </li>

logos.js

@@ -19,6 +19,9 @@ teams = [
     ["MT",      "minorthreat.png", "Minor Threat"],
     ["CCR",     "choicecity.png", "Choice City Rebels"],
     ["DIA",     "dia.png",        "Derby Intelligence Agency"],
+    ["TRD",     "tucson.png",     "Tucson Roller Derby"],
+    ["TST",     "saddletramps.jpg","Tucson Saddle Tramps"],
+    ["TC",      "tallcity.png",   "Tall City Roller Betties"],
 ];
 teams.sort();
 

scoreboard.css

@@ -2,72 +2,142 @@
     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;
+    font-family: sans-serif;
-    -khtml-user-select: none;
+    font-weight: bold;
-    user-select: none;
-}
-#scoreboard td {
-    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-weight: normal;
+    display: none;
-    font-size: 90%;
 }
-.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: white;
-    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;
-    color: white;
+}
+#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;
+}
+
+#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 {
-    float: right;
+    color: #0f0;
-    font-size: 0.6em;
+    position: absolute;
+    font-size: 50%;
+    bottom: 2.2em;
+    left: 50%;
+    margin-left: 3em;
 }
 
-/* States timers can be in */
+
+/*
+ * States timers can be in 
+ */
 #jam.paused, #period.paused {
-    color: #888;
+    color: #aaf;
 }
 #jam.lowtime, #period.lowtime {
     background: #f24;
@@ -80,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

@@ -25,101 +25,76 @@ body {
     background: url(bg.jpg) #222;
     background-size: 100% auto;
     color: #eee;
-    font-family: sans;
+    margin: 0;
-    font-weight: bold;
-    text-align: center;
 }
 #scoreboard {
-    font-size: 5em;
     width: 100%;
 }
-#periodtext {
-    font-size: 75%;
-}
-
-#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>
+        </script>
-  </head>
+    </head>
-  <body>
+    <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);">
-          <p>
+                <span id="timeouts-a" onclick="handle(event);">0</span>
-            <span id="period" onclick="handle(event);">--:--</span>
+                <span id="jammer-a" onclick="handle(event);">★</span>
-          </p>
+                <span id="score-a" onclick="handle(event);">-</span>
-          <p>
+            </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>
-            <span id="jamno" onclick="handle(event);">0</span>
-          </p>
-          <p>
-            <span id="jam" onclick="handle(event);">-:--.-</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="period" onclick="handle(event);">--:--</span>
-          <span id="score-a" onclick="handle(event);">-</span>
+                <span id="periodtext" onclick="handle(event);"></span>
-        </td>
+                <span id="jam" onclick="handle(event);">-:--.-</span>
-        <td>
+                <span id="jamtext" onclick="handle(event);"></span>
-          <span id="score-b" onclick="handle(event);">-</span>
+                <span id="jamno" onclick="handle(event);">0</span>
-        </td>
+            </p>
-      </tr>
-    </table>
 
-    <div id="notice">
+            <p>
-      <div id="notice-1">Power Jam</div>
+                <span id="name-b" onclick="handle(event);">Vis</span>
-      <div id="notice-2">Grand Slam</div>
+                <img src="" alt="B" id="logo-b" onclick="handle(event);">
-      <div id="notice-3">Ouch!</div>
+                <span id="timeouts-b" onclick="handle(event);">0</span>
-      <div id="notice-4">OMG</div>
+                <span id="jammer-b" onclick="handle(event);">★</span>
-    </div>
+                <span id="score-b" onclick="handle(event);">-</span>
-  </body>
+            </p>
+        </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-4">OMG</div>
+        </div>
+    </body>
 </html>

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;
+}