From 77116b9b0eabed2e237d8dfcb690e856be238d27 Mon Sep 17 00:00:00 2001
From: Franco Brusatti <franco@mojotech.com>
Date: Fri, 5 Oct 2012 18:23:37 -0300
Subject: [PATCH 1/2] Add missing image

---
 images/game_border2.png | Bin 0 -> 5152 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 images/game_border2.png

diff --git a/images/game_border2.png b/images/game_border2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6574875ea774aa7c568277bf00704b3a67b78a60
GIT binary patch
literal 5152
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
O0000<MNUMnLSTX|4XQ8z

literal 0
HcmV?d00001


From 1b3fb3ec61eb61dc8f26116a5bf1cbb485431084 Mon Sep 17 00:00:00 2001
From: Franco Brusatti <franco@mojotech.com>
Date: Mon, 8 Oct 2012 17:48:00 -0300
Subject: [PATCH 2/2] Fix setup issues

---
 index.html           |  4 ++-
 javascripts/setup.js | 76 +++++++++++++++++++++++++++++++++++---------
 styles/styles.css    | 24 ++++++++++----
 styles/styles.scss   | 24 +++++++++++---
 4 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index dafc1a6..007fcef 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,9 @@
         <div class="players"> 1P </div>
 
         <div class="sliders">
-          <div id="level_slider"></div>
+          <div id="level_slider">
+            <canvas id="level_canvas" width="400" height="100"></canvas>
+          </div>
         </div>
 
         <div id="level_amount" class="levels amount level-number"> 0 </div>
diff --git a/javascripts/setup.js b/javascripts/setup.js
index c0ca61d..d3a2cfa 100644
--- a/javascripts/setup.js
+++ b/javascripts/setup.js
@@ -1,5 +1,13 @@
 var speeds = ["LOW", "MED", "HI"];
 var musics = ["FEVER", "CHILD", "OFF"];
+drawingConfig = {
+  level_count:      20,
+  level_line_size:  340,
+  level_start_x:    20,
+  level_start_y:    5,
+  level_end_y:      15,
+  level_slice_size: 16
+};
 
 function Setup() {
   this.level = $( "#level_slider" ).slider( "value" );
@@ -13,6 +21,37 @@ function start(){
   window.location.href = "./src/play_game.html?" + jQuery.param(settings);
 };
 
+function drawLevelLine(){
+  var canvas = document.getElementById("level_canvas"),
+      context = canvas.getContext("2d");
+
+  context.strokeStyle = 'white';
+  context.lineWidth   = 2;
+
+  context.beginPath();
+  context.moveTo(drawingConfig.level_start_x, 10);
+  context.lineTo(drawingConfig.level_line_size, 10);
+  context.stroke();
+  context.closePath();
+
+  for (i=0; i <= drawingConfig.level_count; i++){
+    var x = drawingConfig.level_start_x + i * drawingConfig.level_slice_size,
+        start_y = drawingConfig.level_start_y,
+        end_y = drawingConfig.level_end_y;
+
+    if(i % 5 == 0){
+      start_y -= 5;
+      end_y += 5;
+    }
+
+    context.beginPath();
+    context.moveTo(x, start_y);
+    context.lineTo(x, end_y);
+    context.stroke();
+    context.closePath();
+  }
+}
+
 $(function(){
   $( "#level_slider" ).slider({
     value:0,
@@ -21,38 +60,45 @@ $(function(){
     step: 1,
     slide: function( event, ui ) {
       $( "#level_amount" ).html( ui.value );
-      $( "#level_title").addClass('border');
-      $( "#music_title").removeClass('border');
-      $( "#speed_title").removeClass('border');
     }
   });
   
   $( "#speed_slider" ).slider({
     min: 0,
     max: speeds.length - 1,
-    step: 1,
-    slide: function( event, ui ) {
-      $( "#speed_title").addClass('border');
-      $( "#level_title").removeClass('border');
-      $( "#music_title").removeClass('border');
-    }
+    step: 1
   });
 
   $( "#music_slider" ).slider({
     min: 0,
     max: musics.length - 1,
-    step: 1,
-    slide: function( event, ui ) {
-      $( "#music_title").addClass('border');
-      $( "#level_title").removeClass('border');
-      $( "#speed_title").removeClass('border');
-    }
+    step: 1
   });
 
   $("#play").bind('click', function(){
     start();
     return false;
   });
+
+  drawLevelLine();
+
+  $('#level_slider .ui-slider-handle').focus(function() {
+    $("#level_title").addClass('border');
+    $("#speed_title").removeClass('border');
+    $("#music_title").removeClass('border');
+  });
+
+  $('#speed_slider .ui-slider-handle').focus(function() {
+    $("#speed_title").addClass('border');
+    $("#level_title").removeClass('border');
+    $("#music_title").removeClass('border');
+  });
+
+  $('#music_slider .ui-slider-handle').focus(function() {
+    $("#music_title").addClass('border');
+    $("#speed_title").removeClass('border');
+    $("#level_title").removeClass('border');
+  });
 });
 
 window.addEventListener('keydown', function(e) {
diff --git a/styles/styles.css b/styles/styles.css
index 5564b85..834c6ad 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -304,6 +304,11 @@ html {
   background-position: center;
   border-bottom: 0px; }
 
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none; }
+
 .pane {
   width: 55%;
   background: black;
@@ -320,17 +325,19 @@ html {
   background-position: center;
   z-index: 1; }
   .pane .border {
-    border: 3px solid #CC7A29;
+    border: 3px solid #CC7A29 !important;
     padding: 5px;
     width: 200px;
     border-radius: 6px; }
   .pane .option {
-    margin: 60px 40px; }
+    margin: 70px 40px; }
     .pane .option .title {
+      border: 3px solid transparent;
+      width: 200px;
       color: #FFB870;
-      padding: 5px;
+      padding: 7px;
       clear: both;
-      margin: 22px 0px; }
+      margin: 30px 0px; }
     .pane .option .players {
       float: left;
       width: 10%; }
@@ -352,7 +359,7 @@ html {
     .pane .option .levels {
       float: right;
       width: 10%;
-      margin: -50px 40px; }
+      margin: -50px; }
     .pane .option .speeds {
       float: left;
       width: 10%;
@@ -374,6 +381,9 @@ html {
   height: 20px;
   text-align: center; }
 
+.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all {
+  width: 320px; }
+
 .ui-slider-handle.ui-state-default.ui-corner-all {
   background: black;
   margin: -16px 0px;
@@ -381,7 +391,9 @@ html {
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
-  border-top: 20px solid #B2B26B; }
+  border-top: 20px solid #B2B26B;
+  border-bottom: 0px solid #B2B26B;
+  outline: none; }
 
 .ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all {
   background: black;
diff --git a/styles/styles.scss b/styles/styles.scss
index 46f3aa2..129c17d 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -331,6 +331,12 @@ margin: 25px -125px 0 0;
   border-bottom: 0px;
 }
 
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+}
+
 .pane{
   width: 55%;
   background: black;
@@ -348,19 +354,21 @@ margin: 25px -125px 0 0;
   z-index: 1;
 
   .border{
-    border: 3px solid #CC7A29;
+    border: 3px solid #CC7A29 !important;
     padding: 5px;
     width: 200px;
     border-radius: 6px;
   }
 
   .option{
-    margin: 60px 40px;
+    margin: 70px 40px;
     .title{
+      border: 3px solid transparent;
+      width: 200px;
       color: #FFB870;
-      padding: 5px;
+      padding: 7px;
       clear: both;
-      margin: 22px 0px;
+      margin: 30px 0px;
     }
     .players{
       float: left;
@@ -385,7 +393,7 @@ margin: 25px -125px 0 0;
     .levels{
       float: right;
       width: 10%;
-      margin: -50px 40px;
+      margin: -50px;
     }
     .speeds{
       float: left;
@@ -414,6 +422,10 @@ margin: 25px -125px 0 0;
   text-align: center;
 }
 
+.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{
+  width: 320px;
+}
+
 .ui-slider-handle.ui-state-default.ui-corner-all{
   background: black;
   margin: -16px 0px;
@@ -422,6 +434,8 @@ margin: 25px -125px 0 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent; 
   border-top: 20px solid #B2B26B;
+  border-bottom: 0px solid #B2B26B;
+  outline: none;
 }
 
 .ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{