From e63fee3cbc154bdb741b6b158436e71caae9c15a Mon Sep 17 00:00:00 2001 From: Patrick Fairbank Date: Thu, 18 Aug 2022 18:20:44 -0700 Subject: [PATCH] Add placeholder bracket audience display mode and transitions to/from the other modes. --- static/css/audience_display.css | 15 +++++ static/js/audience_display.js | 109 ++++++++++++++++++++++++++++---- templates/audience_display.html | 1 + templates/match_play.html | 5 ++ 4 files changed, 116 insertions(+), 14 deletions(-) diff --git a/static/css/audience_display.css b/static/css/audience_display.css index ae6e75a..60a4087 100644 --- a/static/css/audience_display.css +++ b/static/css/audience_display.css @@ -438,6 +438,21 @@ html { #finalMatchName { text-align: right; } +#bracket { + position: fixed; + width: 1600px; + height: 700px; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto auto; + border: 2px solid #333; + z-index: 1; + opacity: 0; + background-color: #fff; + text-align: center; +} #sponsor { position: fixed; width: 1000px; diff --git a/static/js/audience_display.js b/static/js/audience_display.js index 01a2be2..efa3127 100644 --- a/static/js/audience_display.js +++ b/static/js/audience_display.js @@ -17,19 +17,21 @@ 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 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 = "15px"; -var logoDown = $("#logo").css("top"); -var scoreIn = $(".score").css("width"); -var scoreMid = "135px"; -var scoreOut = "210px"; -var scoreFieldsOut = "40px"; +const overlayCenteringTopUp = "-130px"; +const overlayCenteringBottomHideParams = {queue: false, bottom: $("#overlayCentering").css("bottom")}; +const overlayCenteringBottomShowParams = {queue: false, bottom: "0px"}; +const overlayCenteringTopHideParams = {queue: false, top: overlayCenteringTopUp}; +const overlayCenteringTopShowParams = {queue: false, top: "50px"}; +const eventMatchInfoDown = "30px"; +const eventMatchInfoUp = $("#eventMatchInfo").css("height"); +const logoUp = "15px"; +const logoDown = $("#logo").css("top"); +const scoreIn = $(".score").css("width"); +const scoreMid = "135px"; +const scoreOut = "210px"; +const scoreFieldsOut = "40px"; +const scoreLogoTop = "-350px"; +const bracketLogoTop = "-600px"; // Handles a websocket message to change which screen is displayed. var handleAudienceDisplayMode = function(targetScreen) { @@ -200,6 +202,12 @@ var transitionBlankToAllianceSelection = function(callback) { $('#allianceSelectionCentering').transition({queue: false, right: "3em"}, 500, "ease", callback); }; +var transitionBlankToBracket = function(callback) { + transitionBlankToLogo(function() { + setTimeout(function() { transitionLogoToBracket(callback); }, 50); + }); +}; + var transitionBlankToIntro = function(callback) { $("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function() { $(".teams").css("display", "flex"); @@ -274,6 +282,40 @@ var transitionBlankToTimeout = function(callback) { }); }; +var transitionBracketToBlank = function(callback) { + transitionBracketToLogo(function() { + transitionLogoToBlank(callback); + }); +}; + +var transitionBracketToLogo = function(callback) { + $("#bracket").transition({queue: false, opacity: 0}, 500, "ease", function(){ + $("#bracket").hide(); + }); + $(".blindsCenter.full").transition({queue: false, top: 0}, 625, "ease", callback); +}; + +var transitionBracketToLogoLuma = function(callback) { + transitionBracketToLogo(function() { + transitionLogoToLogoLuma(callback); + }); +}; + +var transitionBracketToScore = function(callback) { + $(".blindsCenter.full").transition({queue: false, top: scoreLogoTop}, 1000, "ease"); + $("#bracket").transition({queue: false, opacity: 0}, 1000, "ease", function(){ + $("#bracket").hide(); + $("#finalScore").show(); + $("#finalScore").transition({queue: false, opacity: 1}, 1000, "ease", callback); + }); +}; + +var transitionBracketToSponsor = function(callback) { + transitionBracketToLogo(function() { + transitionLogoToSponsor(callback); + }); +}; + var transitionIntroToBlank = function(callback) { $("#eventMatchInfo").transition({queue: false, height: eventMatchInfoUp}, 500, "ease", function() { $("#eventMatchInfo").hide(); @@ -326,6 +368,12 @@ var transitionLogoToBlank = function(callback) { }); }; +var transitionLogoToBracket = function(callback) { + $(".blindsCenter.full").transition({queue: false, top: bracketLogoTop}, 625, "ease"); + $("#bracket").show(); + $("#bracket").transition({queue: false, opacity: 1}, 1000, "ease", callback); +}; + var transitionLogoToLogoLuma = function(callback) { $(".blinds.left").removeClass("full"); $(".blinds.right").show(); @@ -338,7 +386,7 @@ var transitionLogoToLogoLuma = function(callback) { }; var transitionLogoToScore = function(callback) { - $(".blindsCenter.full").transition({queue: false, top: "-350px"}, 625, "ease"); + $(".blindsCenter.full").transition({queue: false, top: scoreLogoTop}, 625, "ease"); $("#finalScore").show(); $("#finalScore").transition({queue: false, opacity: 1}, 1000, "ease", callback); }; @@ -354,6 +402,12 @@ var transitionLogoLumaToBlank = function(callback) { $(".blindsCenter.full").transition({queue: false, rotateY: "180deg"}, 1000, "ease", callback); }; +var transitionLogoLumaToBracket = function(callback) { + transitionLogoLumaToLogo(function() { + transitionLogoToBracket(callback); + }); +}; + var transitionLogoLumaToLogo = function(callback) { $(".blinds.right").transition({queue: false, right: 0}, 1000, "ease"); $(".blinds.left").transition({queue: false, left: 0}, 1000, "ease", function() { @@ -407,6 +461,15 @@ var transitionScoreToBlank = function(callback) { }); }; +var transitionScoreToBracket = function(callback) { + $(".blindsCenter.full").transition({queue: false, top: bracketLogoTop}, 1000, "ease"); + $("#finalScore").transition({queue: false, opacity: 0}, 1000, "ease", function(){ + $("#finalScore").hide(); + $("#bracket").show(); + $("#bracket").transition({queue: false, opacity: 1}, 1000, "ease", callback); + }); +}; + var transitionScoreToLogo = function(callback) { $("#finalScore").transition({queue: false, opacity: 0}, 500, "ease", function(){ $("#finalScore").hide(); @@ -438,6 +501,12 @@ var transitionSponsorToBlank = function(callback) { }); }; +var transitionSponsorToBracket = function(callback) { + transitionSponsorToLogo(function() { + transitionLogoToBracket(callback); + }); +}; + var transitionSponsorToLogo = function(callback) { $("#sponsor").transition({queue: false, opacity: 0}, 1000, "ease", function() { $(".blindsCenter.full").transition({queue: false, rotateY: "0deg"}, 750, "ease", callback); @@ -578,6 +647,7 @@ $(function() { }, blank: { allianceSelection: transitionBlankToAllianceSelection, + bracket: transitionBlankToBracket, intro: transitionBlankToIntro, logo: transitionBlankToLogo, logoLuma: transitionBlankToLogoLuma, @@ -586,6 +656,13 @@ $(function() { sponsor: transitionBlankToSponsor, timeout: transitionBlankToTimeout, }, + bracket: { + blank: transitionBracketToBlank, + logo: transitionBracketToLogo, + logoLuma: transitionBracketToLogoLuma, + score: transitionBracketToScore, + sponsor: transitionBracketToSponsor, + }, intro: { blank: transitionIntroToBlank, match: transitionIntroToMatch, @@ -593,12 +670,14 @@ $(function() { }, logo: { blank: transitionLogoToBlank, + bracket: transitionLogoToBracket, logoLuma: transitionLogoToLogoLuma, score: transitionLogoToScore, sponsor: transitionLogoToSponsor, }, logoLuma: { blank: transitionLogoLumaToBlank, + bracket: transitionLogoLumaToBracket, logo: transitionLogoLumaToLogo, score: transitionLogoLumaToScore, }, @@ -608,12 +687,14 @@ $(function() { }, score: { blank: transitionScoreToBlank, + bracket: transitionScoreToBracket, logo: transitionScoreToLogo, logoLuma: transitionScoreToLogoLuma, sponsor: transitionScoreToSponsor, }, sponsor: { blank: transitionSponsorToBlank, + bracket: transitionSponsorToBracket, logo: transitionSponsorToLogo, score: transitionSponsorToScore, }, diff --git a/templates/audience_display.html b/templates/audience_display.html index 0b8bc57..18aa0ac 100644 --- a/templates/audience_display.html +++ b/templates/audience_display.html @@ -107,6 +107,7 @@ +
+
+ +