Add Sponsor Screen on Audience Display, Still Need to Populate with Rotating Sponsor Logos

static/css/audience_display.css

@@ -276,6 +276,38 @@ html {
   font-size: 28px;
   color: #fff;
 }
+#sponsor {
+  position: fixed;
+  width: 1000px;
+  height: 600px;
+  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 h1 {
+  font-family: "FuturaLTBold";
+  font-size: 60px;
+  background-color: #444;
+  color: #fff;
+  margin: 0;
+  padding: 0.25em;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#sponsor img {
+  max-width: 800px;
+  height: 400px;
+  margin-top: 50px;
+}
 #allianceSelectionCentering {
   position: absolute;
   left: 50%;

static/js/audience_display.js

@@ -1,5 +1,6 @@
 // Copyright 2014 Team 254. All Rights Reserved.
-// Author: pat@patfairbank.com (Patrick Fairbank)
+// Authors: pat@patfairbank.com (Patrick Fairbank)
+//          nick@team254.com (Nick Eyre)
 //
 // Client-side methods for the audience display.
 
@@ -262,6 +263,57 @@ var transitionLowerThirdToBlank = function(callback) {
   });
 };
 
+var transitionBlankToSponsor = function(callback) {
+  $(".blinds.center-blank").css({rotateY: "90deg"});
+  $(".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();
+    setTimeout(function() {
+      $("#sponsor").show();
+      $("#sponsor").transition({queue: false, opacity: 1}, 1000, "ease", callback);
+    }, 200);
+  });
+};
+
+var transitionSponsorToBlank = function(callback) {
+  $("#sponsor").transition({queue: false, opacity: 0}, 1000, "ease", function() {
+    setTimeout(function() {
+      $("#sponsor").hide();
+      $(".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", callback);
+    }, 200);
+  });
+};
+
+var transitionLogoToSponsor = function(callback) {
+  $("#blindsCenter").transition({queue: false, rotateY: "90deg"}, 750, "ease", function () {
+    $("#sponsor").show();
+    $("#sponsor").transition({queue: false, opacity: 1}, 1000, "ease", callback);
+  });
+};
+
+var transitionSponsorToLogo = function(callback) {
+  $("#sponsor").transition({queue: false, opacity: 0}, 1000, "ease", function() {
+    $("#sponsor").hide();
+    $("#blindsCenter").transition({queue: false, rotateY: "0deg"}, 750, "ease", callback);
+  });
+};
+
+var transitionScoreToSponsor = function(callback) {
+  transitionScoreToLogo(function() {
+    transitionLogoToSponsor(callback);
+  });
+};
+
+var transitionSponsorToScore = function(callback) {
+  transitionSponsorToLogo(function() {
+    transitionLogoToScore(callback);
+  });
+};
+
 $(function() {
   // Set up the websocket back to the server.
   websocket = new CheesyWebsocket("/displays/audience/websocket", {
@@ -284,6 +336,7 @@ $(function() {
       match: transitionBlankToInMatch,
       score: transitionBlankToScore,
       logo: transitionBlankToLogo,
+      sponsor: transitionBlankToSponsor,
       allianceSelection: transitionBlankToAllianceSelection,
       lowerThird: transitionBlankToLowerThird
     },
@@ -297,11 +350,18 @@ $(function() {
     },
     score: {
       blank: transitionScoreToBlank,
-      logo: transitionScoreToLogo
+      logo: transitionScoreToLogo,
+      sponsor: transitionScoreToSponsor
     },
     logo: {
       blank: transitionLogoToBlank,
-      score: transitionLogoToScore
+      score: transitionLogoToScore,
+      sponsor: transitionLogoToSponsor
+    },
+    sponsor: {
+      blank: transitionSponsorToBlank,
+      logo: transitionSponsorToLogo,
+      score: transitionSponsorToScore
     },
     allianceSelection: {
       blank: transitionAllianceSelectionToBlank

templates/audience_display.html

@@ -97,6 +97,10 @@
           <span class="pull-right" id="finalMatchName"></span>
         </div>
       </div>
+      <div id="sponsor">
+        <img src="/static/img/logo-min.svg" />
+        <h1>Event Sponsor</h1>
+      </div>
     </div>
     <div id="allianceSelectionCentering" style="display: none;">
       <div id="allianceSelection"></div>

templates/match_play.html

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