NCGEARS/cheesy-arena-lite
1
0
Fork 0
mirror of https://github.com/Team254/cheesy-arena-lite.git synced 2026-03-09 13:46:44 -04:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Refactor Audience Display Code

Browse Source
This commit is contained in:
Nick Eyre
2014-06-09 23:18:58 -07:00
parent 87d9c71184
commit e87bcd9275
3 changed files with 76 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/audience.html
View File

@@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cheesy Arena - A/V Overlay</title>
<title>Cheesy Arena - Audience Screen</title>
<meta name="generator" content="Cheesy Arena" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/fonts/roboto-regular/stylesheet.css" type="text/css" charset="utf-8" />
@@ -17,26 +17,25 @@
</head>
<body>
<div id='container'></div>
<div id='topcontainer'></div>
<div class='controlpanel'>
<h3>Control Panel</h3>
<button onclick="handle = logoScreen();">Logo</button><br />
<button onclick="handle();">None</button><br />
<button onclick="openScreen('logo');">Logo</button><br />
<button onclick="openScreen('blank');">None</button><br />
</button>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/jquery.transit.min.js"></script>
<script src="/static/js/audience.js"></script>
<script type='text/x-template' class='template' id='logoScreen'>
<div id='logoScreen'>
<div class='blinds right background'>&nbsp;</div>
<div class='blinds right center blank'>&nbsp;</div>
<div class='blinds left background'>&nbsp;</div>
<div class='blinds left center'>&nbsp;</div>
<div class='blinds left center blank'>&nbsp;</div>
</div>
<script type='text/x-template' class='template' id='blank'></script>
<script type='text/x-template' class='template' id='logo'>
<div class='blinds right background'>&nbsp;</div>
<div class='blinds right center blank'>&nbsp;</div>
<div class='blinds left background'>&nbsp;</div>
<div class='blinds left center'>&nbsp;</div>
<div class='blinds left center blank'>&nbsp;</div>
</script>
</body>

13
static/css/audience.css
View File

@@ -3,6 +3,7 @@ Copyright 2014 Team 254. All Rights Reserved.
Author: nick@team254.com (Nick Eyre)
*/
/* Control Panel (Temporary) */
.controlpanel {
position: fixed;
right: 20px;
@@ -13,12 +14,13 @@ Author: nick@team254.com (Nick Eyre)
border: 1px solid black;
}
/* Top Level Container */
html,body {
height: 100%;
margin: 0;
width: 100%;
}
.container {
#topcontainer {
position: fixed;
top: 0;
bottom: 0;
@@ -26,7 +28,7 @@ html,body {
right: 0;
}
/* Design Element: Blinds */
.blinds {
position: fixed;
top: 0;
@@ -48,13 +50,14 @@ html,body {
background-size: 100%;
}
#logoScreen .blinds.background {
/* Screen: Logo */
#logo .blinds.background {
background-image: url('/static/img/endofmatch-bg.png');
}
#logoScreen .blinds.center {
#logo .blinds.center {
background-image: url('/static/img/endofmatch-center.png');
-webkit-backface-visibility: hidden;
}
#logoScreen .blinds.center.blank {
#logo .blinds.center.blank {
background-image: url('/static/img/endofmatch-center-blank.png');
}

78
static/js/audience.js
View File

@@ -1,43 +1,79 @@
// Copyright 2014 Team 254. All Rights Reserved.
// Author: nick@team254.com (Nick Eyre)
var handle;
var screens = {
function logoScreen(){
// Initialize
$('#container').html($('.template#logoScreen').html());
$('.blinds.center:not(.blank)').css({rotateY: '-180deg'})
blank: {
init: function(cb){callback(cb);},
open: function(cb){callback(cb);},
close: function(cb){callback(cb);}
},
// In Animation
closeBlinds(function(){
setTimeout(function(){
$('.blinds.center.blank').transition({rotateY: '180deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '0deg'});
}, 400);
});
logo: {
init: function(cb){
$('.blinds.center:not(.blank)').css({rotateY: '-180deg'});
callback(cb);
},
open: function(cb){
closeBlinds(function(){
setTimeout(function(){
$('.blinds.center.blank').transition({rotateY: '180deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '0deg'}, function(){
callback(cb);
});
}, 400);
});
},
close: function(cb){
$('.blinds.center.blank').transition({rotateY: '360deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
openBlinds(callback);
});
}
}
// Close Function
return function(callback){
$('.blinds.center.blank').transition({rotateY: '360deg'});
$('.blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
openBlinds(callback);
};
var currentScreen = 'blank';
function openScreen(screen){
// If Screen Exists
if(typeof(screens[screen]) == 'object' && $('.template#'+screen).length > 0 && currentScreen != screen){
// Initialize New Screen
$('#topcontainer').append("<div class='container' id='"+screen+"'>"+$('.template#'+screen).html()+"</div>");
screens[screen].init(function(){
// Close Current Screen
screens[currentScreen].close(function(){
// Open New Screen
currentScreen = screen;
screens[screen].open();
});
});
}
}
function closeBlinds(callback){
function callback(cb){
if(typeof(cb) == 'function')
cb();
}
function closeBlinds(cb){
$('.blinds.right').transition({right: 0});
$('.blinds.left').transition({left: 0}, function(){
$(this).addClass('full');
callback();
callback(cb);
});
}
function openBlinds(callback){
function openBlinds(cb){
$('.blinds.right').show();
$('.blinds.left').removeClass('full');
$('.blinds.right').show().transition({right: '-50%'});
$('.blinds.left').transition({left: '-50%'}, function(){
callback();
callback(cb);
});
}