Merge pull request #6 from LoveEevee/gameplay-improvements

Lots of gameplay improvements

public/src/css/game.css

@@ -2,9 +2,12 @@
 	width:100%;
 	height:100%;
 	overflow: hidden;
+	background-size:cover;
 }
 
 #canvas{
+	position:relative;
+	z-index:1;
 	width:100%;
 	height:100%;
 }

public/src/css/loader.css

@@ -16,13 +16,16 @@
 }
 
 #loader .percentage{
-	margin:auto;
+	position:absolute;
-	width:100%;
+	top:0;
-	text-align: center;
+	right:0;
+	bottom:0;
+	left:0;
+	display:flex;
+	justify-content:center;
+	align-items:center;
+	text-align:center;
+	font-family: sans-serif;
 	font-size: 5vmin;
 	color: white;
-	position:fixed;
-	top:53%;
-	margin-left:-30px;
-	
 }

public/src/js/assets.js

@@ -98,6 +98,7 @@ var assets = {
 		'TnT'
 	),
 	
-	sounds: {}
+	sounds: {},
+	image: {}
 	
 };

public/src/js/circle.js

@@ -1,4 +1,4 @@
-function Circle(id, ms, type){
+function Circle(id, ms, type, text, speed){
     
     var _id=id;
     var _ms = ms;
@@ -42,15 +42,6 @@ function Circle(id, ms, type){
 	this.isAnimated = function(){
 		return _animating;
 	}
-    
-    this.setInitPos = function(initPos){
-        _pos.x = initPos.x;   
-		_pos.y = initPos.y
-    }
-    
-    this.move = function(pxPerFrame){
-        _pos.x -= pxPerFrame;
-    }
 	
 	this.getAnimT = function(){
 		return _animT;
@@ -59,15 +50,6 @@ function Circle(id, ms, type){
 	this.incAnimT = function(){
 		_animT+=0.05;	
 	}
-	
-	this.moveTo = function(x, y){
-		_pos.x=x;
-		_pos.y=y;
-	}
-    
-    this.getPos = function(){
-        return _pos;
-    }
     
     this.updateStatus = function(status){
         _status=status;
@@ -101,4 +83,12 @@ function Circle(id, ms, type){
     this.getID = function(){
         return _id;
     }
+    
+    this.getText = function(){
+        return text;
+    }
+    
+    this.getSpeed = function(){
+        return speed;
+    }
 }

public/src/js/controller.js

@@ -208,6 +208,10 @@ function Controller(selectedSong, songData, autoPlayEnabled){
         _keyboard.waitForKeyup(key, type);
     }
     
+    this.getKeyTime = function(){
+        return _keyboard.getKeyTime();
+    }
+    
     this.updateCombo = function(score){
         _game.updateCombo(score);
     }

public/src/js/game.js

@@ -149,9 +149,12 @@ function Game(controller, selectedSong, songData){
     
     this.checkScore = function(circle){
         
+        var keys = controller.getKeys()
+        var kbd = controller.getBindings()
+        
         if(
-            ((controller.getKeys()[86] || controller.getKeys()[66]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || 
+            ((keys[kbd["don_l"]] || keys[kbd["don_r"]]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || 
-            ((controller.getKeys()[67] || controller.getKeys()[78]) && (circle.getType()=="ka" || circle.getType()=="daiKa"))
+            ((keys[kbd["ka_l"]] || keys[kbd["ka_r"]]) && (circle.getType()=="ka" || circle.getType()=="daiKa"))
         ){
              
             switch(circle.getStatus()){

public/src/js/keyboard.js

@@ -13,6 +13,10 @@ function Keyboard(controller){
     var _waitKeyupScore = {};
     var _waitKeyupSound = {};
     var _waitKeyupMenu = {};
+    var _keyTime = {
+        "don": -Infinity,
+        "ka": -Infinity
+    }
     
     this.getBindings = function(){
         return _kbd
@@ -54,10 +58,10 @@ function Keyboard(controller){
         if(!controller.autoPlayEnabled){
             _gamepad.play()
         }
-        _this.checkKeySound(_kbd["don_l"], "note_don")
+        _this.checkKeySound(_kbd["don_l"], "don")
-        _this.checkKeySound(_kbd["don_r"], "note_don")
+        _this.checkKeySound(_kbd["don_r"], "don")
-        _this.checkKeySound(_kbd["ka_l"], "note_ka")
+        _this.checkKeySound(_kbd["ka_l"], "ka")
-        _this.checkKeySound(_kbd["ka_r"], "note_ka")
+        _this.checkKeySound(_kbd["ka_r"], "ka")
     }
     
     this.checkMenuKeys = function(){
@@ -80,7 +84,8 @@ function Keyboard(controller){
     
     this.checkKeySound = function(keyCode, sound){
         _this.checkKey(keyCode, "sound", function(){
-            controller.playSound(sound);
+            controller.playSound("note_"+sound);
+            _keyTime[sound] = controller.getEllapsedTime().ms
         })
     }
     
@@ -112,5 +117,9 @@ function Keyboard(controller){
         else if(type == "sound") _waitKeyupSound[key] = true;
         else if(type == "menu") _waitKeyupMenu[key] = true;
     }
+    
+    this.getKeyTime = function(){
+        return _keyTime;
+    }
 
 }

public/src/js/loader.js

@@ -4,22 +4,32 @@ function Loader(){
 	var _loadedAssets=0;
 	var _percentage=0;
 	var _nbAssets=assets.audio.length+assets.img.length+assets.fonts.length+1; //+1 for song structures
-
+	var _assetsDiv=document.getElementById("assets")
+	var _loaderPercentage
+	var _errorCount=0
+	
 	this.run = function(){
 		
+		_loaderPercentage = document.querySelector("#loader .percentage")
+		
 		assets.fonts.forEach(function(name){
-			var font = $("<h1 style='font-family:"+name+"'>I am a font</h1>"); 
+			var font = document.createElement("h1")
-			font.appendTo("#assets");
+			font.style.fontFamily = name
-			FontDetect.onFontLoaded (name, _this.assetLoaded, _this.fontFailed, {msTimeout: 90000});
+			font.appendChild(document.createTextNode("I am a font"))
+			_assetsDiv.appendChild(font)
+			FontDetect.onFontLoaded (name, _this.assetLoaded, _this.errorMsg, {msTimeout: 90000});
 		});
 		
 		assets.img.forEach(function(name){
 			var id = name.substr(0, name.length-4);
-			var image = $("<img id='"+id+"' src='/assets/img/"+name+"' />");
+			var image = document.createElement("img")
-			image.appendTo("#assets");
+			image.addEventListener("load", event=>{
-			image.load(function(){
 				_this.assetLoaded();
-			});
+			})
+			image.id = name
+			image.src = "/assets/img/" + name
+			_assetsDiv.appendChild(image)
+			assets.image[id] = image
 		});
 		
 		assets.audio.forEach(function(name){
@@ -42,29 +52,30 @@ function Loader(){
 		});
 		
 		$.ajax({
-            async:true,
+			url: "/api/songs",
-            type:"GET",
+			mimeType: "application/json",
-            url:"/api/songs",
+			success: function(songs){
-            success:function(songs){
 				assets.songs = songs;
 				_this.assetLoaded();
 			},
-			error:function(){
+			error: _this.errorMsg
-				alert("An error occured, please refresh");
-			}
 		});
 		
 	}
 	
-	this.fontFailed = function(){
+	this.errorMsg = function(){
-		alert("An error occured, please refresh");
+		if(_errorCount == 0){
+			_loaderPercentage.appendChild(document.createElement("br"))
+			_loaderPercentage.appendChild(document.createTextNode("An error occured, please refresh"))
+		}
+		_errorCount++
 	}
 	
 	this.assetLoaded = function(){
 		_loadedAssets++;
 		_percentage=parseInt((_loadedAssets*100)/_nbAssets);
 		$("#loader .progress").css("width", _percentage+"%");
-		$("#loader .percentage").html(_percentage+"%");
+		_loaderPercentage.firstChild.data=_percentage+"%"
 		_this.checkIfEverythingLoaded();
 	}
 	

public/src/js/parsesong.js

@@ -50,6 +50,7 @@ function ParseSong(fileContent){
              
                 case 'SliderMultiplier':
                     _difficulty.sliderMultiplier = key;
+                    _difficulty.originalMultiplier = key;
                     break;
                 case 'SliderTickRate':
                     _difficulty.sliderTickRate = key;
@@ -71,30 +72,40 @@ function ParseSong(fileContent){
     
             var values = _data[i].split(",");
             
-            var sliderMultiplier;
+            var start=parseInt(values[0])
+            var msOrPercent=parseFloat(values[1])
             if(i==indexes.start){
-                _beatInfo.beatInterval=parseFloat(values[1]);
+                start=0
+                _beatInfo.beatInterval=msOrPercent;
                 _beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60);
-                sliderMultiplier=1;
             }
-            else{
+            if(msOrPercent<0){
-                sliderMultiplier=Math.abs(parseFloat(values[1]))/100;
+                var sliderMultiplier=_difficulty.originalMultiplier*1/Math.abs(msOrPercent/100);
+            }else{
+                var sliderMultiplier=500/msOrPercent;
+                _difficulty.originalMultiplier=sliderMultiplier
             }
             
             _timingPoints.push({
-                start:parseInt(values[0]),
+                start:start,
                 sliderMultiplier:sliderMultiplier,
                 measure:parseInt(values[2]),
             });
             
         }
-        
+    }
+    
+    this.parseMeasures = function(){
         var measureNumber=0;
         for(var i=0; i<_timingPoints.length; i++){
             var limit = (_timingPoints[i+1]) ? _timingPoints[i+1].start : _circles[_circles.length-1].getMS();
             for(var j=_timingPoints[i].start; j<=limit; j+=_beatInfo.beatInterval){
                 
-                _measures.push({ms:j, x:$(window).width(), nb:measureNumber});
+                _measures.push({
+                    ms:j,
+                    nb:measureNumber,
+                    speed:_timingPoints[i].sliderMultiplier
+                });
                 measureNumber++;
                 if(measureNumber==_timingPoints[i].measure+1){
                     measureNumber=0;
@@ -191,6 +202,16 @@ function ParseSong(fileContent){
             var type;
             var txt;
             var emptyValue=false;
+            var start=parseInt(values[2])
+            var speed=_difficulty.originalMultiplier
+            
+            for(var j=0; j<_timingPoints.length; j++){
+                if(_timingPoints[j].start<=start){
+                    speed=_timingPoints[j].sliderMultiplier
+                }else{
+                    break
+                }
+            }
                 
             switch(parseInt(values[4])){
                 case 0:
@@ -203,11 +224,11 @@ function ParseSong(fileContent){
                     break;
                 case 4:
                     type="daiDon";
-                    txt="ドン";
+                    txt="ドン(大)";
                     break;
                 case 6:
                     type="daiKa";
-                    txt="カッ";
+                    txt="カッ(大)";
                     break;
                 case 8:
                     type="ka";
@@ -219,11 +240,11 @@ function ParseSong(fileContent){
                     break;
                 case 12:
                     type="daiKa";
-                    txt="カッ";
+                    txt="カッ(大)";
                     break;
                 case 14:
                     type="daiKa";
-                    txt="カッ";
+                    txt="カッ(大)";
                     break;
                 default:
                     console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]);
@@ -231,16 +252,17 @@ function ParseSong(fileContent){
                     break;
 				}
 				if(!emptyValue)
-				    _circles.push(new Circle(_circleID, parseInt(values[2]),type,txt));
+				    _circles.push(new Circle(_circleID,start,type,txt,speed));
         }
     }
 	
 	_this.parseGeneralInfo(); 
 	_this.parseMetadata();
-	_this.parseCircles();
 	_this.parseEditor();
-	_this.parseTiming();
 	_this.parseDifficulty();
+	_this.parseTiming();
+	_this.parseCircles();
+	_this.parseMeasures();
 
 	this.getData = function(){
 		return {

public/src/js/songselect.js

@@ -6,6 +6,12 @@ function SongSelect(){
 	var _code="";
 	var _preview;
 	var _preview_to;
+	var _diffNames={
+		easy:"かんたん",
+		normal:"ふつう",
+		hard:"むずかしい",
+		oni:"おに"
+	}
 
 	this.startPreview = function(id, prvtime, first_open=true) {
 		var start = Date.now();
@@ -182,7 +188,7 @@ function SongSelect(){
 			};
 			_code += "</div><ul class='difficulties'>";
 			
-			for(var diff in songDifficulties){
+			for(var diff in _diffNames){
 				var diffName = diff;
 				var diffLevel = songDifficulties[diff];
 				if (!diffLevel) {
@@ -194,21 +200,7 @@ function SongSelect(){
 					starsDisplay+="&#9733;<br>";
 				}
 				
-				var diffTxt;
+				var diffTxt=_diffNames[diffName]
-				switch(diffName){
-					case 'easy':
-						diffTxt="かんたん";
-						break;
-					case 'normal':
-						diffTxt="ふつう";
-						break;
-					case 'hard':
-						diffTxt="むずかしい";
-						break;
-					case 'oni':
-						diffTxt="おに";
-						break;
-				}
 
 				_code += "<li class='difficulty "+diffName+"'>";
 					_code+= "<span class='diffname'>"+diffTxt+"</span>";