Add more direct transitions between audience display modes.

static/js/audience_display.js

@@ -255,6 +255,7 @@ var transitionInMatchToBlank = function(callback) {
 };
 
 var transitionBlankToLogoLuma = function(callback) {
+  $(".blindsCenter.blank").css({rotateY: "180deg"});
   $(".blindsCenter.full").transition({ queue: false, rotateY: "0deg" }, 1000, "ease", callback);
 };
 
@@ -262,6 +263,40 @@ var transitionLogoLumaToBlank = function(callback) {
   $(".blindsCenter.full").transition({queue: false, rotateY: "180deg"}, 1000, "ease", callback);
 };
 
+var transitionLogoLumaToLogo = function(callback) {
+  $(".blinds.right").transition({queue: false, right: 0}, 1000, "ease");
+  $(".blinds.left").transition({queue: false, left: 0}, 1000, "ease", function() {
+    $(".blinds.left").addClass("full");
+    $(".blinds.right").hide();
+    if (callback) {
+      callback();
+    }
+  });
+};
+
+var transitionLogoToLogoLuma = function(callback) {
+  $(".blinds.left").removeClass("full");
+  $(".blinds.right").show();
+  $(".blinds.right").transition({queue: false, right: "-50%"}, 1000, "ease");
+  $(".blinds.left").transition({queue: false, left: "-50%"}, 1000, "ease", function() {
+    if (callback) {
+      callback();
+    }
+  });
+};
+
+var transitionLogoLumaToScore = function(callback) {
+  transitionLogoLumaToLogo(function() {
+    transitionLogoToScore(callback);
+  });
+};
+
+var transitionScoreToLogoLuma = function(callback) {
+  transitionScoreToLogo(function() {
+    transitionLogoToLogoLuma(callback);
+  });
+};
+
 var transitionBlankToLogo = function(callback) {
   $(".blindsCenter.blank").css({rotateY: "0deg"});
   $(".blindsCenter.full").css({rotateY: "-180deg"});
@@ -525,41 +560,45 @@ $(function() {
       sponsor: transitionBlankToSponsor,
       allianceSelection: transitionBlankToAllianceSelection,
       timeout: transitionBlankToTimeout,
-      logoluma: transitionBlankToLogoLuma
+      logoLuma: transitionBlankToLogoLuma,
     },
     intro: {
       blank: transitionIntroToBlank,
       match: transitionIntroToInMatch,
-      timeout: transitionIntroToTimeout
+      timeout: transitionIntroToTimeout,
     },
     match: {
       blank: transitionInMatchToBlank,
-      intro: transitionInMatchToIntro
+      intro: transitionInMatchToIntro,
     },
     score: {
       blank: transitionScoreToBlank,
       logo: transitionScoreToLogo,
-      sponsor: transitionScoreToSponsor
+      logoLuma: transitionScoreToLogoLuma,
+      sponsor: transitionScoreToSponsor,
     },
     logo: {
       blank: transitionLogoToBlank,
+      logoLuma: transitionLogoToLogoLuma,
       score: transitionLogoToScore,
-      sponsor: transitionLogoToSponsor
+      sponsor: transitionLogoToSponsor,
+    },
+    logoLuma: {
+      blank: transitionLogoLumaToBlank,
+      logo: transitionLogoLumaToLogo,
+      score: transitionLogoLumaToScore,
     },
     sponsor: {
       blank: transitionSponsorToBlank,
       logo: transitionSponsorToLogo,
-      score: transitionSponsorToScore
+      score: transitionSponsorToScore,
     },
     allianceSelection: {
-      blank: transitionAllianceSelectionToBlank
+      blank: transitionAllianceSelectionToBlank,
     },
     timeout: {
       blank: transitionTimeoutToBlank,
-      intro: transitionTimeoutToIntro
+      intro: transitionTimeoutToIntro,
     },
-    logoluma: {
-      blank: transitionLogoLumaToBlank
-    }
   }
 });

templates/match_play.html

@@ -219,7 +219,7 @@
             </div>
             <div class="radio">
               <label>
-                <input type="radio" name="audienceDisplay" value="logoluma" onclick="setAudienceDisplay();">
+                <input type="radio" name="audienceDisplay" value="logoLuma" onclick="setAudienceDisplay();">
                 Logo Without BG
               </label>
             </div>