Add placeholder bracket audience display mode and transitions to/from the other modes.

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;

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,
     },

templates/audience_display.html

@@ -107,6 +107,7 @@
           <div class="final-footer" id="finalMatchName">&nbsp;</div>
         </div>
       </div>
+      <div id="bracket"></div>
       <div id="sponsor" class="carousel slide">
         <div class="carousel-inner" id="sponsorContainer">
         </div>

templates/match_play.html

@@ -228,6 +228,11 @@
                 <input type="radio" name="audienceDisplay" value="score" onclick="setAudienceDisplay();">Final Score
               </label>
             </div>
+            <div class="radio">
+              <label>
+                <input type="radio" name="audienceDisplay" value="bracket" onclick="setAudienceDisplay();">Bracket
+              </label>
+            </div>
             <div class="radio">
               <label>
                 <input type="radio" name="audienceDisplay" value="logo" onclick="setAudienceDisplay();">Logo With BG