mirror of
https://github.com/Team254/cheesy-arena-lite.git
synced 2026-03-09 13:46:44 -04:00
First draft of new ranking placement on final score screen
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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];
|
||||
|
||||
Reference in New Issue
Block a user