Add option to have the score overlay at the top.

This commit is contained in:
Patrick Fairbank
2019-07-28 16:00:00 -07:00
parent a0d108e7ec
commit e1f6bbfe63
3 changed files with 24 additions and 10 deletions

View File

@@ -13,7 +13,7 @@ html {
position: absolute;
bottom: -210px;
width: 100%;
height: 180px;
height: 170px;
display: flex;
flex-direction: column;
align-items: center;

View File

@@ -9,13 +9,18 @@ var transitionMap;
var currentScreen = "blank";
var redSide;
var blueSide;
var overlayCenteringHideParams;
var overlayCenteringShowParams;
var allianceSelectionTemplate = Handlebars.compile($("#allianceSelectionTemplate").html());
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 overlayCenteringHidden = $("#overlayCentering").css("bottom");
var overlayCenteringPresent = "0px";
var overlayCenteringTopUp = "-130px";
var overlayCenteringBottomHideParams = {queue: false, bottom: $("#overlayCentering").css("bottom")};
var overlayCenteringBottomShowParams = {queue: false, bottom: "0px"};
var overlayCenteringTopHideParams = {queue: false, top: overlayCenteringTopUp};
var overlayCenteringTopShowParams = {queue: false, top: "50px"};
var eventMatchInfoDown = "30px";
var eventMatchInfoUp = $("#eventMatchInfo").css("height");
var logoUp = "-3px";
@@ -161,7 +166,7 @@ var handleLowerThird = function(data) {
};
var transitionBlankToIntro = function(callback) {
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() {
$("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function() {
$(".teams").css("display", "flex");
$(".avatars").css("display", "flex");
$(".avatars").css("opacity", 1);
@@ -190,13 +195,13 @@ var transitionIntroToBlank = function(callback) {
$(".avatars").css("opacity", 0);
$(".avatars").hide();
$(".teams").hide();
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
$("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback);
});
});
};
var transitionBlankToInMatch = function(callback) {
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() {
$("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function() {
$(".teams").css("display", "flex");
$("#logo").transition({queue: false, top: logoUp}, 500, "ease");
$(".score").transition({queue: false, width: scoreOut}, 500, "ease", function() {
@@ -227,7 +232,7 @@ var transitionInMatchToBlank = function(callback) {
$("#logo").transition({queue: false, top: logoDown}, 500, "ease");
$(".score").transition({queue: false, width: scoreIn}, 500, "ease", function() {
$(".teams").hide();
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
$("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback);
});
});
};
@@ -358,7 +363,7 @@ var transitionSponsorToScore = function(callback) {
};
var transitionBlankToTimeout = function(callback) {
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function () {
$("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function () {
$("#logo").transition({queue: false, top: logoUp}, 500, "ease", function() {
$("#matchTime").transition({queue: false, opacity: 1}, 750, "ease", callback);
});
@@ -382,7 +387,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() {
$("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback);
$("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback);
});
});
};
@@ -462,6 +467,14 @@ $(function() {
}
$(".reversible-left").attr("data-reversed", reversed);
$(".reversible-right").attr("data-reversed", reversed);
if (urlParams.get("overlayLocation") === "top") {
overlayCenteringHideParams = overlayCenteringTopHideParams;
overlayCenteringShowParams = overlayCenteringTopShowParams;
$("#overlayCentering").css("top", overlayCenteringTopUp);
} else {
overlayCenteringHideParams = overlayCenteringBottomHideParams;
overlayCenteringShowParams = overlayCenteringBottomShowParams;
}
// Fall back to a blank avatar if one doesn't exist for the team.
$(".avatar, .final-avatar").attr("onerror", "this.src='" + getAvatarUrl(0) + "';");

View File

@@ -18,7 +18,8 @@ func (web *Web) audienceDisplayHandler(w http.ResponseWriter, r *http.Request) {
return
}
if !web.enforceDisplayConfiguration(w, r, map[string]string{"background": "#0f0", "reversed": "false"}) {
if !web.enforceDisplayConfiguration(w, r, map[string]string{"background": "#0f0", "reversed": "false",
"overlayLocation": "bottom"}) {
return
}