Show yellow and red cards on audience final score screen (closes #175).

Team254 · May 31, 2024 · 5d283e6 · 5d283e6
1 parent cb8697f
commit 5d283e6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/static/css/audience_display.css b/static/css/audience_display.css
@@ -382,7 +382,7 @@ html {
   align-items: center;
 }
 .final-teams {
-  width: 240px;
+  width: 250px;
   padding: 20px;
   border-radius: 20px;
 }
@@ -406,17 +406,40 @@ html {
   height: 35px;
 }
 .final-team-number {
+  width: 85px;
   color: #fff;
   font-family: "FuturaLT";
   font-size: 32px;
   line-height: 43px;
+  text-align: center;
 }
-.final-team-rank {
+.final-team-card {
   width: 20px;
   display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.final-team-card div {
+  display: none;
+}
+.final-team-card div[data-card=yellow], .final-team-card div[data-card=red] {
+  display: inline-block;
+  width: 15px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid #333;
+}
+.final-team-card div[data-card=yellow] {
+  background-color: #da1;
+}
+.final-team-card div[data-card=red] {
+  background-color: #e00;
+}
+.final-team-rank {
+  width: 45px;
+  display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  text-align: right;
 }
 .final-team-rank img {
   width: 15px;

diff --git a/static/js/audience_display.js b/static/js/audience_display.js
@@ -230,13 +230,13 @@ const handleRealtimeScore = function(data) {
 const handleScorePosted = function(data) {
   $(`#${redSide}FinalScore`).text(data.RedScoreSummary.Score);
   $(`#${redSide}FinalAlliance`).text("Alliance " + data.Match.PlayoffRedAlliance);
-  setTeamInfo(redSide, 1, data.Match.Red1, data.RedRankings);
-  setTeamInfo(redSide, 2, data.Match.Red2, data.RedRankings);
-  setTeamInfo(redSide, 3, data.Match.Red3, data.RedRankings);
+  setTeamInfo(redSide, 1, data.Match.Red1, data.RedCards, data.RedRankings);
+  setTeamInfo(redSide, 2, data.Match.Red2, data.RedCards, data.RedRankings);
+  setTeamInfo(redSide, 3, data.Match.Red3, data.RedCards, data.RedRankings);
   if (data.RedOffFieldTeamIds.length > 0) {
-    setTeamInfo(redSide, 4, data.RedOffFieldTeamIds[0], data.RedRankings);
+    setTeamInfo(redSide, 4, data.RedOffFieldTeamIds[0], data.RedCards, data.RedRankings);
   } else {
-    setTeamInfo(redSide, 4, 0, data.RedRankings);
+    setTeamInfo(redSide, 4, 0, data.RedCards, data.RedRankings);
   }
   $(`#${redSide}FinalLeavePoints`).text(data.RedScoreSummary.LeavePoints);
   $(`#${redSide}FinalSpeakerPoints`).text(data.RedScoreSummary.SpeakerPoints);
@@ -264,13 +264,13 @@ const handleScorePosted = function(data) {
 
   $(`#${blueSide}FinalScore`).text(data.BlueScoreSummary.Score);
   $(`#${blueSide}FinalAlliance`).text("Alliance " + data.Match.PlayoffBlueAlliance);
-  setTeamInfo(blueSide, 1, data.Match.Blue1, data.BlueRankings);
-  setTeamInfo(blueSide, 2, data.Match.Blue2, data.BlueRankings);
-  setTeamInfo(blueSide, 3, data.Match.Blue3, data.BlueRankings);
+  setTeamInfo(blueSide, 1, data.Match.Blue1, data.BlueCards, data.BlueRankings);
+  setTeamInfo(blueSide, 2, data.Match.Blue2, data.BlueCards, data.BlueRankings);
+  setTeamInfo(blueSide, 3, data.Match.Blue3, data.BlueCards, data.BlueRankings);
   if (data.BlueOffFieldTeamIds.length > 0) {
-    setTeamInfo(blueSide, 4, data.BlueOffFieldTeamIds[0], data.BlueRankings);
+    setTeamInfo(blueSide, 4, data.BlueOffFieldTeamIds[0], data.BlueCards, data.BlueRankings);
   } else {
-    setTeamInfo(blueSide, 4, 0, data.BlueRankings);
+    setTeamInfo(blueSide, 4, 0, data.BlueCards, data.BlueRankings);
   }
   $(`#${blueSide}FinalLeavePoints`).text(data.BlueScoreSummary.LeavePoints);
   $(`#${blueSide}FinalSpeakerPoints`).text(data.BlueScoreSummary.SpeakerPoints);
@@ -775,14 +775,17 @@ const getAvatarUrl = function(teamId) {
   return "/api/teams/" + teamId + "/avatar";
 };
 
-const setTeamInfo = function(side, position, teamId, rankings) {
+const setTeamInfo = function(side, position, teamId, cards, rankings) {
   const teamNumberElement = $(`#${side}FinalTeam${position}`);
   teamNumberElement.html(teamId);
   teamNumberElement.toggle(teamId > 0);
   const avatarElement = $(`#${side}FinalTeam${position}Avatar`);
   avatarElement.attr("src", getAvatarUrl(teamId));
   avatarElement.toggle(teamId > 0);
 
+  const cardElement = $(`#${side}FinalTeam${position}Card`);
+  cardElement.attr("data-card", cards[teamId.toString()]);
+
   const ranking = rankings[teamId];
   let rankIndicator = "";
   let rankNumber = "";

diff --git a/templates/audience_display.html b/templates/audience_display.html
@@ -141,6 +141,9 @@
                   <div class="final-team-row">
                     <img class="final-team-avatar" id="leftFinalTeam{{$i}}Avatar" src="" />
                     <div class="final-team-number" id="leftFinalTeam{{$i}}"></div>
+                    <div class="final-team-card">
+                      <div id="leftFinalTeam{{$i}}Card"></div>
+                    </div>
                     <div class="final-team-rank">
                       <img id="leftFinalTeam{{$i}}RankIndicator" src="" />
                       <div id="leftFinalTeam{{$i}}RankNumber"></div>
@@ -207,6 +210,9 @@
                   <div class="final-team-row">
                     <img class="final-team-avatar" id="rightFinalTeam{{$i}}Avatar" src="" />
                     <div class="final-team-number" id="rightFinalTeam{{$i}}"></div>
+                    <div class="final-team-card">
+                      <div id="rightFinalTeam{{$i}}Card"></div>
+                    </div>
                     <div class="final-team-rank">
                       <img id="rightFinalTeam{{$i}}RankIndicator" src="" />
                       <div id="rightFinalTeam{{$i}}RankNumber"></div>