diff --git a/images/game_border2.png b/images/game_border2.png
new file mode 100644
index 0000000..6574875
Binary files /dev/null and b/images/game_border2.png differ
diff --git a/index.html b/index.html
index dafc1a6..007fcef 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,9 @@
1P
0
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{