improve song selection

src/css/songselect.css

@@ -35,23 +35,30 @@ ul li{
 }
 
 .song-title{
-    float:right;
+    float: right;
-    display:inline-block;
+    width: 0px;
-    width:20px;
+    padding: 12px 24px;
-    height: 100%;
+    word-wrap: break-word;
-    padding:10px;
+    font-size: 22pt;
+    color: white;
+    margin-right: 10px;
+    position: relative;
+    z-index: 1;
+    line-height: 28px;
+}
+
+.song-title:before {
+    content: attr(alt);
+    position: relative;
+    -webkit-text-stroke: 0.25em #000;
+    z-index: -1;
     word-wrap: break-word;
-    font-size: 28pt;
-    color:white;
-    margin-right:10px;
-    -webkit-text-stroke-width: 2px;
-   -webkit-text-stroke-color: black;
 }
 
 .song{
     font-size: 14pt;
-    width: 60px;
+    width: 45px;
-	margin-right:20px;
+	margin-right:15px;
 	height:100%;
     color: black;
     display: inline-block;

src/js/bufferedloop.js

@@ -42,7 +42,6 @@ class BufferedLoop{
 		source.start(time)
 		this.bufferedTime=time+duration
 		this.sources.add(source)
-		console.log(this.sources)
 		setTimeout(function(){
 			self.sources.delete(source)
 		},duration*1000)

src/js/songselect.js

@@ -104,8 +104,9 @@ function SongSelect(){
 			var titleSplit = songDir.split(" ");
 			var songID = titleSplit[0];
 			var songTitle = songDir.substr(songID.length+1, songDir.length-(songID.length+1));
+			var songTitleSpace = songTitle.replace(/ /g, ' ');
 			
-			_code += "<div id='song-"+songID+"' class='song'><div class='song-title stroke-sub' alt='"+songTitle+"'>"+songTitle+'</div>';
+			_code += "<div id='song-"+songID+"' class='song'><div class='song-title stroke-sub' alt='"+songTitleSpace+"'>"+songTitleSpace+'</div>';
 			_code += "<ul class='difficulties'>";
 			
 			for(var j=0; j<songDifficulties.length; j++){
@@ -147,6 +148,13 @@ function SongSelect(){
 		}
 		
 		$("#song-container").html(_code);
+		$('.song').each(function(){
+			var title = $(this).find('.song-title');
+			var height = $(title).height();
+			$(title).css('margin-top', '-' + height/2 + 'px');
+			document.styleSheets[0].addRule('#'+$(this).attr('id')+' .song-title:before','top:'+height/2+'px;');
+		});
+		$('.difficulty').hide();
 	}
     
     this.display = function(){