updates!

index.html

@@ -28,6 +28,7 @@
 	<script type='application/javascript' src='/src/js/lib/jquery.js'></script>
 	<script type='application/javascript' src='/src/js/lib/jquery-ui.js'></script>
 	<script type='application/javascript' src='/src/js/lib/fontdetect.min.js'></script>
+	<script type='application/javascript' src='/src/js/lib/SeamlessLoop.js'></script>
     
     <script type='application/javascript' src='/src/js/assets.js'></script>
     <script type='application/javascript' src='/src/js/loader.js'></script>

src/js/assets.js

@@ -22,7 +22,11 @@ var assets = {
 		'bg-pattern-1.png',
 		'bg-pattern-2.png',
 		'ranking-S.png',
-		'ranking-X.png'
+		'ranking-X.png',
+		'muzu_easy.png',
+		'muzu_normal.png',
+		'muzu_hard.png',
+		'muzu_oni.png'
 	),
 	
 	audio: new Array(
@@ -43,12 +47,19 @@ var assets = {
 		'cancel.wav',
 		'results.wav',
 		'diffsel.wav',
+		'fullcombo.wav',
+
+		'gamefullcombo.wav',
+		'gameclear.wav',
+		'gamefail.wav',
 
 		'note_don.ogg',
 		'note_ka.ogg',
 
-		'bgm_songsel.mp3',
-		'bgm_results.mp3'
+		'bgm_songsel.ogg',
+		'bgm_songsel_loop.ogg',
+		'bgm_result.ogg',
+		'bgm_result_loop.ogg'
 	),
 	
 	songs: new Array(),

src/js/controller.js

@@ -7,7 +7,7 @@ function Controller(selectedSong, songData){
 	var _songData = _songParser.getData();
 	
     var _game = new Game(this, selectedSong, _songData);
-    var _view = new View(this, _backgroundURL, selectedSong.title);
+    var _view = new View(this, _backgroundURL, selectedSong.title, selectedSong.difficulty);
     var _keyboard = new Keyboard(this);
     var _mainLoop;
     var _pauseMenu = false;
@@ -74,8 +74,27 @@ function Controller(selectedSong, songData){
     
     this.displayResults = function(){
         clearInterval(_mainLoop);
+
+
+        var score = _this.getGlobalScore();
+        
+        if (score.fail == 0) {
+            vp = 'fullcombo';
+            setTimeout(function(){
+                assets.sounds['fullcombo'].play();
+            }, 1350);
+        } else if (score.hp >= 50) {
+            vp = 'clear';
+        } else {
+            vp = 'fail';
+        }
+
+        assets.sounds['game' + vp].play();
+
+        setTimeout(function(){
             var scoresheet = new Scoresheet(_this, _this.getGlobalScore());
             scoresheet.run();
+        }, 7000);
     }
 
     this.displayScore = function(score, notPlayed){

src/js/lib/SeamlessLoop.js

+/**
+ * SeamlessLoop.js 2.0 - Reproduces seamless loops on HTML5/Javascript
+ * https://github.com/Hivenfour/SeamlessLoop
+ * 
+ * Copyright (c) 2012 Main Software,
+ * Written by Darío Tejedor Rico. Contact mail: hivenfour@gmail.com
+ * The source code is freely distributable under the terms of LGPL license.
+ * License details at http://www.gnu.org/licenses/lgpl-3.0.txt
+ * 
+ * USAGE:
+ * - Create the Seamlessloop object
+ * 		var loop = new SeamlessLoop();
+ * 
+ * - Add as many sounds as you will use, providing duration in miliseconds
+ * (sounds must be pre-loaded if you want to update the loop without gaps)
+ * 		loop.addUri(uri, length, "sound1");
+ * 		loop.addUri(uri, length, "sound2");
+ * ...
+ * 
+ * - Establish your callback function that will be called when all sounds are pre-loaded
+ * 		loop.callback(soundsLoaded);
+ * 
+ * - Start reproducing the seamless loop:
+ * 		function soundsLoaded() {
+ * 			var n = 1;
+ * 			loop.start("sound" + n);
+ * 		};
+ * 
+ * - Update the looping sound, you can do this
+ * synchronously (waiting the loop to finish)
+ * or asynchronously (change sound immediately):
+ * 		n++;
+ * 		loop.update("sound" + n, false);
+ * 
+ * - Modify the seamless loop volume:
+ * 		loop.volume(0.5);
+ * 		loop.volume(loop.volume() + 0.1);
+ * 
+ * - Stop the seamless loop:
+ * 		loop.stop();
+ */
+
+function SeamlessLoop() {
+	this.is = {
+			  ff: Boolean(!(window.mozInnerScreenX == null) && /firefox/.test( navigator.userAgent.toLowerCase() )),
+			  ie: Boolean(document.all && !window.opera),
+			  opera: Boolean(window.opera),
+			  chrome: Boolean(window.chrome),
+			  safari: Boolean(!window.chrome && /safari/.test( navigator.userAgent.toLowerCase() ) && window.getComputedStyle && !window.globalStorage && !window.opera)
+			};
+	console.debug("ff: " + this.is.ff);
+	console.debug("ie: " + this.is.ie);
+	console.debug("opera: " + this.is.opera);
+	console.debug("chrome: " + this.is.chrome);
+	console.debug("safari: " + this.is.safari);
+	this._total = 0;
+	this._load = 0;
+	this.cb_loaded;
+	this.cb_loaded_flag = new Boolean();
+	this.timeout;
+	this.playDelay = -30;
+	this.stopDelay = 30;
+	if(this.is.chrome) this.playDelay = -25;
+	if(this.is.chrome) this.stopDelay = 25;
+	if(this.is.ff) this.playDelay = -25;
+	if(this.is.ff) this.stopDelay = 85;
+	if(this.is.opera) this.playDelay = 5;
+	if(this.is.opera) this.stopDelay = 0;
+	console.debug(this.playDelay + ", " + this.stopDelay);
+	this.next = 1;
+	this.audios = new Array();
+	this.actual = new Array();
+	this.dropOld = new Boolean();
+	this.old;
+	this._volume = 1;
+	
+	var t = this;
+	this._eventCanplaythrough = function(audBool) {
+		if(audBool == false) {
+			audBool = true;
+			t._load++;
+			if(t._load == t._total) {
+				t.loaded = true;
+				if(t.cb_loaded_flag == true) {
+					t.cb_loaded();
+					t.cb_loaded_flag = false;
+				}
+			}
+		}
+	};
+	
+	this._eventPlaying = function(audMute) {
+		setTimeout(function() {
+			audMute.pause();
+			try {
+				audMute.currentTime = 0;
+			} catch (e){console.debug(e.message);};
+		}, t.stopDelay);
+		
+		if(t.dropOld == true) {
+			setTimeout(function() {
+				if(t.old.paused == false) {
+					t.old.pause();
+					try {
+						t.old.currentTime = 0;
+					} catch (e){console.debug(e.message);};
+				}
+			}, t.stopDelay);
+			t.dropOld = false;
+		}
+	};
+
+	this._eventEnded = function(aud) {
+		aud.volume = this._volume;
+	};
+
+	this.doLoop = function() {
+		var key = (this.next == 1 ? "_1" : "_2");
+		var antikey = (this.next == 1 ? "_2" : "_1");
+		
+		var t = this;
+		this.timeout = setTimeout(function() {t.doLoop();}, this.actual._length + this.playDelay);
+		
+		if(this.is.opera) this.actual[antikey].pause();
+		
+		this.actual[key].play();
+		this.next *= -1;
+	};
+	
+	this.isLoaded = function() {
+		return Boolean(this._load == this._total);
+	};
+}
+
+SeamlessLoop.prototype.start = function(id) {
+	if(id != "") {
+		this.actual = this.audios[id];
+	}
+	this.doLoop();
+};
+
+SeamlessLoop.prototype.volume = function(vol) {
+	if(typeof vol != "undefined") {
+		this.actual._1.volume = vol;
+        	this.actual._2.volume = vol;
+		this._volume = vol;
+	}
+	
+	return vol;
+};
+
+SeamlessLoop.prototype.stop = function() {
+	clearTimeout(this.timeout);
+	this.actual._1.currentTime = 0;
+	this.actual._1.pause();
+	this.actual._2.currentTime = 0;
+	this.actual._2.pause();
+};
+
+SeamlessLoop.prototype.callback = function(cb_loaded) {
+	this.cb_loaded = cb_loaded;
+	if(this.isLoaded() == true) cb_loaded();
+	else this.cb_loaded_flag = true;
+};
+
+SeamlessLoop.prototype.update = function(id, sync) {
+	//var key = (this.next == 1 ? "_1" : "_2");
+	var antikey = (this.next == 1 ? "_2" : "_1");
+
+	this.old = this.actual[antikey];
+	this.actual = this.audios[id];
+	if(sync == false) {
+		if(this.old.paused == false) {
+			this.dropOld = true;
+			if(this.is.opera) this.old.pause();
+		}
+		clearTimeout(this.timeout);
+		this.doLoop();
+	}
+};
+
+SeamlessLoop.prototype.addUri = function(uri, length, id) {
+	this.audios[id] = new Array();
+	this.audios[id]._length = length;
+	var t = this;
+	this.audios[id]._1_isLoaded = new Boolean();
+	this.audios[id]._2_isLoaded = new Boolean();
+	this.audios[id]._1 = new Audio(uri);
+	this.audios[id]._2 = new Audio(uri);
+	this._total++;
+	this.audios[id]._1.addEventListener("canplaythrough", function() {t._eventCanplaythrough(t.audios[id]._1_isLoaded);});
+	this.audios[id]._2.addEventListener("canplaythrough", function() {t._eventCanplaythrough(t.audios[id]._2_isLoaded);});
+	this.audios[id]._1.addEventListener("playing", function() {t._eventPlaying(t.audios[id]._2);});
+	this.audios[id]._2.addEventListener("playing", function() {t._eventPlaying(t.audios[id]._1);});
+	this.audios[id]._1.addEventListener("ended", function() {t._eventEnded(t.audios[id]._1);});
+	this.audios[id]._2.addEventListener("ended", function() {t._eventEnded(t.audios[id]._2);});
+	this.audios[id]._1.load();
+	this.audios[id]._2.load();
+	this.audios[id]._1.volume = this._volume;
+	this.audios[id]._2.volume = this._volume;
+};

src/js/scoresheet.js

@@ -7,19 +7,22 @@ function Scoresheet(controller, score){
 	
 	this.setResults = function(){
 		
-		if(_score.hp==100)
-        _mark="double-gold";
-    else if(_score.hp>=90 && _score.hp<100)
-        _mark="gold";
-    else if(_score.hp>=70 && _score.hp<90)
-        _mark="silver";
+		if (_score.fail == 0) {
+        	_mark = 'gold';
+    	} else if (_score.hp >= 50) {
+    		_mark = 'silver';
+    	};
 
 		var imgW = (_score.hp*$("#score-hp-bar-colour").width())/100;
 		$("#score-hp-bar-colour img").css("clip", "rect(0, "+imgW+"px, "+$("#score-hp-bar-colour").height()+"px, 0)");
 		
-		if(_mark=="double-gold") $("#score-mark").attr("src", $("#ranking-X").attr("src"));
-		else if(_mark=="gold") $("#score-mark").attr("src", $("#ranking-S").attr("src"));
-		else $("#score-mark").remove();
+		if (_mark == 'gold') {
+			$("#score-mark").attr("src", '/assets/img/ranking-X.png');
+		} else if (_mark == 'silver') {
+			$("#score-mark").attr("src", '/assets/img/ranking-S.png');
+		} else {
+			$("#score-mark").remove();
+		};
 
 		$("#score-points").html(_score.points+"点");
 		$("#nb-great").html(_score.great);
@@ -74,25 +77,18 @@ function Scoresheet(controller, score){
 	}
 	
     this.run = function(){
-        assets.sounds["results"].play();
-
-    	assets.sounds["bgm_results"].volume = 1;
-        assets.sounds["bgm_results"].play();
-
 		_this.positionning();
 		_this.setResults();
 		
         $("#song-select").click(function(){
         	assets.sounds["don"].play();
-        	assets.sounds["bgm_results"].pause();
-        	assets.sounds["bgm_results"].currentTime = 0;
+        	bgmloop2.stop();
             controller.songSelection();
         });
         
         $("#replay").click(function(){
         	assets.sounds["don"].play();
-        	assets.sounds["bgm_results"].pause();
-        	assets.sounds["bgm_results"].currentTime = 0;
+        	bgmloop2.stop();
             controller.restartSong();
         });
 		
@@ -100,6 +96,19 @@ function Scoresheet(controller, score){
 		
     }
 
+	    assets.sounds["results"].play();
+	
+		console.log('init scoresheet bgm');
+		bgmloop2 = new SeamlessLoop();
+		bgmloop2.addUri('/assets/audio/bgm_result.ogg', 870, "bgm_result");
+		bgmloop2.addUri('/assets/audio/bgm_result_loop.ogg', 16860, "bgm_result_loop");
+		bgmloop2.callback(function(){
+			bgmloop2.start('bgm_result');
+			bgmloop2.update('bgm_result_loop');
+		});
+
+
+
 	$("#screen").load("/src/views/scoresheet.html", _this.run);
     
 }
\ No newline at end of file

src/js/songselect.js

@@ -25,8 +25,7 @@ function SongSelect(){
 			_selectedSong.title = $(this).parent().closest('.song').find('.song-title').html();
 			_selectedSong.folder = songID+" "+_selectedSong.title;
             
-            assets.sounds["diffsel"].pause();
-            assets.sounds["diffsel"].currentTime = 0;
+            bgmloop.stop();
 			new loadSong(_selectedSong);
 
 		});
@@ -91,7 +90,14 @@ function SongSelect(){
 	
 	this.createCode = function(){
 
-		assets.sounds["bgm_songsel"].play();		
+		bgmloop = new SeamlessLoop();
+		bgmloop.addUri('/assets/audio/bgm_songsel.ogg', 1450, "bgm_songsel");
+		bgmloop.addUri('/assets/audio/bgm_songsel_loop.ogg', 2085, "bgm_songsel_loop");
+		bgmloop.callback(function(){
+			bgmloop.start('bgm_songsel');
+			bgmloop.update('bgm_songsel_loop')
+		});
+
 		setTimeout(function(){
 			assets.sounds["song-select"].play();
 		}, 200);

src/js/view.js

-function View(controller, bg, title){
+function View(controller, bg, title, diff){
     
     var _this = this;
     var _canvas = document.getElementById('canvas');
@@ -33,6 +33,10 @@ function View(controller, bg, title){
 	var _HPBarColH;7
 	var _HPBarColWImage;
 	var _HPBarColWCanvas;
+	var _diffW;
+	var _diffH;
+	var _diffX;
+	var _diffY;
 	
 	var _circleAnimatorT;
 	var _animationStartPos;
@@ -58,6 +62,7 @@ function View(controller, bg, title){
 	var _nextBeat=0;
 
 	var _songTitle = title;
+	var _songDifficulty = diff.split('.').slice(0, -1).join('.');
     
     this.run = function(){
 		_ctx.font = _mainFont;
@@ -108,6 +113,10 @@ function View(controller, bg, title){
 		_HPbarColY = _HPBarY+0.14*_HPBarH;
 		_HPBarColMaxW = _HPBarW-(0.075*_HPBarW);
 		_HPBarColH = _HPBarH-(0.2*_HPBarH);
+		_diffH = _winH * 0.16;
+		_diffW = _winW * 0.11;
+		_diffX = (_taikoX * 1.05)+15;
+		_diffY = _taikoY * 0.10;
 
 		var circles = controller.getCircles();
 		var currentCircle = controller.getCurrentCircle();
@@ -142,6 +151,7 @@ function View(controller, bg, title){
         this.drawCombo();
         this.drawGlobalScore();
         this.drawTime();
+        this.drawDifficulty();
 		
 		this.updateDonFaces();//animate circle face when combo superior to 50
  
@@ -458,6 +468,11 @@ function View(controller, bg, title){
         $("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
     }
 
+    this.drawDifficulty = function(){
+    	var muzu = document.getElementById('muzu_' + _songDifficulty);
+    	_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
+    };
+    
     this.drawTime = function(){
         
         var time = controller.getEllapsedTime();