Show playoff alliance numbers and 4th teams on alliance station display.

static/css/alliance_station_display.css

@@ -116,17 +116,17 @@ body[data-position=right] #inMatch #blueScore {
 /* Pre Match */
 #preMatch #teamNumber {
   position: absolute;
-  top: 40px;
+  top: 100px;
   left: 0;
   right: 0;
   margin: 0 auto;
-  font-size: 500px;
-  line-height: 500px;
+  font-size: 550px;
+  line-height: 550px;
   text-align: center;
 }
 #preMatch .databar {
   position: absolute;
-  bottom: 0;
+  bottom: 100px;
   left: 0;
   right: 0;
   margin: 0 auto;
@@ -159,3 +159,13 @@ body[data-position=right] #inMatch #blueScore {
 #teamRank {
   background-color: transparent;
 }
+#elimAllianceInfo {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  text-align: center;
+  font-family: "FuturaLT";
+  font-size: 50px;
+}

static/js/alliance_station_display.js

@@ -54,6 +54,23 @@ var handleMatchLoad = function(data) {
       $("#teamNameText").attr("data-alliance-bg", station[0]).text("");
       $("#teamRank").attr("data-alliance-bg", station[0]).text("");
     }
+
+    // Populate extra alliance info if this is an elimination match.
+    let elimAlliance = data.Match.ElimRedAlliance;
+    let offFieldTeams = data.RedOffFieldTeams;
+    if (station[0] === "B") {
+      elimAlliance = data.Match.ElimBlueAlliance;
+      offFieldTeams = data.BlueOffFieldTeams;
+    }
+    if (elimAlliance > 0) {
+      let elimAllianceInfo = `Alliance ${elimAlliance}`;
+      if (offFieldTeams.length) {
+        elimAllianceInfo += `  Not on field: ${offFieldTeams.map(team => team.Id).join(", ")}`;
+      }
+      $("#elimAllianceInfo").html(elimAllianceInfo);
+    } else {
+      $("#elimAllianceInfo").text("");
+    }
   }
 };
 

templates/alliance_station_display.html

@@ -17,10 +17,11 @@
     <div id="match" class="mode">
       <div id="preMatch">
         <div id="teamNumber"></div>
-        <div id="teamName" class='databar'>
+        <div id="teamName" class="databar">
           <span id="teamNameText"></span> <sub id="teamRank"></sub>
         </div>
-        <div id="disabled" class='databar'>DISABLED</div>
+        <div id="disabled" class="databar">DISABLED</div>
+        <div id="elimAllianceInfo"></div>
       </div>
       <div id="inMatch">
         <div id="redScore" class="datapoint"></div>