too many changes

app.py

@@ -0,0 +1,48 @@
+#!/usr/bin/env python2
+
+import sqlite3
+from flask import Flask, g, jsonify
+
+app = Flask(__name__)
+DATABASE = 'taiko.db'
+
+
+def get_db():
+    db = getattr(g, '_database', None)
+    if db is None:
+        db = g._database = sqlite3.connect(DATABASE)
+    return db
+
+
+def query_db(query, args=(), one=False):
+    cur = get_db().execute(query, args)
+    rv = cur.fetchall()
+    cur.close()
+    return (rv[0] if rv else None) if one else rv
+
+
+@app.teardown_appcontext
+def close_connection(exception):
+    db = getattr(g, '_database', None)
+    if db is not None:
+        db.close()
+
+
+@app.route('/api/songs')
+def route_api_songs():
+	songs = query_db('select * from songs where enabled = 1')
+	songs_out = []
+	for song in songs:
+		print song
+		songs_out.append(
+			{'id': song[0], 'title': song[1], 'title_en': song[2], 'stars': {
+				'easy': song[3], 'normal': song[4],
+				'hard': song[5], 'oni': song[6]
+			}}
+		)
+
+	return jsonify(songs_out)
+
+
+if __name__ == '__main__':
+	app.run(port=34801)

index.html

@@ -21,6 +21,7 @@
 	<link rel="stylesheet" href="/src/css/scoresheet.css">
 	<link rel="stylesheet" href="/src/css/loadsong.css">
 	<link rel="stylesheet" href="/src/css/game.css">
+	<link rel="stylesheet" href="/src/css/animations.css">
 	
 	<link rel="icon" href="/assets/img/favicon.png" type="image/png"> 
 	<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/png">

src/css/animations.css

@@ -0,0 +1,58 @@
+@keyframes don-normal {
+0%{background-position-y:0px}
+6.35%{background-position-y:-184px}
+7.94%{background-position-y:-368px}
+9.52%{background-position-y:-552px}
+11.11%{background-position-y:-736px}
+12.7%{background-position-y:-920px}
+14.29%{background-position-y:-1104px}
+15.87%{background-position-y:-1104px}
+17.46%{background-position-y:-920px}
+19.05%{background-position-y:-736px}
+20.63%{background-position-y:-552px}
+22.22%{background-position-y:-368px}
+23.81%{background-position-y:-184px}
+25.4%{background-position-y:0px}
+31.75%{background-position-y:-184px}
+33.33%{background-position-y:-368px}
+34.92%{background-position-y:-552px}
+36.51%{background-position-y:-736px}
+38.1%{background-position-y:-920px}
+39.68%{background-position-y:-1104px}
+41.27%{background-position-y:-1104px}
+42.86%{background-position-y:-920px}
+44.44%{background-position-y:-736px}
+46.03%{background-position-y:-552px}
+47.62%{background-position-y:-368px}
+49.21%{background-position-y:-184px}
+50.79%{background-position-y:0px}
+57.14%{background-position-y:-184px}
+58.73%{background-position-y:-368px}
+60.32%{background-position-y:-552px}
+61.9%{background-position-y:-736px}
+63.49%{background-position-y:-920px}
+65.08%{background-position-y:-1104px}
+66.67%{background-position-y:-1104px}
+68.25%{background-position-y:-920px}
+69.84%{background-position-y:-1288px}
+71.43%{background-position-y:-1472px}
+73.02%{background-position-y:-1656px}
+74.6%{background-position-y:-1840px}
+76.19%{background-position-y:-2024px}
+77.78%{background-position-y:-2024px}
+79.37%{background-position-y:-2024px}
+80.95%{background-position-y:-2024px}
+82.54%{background-position-y:-1840px}
+84.13%{background-position-y:-1656px}
+85.71%{background-position-y:-1472px}
+87.3%{background-position-y:-1288px}
+88.89%{background-position-y:-2392px}
+90.48%{background-position-y:-2208px}
+92.06%{background-position-y:-2208px}
+93.65%{background-position-y:-2392px}
+95.24%{background-position-y:-2576px}
+96.83%{background-position-y:-2760px}
+98.41%{background-position-y:-2944px}
+100%{background-position-y:-3128px}
+}
+

src/css/main.css

@@ -63,6 +63,7 @@ html, body{
     color: white;
     float: right;
     z-index: 1;
+    font-weight: 300;
 }
 
 .stroke-main:before {
@@ -98,4 +99,11 @@ html, body{
 
 .click-to-continue:before {
     width: 100%;
+}
+
+
+.don {
+  background-position-y: 0;
+  position: absolute;
+  top: 0px;
 }

src/css/songselect.css

@@ -50,7 +50,7 @@ ul li{
 .song-title{
     float: right;
     width: 45px;
-    padding: 10px 0px;
+    padding: 10px 2px;
     word-wrap: break-word;
     font-size: 22pt;
     color: white;
@@ -65,7 +65,7 @@ ul li{
 
 .song{
     font-size: 14pt;
-    width: 45px;
+    width: 50px;
 	margin-right:15px;
 	height:100%;
     color: black;

src/js/assets.js

@@ -26,7 +26,8 @@ var assets = {
 		'muzu_easy.png',
 		'muzu_normal.png',
 		'muzu_hard.png',
-		'muzu_oni.png'
+		'muzu_oni.png',
+		'don_anim_normal.png'
 	),
 	
 	audio: new Array(

src/js/game.js

@@ -194,7 +194,7 @@ function Game(controller, selectedSong, songData){
             _fadeOutStarted=true;
         }
     }
-    
+
     this.whenFadeoutMusic = function(){
         if(_fadeOutStarted){
             if(_musicFadeOut%8==0){

src/js/loader.js

@@ -26,6 +26,7 @@ function Loader(){
 			var id = name.substr(0, name.length-4);
 			var audio = new Audio();
 			audio.src = '/assets/audio/'+name;
+			audio.muted = true;
 			audio.load();
 			audio.onloadeddata = function(){
 				assets.sounds[id] = new Audio();
@@ -37,10 +38,10 @@ function Loader(){
 		
 		$.ajax({
             async:true,
-            type:"POST",
+            type:"GET",
-            url:"/src/php/getsongs.php",
+            url:"/api/songs",
             success:function(songs){
-				assets.songs = $.parseJSON(songs);
+				assets.songs = songs;
 				_this.assetLoaded();
 			},
 			error:function(){

src/js/loadsong.js

@@ -17,7 +17,7 @@ function loadSong(selectedSong){
 		$("#assets").append("<img id='music-bg' src='/songs/"+_selectedSong.folder+"/bg.png' />");
 		
 		var audio = new Audio();
-		audio.src = '/songs/'+_selectedSong.folder+'/'+_selectedSong.title+'.mp3';
+		audio.src = '/songs/'+_selectedSong.folder+'/main.mp3';
 		audio.load();
 		
 		$("#music-bg").load(function(){

src/js/songselect.js

@@ -4,6 +4,35 @@ function SongSelect(){
     var _songs;
 	var _selectedSong = {title:'', folder:'', difficulty:''};
 	var _code="";
+	var _preview;
+	var _preview_to;
+
+	this.startPreview = function(id, first_open=true) {
+		var start = Date.now();
+		setTimeout(function(){
+			bgm.pause();
+		}, 400);
+
+		_preview = new Audio('/songs/' + id + '/main.mp3');
+		_preview.onloadeddata = function() {
+			var end = Date.now();
+			var delay = end - start;
+			var no_delay = first_open ? 0 : 300;
+
+			_preview.currentTime = 10.0;
+			_preview.loop = true;
+			_preview.volume = 0.5;
+			
+			_preview_to = setTimeout(function(){
+				_preview.play();
+			}, delay <= 1000 && first_open ? 1000 : no_delay);
+		}
+	};
+
+	this.endPreview = function() {
+		clearTimeout(_preview_to);
+		_preview.pause();
+	};
     
     this.run = function(){
             
@@ -15,6 +44,9 @@ function SongSelect(){
 		$("#song-container").show();
 		
 		$(".difficulty").click(function(e){
+			_this.endPreview();
+			assets.sounds["diffsel"].pause();
+			assets.sounds["diffsel"].currentTime = 0;
 			assets.sounds["don"].play();
 
 			clearInterval(menuLoop);
@@ -22,8 +54,8 @@ function SongSelect(){
 			_selectedSong.difficulty = difficultyElement.classList[1]+'.osu';
 			var parentID = $(this).parent().closest(".song").attr("id");
 			var songID = parseInt(parentID.substr(5, parentID.length-1));
-			_selectedSong.title = $(this).parent().closest('.song').find('.song-title').html();
+			_selectedSong.title = $(this).parent().closest('.song').data('title');
-			_selectedSong.folder = songID+" "+_selectedSong.title;
+			_selectedSong.folder = songID;
             
             bgm.pause();
 			new loadSong(_selectedSong);
@@ -41,6 +73,8 @@ function SongSelect(){
 		$(".song").click(function(e){
 			if (!$(e.target).parents('.difficulties').length) {
 				if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) {
+					_this.endPreview();
+					bgm.play();
 					assets.sounds["cancel"].play();
 					$(".difficulty").hide();
 					$(".opened").removeClass("opened", 300);
@@ -59,8 +93,9 @@ function SongSelect(){
 					return;
 				}
 
-				
+
 				if(!$('.opened').length) {
+					_this.startPreview($(this).data('song-id'));				
 					assets.sounds["don"].play();
 					assets.sounds["song-select"].pause();
 					assets.sounds["song-select"].currentTime = 0;
@@ -73,6 +108,8 @@ function SongSelect(){
 						$('.songsel-title').animate({left:0, opacity:"show"}, 400);
 					});
 				} else {
+					_preview.pause();
+					_this.startPreview($(this).data('song-id'), false);				
 					assets.sounds["ka"].play();
 				}
 			};
@@ -98,15 +135,15 @@ function SongSelect(){
 			assets.sounds["song-select"].play();
 		}, 200);
 		for(var i=0; i<assets.songs.length; i++){
-			
+
-			var songDir = assets.songs[i].songDir;
+			var song = assets.songs[i];
-			var songDifficulties = assets.songs[i].files;
+			var songDir = '/songs/' + song.id;
-			var titleSplit = songDir.split(" ");
+			var songDifficulties = song.stars;
-			var songID = titleSplit[0];
+			var songID = song.id;
-			var songTitle = songDir.substr(songID.length+1, songDir.length-(songID.length+1));
+			var songTitle = song.title;
 			var songTitleSpace = songTitle.replace(/ /g, '&nbsp;');
 			
-			_code += "<div id='song-"+songID+"' class='song'><div class='song-title'>";
+			_code += "<div id='song-"+songID+"' class='song' data-title='"+songTitle+"' data-song-id='"+songID+"'><div class='song-title'>";
 			for (var c=0; c<songTitle.length; c++) {
 				var ch = songTitle.charAt(c) == ' ' ? '&nbsp;' : songTitle.charAt(c);
 				var cl = ch == '&nbsp;' ? 'song-title-char song-title-space' : 'song-title-char';
@@ -114,11 +151,12 @@ function SongSelect(){
 			};
 			_code += "</div><ul class='difficulties'>";
 			
-			for(var j=0; j<songDifficulties.length; j++){
+			for(var diff in songDifficulties){
-				
+				var diffName = diff;
-				var diffName = songDifficulties[j].songFile;
+				var diffLevel = songDifficulties[diff];
-				diffName = diffName.substr(0, diffName.length-4);
+				if (!diffLevel) {
-				var diffLevel = songDifficulties[j].difficulty;
+					continue;
+				}
 				
 				var starsDisplay="";
 				for(var x=1; x<=diffLevel; x++){

src/js/view.js

@@ -69,6 +69,7 @@ function View(controller, bg, title, diff){
 		_this.setBackground();
 
 		$('.game-song').attr('alt', _songTitle).html(_songTitle);
+
         _this.refresh();
     }
 	
@@ -156,7 +157,7 @@ function View(controller, bg, title, diff){
 		this.updateDonFaces();//animate circle face when combo superior to 50
  
     }
-	
+
 	this.updateDonFaces = function(){
 		
 		if(controller.getEllapsedTime().ms>=_nextBeat){

src/php/getsongs.php

@@ -1,63 +0,0 @@
-<?php 
-
-    $songDirs = scandir('../../songs');
-
-    $songs = array();
-
-    foreach($songDirs as $songDir){
-        
-        if($songDir!='.' && $songDir!='..'){
-            
-            $songFiles = scandir('../../songs/'.$songDir);
-        
-            $files = array();
-
-            foreach($songFiles as $songFile){  
-                
-                $extension = pathinfo('../../songs/'.$songDir.'/'.$songFile)['extension'];
-                if($extension=='osu'){
-                    
-                    $fileContent = file_get_contents('../../songs/'.$songDir.'/'.$songFile);
-                    $rows = explode("\n", $fileContent);
-                    array_shift($rows);
-                    $difficulty="";
-                    
-                    foreach($rows as $row => $data){
-                        $row_data = explode(':', $data);
-                        if($row_data[0]=='OverallDifficulty'){
-                            $difficulty=intval($row_data[1]);
-                            break;
-                        }
-                    }
-                    
-                    $file = array(
-                        "songFile" => $songFile,
-                        "difficulty" => $difficulty
-                    );
-                    
-                    array_push($files, $file);
-                }
-                
-            }
-
-            $scale = array('easy.osu', 'normal.osu', 'hard.osu', 'oni.osu');
-            usort($files, function ($a, $b) use ($scale) {
-                $pos_a = array_search($a['songFile'], $scale);
-                $pos_b = array_search($b['songFile'], $scale);
-                return $pos_a - $pos_b;
-            });
-            
-            $song = array(
-                "songDir" => $songDir,
-                "files" => $files
-            );
-                        
-            array_push($songs, $song);
-            
-        }
-        
-    }
-
-    echo json_encode($songs);
-
-?>