diff --git a/oliver_screen/static/brick1.png b/oliver_screen/static/brick1.png
new file mode 100644
index 0000000..cbafff1
Binary files /dev/null and b/oliver_screen/static/brick1.png differ
diff --git a/oliver_screen/static/brick2.png b/oliver_screen/static/brick2.png
new file mode 100644
index 0000000..f29d1d8
Binary files /dev/null and b/oliver_screen/static/brick2.png differ
diff --git a/oliver_screen/static/brick3.png b/oliver_screen/static/brick3.png
new file mode 100644
index 0000000..35ca352
Binary files /dev/null and b/oliver_screen/static/brick3.png differ
diff --git a/oliver_screen/static/brick4.png b/oliver_screen/static/brick4.png
new file mode 100644
index 0000000..f7b75e2
Binary files /dev/null and b/oliver_screen/static/brick4.png differ
diff --git a/oliver_screen/static/falling_pieces.js b/oliver_screen/static/falling_pieces.js
new file mode 100644
index 0000000..95cd06c
--- /dev/null
+++ b/oliver_screen/static/falling_pieces.js
@@ -0,0 +1,125 @@
+/* */
+function is_tetris_song() {
+ var test;
+ $("#now_playing").filter(function(){
+ test = /Tetris|Korobeiniki/i.test( $(this).text() );
+ });
+ return test;
+}
+
+function play_tetris() {
+ /* http://www.webkit.org/blog-files/bricks/ and kak-logos */
+ $("#gameContainer").show();
+}
+function dont_play_tetris() {
+ $("#gameContainer").hide();
+}
+
+/* Define the number of bricks to be used in the animation */
+const NUMBER_OF_BRICKS = 15;
+
+/*
+ Called when the "Falling Bricks" page is completely loaded.
+*/
+function init()
+{
+ /* Get a reference to the element that will contain the bricks */
+ var container = document.getElementById('brickContainer');
+ /* Fill the empty container with new bricks */
+ for (var i = 0; i < NUMBER_OF_BRICKS; i++)
+ {
+ container.appendChild(createABrick());
+ }
+}
+
+function randomRotation() {
+ if(Math.random() <= 0.25) {
+ return "deg0";
+ } else if(Math.random() <= 0.5) {
+ return "deg90";
+ } else if(Math.random() <= 0.75) {
+ return "deg180";
+ } else {
+ return "deg270";
+ }
+}
+
+/*
+ Receives the lowest and highest values of a range and
+ returns a random integer that falls within that range.
+*/
+function randomInteger(low, high)
+{
+ return low + Math.floor(Math.random() * (high - low));
+}
+
+
+/*
+ Receives the lowest and highest values of a range and
+ returns a random float that falls within that range.
+*/
+function randomFloat(low, high)
+{
+ return low + Math.random() * (high - low);
+}
+
+
+/* Receives a number and returns its CSS pixel value. */
+function pixelValue(value)
+{
+ return value + 'px';
+}
+
+
+/* Returns a duration value for the falling animation. */
+
+function durationValue(value)
+{
+ return value + 's';
+}
+
+
+/* Uses an img element to create each brick. */
+function createABrick()
+{
+ /* Start by creating a wrapper div, and an empty img element */
+ var brickDiv = document.createElement('div');
+ var image = document.createElement('img');
+
+ /* Randomly choose a brick image and assign it to the newly created element */
+ /* FIXME: this url should be dynamic */
+ image.src = '/static/brick' + randomInteger(1, 5) + '.png';
+
+ brickDiv.style.top = "-150px";
+
+ /* Position the brick at a random location along the screen */
+ brickDiv.style.left = pixelValue(randomInteger(0, 450));
+
+ /* Set a random rotation for the brick */
+ /* FIXME: this does'nt work */
+ //brickDiv.style.webkitTranslateRotate = randomRotation();
+ //brickDiv.className = randomRotation();
+ //console.log(brickDiv.style);
+
+ /* Set the -webkit-animation-name property with these values */
+ brickDiv.style.webkitAnimationName = 'fade, drop';
+
+ /* Set the duration for the fade and drop animations */
+ var fadeAndDropDuration = durationValue(10.0);
+
+ /* Set the -webkit-animation-duration property with these values */
+ brickDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
+
+ var brickDelay = durationValue(randomFloat(0, 10));
+ brickDiv.style.webkitAnimationDelay = brickDelay + ', ' + brickDelay;
+
+ // add the to the
+ brickDiv.appendChild(image);
+
+ /* Return this img element so it can be added to the document */
+ return brickDiv;
+}
+
+
+/* Calls the init function when the "Falling Bricks" page is full loaded */
+window.addEventListener('load', init, false);
diff --git a/oliver_screen/static/screen.css b/oliver_screen/static/screen.css
index 0a9ccf9..422f8bd 100644
--- a/oliver_screen/static/screen.css
+++ b/oliver_screen/static/screen.css
@@ -22,7 +22,6 @@ div#container {
width:1200px;
height:950px;
position:relative;
- overflow:hidden;
}
div#content {
display:table-cell;
@@ -47,9 +46,77 @@ div#last_track {
#spinner {
display: none;
position: fixed;
- top:20px;
- left:20px;
+ top:20px;
+ left:20px;
width:20px;
height:20px;
}
+/* Falling tetris pieces */
+
+/* rotation-classes */
+.deg0 {
+ -webkit-transform:rotate(0deg);
+}
+.deg90 {
+ -webkit-transform:rotate(90deg);
+}
+.deg180 {
+ -webkit-transform:rotate(180deg);
+}
+.deg270 {
+ -webkit-transform:rotate(270deg);
+}
+
+#gameContainer {
+ right:0px;
+ top:0px;
+ position: absolute;
+ height: 950px;
+ width: 500px;
+ margin: 0px;
+ overflow: hidden;
+ display:none;
+}
+
+/* Defines the position and dimensions of the brickContainer div */
+#brickContainer
+{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+/* This CSS rule is applied to all div elements in the brickContainer div.
+ It styles and animates each brickDiv.
+*/
+#brickContainer > div
+{
+ position: absolute;
+
+ /* We use the following properties to apply the fade and drop animations to each brick.
+ Each of these properties takes two values. These values respectively match a setting
+ for fade and drop.
+ */
+ -webkit-animation-iteration-count: infinite, infinite;
+ -webkit-animation-direction: normal, normal;
+ -webkit-animation-timing-function: linear, ease-in;
+}
+
+/* Makes a brick fall from -200 to 950 pixels in the y-axis */
+@-webkit-keyframes drop
+{
+ /* Move a brick to -200 pixels in the y-axis at the start of the animation */
+ 0% { -webkit-transform: translate(0px, -200px); }
+ /* Move a brick to 950 pixels in the y-axis at the end of the animation */
+ 100% { -webkit-transform: translate(0px, 950px); }
+}
+
+/* Hides a brick towards the very end of the animation */
+@-webkit-keyframes fade
+{
+ /* Show a brick while into or below 95 percent of the animation and hide it, otherwise */
+ 0% { opacity: 1; }
+ 95% { opacity: 1; }
+ 100% { opacity: 0; }
+}
diff --git a/oliver_screen/templates/public/index.html b/oliver_screen/templates/public/index.html
index 124d860..d0f0474 100644
--- a/oliver_screen/templates/public/index.html
+++ b/oliver_screen/templates/public/index.html
@@ -6,6 +6,7 @@
+
@@ -74,5 +64,9 @@