Show on realtime score overlay when a team is carrying a yellow card.

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

Hide file tree

Showing 4 changed files with 44 additions and 14 deletions.
diff --git a/static/css/audience_display.css b/static/css/audience_display.css
@@ -62,7 +62,7 @@ html {
   border-left: none;
 }
 .teams {
-  width: 55px;
+  width: 60px;
   height: 100%;
   display: none;
   flex-direction: column;
@@ -73,6 +73,15 @@ html {
   font-size: 20px;
   line-height: 25px;
 }
+.teams div[data-yellow-card=true] {
+  width: 90%;
+  height: 32%;
+  border-radius: 0.2vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fc0;
+}
 #leftTeams {
   border-right: 1px solid #222;
 }

diff --git a/static/css/wall_display.css b/static/css/wall_display.css
@@ -62,7 +62,7 @@ html {
   border-left: none;
 }
 .teams {
-  width: 55px;
+  width: 60px;
   height: 100%;
   display: none;
   flex-direction: column;
@@ -73,6 +73,15 @@ html {
   font-size: 20px;
   line-height: 25px;
 }
+.teams div[data-yellow-card=true] {
+  width: 90%;
+  height: 32%;
+  border-radius: 0.2vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fc0;
+}
 #leftTeams {
   border-right: 1px solid #222;
 }

diff --git a/static/js/audience_display.js b/static/js/audience_display.js
@@ -94,14 +94,20 @@ const executeTransitionQueue = function() {
 const handleMatchLoad = function(data) {
   currentMatch = data.Match;
   $(`#${redSide}Team1`).text(currentMatch.Red1);
+  $(`#${redSide}Team1`).attr("data-yellow-card", data.Teams["R1"]?.YellowCard);
   $(`#${redSide}Team2`).text(currentMatch.Red2);
+  $(`#${redSide}Team2`).attr("data-yellow-card", data.Teams["R2"]?.YellowCard);
   $(`#${redSide}Team3`).text(currentMatch.Red3);
+  $(`#${redSide}Team3`).attr("data-yellow-card", data.Teams["R3"]?.YellowCard);
   $(`#${redSide}Team1Avatar`).attr("src", getAvatarUrl(currentMatch.Red1));
   $(`#${redSide}Team2Avatar`).attr("src", getAvatarUrl(currentMatch.Red2));
   $(`#${redSide}Team3Avatar`).attr("src", getAvatarUrl(currentMatch.Red3));
   $(`#${blueSide}Team1`).text(currentMatch.Blue1);
+  $(`#${blueSide}Team1`).attr("data-yellow-card", data.Teams["B1"]?.YellowCard);
   $(`#${blueSide}Team2`).text(currentMatch.Blue2);
+  $(`#${blueSide}Team2`).attr("data-yellow-card", data.Teams["B2"]?.YellowCard);
   $(`#${blueSide}Team3`).text(currentMatch.Blue3);
+  $(`#${blueSide}Team3`).attr("data-yellow-card", data.Teams["B3"]?.YellowCard);
   $(`#${blueSide}Team1Avatar`).attr("src", getAvatarUrl(currentMatch.Blue1));
   $(`#${blueSide}Team2Avatar`).attr("src", getAvatarUrl(currentMatch.Blue2));
   $(`#${blueSide}Team3Avatar`).attr("src", getAvatarUrl(currentMatch.Blue3));

diff --git a/static/js/wall_display.js b/static/js/wall_display.js
@@ -84,18 +84,24 @@ const executeTransitionQueue = function() {
 // Handles a websocket message to update the teams for the current match.
 const handleMatchLoad = function(data) {
   currentMatch = data.Match;
-  $("#" + redSide + "Team1").text(currentMatch.Red1);
-  $("#" + redSide + "Team2").text(currentMatch.Red2);
-  $("#" + redSide + "Team3").text(currentMatch.Red3);
-  $("#" + redSide + "Team1Avatar").attr("src", getAvatarUrl(currentMatch.Red1));
-  $("#" + redSide + "Team2Avatar").attr("src", getAvatarUrl(currentMatch.Red2));
-  $("#" + redSide + "Team3Avatar").attr("src", getAvatarUrl(currentMatch.Red3));
-  $("#" + blueSide + "Team1").text(currentMatch.Blue1);
-  $("#" + blueSide + "Team2").text(currentMatch.Blue2);
-  $("#" + blueSide + "Team3").text(currentMatch.Blue3);
-  $("#" + blueSide + "Team1Avatar").attr("src", getAvatarUrl(currentMatch.Blue1));
-  $("#" + blueSide + "Team2Avatar").attr("src", getAvatarUrl(currentMatch.Blue2));
-  $("#" + blueSide + "Team3Avatar").attr("src", getAvatarUrl(currentMatch.Blue3));
+  $(`#${redSide}Team1`).text(currentMatch.Red1);
+  $(`#${redSide}Team1`).attr("data-yellow-card", data.Teams["R1"]?.YellowCard);
+  $(`#${redSide}Team2`).text(currentMatch.Red2);
+  $(`#${redSide}Team2`).attr("data-yellow-card", data.Teams["R2"]?.YellowCard);
+  $(`#${redSide}Team3`).text(currentMatch.Red3);
+  $(`#${redSide}Team3`).attr("data-yellow-card", data.Teams["R3"]?.YellowCard);
+  $(`#${redSide}Team1Avatar`).attr("src", getAvatarUrl(currentMatch.Red1));
+  $(`#${redSide}Team2Avatar`).attr("src", getAvatarUrl(currentMatch.Red2));
+  $(`#${redSide}Team3Avatar`).attr("src", getAvatarUrl(currentMatch.Red3));
+  $(`#${blueSide}Team1`).text(currentMatch.Blue1);
+  $(`#${blueSide}Team1`).attr("data-yellow-card", data.Teams["B1"]?.YellowCard);
+  $(`#${blueSide}Team2`).text(currentMatch.Blue2);
+  $(`#${blueSide}Team2`).attr("data-yellow-card", data.Teams["B2"]?.YellowCard);
+  $(`#${blueSide}Team3`).text(currentMatch.Blue3);
+  $(`#${blueSide}Team3`).attr("data-yellow-card", data.Teams["B3"]?.YellowCard);
+  $(`#${blueSide}Team1Avatar`).attr("src", getAvatarUrl(currentMatch.Blue1));
+  $(`#${blueSide}Team2Avatar`).attr("src", getAvatarUrl(currentMatch.Blue2));
+  $(`#${blueSide}Team3Avatar`).attr("src", getAvatarUrl(currentMatch.Blue3));
 
   // Show alliance numbers if this is a playoff match.
   if (currentMatch.Type === matchTypePlayoff) {