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

First draft of new ranking placement on final score screen

Browse Source
This commit is contained in:
Jeff
2021-10-13 02:28:47 -07:00
committed by Patrick Fairbank
parent f76edbd6ab
commit b9aa531493
3 changed files with 79 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
static/css/audience_display.css
View File

@@ -249,6 +249,56 @@ html {
color: #fff;
font-family: "FuturaLT";
font-size: 32px;
/*margin-top: px;*/
}
.final-team {
display: inline-block;
}
.rank-box {
text-align: center;
margin-right: 0.3em;
display: inline-block;
padding: 0 5px 0 5px;
height: 44px;
font-size: 18pt;
width: 42px;
}
.rank-box.rank-up {
color: #fff;
background-color: #0a3;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.rank-box.rank-down {
color: #fff;
background-color: #c11;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.rank-box.rank-same {
color: #000;
background-color: #aaa;
border-radius: 3px;
}
.arrow-up {
width: 0;
height: 0;
position: absolute;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 15px solid #0a3;
top: 195px;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-top: 15px solid #c11;
top: 253px;
}
.final-teams>span {
margin: 0 10px;

32
static/js/audience_display.js
View File

@@ -90,9 +90,12 @@ var handleRealtimeScore = function(data) {
// Handles a websocket message to populate the final score data.
var handleScorePosted = function(data) {
$("#" + redSide + "FinalScore").text(data.RedScoreSummary.Score);
$("#" + redSide + "FinalTeam1").html(data.Match.Red1 + "" + getRankingText(data.Match.Red1, data.Rankings));
$("#" + redSide + "FinalTeam2").html(data.Match.Red2 + "" + getRankingText(data.Match.Red2, data.Rankings));
$("#" + redSide + "FinalTeam3").html(data.Match.Red3 + "" + getRankingText(data.Match.Red3, data.Rankings));
// $("#" + redSide + "FinalTeam1").html(data.Match.Red1 + "" + getRankingText(data.Match.Red1, data.Rankings));
// $("#" + redSide + "FinalTeam2").html(data.Match.Red2 + "" + getRankingText(data.Match.Red2, data.Rankings));
// $("#" + redSide + "FinalTeam3").html(data.Match.Red3 + "" + getRankingText(data.Match.Red3, data.Rankings));
$("#" + redSide + "FinalTeam1").html(getNewRankingText(data.Match.Red1, data.Rankings) + "" + data.Match.Red1);
$("#" + redSide + "FinalTeam2").html(getNewRankingText(data.Match.Red2, data.Rankings) + "" + data.Match.Red2);
$("#" + redSide + "FinalTeam3").html(getNewRankingText(data.Match.Red3, data.Rankings) + "" + data.Match.Red3);
$("#" + redSide + "FinalTeam1Avatar").attr("src", getAvatarUrl(data.Match.Red1));
$("#" + redSide + "FinalTeam2Avatar").attr("src", getAvatarUrl(data.Match.Red2));
$("#" + redSide + "FinalTeam3Avatar").attr("src", getAvatarUrl(data.Match.Red3));
@@ -100,9 +103,12 @@ var handleScorePosted = function(data) {
$("#" + redSide + "FinalTeleopPoints").text(data.RedScoreSummary.TeleopPoints);
$("#" + redSide + "FinalEndgamePoints").text(data.RedScoreSummary.EndgamePoints);
$("#" + blueSide + "FinalScore").text(data.BlueScoreSummary.Score);
$("#" + blueSide + "FinalTeam1").html(data.Match.Blue1 + "" + getRankingText(data.Match.Blue1, data.Rankings));
$("#" + blueSide + "FinalTeam2").html(data.Match.Blue2 + "" + getRankingText(data.Match.Blue2, data.Rankings));
$("#" + blueSide + "FinalTeam3").html(data.Match.Blue3 + "" + getRankingText(data.Match.Blue3, data.Rankings));
//$("#" + blueSide + "FinalTeam1").html(data.Match.Blue1 + "" + getRankingText(data.Match.Blue1, data.Rankings));
//$("#" + blueSide + "FinalTeam2").html(data.Match.Blue2 + "" + getRankingText(data.Match.Blue2, data.Rankings));
//$("#" + blueSide + "FinalTeam3").html(data.Match.Blue3 + "" + getRankingText(data.Match.Blue3, data.Rankings));
$("#" + blueSide + "FinalTeam1").html(getRankingText(data.Match.Blue1, data.Rankings) + "" + data.Match.Blue1);
$("#" + blueSide + "FinalTeam2").html(getRankingText(data.Match.Blue2, data.Rankings) + "" + data.Match.Blue2);
$("#" + blueSide + "FinalTeam3").html(getRankingText(data.Match.Blue3, data.Rankings) + "" + data.Match.Blue3);
$("#" + blueSide + "FinalTeam1Avatar").attr("src", getAvatarUrl(data.Match.Blue1));
$("#" + blueSide + "FinalTeam2Avatar").attr("src", getAvatarUrl(data.Match.Blue2));
$("#" + blueSide + "FinalTeam3Avatar").attr("src", getAvatarUrl(data.Match.Blue3));
@@ -449,6 +455,20 @@ var getAvatarUrl = function(teamId) {
return "/api/teams/" + teamId + "/avatar";
};
var getNewRankingText = function(teamId, rankings) {
var ranking = rankings[teamId];
if (ranking === undefined || ranking.Rank === 0) {
return "";
}
if (ranking.Rank > ranking.PreviousRank && ranking.PreviousRank > 0) {
return "<div class='rank-box rank-up'>" + ranking.Rank + "</div><div class='arrow-up'></div>";
} else if (ranking.Rank < ranking.PreviousRank) {
return "<div class='rank-box rank-down'>" + ranking.Rank + "</div><div class='arrow-down'></div>";
}
return "<div class='rank-box rank-same'>" + ranking.Rank + "</div>";
};
// Returns the string to be displayed next to the team number on the final score screen, to indicate change in rank.
var getRankingText = function(teamId, rankings) {
var ranking = rankings[teamId];

6
templates/audience_display.html
View File

@@ -68,9 +68,9 @@
<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><img class="final-avatar" id="leftFinalTeam1Avatar" src="" />
<span id="leftFinalTeam2"></span><img class="final-avatar" id="leftFinalTeam2Avatar" src="" />
<span id="leftFinalTeam3"></span><img class="final-avatar" id="leftFinalTeam3Avatar" src="" />
<div class="final-team" id="leftFinalTeam1"></div><img class="final-avatar" id="leftFinalTeam1Avatar" src="" />
<div class="final-team" id="leftFinalTeam2"></div><img class="final-avatar" id="leftFinalTeam2Avatar" src="" />
<div class="final-team" id="leftFinalTeam3"></div><img class="final-avatar" id="leftFinalTeam3Avatar" src="" />
</div>
<div class="final-teams" id="rightFinalTeams">
<img class="final-avatar" id="rightFinalTeam1Avatar" src="" /><span id="rightFinalTeam1"></span>