NCGEARS/cheesy-arena-lite
1
0
Fork 0
mirror of https://github.com/Team254/cheesy-arena-lite.git synced 2026-03-09 13:46:44 -04:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add option to reverse alliances on audience display.

Browse Source
This commit is contained in:
Patrick Fairbank
2018-09-15 14:35:54 -07:00
parent 2f3b402c34
commit 8a06255c7f
3 changed files with 133 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/audience_display.css
View File

@@ -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 {

124
static/js/audience_display.js
View File

@@ -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", {

108
templates/audience_display.html
View File

@@ -16,58 +16,58 @@
<body>
<div id="centering">
<div id="matchOverlay">
<div class="teams" id="redTeams">
<div class="teams" id="leftTeams">
<span class="valign-cell">
<span id="redTeam1"></span><br />
<span id="redTeam2"></span><br />
<span id="redTeam3"></span>
<span id="leftTeam1"></span><br />
<span id="leftTeam2"></span><br />
<span id="leftTeam3"></span>
</span>
</div>
<div class="score" id="redScore">
<div class="score reversible-left" id="leftScore">
<div class="score-fields score-fields-icons">
<span class="valign-cell">
<span class="power-up" id="redForceCubesIcon">F</span><br />
<span class="power-up" id="redLevitateCubesIcon">L</span><br />
<span class="power-up" id="redBoostCubesIcon">B</span>
<span class="power-up" id="leftForceCubesIcon">F</span><br />
<span class="power-up" id="leftLevitateCubesIcon">L</span><br />
<span class="power-up" id="leftBoostCubesIcon">B</span>
</span>
</div>
<div class="score-fields score-fields-text">
<span class="valign-cell">
<span class="power-up" id="redForceCubes"></span><br />
<span class="power-up" id="redLevitateCubes"></span><br />
<span class="power-up" id="redBoostCubes"></span>
<span class="power-up" id="leftForceCubes"></span><br />
<span class="power-up" id="leftLevitateCubes"></span><br />
<span class="power-up" id="leftBoostCubes"></span>
</span>
</div>
<div class="powerup-progress">
<div id="redProgress"></div>
<div id="leftProgress"></div>
</div>
<div class="score-number" id="redScoreNumber">&nbsp;</div>
<div class="score-number" id="leftScoreNumber">&nbsp;</div>
</div>
<div class="score" id="blueScore">
<div class="score reversible-right" id="rightScore">
<div class="score-fields score-fields-icons pull-right">
<span class="valign-cell">
<span class="power-up" id="blueForceCubesIcon">F</span><br />
<span class="power-up" id="blueLevitateCubesIcon">L</span><br />
<span class="power-up" id="blueBoostCubesIcon">B</span>
<span class="power-up" id="rightForceCubesIcon">F</span><br />
<span class="power-up" id="rightLevitateCubesIcon">L</span><br />
<span class="power-up" id="rightBoostCubesIcon">B</span>
</span>
</div>
<div class="score-fields score-fields-text pull-right" style="direction: rtl;">
<span class="valign-cell" style="text-align: right;">
<span class="power-up" id="blueForceCubes"></span><br />
<span class="power-up" id="blueLevitateCubes"></span><br />
<span class="power-up" id="blueBoostCubes"></span>
<span class="power-up" id="rightForceCubes"></span><br />
<span class="power-up" id="rightLevitateCubes"></span><br />
<span class="power-up" id="rightBoostCubes"></span>
</span>
</div>
<div class="powerup-progress pull-right">
<div id="blueProgress"></div>
<div id="rightProgress"></div>
</div>
<div class="score-number pull-right" id="blueScoreNumber">&nbsp;</div>
<div class="score-number pull-right" id="rightScoreNumber">&nbsp;</div>
</div>
<div class="teams" id="blueTeams">
<div class="teams" id="rightTeams">
<span class="valign-cell">
<span id="blueTeam1"></span><br />
<span id="blueTeam2"></span><br />
<span id="blueTeam3"></span>
<span id="rightTeam1"></span><br />
<span id="rightTeam2"></span><br />
<span id="rightTeam3"></span>
</span>
</div>
<div id="eventMatchInfo">
@@ -78,9 +78,9 @@
<div class="text-center" id="matchCircle">
<img id="logo" src="/static/img/game-logo.png" alt="logo" />
<div id="matchTime"></div>
<div class="seesaw-indicator" id="redSwitchIndicator"></div>
<div class="seesaw-indicator" id="leftSwitchIndicator"></div>
<div class="seesaw-indicator" id="scaleIndicator"></div>
<div class="seesaw-indicator" id="blueSwitchIndicator"></div>
<div class="seesaw-indicator" id="rightSwitchIndicator"></div>
</div>
</div>
<div id="blindsContainer">
@@ -94,41 +94,41 @@
<img id="blindsLogo" src="/static/img/game-logo.png" alt="logo" />
</div>
<div id="finalScore">
<div class="final-score" id="redFinalScore"></div>
<div class="final-score" id="blueFinalScore"></div>
<div class="final-teams" id="redFinalTeams">
<span id="redFinalTeam1"></span>
<span id="redFinalTeam2"></span>
<span id="redFinalTeam3"></span>
<div class="final-score reversible-left" id="leftFinalScore"></div>
<div class="final-score reversible-right" id="rightFinalScore"></div>
<div class="final-teams" id="leftFinalTeams">
<span id="leftFinalTeam1"></span>
<span id="leftFinalTeam2"></span>
<span id="leftFinalTeam3"></span>
</div>
<div class="final-teams" id="blueFinalTeams">
<span id="blueFinalTeam1"></span>
<span id="blueFinalTeam2"></span>
<span id="blueFinalTeam3"></span>
<div class="final-teams" id="rightFinalTeams">
<span id="rightFinalTeam1"></span>
<span id="rightFinalTeam2"></span>
<span id="rightFinalTeam3"></span>
</div>
<div class="final-breakdown" id="redFinalBreakdown">
<div class="final-breakdown" id="leftFinalBreakdown">
<span class="valign-cell">
<span id="redFinalAutoRunPoints"></span><br />
<span id="redFinalOwnershipPoints"></span><br />
<span id="redFinalVaultPoints"></span><br />
<span id="redFinalParkClimbPoints"></span><br />
<span id="redFinalFoulPoints"></span><br />
<span id="redFinalAutoQuest"></span><br />
<span id="redFinalFaceTheBoss"></span><br />
<span id="leftFinalAutoRunPoints"></span><br />
<span id="leftFinalOwnershipPoints"></span><br />
<span id="leftFinalVaultPoints"></span><br />
<span id="leftFinalParkClimbPoints"></span><br />
<span id="leftFinalFoulPoints"></span><br />
<span id="leftFinalAutoQuest"></span><br />
<span id="leftFinalFaceTheBoss"></span><br />
</span>
</div>
<div class="final-breakdown" id="centerFinalBreakdown">
<span class="valign-cell">Auto Run<br />Ownership<br />Vault<br />Endgame<br />Foul<br />Auto Quest<br />Face The Boss</span>
</div>
<div class="final-breakdown" id="blueFinalBreakdown">
<div class="final-breakdown" id="rightFinalBreakdown">
<span class="valign-cell">
<span id="blueFinalAutoRunPoints"></span><br />
<span id="blueFinalOwnershipPoints"></span><br />
<span id="blueFinalVaultPoints"></span><br />
<span id="blueFinalParkClimbPoints"></span><br />
<span id="blueFinalFoulPoints"></span><br />
<span id="blueFinalAutoQuest"></span><br />
<span id="blueFinalFaceTheBoss"></span><br />
<span id="rightFinalAutoRunPoints"></span><br />
<span id="rightFinalOwnershipPoints"></span><br />
<span id="rightFinalVaultPoints"></span><br />
<span id="rightFinalParkClimbPoints"></span><br />
<span id="rightFinalFoulPoints"></span><br />
<span id="rightFinalAutoQuest"></span><br />
<span id="rightFinalFaceTheBoss"></span><br />
</span>
</div>
<div id="finalEventMatchInfo">