From 30a1f99d0281b51f2bac56bfa93490d1e39fc588 Mon Sep 17 00:00:00 2001
From: Patrick Fairbank <patrick@ooyala.com>
Date: Sat, 23 Aug 2014 17:41:28 -0700
Subject: [PATCH] Alliance station display improvements.

---
 static/css/alliance_station_display.css | 52 ++++++++++++++++++++-----
 static/js/alliance_station_display.js   | 36 +++++++++--------
 templates/alliance_station_display.html | 17 ++++----
 3 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/static/css/alliance_station_display.css b/static/css/alliance_station_display.css
index dcae335..692ad24 100644
--- a/static/css/alliance_station_display.css
+++ b/static/css/alliance_station_display.css
@@ -25,18 +25,29 @@ body {
   color: #ff0;
   font-size: 500px;
 }
-#teamId {
+#preMatchTeamId {
   position: absolute;
-  top: 0;
+  top: 40px;
   left: 0;
   right: 0;
   margin: 0 auto;
   font-size: 500px;
   line-height: 500px;
   text-align: center;
-  margin: 50px 0px;
   color: #fff;
 }
+#inMatchTeamId {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  font-size: 200px;
+  line-height: 200px;
+  text-align: center;
+  -webkit-text-stroke-width: 5px;
+  -webkit-text-stroke-color: #fff;
+}
 #teamName {
   position: absolute;
   bottom: 0;
@@ -50,23 +61,40 @@ body {
   font-size: 120px;
   color: #fff;
 }
+#matchTime {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto auto;
+  height: 400px;
+  line-height: 350px;
+  text-align: center;
+  font-size: 350px;
+  color: #fff;
+}
 #matchInfo {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0 auto;
-  height: 200px;
-  line-height: 200px;
+  height: 250px;
+  line-height: 250px;
   text-align: center;
-  font-size: 190px;
+  font-size: 250px;
   color: #fff;
 }
 #redScore {
   color: #f00;
+  -webkit-text-stroke-width: 5px;
+  -webkit-text-stroke-color: #fff;
 }
 #blueScore {
-  color: #66f;
+  color: #00f;
+  -webkit-text-stroke-width: 5px;
+  -webkit-text-stroke-color: #fff;
 }
 #logo {
   position: absolute;
@@ -77,12 +105,18 @@ body {
   width: 90%;
   margin: auto auto;
 }
-[data-alliance=R], [data-status=R] {
+[data-alliance-bg=R], [data-status=R] {
   background-color: #f00;
 }
-[data-alliance=B], [data-status=B] {
+[data-alliance-bg=B], [data-status=B] {
   background-color: #00f;
 }
+[data-alliance=R], [data-status=R] {
+  color: #f00;
+}
+[data-alliance=B], [data-status=B] {
+  color: #00f;
+}
 [data-status=bypass] {
   background-color: #666;
 }
diff --git a/static/js/alliance_station_display.js b/static/js/alliance_station_display.js
index 6e1d5a5..307838a 100644
--- a/static/js/alliance_station_display.js
+++ b/static/js/alliance_station_display.js
@@ -17,15 +17,16 @@ var handleSetAllianceStationDisplay = function(targetScreen) {
   }
   switch (targetScreen) {
     case "logo":
-      $("#match").hide();
+      $("#preMatch").hide();
+      $("#inMatch").hide();
       $("#logo").show();
       break;
     case "blank":
-      $("#match").hide();
+      $("#preMatch").hide();
+      $("#inMatch").hide();
       $("#logo").hide();
       break;
     case "match":
-      $("#match").show();
       $("#logo").hide();
       break;
   }
@@ -44,24 +45,27 @@ var handleSetMatch = function(data) {
   if (allianceStation != "") {
     team = data.Teams[allianceStation];
     if (team == null) {
-      $("#teamId").text("");
+      $("#preMatchTeamId").text("");
+      $("#inMatchTeamId").text("");
       $("#teamName").text("");
-      $("#teamName").attr("data-alliance", "");
+      $("#teamName").attr("data-alliance-bg", "");
+      $("#inMatchTeamId").attr("data-alliance", "");
     } else {
-      $("#teamName").attr("data-alliance", allianceStation[0]);
-      $("#teamId").text(data.Teams[allianceStation].Id);
+      $("#teamName").attr("data-alliance-bg", allianceStation[0]);
+      $("#inMatchTeamId").attr("data-alliance", allianceStation[0]);
+      $("#preMatchTeamId").text(data.Teams[allianceStation].Id);
+      $("#inMatchTeamId").text(data.Teams[allianceStation].Id);
       $("#teamName").text(data.Teams[allianceStation].Nickname);
     }
     $("#displayId").hide();
-    $("#teamId").show();
-    $("#teamName").show();
   } else {
     // Show the display ID so that someone can assign it to a station from the configuration interface.
-    $("#teamId").text("");
+    $("#preMatchTeamId").text("");
+    $("#inMatchTeamId").text("");
     $("#teamName").text("");
     $("#displayId").show();
-    $("#teamId").hide();
-    $("#teamName").hide();
+    $("#preMatch").hide();
+    $("#inMatch").hide();
   }
 };
 
@@ -102,11 +106,11 @@ var handleMatchTime = function(data) {
     $("#matchTime").text(countdownString);
 
     if (matchState == "PRE_MATCH" || matchState == "POST_MATCH") {
-      $("#teamName").show();
-      $("#matchInfo").hide();
+      $("#preMatch").show();
+      $("#inMatch").hide();
     } else {
-      $("#teamName").hide();
-      $("#matchInfo").show();
+      $("#preMatch").hide();
+      $("#inMatch").show();
     }
   });
 };
diff --git a/templates/alliance_station_display.html b/templates/alliance_station_display.html
index ba0c172..5207575 100644
--- a/templates/alliance_station_display.html
+++ b/templates/alliance_station_display.html
@@ -9,13 +9,16 @@
   </head>
   <body>
     <div id="displayId" style="display: none;"></div>
-    <div id="match" style="display: none;">
-      <div id="teamId" style="display: none;"></div>
-      <div id="teamName" style="display: none;"></div>
-      <div class="row" id="matchInfo" style="display: none;">
-        <div class="col-lg-4 text-center" id="redScore"></div>
-        <div class="col-lg-4 text-center" id="matchTime"></div>
-        <div class="col-lg-4 text-center" id="blueScore"></div>
+    <div id="preMatch" style="display: none;">
+      <div id="preMatchTeamId"></div>
+      <div id="teamName"></div>
+    </div>
+    <div id="inMatch" style="display: none;">
+      <div id="inMatchTeamId"></div>
+      <div id="matchTime"></div>
+      <div class="row" id="matchInfo">
+        <div class="col-lg-6 text-center" id="redScore"></div>
+        <div class="col-lg-6 text-center" id="blueScore"></div>
       </div>
     </div>
     <img id="logo" src="/static/img/logo-black.svg" style="display: none;"/>