Add new audience display mode that shows logo with luma key background

static/js/audience_display.js

@@ -247,6 +247,16 @@ var transitionInMatchToBlank = function(callback) {
   });
 };
 
+var transitionBlankToLogoLuma = function(callback) {
+  $(".blindsCenter.blank").transition({ queue: false, rotateY: "180deg" }, 500, "ease");
+  $(".blindsCenter.full").transition({ queue: false, rotateY: "0deg" }, 500, "ease", callback);
+};
+
+var transitionLogoLumaToBlank = function(callback) {
+  $(".blindsCenter.blank").transition({queue: false, rotateY: "360deg"}, 500, "ease");
+  $(".blindsCenter.full").transition({queue: false, rotateY: "180deg"}, 500, "ease");
+};
+
 var transitionBlankToLogo = function(callback) {
   $(".blindsCenter.blank").css({rotateY: "0deg"});
   $(".blindsCenter.full").css({rotateY: "-180deg"});
@@ -509,7 +519,8 @@ $(function() {
       logo: transitionBlankToLogo,
       sponsor: transitionBlankToSponsor,
       allianceSelection: transitionBlankToAllianceSelection,
-      timeout: transitionBlankToTimeout
+      timeout: transitionBlankToTimeout,
+      logoluma: transitionBlankToLogoLuma
     },
     intro: {
       blank: transitionIntroToBlank,
@@ -541,6 +552,9 @@ $(function() {
     timeout: {
       blank: transitionTimeoutToBlank,
       intro: transitionTimeoutToIntro
+    },
+    logoluma: {
+      blank: transitionLogoLumaToBlank
     }
   }
 });

templates/match_play.html

@@ -208,6 +208,11 @@
                 <input type="radio" name="audienceDisplay" value="logo" onclick="setAudienceDisplay();">Logo
               </label>
             </div>
+            <div class="radio">
+              <label>
+                <input type="radio" name="audienceDisplay" value="logoluma" onclick="setAudienceDisplay();">Logo w/ Key
+              </label>
+            </div>
             <div class="radio">
               <label>
                 <input type="radio" name="audienceDisplay" value="sponsor" onclick="setAudienceDisplay();">Sponsor Reel