From 8a06255c7fedd6836003419247daab8e9363852e Mon Sep 17 00:00:00 2001 From: Patrick Fairbank Date: Sat, 15 Sep 2018 14:35:54 -0700 Subject: [PATCH] Add option to reverse alliances on audience display. --- static/css/audience_display.css | 28 +++----- static/js/audience_display.js | 124 +++++++++++++++++--------------- templates/audience_display.html | 108 ++++++++++++++-------------- 3 files changed, 133 insertions(+), 127 deletions(-) diff --git a/static/css/audience_display.css b/static/css/audience_display.css index 6c3d947..43fad90 100644 --- a/static/css/audience_display.css +++ b/static/css/audience_display.css @@ -37,11 +37,11 @@ html { display: table-cell; vertical-align: middle; } -#redTeams { +#leftTeams { float: left; border-right: 1px solid #222; } -#blueTeams { +#rightTeams { float: right; border-left: 1px solid #222; } @@ -50,12 +50,10 @@ html { height: 100%; float: left; } -#redScore { - float: left; +.reversible-left[data-reversed=false], .reversible-right[data-reversed=true] { background-color: #ff4444; } -#blueScore { - float: left; +.reversible-left[data-reversed=true], .reversible-right[data-reversed=false] { background-color: #2080ff; } #eventMatchInfo { @@ -181,13 +179,13 @@ html { .seesaw-indicator[data-owned-by="2"] { background-color: #2080ff; } -#redSwitchIndicator { +#leftSwitchIndicator { left: 50px; } #scaleIndicator { left: 68px; } -#blueSwitchIndicator { +#rightSwitchIndicator { left: 86px; } #blindsContainer { @@ -283,13 +281,11 @@ html { text-align: center; text-shadow: 0 0 3px #333; } -#redFinalScore { - background-color: #ff4444; +#leftFinalScore { padding-right: 150px; } -#blueFinalScore { +#rightFinalScore { clear: right; - background-color: #2080ff; padding-left: 150px; } .final-teams { @@ -305,12 +301,10 @@ html { .final-teams span { margin: 0px 20px; } -#redFinalTeams { +#leftFinalTeams { clear: left; border-right: 2px solid #333; } -#blueFinalTeam { -} .final-breakdown { float: left; width: 33%; @@ -323,11 +317,11 @@ html { font-family: "FuturaLT"; font-size: 24px; } -#redFinalBreakdown { +#leftFinalBreakdown { clear: left; text-align: right; } -#blueFinalBreakdown { +#rightFinalBreakdown { text-align: left; } #centerFinalBreakdown { diff --git a/static/js/audience_display.js b/static/js/audience_display.js index 21499d2..d1bb9cb 100644 --- a/static/js/audience_display.js +++ b/static/js/audience_display.js @@ -7,6 +7,8 @@ var websocket; var transitionMap; var currentScreen = "blank"; +var redSide; +var blueSide; var allianceSelectionTemplate = Handlebars.compile($("#allianceSelectionTemplate").html()); var sponsorImageTemplate = Handlebars.compile($("#sponsorImageTemplate").html()); var sponsorTextTemplate = Handlebars.compile($("#sponsorTextTemplate").html()); @@ -35,13 +37,13 @@ var handleAudienceDisplayMode = function(targetScreen) { // Handles a websocket message to update the teams for the current match. var handleMatchLoad = function(data) { - $("#redTeam1").text(data.Match.Red1); - $("#redTeam2").text(data.Match.Red2); - $("#redTeam3").text(data.Match.Red3); - $("#blueTeam1").text(data.Match.Blue1); - $("#blueTeam2").text(data.Match.Blue2); - $("#blueTeam3").text(data.Match.Blue3); - $("#matchName").text(data.MatchName + " " + data.Match.DisplayName); + $("#" + redSide + "Team1").text(data.Match.Red1); + $("#" + redSide + "Team2").text(data.Match.Red2); + $("#" + redSide + "Team3").text(data.Match.Red3); + $("#" + blueSide + "Team1").text(data.Match.Blue1); + $("#" + blueSide + "Team2").text(data.Match.Blue2); + $("#" + blueSide + "Team3").text(data.Match.Blue3); + $("#matchName").text(data.MatchType + " " + data.Match.DisplayName); }; // Handles a websocket message to update the match time countdown. @@ -59,68 +61,68 @@ var handleMatchTime = function(data) { // Handles a websocket message to update the match score. var handleRealtimeScore = function(data) { var redScoreBreakdown = data.Red.RealtimeScore.CurrentScore; - $("#redScoreNumber").text(data.Red.Score); - $("#redForceCubesIcon").attr("data-state", data.Red.ForceState); - $("#redForceCubes").text(redScoreBreakdown.ForceCubes).attr("data-state", data.Red.ForceState); - $("#redLevitateCubesIcon").attr("data-state", data.Red.LevitateState); - $("#redLevitateCubes").text(redScoreBreakdown.LevitateCubes).attr("data-state", data.Red.LevitateState); - $("#redBoostCubesIcon").attr("data-state", data.Red.BoostState); - $("#redBoostCubes").text(redScoreBreakdown.BoostCubes).attr("data-state", data.Red.BoostState); + $("#" + redSide + "ScoreNumber").text(data.Red.Score); + $("#" + redSide + "ForceCubesIcon").attr("data-state", data.Red.ForceState); + $("#" + redSide + "ForceCubes").text(redScoreBreakdown.ForceCubes).attr("data-state", data.Red.ForceState); + $("#" + redSide + "LevitateCubesIcon").attr("data-state", data.Red.LevitateState); + $("#" + redSide + "LevitateCubes").text(redScoreBreakdown.LevitateCubes).attr("data-state", data.Red.LevitateState); + $("#" + redSide + "BoostCubesIcon").attr("data-state", data.Red.BoostState); + $("#" + redSide + "BoostCubes").text(redScoreBreakdown.BoostCubes).attr("data-state", data.Red.BoostState); var blueScoreBreakdown = data.Blue.RealtimeScore.CurrentScore; - $("#blueScoreNumber").text(data.Blue.Score); - $("#blueForceCubesIcon").attr("data-state", data.Blue.ForceState); - $("#blueForceCubes").text(blueScoreBreakdown.ForceCubes).attr("data-state", data.Blue.ForceState); - $("#blueLevitateCubesIcon").attr("data-state", data.Blue.LevitateState); - $("#blueLevitateCubes").text(blueScoreBreakdown.LevitateCubes).attr("data-state", data.Blue.LevitateState); - $("#blueBoostCubesIcon").attr("data-state", data.Blue.BoostState); - $("#blueBoostCubes").text(blueScoreBreakdown.BoostCubes).attr("data-state", data.Blue.BoostState); + $("#" + blueSide + "ScoreNumber").text(data.Blue.Score); + $("#" + blueSide + "ForceCubesIcon").attr("data-state", data.Blue.ForceState); + $("#" + blueSide + "ForceCubes").text(blueScoreBreakdown.ForceCubes).attr("data-state", data.Blue.ForceState); + $("#" + blueSide + "LevitateCubesIcon").attr("data-state", data.Blue.LevitateState); + $("#" + blueSide + "LevitateCubes").text(blueScoreBreakdown.LevitateCubes).attr("data-state", data.Blue.LevitateState); + $("#" + blueSide + "BoostCubesIcon").attr("data-state", data.Blue.BoostState); + $("#" + blueSide + "BoostCubes").text(blueScoreBreakdown.BoostCubes).attr("data-state", data.Blue.BoostState); // Switch/scale indicators. $("#scaleIndicator").attr("data-owned-by", data.ScaleOwnedBy); - $("#redSwitchIndicator").attr("data-owned-by", data.Red.SwitchOwnedBy); - $("#blueSwitchIndicator").attr("data-owned-by", data.Blue.SwitchOwnedBy); + $("#" + redSide + "SwitchIndicator").attr("data-owned-by", data.Red.SwitchOwnedBy); + $("#" + blueSide + "SwitchIndicator").attr("data-owned-by", data.Blue.SwitchOwnedBy); // Power up progress bars. - if ((data.Red.ForceState === 2 || data.Red.BoostState === 2) && $("#redProgress").height() === 0) { - $("#redProgress").height(85); - $("#redProgress").transition({queue: false, height: 0}, 10000, "linear"); + if ((data.Red.ForceState === 2 || data.Red.BoostState === 2) && $("#" + redSide + "Progress").height() === 0) { + $("#" + redSide + "Progress").height(85); + $("#" + redSide + "Progress").transition({queue: false, height: 0}, 10000, "linear"); } - if ((data.Blue.ForceState === 2 || data.Blue.BoostState === 2) && $("#blueProgress").height() === 0) { - $("#blueProgress").height(85); - $("#blueProgress").transition({queue: false, height: 0}, 10000, "linear"); + if ((data.Blue.ForceState === 2 || data.Blue.BoostState === 2) && $("#" + blueSide + "Progress").height() === 0) { + $("#" + blueSide + "Progress").height(85); + $("#" + blueSide + "Progress").transition({queue: false, height: 0}, 10000, "linear"); } }; // Handles a websocket message to populate the final score data. var handleScorePosted = function(data) { - $("#redFinalScore").text(data.RedScoreSummary.Score); - $("#redFinalTeam1").text(data.Match.Red1); - $("#redFinalTeam2").text(data.Match.Red2); - $("#redFinalTeam3").text(data.Match.Red3); - $("#redFinalAutoRunPoints").text(data.RedScoreSummary.AutoRunPoints); - $("#redFinalOwnershipPoints").text(data.RedScoreSummary.OwnershipPoints); - $("#redFinalVaultPoints").text(data.RedScoreSummary.VaultPoints); - $("#redFinalParkClimbPoints").text(data.RedScoreSummary.ParkClimbPoints); - $("#redFinalFoulPoints").text(data.RedScoreSummary.FoulPoints); - $("#redFinalAutoQuest").html(data.RedScoreSummary.AutoQuest ? "✔" : "✘"); - $("#redFinalAutoQuest").attr("data-checked", data.RedScoreSummary.AutoQuest); - $("#redFinalFaceTheBoss").html(data.RedScoreSummary.FaceTheBoss ? "✔" : "✘"); - $("#redFinalFaceTheBoss").attr("data-checked", data.RedScoreSummary.FaceTheBoss); - $("#blueFinalScore").text(data.BlueScoreSummary.Score); - $("#blueFinalTeam1").text(data.Match.Blue1); - $("#blueFinalTeam2").text(data.Match.Blue2); - $("#blueFinalTeam3").text(data.Match.Blue3); - $("#blueFinalAutoRunPoints").text(data.BlueScoreSummary.AutoRunPoints); - $("#blueFinalOwnershipPoints").text(data.BlueScoreSummary.OwnershipPoints); - $("#blueFinalVaultPoints").text(data.BlueScoreSummary.VaultPoints); - $("#blueFinalParkClimbPoints").text(data.BlueScoreSummary.ParkClimbPoints); - $("#blueFinalFoulPoints").text(data.BlueScoreSummary.FoulPoints); - $("#blueFinalAutoQuest").html(data.BlueScoreSummary.AutoQuest ? "✔" : "✘"); - $("#blueFinalAutoQuest").attr("data-checked", data.BlueScoreSummary.AutoQuest); - $("#blueFinalFaceTheBoss").html(data.BlueScoreSummary.FaceTheBoss ? "✔" : "✘"); - $("#blueFinalFaceTheBoss").attr("data-checked", data.BlueScoreSummary.FaceTheBoss); - $("#finalMatchName").text(data.MatchName + " " + data.Match.DisplayName); + $("#" + redSide + "FinalScore").text(data.RedScoreSummary.Score); + $("#" + redSide + "FinalTeam1").text(data.Match.Red1); + $("#" + redSide + "FinalTeam2").text(data.Match.Red2); + $("#" + redSide + "FinalTeam3").text(data.Match.Red3); + $("#" + redSide + "FinalAutoRunPoints").text(data.RedScoreSummary.AutoRunPoints); + $("#" + redSide + "FinalOwnershipPoints").text(data.RedScoreSummary.OwnershipPoints); + $("#" + redSide + "FinalVaultPoints").text(data.RedScoreSummary.VaultPoints); + $("#" + redSide + "FinalParkClimbPoints").text(data.RedScoreSummary.ParkClimbPoints); + $("#" + redSide + "FinalFoulPoints").text(data.RedScoreSummary.FoulPoints); + $("#" + redSide + "FinalAutoQuest").html(data.RedScoreSummary.AutoQuest ? "✔" : "✘"); + $("#" + redSide + "FinalAutoQuest").attr("data-checked", data.RedScoreSummary.AutoQuest); + $("#" + redSide + "FinalFaceTheBoss").html(data.RedScoreSummary.FaceTheBoss ? "✔" : "✘"); + $("#" + redSide + "FinalFaceTheBoss").attr("data-checked", data.RedScoreSummary.FaceTheBoss); + $("#" + blueSide + "FinalScore").text(data.BlueScoreSummary.Score); + $("#" + blueSide + "FinalTeam1").text(data.Match.Blue1); + $("#" + blueSide + "FinalTeam2").text(data.Match.Blue2); + $("#" + blueSide + "FinalTeam3").text(data.Match.Blue3); + $("#" + blueSide + "FinalAutoRunPoints").text(data.BlueScoreSummary.AutoRunPoints); + $("#" + blueSide + "FinalOwnershipPoints").text(data.BlueScoreSummary.OwnershipPoints); + $("#" + blueSide + "FinalVaultPoints").text(data.BlueScoreSummary.VaultPoints); + $("#" + blueSide + "FinalParkClimbPoints").text(data.BlueScoreSummary.ParkClimbPoints); + $("#" + blueSide + "FinalFoulPoints").text(data.BlueScoreSummary.FoulPoints); + $("#" + blueSide + "FinalAutoQuest").html(data.BlueScoreSummary.AutoQuest ? "✔" : "✘"); + $("#" + blueSide + "FinalAutoQuest").attr("data-checked", data.BlueScoreSummary.AutoQuest); + $("#" + blueSide + "FinalFaceTheBoss").html(data.BlueScoreSummary.FaceTheBoss ? "✔" : "✘"); + $("#" + blueSide + "FinalFaceTheBoss").attr("data-checked", data.BlueScoreSummary.FaceTheBoss); + $("#finalMatchName").text(data.MatchType + " " + data.Match.DisplayName); }; // Handles a websocket message to play a sound to signal match start/stop/etc. @@ -407,6 +409,16 @@ $(function() { // Read the configuration for this display from the URL query string. var urlParams = new URLSearchParams(window.location.search); document.body.style.backgroundColor = urlParams.get("background"); + var reversed = urlParams.get("reversed"); + if (reversed === "true") { + redSide = "right"; + blueSide = "left"; + } else { + redSide = "left"; + blueSide = "right"; + } + $(".reversible-left").attr("data-reversed", reversed); + $(".reversible-right").attr("data-reversed", reversed); // Set up the websocket back to the server. websocket = new CheesyWebsocket("/displays/audience/websocket", { diff --git a/templates/audience_display.html b/templates/audience_display.html index 6897d42..a186ae7 100644 --- a/templates/audience_display.html +++ b/templates/audience_display.html @@ -16,58 +16,58 @@
-
+
-
-
- +
+
+
-
+
- F
- L
- B + F
+ L
+ B
-
-
- +
+
+
-
+
-
 
+
 
-
+
- F
- L
- B + F
+ L
+ B
-
-
- +
+
+
-
+
-
 
+
 
-
+
-
-
- +
+
+
@@ -78,9 +78,9 @@
-
+
-
+
@@ -94,41 +94,41 @@
-
-
-
- - - +
+
+
+ + +
-
- - - +
+ + +
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
Auto Run
Ownership
Vault
Endgame
Foul
Auto Quest
Face The Boss
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+