From a7e4e49f88f051b86f31b29233cb44efd3a335dc Mon Sep 17 00:00:00 2001 From: Patrick Fairbank Date: Fri, 29 Jul 2022 16:31:06 -0700 Subject: [PATCH] Show playoff alliance numbers on audience display. --- static/css/audience_display.css | 32 ++++++++++++++++++ static/js/audience_display.js | 11 ++++++ templates/audience_display.html | 60 ++++++++++++++++++--------------- 3 files changed, 75 insertions(+), 28 deletions(-) diff --git a/static/css/audience_display.css b/static/css/audience_display.css index 0ba591e..3cd6206 100644 --- 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 index 3cd172c..3485f36 100644 --- 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 index 7fdd79a..f83684a 100644 --- a/templates/audience_display.html +++ b/templates/audience_display.html @@ -15,39 +15,43 @@
-
-
-
-
-
-
-
-
-
- - - +
+
+
+
+
+
+
+
-
-
-
-
-
- - - +
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+
+
-
-
-
-
+
+ {{.EventSettings.Name}} +
-
- {{.EventSettings.Name}} - -
+