Show playoff alliance numbers on audience display.

Team254 · Jul 29, 2022 · 56ce77f · 56ce77f
1 parent 9ba5eb6
commit 56ce77f
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 34 deletions.
diff --git a/static/css/audience_display.css b/static/css/audience_display.css
@@ -18,6 +18,9 @@ html {
   flex-direction: column;
   align-items: center;
 }
+#matchOverlayContainer {
+  display: flex;
+}
 #matchOverlay {
   display: flex;
   flex-direction: column;
@@ -29,6 +32,35 @@ html {
   height: 100px;
   display: flex;
 }
+.elim-alliance {
+  position: relative;
+  top: 31px;
+  width: 40px;
+  height: 40px;
+  padding: 0 5px;
+  z-index: -1;
+  display: flex;
+  align-items: center;
+  background-color: #fc0;
+  color: #222;
+  border: 1px solid #222;
+  font-size: 15px;
+  font-weight: 200;
+}
+#leftElimAlliance {
+  left: 23px;
+  justify-content: start;
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+  border-right: none;
+}
+#rightElimAlliance {
+  right: 23px;
+  justify-content: end;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-left: none;
+}
 .teams {
   width: 55px;
   height: 100%;

diff --git a/static/js/audience_display.js b/static/js/audience_display.js
@@ -69,6 +69,17 @@ var handleMatchLoad = function(data) {
   $("#" + blueSide + "Team2Avatar").attr("src", getAvatarUrl(currentMatch.Blue2));
   $("#" + blueSide + "Team3Avatar").attr("src", getAvatarUrl(currentMatch.Blue3));
 
+  // Show alliance numbers if this is an elimination match.
+  if (currentMatch.Type === "elimination") {
+    $("#" + redSide + "ElimAlliance").text(currentMatch.ElimRedAlliance);
+    $("#" + blueSide + "ElimAlliance").text(currentMatch.ElimBlueAlliance);
+    $(".elim-alliance").show();
+  } else {
+    $("#" + redSide + "ElimAlliance").text("");
+    $("#" + blueSide + "ElimAlliance").text("");
+    $(".elim-alliance").hide();
+  }
+
   if (data.Match.Type === "test") {
     $("#matchName").text(currentMatch.DisplayName);
   } else {

diff --git a/templates/audience_display.html b/templates/audience_display.html
@@ -15,47 +15,51 @@
   </head>
   <body>
     <div id="overlayCentering">
-      <div id="matchOverlay">
-        <div id="matchOverlayTop">
-          <div class="teams" id="leftTeams">
-            <div id="leftTeam1"></div>
-            <div id="leftTeam2"></div>
-            <div id="leftTeam3"></div>
-          </div>
-          <div class="score reversible-left">
-            <div class="avatars">
-              <img class="avatar" id="leftTeam1Avatar" src="" />
-              <img class="avatar" id="leftTeam2Avatar" src="" />
-              <img class="avatar" id="leftTeam3Avatar" src="" />
+      <div id="matchOverlayContainer">
+        <div class="elim-alliance" id="leftElimAlliance"></div>
+        <div id="matchOverlay">
+          <div id="matchOverlayTop">
+            <div class="teams" id="leftTeams">
+              <div id="leftTeam1"></div>
+              <div id="leftTeam2"></div>
+              <div id="leftTeam3"></div>
             </div>
-            <div class="score-fields">
-              <div id="leftAutoCargoRemaining"></div>
-              <div id="leftTeleopCargoRemaining"></div>
+            <div class="score reversible-left">
+              <div class="avatars">
+                <img class="avatar" id="leftTeam1Avatar" src="" />
+                <img class="avatar" id="leftTeam2Avatar" src="" />
+                <img class="avatar" id="leftTeam3Avatar" src="" />
+              </div>
+              <div class="score-fields">
+                <div id="leftAutoCargoRemaining"></div>
+                <div id="leftTeleopCargoRemaining"></div>
+              </div>
+              <div class="score-number" id="leftScoreNumber"></div>
             </div>
-            <div class="score-number" id="leftScoreNumber"></div>
-          </div>
-          <div class="score score-right reversible-right">
-            <div class="score-number" id="rightScoreNumber"></div>
-            <div class="score-fields">
-              <div id="rightAutoCargoRemaining"></div>
-              <div id="rightTeleopCargoRemaining"></div>
+            <div class="score score-right reversible-right">
+              <div class="score-number" id="rightScoreNumber"></div>
+              <div class="score-fields">
+                <div id="rightAutoCargoRemaining"></div>
+                <div id="rightTeleopCargoRemaining"></div>
+              </div>
+              <div class="avatars">
+                <img class="avatar" id="rightTeam1Avatar" src="" />
+                <img class="avatar" id="rightTeam2Avatar" src="" />
+                <img class="avatar" id="rightTeam3Avatar" src="" />
+              </div>
             </div>
-            <div class="avatars">
-              <img class="avatar" id="rightTeam1Avatar" src="" />
-              <img class="avatar" id="rightTeam2Avatar" src="" />
-              <img class="avatar" id="rightTeam3Avatar" src="" />
+            <div class="teams" id="rightTeams">
+              <div id="rightTeam1"></div>
+              <div id="rightTeam2"></div>
+              <div id="rightTeam3"></div>
             </div>
           </div>
-          <div class="teams" id="rightTeams">
-            <div id="rightTeam1"></div>
-            <div id="rightTeam2"></div>
-            <div id="rightTeam3"></div>
+          <div id="eventMatchInfo">
+            <span>{{.EventSettings.Name}}</span>
+            <span id="matchName"></span>
           </div>
         </div>
-        <div id="eventMatchInfo">
-          <span>{{.EventSettings.Name}}</span>
-          <span id="matchName"></span>
-        </div>
+        <div class="elim-alliance" id="rightElimAlliance"></div>
       </div>
       <div class="text-center" id="matchCircle">
         <img id="logo" src="/static/img/game-logo.png" alt="logo" />