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

Refactor audience scoring overlay to use CSS flexbox.

Browse Source
This commit is contained in:
Patrick Fairbank
2019-07-28 15:28:42 -07:00
parent f601d1d391
commit a0d108e7ec
3 changed files with 136 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
static/css/audience_display.css
View File

@@ -9,154 +9,87 @@ html {
-moz-user-select: none;
overflow: hidden;
}
#centering {
#overlayCentering {
position: absolute;
left: 50%;
bottom: -340px;
bottom: -210px;
width: 100%;
height: 180px;
display: flex;
flex-direction: column;
align-items: center;
}
#matchOverlay {
position: relative;
left: -50%;
bottom: 70px;
margin: 0 auto;
height: 104px;
background-color: #fff;
display: flex;
flex-direction: column;
border: 1px solid #222;
color: #222;
font-size: 22px;
}
#matchOverlayTop {
height: 100px;
display: flex;
}
.teams {
width: 40px;
width: 55px;
height: 100%;
line-height: 29px;
text-align: center;
display: table;
font-family: "FuturaLT";
font-size: 21px;
}
.avatars {
display: none;
}
.avatar {
height: 25px;
margin: 4px 10px 3px;
}
.valign-cell {
display: table-cell;
vertical-align: middle;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: #fff;
font-family: "FuturaLT";
font-size: 20px;
line-height: 25px;
}
#leftTeams {
float: left;
border-right: 1px solid #222;
}
#rightTeams {
float: right;
border-left: 1px solid #222;
}
.score {
width: 0px;
height: 100%;
float: left;
}
.reversible-left[data-reversed=false], .reversible-right[data-reversed=true] {
background-color: #ff4444;
}
.reversible-left[data-reversed=true], .reversible-right[data-reversed=false] {
background-color: #2080ff;
}
#eventMatchInfo {
.score {
width: 0;
height: 100%;
display: flex;
justify-content: space-between;
}
.avatars {
width: 50px;
height: 100%;
display: none;
position: absolute;
right: -1px;
left: -1px;
height: 30px;
bottom: 0px;
line-height: 30px;
background-color: #444;
border: 1px solid #222;
padding: 0px 5px;
font-family: "FuturaLT";
font-size: 15px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.avatar {
height: 25px;
}
.score-number {
width: 130px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: "FuturaLTBold";
font-size: 55px;
color: #fff;
z-index: -1;
opacity: 0;
}
#matchCircle {
position: absolute;
left: -75px;
bottom: 50px;
margin: 0 auto;
top: -25px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: #fff;
border: 1px solid #222;
}
.score-number {
float: left;
width: 60%;
margin: 0px 5px;
text-align: center;
font-family: "FuturaLTBold";
font-size: 55px;
line-height: 104px;
color: #fff;
opacity: 0;
}
.score-fields {
float: left;
display: block;
font-size: 20px;
font-family: "FuturaLTBold";
color: #fff;
opacity: 0;
}
.score-fields span {
display: inline-block;
line-height: 34px;
padding: 0;
}
.power-up[data-state="0"] {
opacity: 1;
}
.power-up[data-state="1"] {
color: #ffff00;
}
.power-up[data-state="2"] {
color: #ffff00;
animation: power-up-blinker 0.5s linear infinite;
}
.power-up[data-state="3"] {
opacity: 0.4;
}
@keyframes power-up-blinker {
50% {
opacity: 0.5;
}
}
.score-fields-icons {
text-align: center;
width: 28px;
}
.score-fields-text {
width: 19px;
}
.powerup-progress {
float: left;
height: 100%;
margin: 0 4px 0 4px;
width: 6px;
}
.powerup-progress>div {
position: absolute;
top: 0;
bottom: 0;
width: 6px;
height: 0;
margin: auto;
background-color: #fff;
opacity: 0.7;
border-radius: 3px;
}
#logo {
position: relative;
top: 15px;
@@ -171,30 +104,22 @@ html {
font-size: 32px;
opacity: 0;
}
.seesaw-indicator {
position: absolute;
bottom: 8px;
border-radius: 3px;
width: 11px;
height: 16px;
background-color: #ccc;
border: 1px solid #333;
opacity: 0;
#eventMatchInfo {
height: 0;
display: none;
justify-content: space-between;
z-index: -1;
align-items: flex-end;
padding: 0 5px;
background-color: #444;
font-family: "FuturaLT";
font-size: 15px;
line-height: 30px;
color: #fff;
}
.seesaw-indicator[data-owned-by="1"] {
background-color: #ff4444;
}
.seesaw-indicator[data-owned-by="2"] {
background-color: #2080ff;
}
#leftSwitchIndicator {
left: 50px;
}
#scaleIndicator {
left: 68px;
}
#rightSwitchIndicator {
left: 86px;
.valign-cell {
display: table-cell;
vertical-align: middle;
}
#blindsContainer {
position: fixed;

98
static/js/audience_display.js
View File

@@ -14,15 +14,15 @@ var sponsorImageTemplate = Handlebars.compile($("#sponsorImageTemplate").html())
var sponsorTextTemplate = Handlebars.compile($("#sponsorTextTemplate").html());
// Constants for overlay positioning. The CSS is the source of truth for the values that represent initial state.
var centeringDown = $("#centering").css("bottom");
var centeringUp = "0px";
var overlayCenteringHidden = $("#overlayCentering").css("bottom");
var overlayCenteringPresent = "0px";
var eventMatchInfoDown = "30px";
var eventMatchInfoUp = $("#eventMatchInfo").css("height");
var logoUp = "-3px";
var logoDown = $("#logo").css("top");
var scoreIn = $(".score").css("width");
var scoreMid = "120px";
var scoreOut = "220px";
var teamsIn = $(".teams").css("width");
var teamsOut = "65px";
var scoreMid = "135px";
var scoreOut = "205px";
// Handles a websocket message to change which screen is displayed.
var handleAudienceDisplayMode = function(targetScreen) {
@@ -143,6 +143,9 @@ var handleAllianceSelection = function(alliances) {
// Handles a websocket message to populate and/or show/hide a lower third.
var handleLowerThird = function(data) {
if (data === null) {
return;
}
if (data.BottomText === "") {
$("#lowerThirdTop").hide();
$("#lowerThirdBottom").hide();
@@ -158,15 +161,13 @@ var handleLowerThird = function(data) {
};
var transitionBlankToIntro = function(callback) {
$("#centering").transition({queue: false, bottom: centeringUp}, 500, "ease", function() {
$(".avatars").show();
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() {
$(".teams").css("display", "flex");
$(".avatars").css("display", "flex");
$(".avatars").css("opacity", 1);
$(".teams").transition({queue: false, width: teamsOut}, 100, "linear", function() {
$(".score").transition({queue: false, width: scoreMid}, 500, "ease", function() {
$("#eventMatchInfo").show();
var height = -$("#eventMatchInfo").height();
$("#eventMatchInfo").transition({queue: false, bottom: height + "px"}, 500, "ease", callback);
});
$(".score").transition({queue: false, width: scoreMid}, 500, "ease", function() {
$("#eventMatchInfo").css("display", "flex");
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoDown}, 500, "ease", callback);
});
});
};
@@ -178,66 +179,55 @@ var transitionIntroToInMatch = function(callback) {
$("#logo").transition({queue: false, top: logoUp}, 500, "ease");
$(".score").transition({queue: false, width: scoreOut}, 500, "ease", function() {
$(".score-number").transition({queue: false, opacity: 1}, 750, "ease");
$(".score-fields").transition({queue: false, opacity: 1}, 750, "ease");
$(".seesaw-indicator").transition({queue: false, opacity: 1}, 750, "ease");
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease", callback);
});
};
var transitionIntroToBlank = function(callback) {
$("#eventMatchInfo").transition({queue: false, bottom: "0px"}, 500, "ease", function() {
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoUp}, 500, "ease", function() {
$("#eventMatchInfo").hide();
$(".score").transition({queue: false, width: scoreIn}, 500, "ease");
$(".teams").transition({queue: false, width: teamsIn}, 500, "ease", function() {
$(".score").transition({queue: false, width: scoreIn}, 500, "ease", function() {
$(".avatars").css("opacity", 0);
$(".avatars").hide();
$("#centering").transition({queue: false, bottom: centeringDown}, 1000, "ease", callback);
$(".teams").hide();
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
});
});
};
var transitionBlankToInMatch = function(callback) {
$("#centering").transition({queue: false, bottom: centeringUp}, 500, "ease", function() {
$(".teams").transition({queue: false, width: teamsOut}, 100, "linear", function() {
$("#logo").transition({queue: false, top: logoUp}, 500, "ease");
$(".score").transition({queue: false, width: scoreOut}, 500, "ease", function() {
$("#eventMatchInfo").show();
$(".score-number").transition({queue: false, opacity: 1}, 750, "ease");
$(".score-fields").transition({queue: false, opacity: 1}, 750, "ease");
$(".seesaw-indicator").transition({queue: false, opacity: 1}, 750, "ease");
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease");
var height = -$("#eventMatchInfo").height();
$("#eventMatchInfo").transition({queue: false, bottom: height + "px"}, 500, "ease", callback);
});
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() {
$(".teams").css("display", "flex");
$("#logo").transition({queue: false, top: logoUp}, 500, "ease");
$(".score").transition({queue: false, width: scoreOut}, 500, "ease", function() {
$("#eventMatchInfo").css("display", "flex");
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoDown}, 500, "ease", callback);
$(".score-number").transition({queue: false, opacity: 1}, 750, "ease");
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease");
});
});
};
var transitionInMatchToIntro = function(callback) {
$(".score-number").transition({queue: false, opacity: 0}, 300, "linear");
$(".score-fields").transition({queue: false, opacity: 0}, 300, "linear");
$(".seesaw-indicator").transition({queue: false, opacity: 0}, 300, "linear");
$("#matchTime").transition({queue: false, opacity: 0}, 300, "linear", function() {
$("#logo").transition({queue: false, top: logoDown}, 500, "ease");
$(".score").transition({queue: false, width: scoreMid}, 500, "ease");
$(".teams").transition({queue: false, width: teamsOut}, 500, "ease", function() {
$(".avatars").show();
$(".score").transition({queue: false, width: scoreMid}, 500, "ease", function() {
$(".avatars").css("display", "flex");
$(".avatars").transition({queue: false, opacity: 1}, 500, "ease", callback);
});
});
};
var transitionInMatchToBlank = function(callback) {
$("#eventMatchInfo").transition({queue: false, bottom: "0px"}, 500, "ease");
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoUp}, 500, "ease");
$("#matchTime").transition({queue: false, opacity: 0}, 300, "linear");
$(".score-fields").transition({queue: false, opacity: 0}, 300, "linear");
$(".seesaw-indicator").transition({queue: false, opacity: 0}, 300, "linear");
$(".score-number").transition({queue: false, opacity: 0}, 300, "linear", function() {
$("#eventMatchInfo").hide();
$("#logo").transition({queue: false, top: logoDown}, 500, "ease");
$(".score").transition({queue: false, width: scoreIn}, 500, "ease");
$(".teams").transition({queue: false, width: teamsIn}, 500, "ease", function() {
$("#centering").transition({queue: false, bottom: centeringDown}, 1000, "ease", callback);
$(".score").transition({queue: false, width: scoreIn}, 500, "ease", function() {
$(".teams").hide();
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
});
});
};
@@ -368,7 +358,7 @@ var transitionSponsorToScore = function(callback) {
};
var transitionBlankToTimeout = function(callback) {
$("#centering").transition({queue: false, bottom: centeringUp}, 500, "ease", function () {
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function () {
$("#logo").transition({queue: false, top: logoUp}, 500, "ease", function() {
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease", callback);
});
@@ -376,12 +366,12 @@ var transitionBlankToTimeout = function(callback) {
};
var transitionIntroToTimeout = function(callback) {
$("#eventMatchInfo").transition({queue: false, bottom: "0px"}, 500, "ease", function() {
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoUp}, 500, "ease", function() {
$("#eventMatchInfo").hide();
$(".score").transition({queue: false, width: scoreIn}, 500, "ease");
$(".teams").transition({queue: false, width: teamsIn}, 500, "ease", function() {
$(".score").transition({queue: false, width: scoreIn}, 500, "ease", function() {
$(".avatars").css("opacity", 0);
$(".avatars").hide();
$(".teams").hide();
$("#logo").transition({queue: false, top: logoUp}, 500, "ease", function() {
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease", callback);
});
@@ -392,7 +382,7 @@ var transitionIntroToTimeout = function(callback) {
var transitionTimeoutToBlank = function(callback) {
$("#matchTime").transition({queue: false, opacity: 0}, 300, "linear", function() {
$("#logo").transition({queue: false, top: logoDown}, 500, "ease", function() {
$("#centering").transition({queue: false, bottom: centeringDown}, 1000, "ease", callback);
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
});
});
};
@@ -400,14 +390,12 @@ var transitionTimeoutToBlank = function(callback) {
var transitionTimeoutToIntro = function(callback) {
$("#matchTime").transition({queue: false, opacity: 0}, 300, "linear", function() {
$("#logo").transition({queue: false, top: logoDown}, 500, "ease", function() {
$(".avatars").show();
$(".avatars").css("display", "flex");
$(".avatars").css("opacity", 1);
$(".teams").transition({queue: false, width: teamsOut}, 100, "linear", function () {
$(".score").transition({queue: false, width: scoreMid}, 500, "ease", function () {
$("#eventMatchInfo").show();
var height = -$("#eventMatchInfo").height();
$("#eventMatchInfo").transition({queue: false, bottom: height + "px"}, 500, "ease", callback);
});
$(".teams").css("display", "flex");
$(".score").transition({queue: false, width: scoreMid}, 500, "ease", function () {
$("#eventMatchInfo").show();
$("#eventMatchInfo").transition({queue: false, height: eventMatchInfoDown}, 500, "ease", callback);
});
});
});

62
templates/audience_display.html
View File

@@ -14,41 +14,41 @@
<link rel="stylesheet" href="/static/css/audience_display.css" />
</head>
<body>
<div id="centering">
<div id="overlayCentering">
<div id="matchOverlay">
<div class="teams" id="leftTeams">
<span class="valign-cell">
<span id="leftTeam1"></span><br />
<span id="leftTeam2"></span><br />
<span id="leftTeam3"></span>
</span>
</div>
<div class="score reversible-left" id="leftScore">
<div class="avatars">
<img class="avatar" id="leftTeam1Avatar" src="" /><br />
<img class="avatar" id="leftTeam2Avatar" src="" /><br />
<img class="avatar" id="leftTeam3Avatar" src="" />
<div id="matchOverlayTop">
<div class="teams" id="leftTeams">
<div id="leftTeam1"></div>
<div id="leftTeam2"></div>
<div id="leftTeam3"></div>
</div>
<div class="score-number" id="leftScoreNumber">&nbsp;</div>
</div>
<div class="score reversible-right" id="rightScore">
<div class="avatars pull-right">
<img class="avatar" id="rightTeam1Avatar" src="" /><br />
<img class="avatar" id="rightTeam2Avatar" src="" /><br />
<img class="avatar" id="rightTeam3Avatar" src="" />
<div class="score reversible-left">
<div class="avatars">
<img class="avatar" id="leftTeam1Avatar" src="" />
<img class="avatar" id="leftTeam2Avatar" src="" />
<img class="avatar" id="leftTeam3Avatar" src="" />
</div>
<div class="score-number" id="leftScoreNumber"></div>
<div class="dummy"></div>
</div>
<div class="score reversible-right">
<div class="dummy"></div>
<div class="score-number" id="rightScoreNumber"></div>
<div class="avatars">
<img class="avatar" id="rightTeam1Avatar" src="" />
<img class="avatar" id="rightTeam2Avatar" src="" />
<img class="avatar" id="rightTeam3Avatar" src="" />
</div>
</div>
<div class="teams" id="rightTeams">
<div id="rightTeam1"></div>
<div id="rightTeam2"></div>
<div id="rightTeam3"></div>
</div>
<div class="score-number pull-right" id="rightScoreNumber">&nbsp;</div>
</div>
<div class="teams" id="rightTeams">
<span class="valign-cell">
<span id="rightTeam1"></span><br />
<span id="rightTeam2"></span><br />
<span id="rightTeam3"></span>
</span>
</div>
<div id="eventMatchInfo">
<span>{{.EventSettings.Name}}{{if lt (len .EventSettings.Name) 16}} 2019{{end}}</span>
<span class="pull-right" id="matchName"></span>
<span>{{.EventSettings.Name}}</span>
<span id="matchName"></span>
</div>
</div>
<div class="text-center" id="matchCircle">
@@ -107,7 +107,7 @@
</span>
</div>
<div id="finalEventMatchInfo">
<div class="final-footer">{{.EventSettings.Name}}{{if lt (len .EventSettings.Name) 22}} 2019{{end}}</div>
<div class="final-footer">{{.EventSettings.Name}}</div>
<div class="final-footer" id="finalSeriesStatus">&nbsp;</div>
<div class="final-footer" id="finalMatchName">&nbsp;</div>
</div>