Dare to listen to a tetris tune!

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 <img> to the <div>
+    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);

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; }
+}

oliver_screen/templates/public/index.html

@@ -6,6 +6,7 @@
         <link rel="stylesheet"  type="text/css" href="{{ MEDIA_URL }}screen.css" />
         <script type="text/javascript" src="{{ MEDIA_URL }}jquery-1.5.2.min.js"></script>
         <script type="text/javascript" src="{{ MEDIA_URL }}jquery.timers-1.2.js"></script>
+        <script type="text/javascript" src="{{ MEDIA_URL }}falling_pieces.js"></script>
         <script type="text/javascript">
             /* Function that updates the capacities */
             var get_last_track = function() {
@@ -16,7 +17,7 @@
                 $( '#now_playing' ).load(
                     '{% url tracks.views.get_now_playing %}', function() {
                             resize_img();
-                            if(is_tetris_song()) {
+                            if( is_tetris_song() ) {
                                 play_tetris();
                             } else {
                                 dont_play_tetris();
@@ -27,8 +28,8 @@
             $( document ).ready( get_last_track );
             $( document ).ready( get_now_playing );
             /* Start timers updating a screen resource. */
-            $( document).everyTime('10s', get_last_track );
-            $( document).everyTime('10s', get_now_playing );
+            $( document ).everyTime('10s', get_last_track );
+            $( document ).everyTime('10s', get_now_playing );
 
             /* Ajax spinner */
             $( document ).ajaxStart( function() {
@@ -46,17 +47,6 @@
                     image.width(1000);
                 }
             }
-            function is_tetris_song() {
-                $("#now_playing").filter(function(){
-                        return /Tetris|Korobeiniki/i.test( $(this).text() );
-                        });
-            }
-            function play_tetris() {
-                $("game").show();
-            }
-            function dont_play_tetris() {
-                $("game").hide();
-            }
             /* TODO: if the current song is a tetris song, then do something. */
         </script>
     </head>
@@ -74,5 +64,9 @@
             </div>-->
         <!--<script type="text/javascript" src="{{ MEDIA_URL }}tetris.js"></script>-->
         </div>
+        <div id="gameContainer">
+            <div id="brickContainer"></div>
+        </div>
+
     </body>
 </html>

oliver_screen/templates/public/now_playing.html

@@ -1,5 +1,7 @@
 {% if now_playing %}
-    <img src="{{ now_playing.image}}" class="now_playing" /><br />
+    {% if now_playing.image %}
+        <img src="{{ now_playing.image}}" class="now_playing" /><br />
+    {% endif %}
     <img src="{{ MEDIA_URL}}eq.gif" /> {{ now_playing.artist}} - {{ now_playing.title }} ♪♫<br />
 {% else %}
     <img src="{{ MEDIA_URL}}no_music_makes_me_sick_by_sakgaa.jpg" /><br />

oliver_screen/tracks/views.py

@@ -37,7 +37,10 @@ def get_now_playing(request):
     now_playing = []
     if not track is None:
         artist = track.get_artist()
-        now_playing = { 'artist': artist.get_name(), 'title': track.get_title(), 'image': artist.get_images(limit=1)[0].sizes.original}
+        image = artist.get_images(limit=1)
+        if len(image) > 0:
+            image = image[0].sizes.original
+        now_playing = { 'artist': artist.get_name(), 'title': track.get_title(), 'image': image}
     return render_to_response("public/now_playing.html", {'now_playing':now_playing}, context_instance=RequestContext(request));
 
 # Mock views