Add balloon and drumroll notes

public/src/css/scoresheet.css

-#scoresheet{
+.scoresheet{
 	width:100%;
 	height:100%;
-	background: #e84019;
 	color:black;
 	font-family: TnT;
-	background: url('/assets/img/bg-pattern-2.png');
+	background: url("/assets/img/bg-pattern-2.png");
+	position: absolute;
 }
 
-#scoresheet h2{
-
+.scoresheet h2{
 	position:absolute;
 	top:1%;
 	left:1%;
 	font-size: 7vmin;
 	margin:0;
 	color: white;
-	
 }
 
-#result-window{
+.result-window{
 	width:70%;
 	margin:auto;
 }
 
-#scoresheet button{
-	
-	height: 15%;
-	width:20%;
+.scoresheet button{
+	height: 50%;
+	min-width:20%;
 	position: absolute;
 	display: inline-block;
 	cursor: pointer;
@@ -38,45 +35,50 @@
 	border-radius: 10px;
 	outline: none;
 	top:10%;
+	white-space: nowrap;
 }
 
-#replay{
+.scoresheet .replay{
 	left:1%;
 }
 
-#song-select{
+.scoresheet .song-select{
 	left:23%;
 }
 
-#scoresheet button:hover{
+.scoresheet button:hover{
 	border-color:#fa5d3a;
 	color:white;
 	background:#0c6577;
 }
 
-#result-bar{
-	width: 100%;
-	height:40%;
-	position:absolute;
-	top:10%;
-	left:0;
-	border-bottom:10px inset #b6361d;
-	border-top:5px solid #b23111;
+.scoresheet .result-bar{
+	max-width: 120vh;
+	height: 71vh;
 	min-height: 200px;
-	
+	display:flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-end;
+	position: absolute;
+	left: 0;
+	right: 0;
+	margin: auto;
 }
 
-#score-cont{
-	position:absolute;
+.scoresheet .score-cont{
+	position:relative;
 	right:1%;
 	width:60%;
 	height:80%;
 	background:rgba(255,255,255,0.7);
 	border-radius:15px;
+	margin: 10px;
+	max-height: 33vh;
 }
 
-#score-hp-bar-bg{
-	position: absolute;
+.scoresheet .score-hp-bar-bg{
+	position: relative;
 	margin-top:2%;
 	margin-left:5%;
 	background: url("/assets/img/hp-bar-bg.png");
@@ -85,12 +87,12 @@
 	
 }
 
-#score-hp-bar-colour{
+.scoresheet .score-hp-bar-colour{
 	position:absolute;
 	padding: 0;
 }
 
-#score-hp-bar-colour img{
+.scoresheet .score-hp-bar-colour img{
 	position:absolute;
 	height: 100%;
 	width: 100%;
@@ -98,8 +100,8 @@
 	padding:0;
 }
 
-#score-points{
-	width:30%;
+.scoresheet .score-points{
+	min-width:30%;
 	height:18%;
 	background:black;
 	border:5px solid #ae7a26;
@@ -110,61 +112,95 @@
 	color: white;
 	font-size: 5vmin;
 	text-align: right;
-	padding-right:2%;
+	padding: .3% 1%;
+	white-space: nowrap;
 }
 
-#score-details{
+.scoresheet .score-details{
 	position: absolute;
 	right:5%;
-	width:50%;
+	width:70%;
 	height:50%;
 	color:white;
-	-webkit-text-stroke-width: 2px;
-   -webkit-text-stroke-color: black;
-	
 }
 
-#score-details td{
+.scoresheet .score-details th,
+.scoresheet .score-details td{
 	font-size: 3vmin;
-	text-align: right;
+	font-weight: normal;
+	white-space: nowrap;
 }
 
-.floatLeft{
-	text-align: left !important;
+.scoresheet .score-details td{
+	text-align: right;
 }
 
-.value{
-	width:25%;
+.scoresheet .value{
+	width: 25%;
 }
 
-#bottom-part{
+.scoresheet .bottom-part{
+	position: fixed;
 	width:100%;
-	position: absolute;
+	height:19vh;
+	bottom:0;
 	-webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46;
 	-moz-box-shadow: inset 0px 10px 20px -5px #ee6d46;
 	box-shadow: inset 0px 10px 20px -5px #ee6d46;
+	border-top:10px outset #b6361d;
+	box-sizing: border-box;
 }
 
-#score-mark{
+.scoresheet .score-mark{
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 105%;
+	height: 40%;
+	margin: auto;
 }
 
-.gradient-overlay{
+.scoresheet .gradient-overlay{
 	position:absolute;
 	width:100%;
 	height:100%;
-	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(62%,rgba(255,165,100,0.64)), color-stop(63%,rgba(255,165,100,0.65))); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* IE10+ */
-	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffa564',GradientType=0 ); /* IE6-9 */
+	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%);
 
 }
 
-#top-part{
+.scoresheet .top-part{
 	width:100%;
-	height:10%;
+	height:10vh;
 	background:#e84019;
+	border-bottom:5px solid #b23111;
+	box-sizing: border-box;
+}
+
+.header-great,
+.header-fail{
+	color: transparent;
+}
+.header-great::after,
+.header-fail::after{
+	content: attr(alt);
+	color: transparent;
+	-webkit-background-clip: text;
+	background-clip: text;
+	position: absolute;
+	width: 100%;
+	left: 0;
+}
+.header-great::after{
+	background-image: linear-gradient(0deg, #f00 10%, #fe0 70%);
+}
+.header-fail::after{
+	background-image: linear-gradient(0deg, #00b3df 30%, #6a62f9 90%);
+	
+}
+.scoresheet .stroke-sub{
+	position:relative;
+	z-index:1;
+}
+.scoresheet .stroke-sub::before{
+	left:auto;
 }
\ No newline at end of file

public/src/js/assets.js

@@ -28,7 +28,8 @@ var assets = {
 		'muzu_hard.png',
 		'muzu_oni.png',
 		'don_anim_normal.png',
-		'don_anim_10combo.png'
+		'don_anim_10combo.png',
+		'balloon.png'
 	],
 	
 	audioSfx: [
@@ -83,6 +84,7 @@ var assets = {
 		
 		'note_don.ogg',
 		'note_ka.ogg',
+		'balloon.ogg'
 	],
 	
 	audioMusic:[

public/src/js/circle.js

-function Circle(id, ms, type, text, speed){
-    
-    var _id=id;
-    var _ms = ms;
-    var _type = type;
-    var _played = false;
-    var _pos={x:0, y:0};
-	var _animating = false;
-	var _animT = 0;
-	var _score=0;
-	var _lastFrame = ms+100;
-	var _animationEnded = false;
-    
-    var played=false; //if cirlce has been played
-    var _status=-1; //check if circle is playable
-    
-    // -1 : Not playable
-    // 0 : Playable, giving 0 points if played at current time (fail)
-    // 50 : Playable, giving 50 points if played at current time (pass)
-    // 100 : Playable, giving 100 points if played at current time (good)
-
-    this.getMS = function(){
-        return _ms;
-    }
-    
-    this.getType = function(){
-        return _type;
-    }
-	
-	this.getLastFrame = function(){
-		return _lastFrame;
-	}
-	
-	this.incFrame = function(){
-		_lastFrame+=20;
-	}
-	
-	this.animate = function(){
-		_animating=true;
-	}
-	
-	this.isAnimated = function(){
-		return _animating;
-	}
-	
-	this.getAnimT = function(){
-		return _animT;
-	}
-	
-	this.incAnimT = function(){
-		_animT+=0.05;	
-	}
-    
-    this.updateStatus = function(status){
-        _status=status;
-    }
-    
-    this.getStatus = function(){
-        return _status;
-    }
-    
-    this.getPlayed = function(){
-        return _played;
-    }
-	
-	this.isAnimationFinished = function(){
-		return _animationEnded;
-	}
-	
-	this.endAnimation = function(){
-		_animationEnded = true;
-	}
-    
-    this.played = function(score){
-		_score=score;
-        _played=true;
-    }
-	
-	this.getScore = function(){
-		return _score;
-	}
-    
-    this.getID = function(){
-        return _id;
-    }
-    
-    this.getText = function(){
-        return text;
-    }
-    
-    this.getSpeed = function(){
-        return speed;
+class Circle{
+	constructor(id, ms, type, text, speed, endTime, requiredHits){
+		this.id = id
+		this.ms = ms
+		this.type = type
+		this.text = text
+		this.speed = speed
+		this.endTime = endTime ? endTime : ms + 150
+		this.isPlayed = false
+		this.animating = false
+		this.animT = 0
+		this.score = 0
+		this.lastFrame = ms + 100
+		this.animationEnded = false
+		this.status = -1
+		this.timesHit = 0
+		this.requiredHits = requiredHits ? requiredHits : 0
+	}
+	getMS(){
+		return this.ms
+	}
+	getEndTime(){
+		return this.endTime
+	}
+	getType(){
+		return this.type
+	}
+	getLastFrame(){
+		return this.lastFrame
+	}
+	incFrame(){
+		this.lastFrame += 20
+	}
+	animate(){
+		this.animating = true
+	}
+	isAnimated(){
+		return this.animating
+	}
+	getAnimT(){
+		return this.animT
+	}
+	incAnimT(){
+		this.animT += 0.05
+	}
+	updateStatus(status){
+		this.status = status
+	}
+	getStatus(){
+		return this.status
+	}
+	getPlayed(){
+		return this.isPlayed
+	}
+	isAnimationFinished(){
+		return this.animationEnded
+	}
+	endAnimation(){
+		this.animationEnded = true
+	}
+	played(score){
+		this.score = score
+		this.isPlayed = true
+	}
+	hit(){
+		this.timesHit++
+	}
+	getScore(){
+		return this.score
+	}
+	getID(){
+		return this.id
+	}
+	getText(){
+		return this.text
+	}
+	getSpeed(){
+		return this.speed
 	}
 }
\ No newline at end of file

public/src/js/controller.js

@@ -57,6 +57,13 @@ class Controller{
 		this.mainLoopRunning = true
 		this.mainLoop()
 	}
+	stopMainLoop(){
+		this.mainLoopRunning = false
+		this.mainAsset.stop()
+		if(this.syncWith){
+			this.syncWith.stopMainLoop()
+		}
+	}
 	mainLoop(){
 		if(this.mainLoopRunning){
 			if(this.multiplayer != 2){
@@ -88,9 +95,6 @@ class Controller{
 			this.keyboard.checkMenuKeys()
 		}
 	}
-	getDistanceForCircle(){
-		return this.view.getDistanceForCircle()
-	}
 	togglePauseMenu(){
 		this.togglePause()
 		this.view.togglePauseMenu()
@@ -98,43 +102,41 @@ class Controller{
 	displayResults(){
 		var score = this.getGlobalScore()
 		var vp
-		if (score.fail == 0) {
+		if(score.fail == 0){
 			vp = "fullcombo"
 			this.playSoundMeka("fullcombo", 1.350)
-		} else if (score.hp >= 50) {
+		}else if(score.hp >= 50){
 			vp = "clear"
-		} else {
+		}else{
 			vp = "fail"
 		}
 		assets.sounds["game" + vp].play()
 		setTimeout(() => {
-			this.mainLoopRunning = false
+			if(this.mainLoopRunning){
+				this.stopMainLoop()
 				if(this.multiplayer != 2){
-				new Scoresheet(this, this.getGlobalScore())
+					new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
+				}
 			}
 		}, 7000)
 	}
 	displayScore(score, notPlayed){
 		this.view.displayScore(score, notPlayed)
 	}
-	fadeOutOver(){
-		this.game.fadeOutOver()
-		this.displayResults()
-	}
-	getCurrentTimingPoint(){
-		return this.game.getCurrentTimingPoint()
-	}
 	songSelection(){
 		$("#music-bg").remove()
-		this.mainLoopRunning = false
+		this.stopMainLoop()
 		new SongSelect()
 	}
 	restartSong(){
-		this.mainAsset.stop()
-		this.mainLoopRunning = false
+		this.stopMainLoop()
 		$("#screen").load("/src/views/game.html", () => {
+			if(this.multiplayer){
+				new loadSong(this.selectedSong, false, true)
+			}else{
 				var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
 				taikoGame.run()
+			}
 		})
 	}
 	playSoundMeka(soundID, time){
@@ -144,27 +146,12 @@ class Controller{
 		}
 		assets.sounds[soundID + meka].play(time)
 	}
-	initTiming(){
-		this.game.initTiming()
-	}
-	setHitcircleSpeed(speed){
-		this.view.setHitcircleSpeed(speed)
-	}
-	getHitcircleSpeed(){
-		return this.game.getHitcircleSpeed()
-	}
-	toggleMainMusic(){
-		this.game.toggleMainMusic()
-	}
 	togglePause(){
 		if(this.syncWith){
 			this.syncWith.game.togglePause()
 		}
 		this.game.togglePause()
 	}
-	isPaused(){
-		return this.game.isPaused()
-	}
 	getKeys(){
 		return this.keyboard.getKeys()
 	}
@@ -186,9 +173,6 @@ class Controller{
 	getCurrentCircle(){
 		return this.game.getCurrentCircle()
 	}
-	updateCurrentCircle(){
-		this.game.updateCurrentCircle()
-	}
 	isWaitingForKeyup(key, type){
 		return this.keyboard.isWaitingForKeyup(key, type)
 	}
@@ -198,18 +182,12 @@ class Controller{
 	getKeyTime(){
 		return this.keyboard.getKeyTime()
 	}
-	updateCombo(score){
-		this.game.updateCombo(score)
-	}
 	getCombo(){
 		return this.game.getCombo()
 	}
 	getGlobalScore(){
 		return this.game.getGlobalScore()
 	}
-	updateGlobalScore(score){
-		this.game.updateGlobalScore(score)
-	}
 	autoPlay(circle){
 		if(this.multiplayer){
 			p2.play(circle, this.mekadon)

public/src/js/game.js

-function Game(controller, selectedSong, songData){
-    
-    var _this = this;
-    var _selectedSong = selectedSong;
-    this.elapsedTime = {} //current time in ms from the beginning of the song
-    var _offsetDate; //date when the chrono is started (before the game begins)
-    var _startDate; //real start date (when the chrono will be 0)
-    var _currentDate; // refreshed date
-    var _songData=songData;
-    var _currentCircle=0;
-    var _currentScore=0;
-    var _combo=0;
-    var _globalScore={points:0, great:0, good:0, fail:0, maxCombo:0, hp:0, song:selectedSong.title};
-    var _HPGain= 100/_songData.circles.length;
-    var _paused=false;
-    var _started=false;
-    var _mainMusicPlaying=false;
-    var _latestDate;
-    var _elapsedTimeSincePause=0;
-    var _musicFadeOut=0;
-    var _fadeOutStarted=false;
-    var _currentTimingPoint=0;
-    var _offsetTime=0;
-    var _hitcircleSpeed=_songData.difficulty.sliderMultiplier*8;
-    var _timeForDistanceCircle;
-    var _mainAsset
+class Game{
+	constructor(controller, selectedSong, songData){
+		this.controller = controller
+		this.selectedSong = selectedSong
+		this.songData = songData
+		this.elapsedTime = {}
+		this.currentCircle = 0
+		this.combo = 0
+		this.globalScore = {
+			points: 0,
+			great: 0,
+			good: 0,
+			fail: 0,
+			maxCombo: 0,
+			hp: 0,
+			song: selectedSong.title
+		}
+		this.HPGain = 100 / this.songData.circles.filter(circle => {
+			var type = circle.getType()
+			return type == "don" || type == "ka" || type == "daiDon" || type == "daiKa"
+		}).length
+		this.paused = false
+		this.started = false
+		this.mainMusicPlaying = false
+		this.elapsedTimeSincePause = 0
+		this.musicFadeOut = 0
+		this.fadeOutStarted = false
+		this.currentTimingPoint = 0
+		this.offsetTime = 0
 		assets.songs.forEach(song => {
 			if(song.id == selectedSong.folder){
-            _mainAsset = song.sound
+				this.mainAsset = song.sound
 			}
 		})
-    
-    this.run = function(){
-        _timeForDistanceCircle=2500
-        _this.initTiming();
 	}
-    
-    this.initTiming = function(){
-        _offsetDate = new Date();
-        _this.setElapsedTime(-_timeForDistanceCircle |0)
-        _offsetTime = _timeForDistanceCircle |0
-        _startDate = new Date();
+	run(){
+		this.timeForDistanceCircle = 2500
+		this.initTiming()
+	}
+	initTiming(){
+		// Date when the chrono is started (before the game begins)
+		this.offsetDate = new Date()
+		this.offsetTime = this.timeForDistanceCircle |0
+		this.setElapsedTime(-this.offsetTime)
 		// The real start for the game will start when chrono will reach 0
-        _startDate.setMilliseconds(_startDate.getMilliseconds()+_offsetTime);
+		this.startDate = new Date()
+		this.startDate.setMilliseconds(this.startDate.getMilliseconds() + this.offsetTime)
 	}
-    
-    this.update = function(){
-        
+	update(){
 		// Main operations
-        _this.updateTime();
-        _this.checkTiming();
-        _this.updateCirclesStatus();
-        _this.checkPlays();
-        
+		this.updateTime()
+		this.checkTiming()
+		this.updateCirclesStatus()
+		this.checkPlays()
 		// Event operations
-        _this.whenFadeoutMusic();
-        _this.whenLastCirclePlayed();
-        
+		this.whenFadeoutMusic()
+		this.whenLastCirclePlayed()
 	}
-    
-    this.getCircles = function(){
-        return _songData.circles;
+	getCircles(){
+		return this.songData.circles
 	}
-    
-    this.updateCirclesStatus = function(){
-        
-        var circles = _songData.circles;
-        
-        circles.forEach(function(circle){
-            
+	updateCirclesStatus(){
+		var circles = this.songData.circles
+		circles.forEach(circle => {
 			if(!circle.getPlayed()){
-                
-                var currentTime = _this.getElapsedTime().ms;
-                var startingTime = circle.getMS()-_timeForDistanceCircle;
+				var currentTime = this.getElapsedTime().ms
+				var startingTime = circle.getMS() - this.timeForDistanceCircle
 				// At circle.getMS(), the circle fits the slot
-                var finishTime = circle.getMS();
-
-                if( currentTime >= startingTime && currentTime <= finishTime+200){
-
-                    if(currentTime>= finishTime-50 && currentTime < finishTime-30){
-                        circle.updateStatus(0);
-                    }
-                    else if(currentTime>= finishTime-30 && currentTime < finishTime){
-                        circle.updateStatus(230);
-                    }
-                    else if(currentTime >= finishTime && currentTime < finishTime+200){
-                        circle.updateStatus(450);
-                    }
-
+				var hitTime = circle.getMS()
+				var endTime = circle.getEndTime()
+				var type = circle.getType()
+				var normalNotes = type == "don" || type == "daiDon" || type == "ka" || type == "daiKa"
+				
+				if(currentTime >= startingTime && currentTime <= endTime){
+					
+					if(currentTime>= hitTime - 50 && currentTime < hitTime - 30){
+						circle.updateStatus(0)
+					}else if(currentTime>= hitTime - 30 && currentTime < hitTime){
+						circle.updateStatus(230)
+					}else if(currentTime >= hitTime && currentTime < endTime){
+						circle.updateStatus(450)
+					}
+					
+				}else if(currentTime>endTime){
+					if(type == "balloon" || type == "drumroll" || type == "daiDrumroll"){
+						circle.updateStatus(-1)
+						circle.played(0)
+						this.updateCurrentCircle()
+						if(this.controller.multiplayer == 1){
+							p2.send("drumroll", {
+								pace: (this.getElapsedTime().ms - circle.getMS()) / circle.timesHit
+							})
 						}
-                else if(currentTime>finishTime+200 && currentTime<=finishTime+300){
-                    if(controller.multiplayer != 2){
-                        circle.updateStatus(-1);
-                        _currentScore=0;
-                        circle.played(_currentScore);
-                        controller.displayScore(_currentScore, true);
-                        _this.updateCurrentCircle();
-                        _this.updateCombo(_currentScore);
-                        _this.updateGlobalScore(_currentScore);
-                    }
-                    if(controller.multiplayer == 1){
+					}else{
+						if(!this.controller.autoPlayEnabled){
+							circle.updateStatus(-1)
+							var currentScore = 0
+							circle.played(currentScore)
+							this.controller.displayScore(currentScore, true)
+							this.updateCurrentCircle()
+							this.updateCombo(currentScore)
+							this.updateGlobalScore(currentScore)
+						}
+						if(this.controller.multiplayer == 1){
 							p2.send("note", {
 								score: -1
 							})
 						}
-
 					}
-  
 				}
-   
-        });
-        
 			}
-    
-    this.setHPGain = function(gain){
-        _HPGain=gain;
+		})
 	}
+	setHPGain(gain){
+		this.HPGain = gain
+	}
+	checkPlays(){
+		var circles = this.songData.circles
+		var circle = circles[this.currentCircle]
 		
-    this.checkPlays = function(){
-        
-        var circles = _songData.circles;
-        var circle = circles[_currentCircle];
-
-        if(circle){
-            if(controller.autoPlayEnabled){
-                return controller.autoPlay(circle)
+		if(circle && this.controller.autoPlayEnabled){
+			return this.controller.autoPlay(circle)
 		}
-            var keys = controller.getKeys()
-            var kbd = controller.getBindings()
+		var keys = this.controller.getKeys()
+		var kbd = this.controller.getBindings()
 		if(keys[kbd["don_l"]]){
-                _this.checkKey(kbd["don_l"], circle)
+			this.checkKey(kbd["don_l"], circle)
 		}
 		if(keys[kbd["don_r"]]){
-                _this.checkKey(kbd["don_r"], circle)
+			this.checkKey(kbd["don_r"], circle)
 		}
 		if(keys[kbd["ka_l"]]){
-                _this.checkKey(kbd["ka_l"], circle)
+			this.checkKey(kbd["ka_l"], circle)
 		}
 		if(keys[kbd["ka_r"]]){
-                _this.checkKey(kbd["ka_r"], circle)
+			this.checkKey(kbd["ka_r"], circle)
 		}
 	}
-
-    }
-    
-    this.checkKey = function(keyCode, circle){
-        if(!circle.getPlayed() && !controller.isWaitingForKeyup(keyCode, "score") && circle.getStatus()!=-1){
-            var score = _this.checkScore(circle);
-            circle.played(score);
-            _this.updateCurrentCircle();
-            controller.waitForKeyup(keyCode, "score");
-            if(controller.multiplayer == 1){
-                p2.send("note", {
-                    score: score,
-                    ms: circle.getMS() - _this.getElapsedTime().ms
-                })
+	checkKey(keyCode, circle){
+		if(!this.controller.isWaitingForKeyup(keyCode, "score")){
+			if(circle && !circle.getPlayed() && circle.getStatus() != -1){
+				this.checkScore(circle)
 			}
+			this.controller.waitForKeyup(keyCode, "score")
 		}
 	}
+	checkScore(circle){
+		var keys = this.controller.getKeys()
+		var kbd = this.controller.getBindings()
+		var keysDon = keys[kbd["don_l"]] || keys[kbd["don_r"]]
+		var keysKa = keys[kbd["ka_l"]] || keys[kbd["ka_r"]]
 		
-    this.checkScore = function(circle){
-        
-        var keys = controller.getKeys()
-        var kbd = controller.getBindings()
-        
-        if(
-            ((keys[kbd["don_l"]] || keys[kbd["don_r"]]) && (circle.getType()=="don" || circle.getType()=="daiDon")) ||
-            ((keys[kbd["ka_l"]] || keys[kbd["ka_r"]]) && (circle.getType()=="ka" || circle.getType()=="daiKa"))
-        ){
-             
-            switch(circle.getStatus()){
-
-                case 230:
-                    _currentScore=230;
-                    break;
-
-                case 450:
-                    _currentScore=450;
-                    break;
-
-            }
-            controller.displayScore(_currentScore);
+		var type = circle.getType()
+		var typeDon = type == "don" || type == "daiDon"
+		var typeKa = type == "ka" || type == "daiKa"
 		
+		if(typeDon || typeKa){
+			var score = 0
+			if(keysDon && typeDon || keysKa && typeKa){
+				var circleStatus = circle.getStatus()
+				if(circleStatus == 230 || circleStatus == 450){
+					score = circleStatus
 				}
-        else{
-            _currentScore=0;
-            controller.displayScore(_currentScore, true);
+				this.controller.displayScore(score)
+			}else{
+				this.controller.displayScore(score, true)
 			}
-        
-        
-        _this.updateCombo(_currentScore);
-        _this.updateGlobalScore(_currentScore);
-        return _currentScore;
-    }
-        
-    this.whenLastCirclePlayed = function(){
-        var circles = _songData.circles;
-        var lastCircle = circles[_songData.circles.length-1];
-        if(!_fadeOutStarted && _this.getElapsedTime().ms>=lastCircle.getMS()+2000){
-            _fadeOutStarted=_this.getElapsedTime().ms
+			this.updateCombo(score)
+			this.updateGlobalScore(score)
+			this.updateCurrentCircle()
+			circle.played(score)
+			if(this.controller.multiplayer == 1){
+				p2.send("note", {
+					score: score,
+					ms: circle.getMS() - this.getElapsedTime().ms
+				})
 			}
+		}else if(keysDon && type == "balloon"){
+			this.checkBalloon(circle)
+		}else if((keysDon || keysKa) && (type == "drumroll" || type == "daiDrumroll")){
+			this.checkDrumroll(circle)
+		}
+	}
+	checkBalloon(circle){
+		if(circle.timesHit >= circle.requiredHits - 1){
+			var score = 5000
+			this.updateCurrentCircle()
+			circle.hit()
+			circle.played(score)
+			if(this.controller.multiplayer == 1){
+				p2.send("drumroll", {
+					pace: (this.getElapsedTime().ms - circle.getMS()) / circle.timesHit
+				})
 			}
-
-    this.whenFadeoutMusic = function(){
-        if(_fadeOutStarted){
-            if(_musicFadeOut==0){
+		}else{
+			var score = 300
+			circle.hit()
+		}
+		this.globalScore.points += score
+	}
+	checkDrumroll(circle){
+		var score = 100
+		circle.hit()
+		var keyTime = this.controller.getKeyTime()
+		if(circle.getType() == "drumroll"){
+			var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka"
+		}else{
+			var sound = keyTime["don"] > keyTime["ka"] ? "daiDon" : "daiKa"
+		}
+		var circleAnim = new Circle(0, this.getElapsedTime().ms, sound, "", circle.speed)
+		circleAnim.played(score)
+		circleAnim.animate()
+		this.controller.view.drumroll.push(circleAnim)
+		this.globalScore.points += score
+	}
+	whenLastCirclePlayed(){
+		var circles = this.songData.circles
+		var lastCircle = circles[this.songData.circles.length - 1]
+		if(!this.fadeOutStarted && this.getElapsedTime().ms >= lastCircle.getEndTime() + 1900){
+			this.fadeOutStarted=this.getElapsedTime().ms
+		}
+	}
+	whenFadeoutMusic(){
+		if(this.fadeOutStarted){
+			if(this.musicFadeOut==0){
 				snd.musicGain.fadeOut(1.6)
-                _musicFadeOut++
-                if(controller.multiplayer == 1){
-                    p2.send("gameend")
+				if(this.controller.multiplayer == 1){
+					p2.send("gameresults", this.controller.getGlobalScore())
 				}
+				this.musicFadeOut++
 			}
-            if(_musicFadeOut==1 && _this.getElapsedTime().ms>=_fadeOutStarted+1600){
-                controller.fadeOutOver()
-                _mainAsset.stop()
-                _musicFadeOut++
+			if(this.musicFadeOut == 1 && this.getElapsedTime().ms >= this.fadeOutStarted + 1600){
+				this.controller.displayResults()
+				this.mainAsset.stop()
+				p2.send("gameend")
 				setTimeout(() => {
 					snd.musicGain.fadeIn()
 					snd.musicGain.unmute()
 				}, 1000)
+				this.musicFadeOut++
 			}
 		}
 	}
-    
-    this.checkTiming = function(){
-        
-        if(_songData.timingPoints[_currentTimingPoint+1]){
-            if(_this.getElapsedTime().ms>=_songData.timingPoints[_currentTimingPoint+1].start){
-                _currentTimingPoint++;
+	checkTiming(){
+		if(this.songData.timingPoints[this.currentTimingPoint + 1]){
+			if(this.getElapsedTime().ms >= this.songData.timingPoints[this.currentTimingPoint + 1].start){
+				this.currentTimingPoint++
 			}
 		}
 	}
-    
-    this.getCurrentTimingPoint = function(){
-        return _songData.timingPoints[_currentTimingPoint];
+	playMainMusic(){
+		var ms = this.getElapsedTime().ms
+		if(!this.mainMusicPlaying && (!this.fadeOutStarted || ms<this.fadeOutStarted + 1600)){
+			if(this.controller.multiplayer != 2){
+				this.mainAsset.play((ms < 0 ? -ms : 0) / 1000, false, Math.max(0, ms / 1000))
 			}
-    
-    this.playMainMusic = function(){
-        var ms = _this.getElapsedTime().ms
-        if(!_mainMusicPlaying && (!_fadeOutStarted || ms<_fadeOutStarted+1600)){
-            if(controller.multiplayer != 2){
-                _mainAsset.play((ms < 0 ? -ms : 0) / 1000, false, Math.max(0, ms / 1000));
+			this.mainMusicPlaying = true
 		}
-            _mainMusicPlaying=true;
 	}
+	togglePause(){
+		if(!this.paused){
+			assets.sounds["pause"].play()
+			this.paused = true
+			this.latestDate = new Date()
+			this.mainAsset.stop()
+			this.mainMusicPlaying = false
+		}else{
+			assets.sounds["cancel"].play()
+			this.paused = false
+			var currentDate = new Date()
+			this.elapsedTimeSincePause = this.elapsedTimeSincePause + currentDate.getTime() - this.latestDate.getTime()
 		}
-
-    this.fadeOutOver = function(){
-        
 	}
-    
-    this.getHitcircleSpeed = function(){
-        return _hitcircleSpeed;
+	isPaused(){
+		return this.paused
 	}
-    
-    this.togglePause = function(){
-        if(!_paused){
-            assets.sounds["pause"].play();
-            _paused=true;
-            _latestDate = new Date();
-            _mainAsset.stop();
-            _mainMusicPlaying=false;
-            
-        }
-        else{
-            assets.sounds["cancel"].play();
-            _paused=false;
-            var currentDate = new Date();
-            _elapsedTimeSincePause = _elapsedTimeSincePause + currentDate.getTime() - _latestDate.getTime();
-        }
-    }
-
-    this.isPaused = function(){
-        return _paused;
-    }
-    
-    this.getElapsedTime = function(){
-        return this.elapsedTime;
+	getElapsedTime(){
+		// Current time in ms from the beginning of the song
+		return this.elapsedTime
 	}
-    
-    this.setElapsedTime = function(time){
+	setElapsedTime(time){
 		this.elapsedTime.ms = time
 		this.elapsedTime.sec = (this.elapsedTime.ms / 1000 |0) % 60
 		this.elapsedTime.min = (this.elapsedTime.ms / 1000 / 60 |0) % 60
 		this.elapsedTime.hour = (this.elapsedTime.ms / 1000 / 60 / 60 |0) % 60
 	}
-    
-    this.updateTime = function(){
-        _currentDate = new Date();
-        var time = _this.getElapsedTime()
-        
-        if(time.ms<0){
-            _this.setElapsedTime(_currentDate.getTime() - _startDate.getTime() - _elapsedTimeSincePause)
+	updateTime(){
+		// Refreshed date
+		this.currentDate = new Date()
+		var ms = this.getElapsedTime().ms
+		if(ms >= 0 && !this.started){
+			this.startDate = new Date()
+			this.elapsedTimeSincePause = 0
+			this.setElapsedTime(this.currentDate.getTime() - this.startDate.getTime())
+			this.started = true
+		}else if(ms < 0 || ms >= 0 && this.started){
+			this.setElapsedTime(this.currentDate.getTime() - this.startDate.getTime() - this.elapsedTimeSincePause)
 		}
-        else if(time.ms>=0 && !_started){
-            _startDate = new Date();
-            _elapsedTimeSincePause = 0;
-            _this.setElapsedTime(_currentDate.getTime() - _startDate.getTime())
-            _started=true;
 	}
-        else if(time.ms>=0 && _started){
-            _this.setElapsedTime(_currentDate.getTime() - _startDate.getTime() - _elapsedTimeSincePause)
+	getCircles(){
+		return this.songData.circles
 	}
+	getSongData(){
+		return this.songData
 	}
-    
-    this.getCircles = function(){
-        return _songData.circles;
+	updateCurrentCircle(){
+		this.currentCircle++
 	}
-    
-    this.getSongData = function(){
-        return _songData;
+	getCurrentCircle(){
+		return this.currentCircle
 	}
-    
-    this.updateCurrentCircle = function(){
-        _currentCircle++;
+	updateCombo(score){
+		if(score != 0){
+			this.combo++
+		}else{
+			this.combo = 0
 		}
-    
-    this.getCurrentCircle = function(){
-        return _currentCircle;
+		if(this.combo > this.globalScore.maxCombo){
+			this.globalScore.maxCombo = this.combo
 		}
-    
-    this.updateCombo = function(score){
-        
-        (score!=0) ? _combo++ : _combo=0;
-        
-        if(_combo>_globalScore.maxCombo) _globalScore.maxCombo = _combo;
-        
-        switch(_combo){
-            case 50:
-                controller.playSoundMeka("combo-50");
-                break;
-            case 100:
-                controller.playSoundMeka("combo-100");
-                break;
-            case 200:
-                controller.playSoundMeka("combo-200");
-                break;
-            case 300:
-                controller.playSoundMeka("combo-300");
-                break;
-            case 400:
-                controller.playSoundMeka("combo-400");
-                break;
-            case 500:
-                controller.playSoundMeka("combo-500");
-                break;
-            case 600:
-                controller.playSoundMeka("combo-600");
-                break;
-            case 700:
-                controller.playSoundMeka("combo-700");
-                break;
-            case 800:
-                controller.playSoundMeka("combo-800");
-                break;
-            case 900:
-                controller.playSoundMeka("combo-900");
-                break;
-            case 1000:
-                controller.playSoundMeka("combo-1000");
-                break;
-            case 1100:
-                controller.playSoundMeka("combo-1100");
-                break;
-            case 1200:
-                controller.playSoundMeka("combo-1200");
-                break;
-            case 1300:
-                controller.playSoundMeka("combo-1300");
-                break;
-            case 1400:
-                controller.playSoundMeka("combo-1400");
-                break;
+		if(this.combo == 50 || this.combo > 0 && this.combo % 100 == 0 && this.combo <= 1400){
+			this.controller.playSoundMeka("combo-" + this.combo)
 		}
-        
-        controller.view.updateCombo(_combo)
+		this.controller.view.updateCombo(this.combo)
 	}
-    
-    this.getCombo = function(){
-        return _combo;
+	getCombo(){
+		return this.combo
 	}
-    
-    this.getGlobalScore = function(){
-        return _globalScore;
+	getGlobalScore(){
+		return this.globalScore
 	}
-    
-    this.updateGlobalScore = function(score){
-
-        /* Circle score */
+	updateGlobalScore(score){
+		// Circle score
 		switch(score){
 			case 450:
-                _globalScore.great++;
-                break;
+				this.globalScore.great++
+				break
 			case 230:
-                _globalScore.good++;
-                break;
+				this.globalScore.good++
+				break
 			case 0:
-                _globalScore.fail++;
-                break;
-        }
-        
-        /* HP Update */
-        if(score!=0){
-            _globalScore.hp+=_HPGain;
+				this.globalScore.fail++
+				break
 		}
-        else{
-            if(_globalScore.hp-_HPGain>0)
-                 _globalScore.hp-=_HPGain;
-            else
-                _globalScore.hp=0;
+		// HP Update
+		if(score != 0){
+			this.globalScore.hp += this.HPGain
+		}else if(this.globalScore.hp - this.HPGain > 0){
+			this.globalScore.hp -= this.HPGain
+		}else{
+			this.globalScore.hp = 0
 		}
+		// Points update
+		score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100)
 		
-        /* Points update */
-        if(_combo>=11 && _combo<=20){
-            score+=100;
+		this.globalScore.points+=score
 	}
-        else if(_combo>=21 && _combo<=30){
-            score+=200;
-        }
-        else if(_combo>=31 && _combo<=40){
-            score+=300;
-        }
-        else if(_combo>=41 && _combo<=50){
-            score+=400;
-        }
-        else if(_combo>=51 && _combo<=60){
-            score+=500;
-        }
-        else if(_combo>=61 && _combo<=70){
-            score+=500;
-        }
-        else if(_combo>=71 && _combo<=80){
-            score+=600;
-        }
-        else if(_combo>=81 && _combo<=90){
-            score+=700;
-        }
-        else if(_combo>=91 && _combo<=100){
-            score+=800;
-        }
-        
-        _globalScore.points+=score;
-        
-    }
-    
 }

public/src/js/keyboard.js

@@ -91,7 +91,20 @@ function Keyboard(controller){
     
     this.checkKeySound = function(keyCode, sound){
         _this.checkKey(keyCode, "sound", function(){
+            var circles = controller.parsedSongData.circles
+            var circle = circles[controller.game.getCurrentCircle()]
+            if(
+                (keyCode == _kbd["don_l"] || keyCode == _kbd["don_r"])
+                && circle
+                && !circle.getPlayed()
+                && circle.getStatus() != -1
+                && circle.getType() == "balloon"
+                && circle.requiredHits - circle.timesHit <= 1
+            ){
+                assets.sounds["balloon"].play()
+            }else{
                 assets.sounds["note_"+sound].play()
+            }
             _keyTime[sound] = controller.getElapsedTime().ms
         })
     }

public/src/js/mekadon.js

@@ -4,21 +4,32 @@ class Mekadon{
 		this.game = game
 		this.lr = false
 		this.keys = {}
+		this.lastHit = -Infinity
 	}
 	play(circle){
-        if(circle.getStatus() == 450){
-            return this.playNow(circle)
+		var type = circle.getType()
+		if(type == "balloon"){
+			this.playDrumrollAt(circle, 0, 30)
+		}else if(type == "drumroll" || type == "daiDrumroll"){
+			this.playDrumrollAt(circle, 0, 60)
+		}else{
+			this.playAt(circle, 0, 450)
 		}
 	}
 	playAt(circle, ms, score){
-        var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
+		var currentMs = circle.getMS() - this.getMS()
 		if(ms > currentMs - 10){
 			return this.playNow(circle, score)
 		}
 	}
+	playDrumrollAt(circle, ms, pace){
+		if(pace && this.getMS() >= this.lastHit + pace){
+			this.playAt(circle, ms)
+		}
+	}
 	miss(circle){
-        var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
-        if(0 > currentMs - 10){
+		var currentMs = circle.getMS() - this.getMS()
+		if(0 >= currentMs - 10){
 			this.controller.displayScore(0, true)
 			this.game.updateCurrentCircle()
 			this.game.updateCombo(0)
@@ -28,33 +39,47 @@ class Mekadon{
 	}
 	playNow(circle, score){
 		var kbd = this.controller.getBindings()
-        if(circle.getType() == "don"){
+		var type = circle.getType()
+		if(type == "don" || type == "balloon" || type == "drumroll" || type == "daiDrumroll"){
 			this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"])
 			this.lr = !this.lr
-        }else if(circle.getType() == "daiDon"){
+		}else if(type == "daiDon"){
 			this.setKey(kbd["don_l"])
 			this.setKey(kbd["don_r"])
 			this.lr = false
-        }else if(circle.getType() == "ka"){
+		}else if(type == "ka"){
 			this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
 			this.lr = !this.lr
-        }else if(circle.getType() == "daiKa"){
+		}else if(type == "daiKa"){
 			this.setKey(kbd["ka_l"])
 			this.setKey(kbd["ka_r"])
 			this.lr = false
 		}
+		if(type == "balloon"){
+			if(circle.requiredHits == 1){
+				assets.sounds["balloon"].play()
+			}
+			this.game.checkBalloon(circle)
+		}else if(type == "drumroll" || type == "daiDrumroll"){
+			this.game.checkDrumroll(circle)
+		}else{
 			if(typeof score == "undefined"){
 				score = this.game.checkScore(circle)
 			}else{
 				this.controller.displayScore(score)
 				this.game.updateCombo(score)
 				this.game.updateGlobalScore(score)
+				this.game.updateCurrentCircle()
 			}
 			circle.updateStatus(score)
 			circle.played(score)
-        this.game.updateCurrentCircle()
+		}
+		this.lastHit = this.getMS()
 		return true
 	}
+	getMS(){
+		return this.controller.getElapsedTime().ms
+	}
 	setKey(keyCode){
 		var self = this
 		if(this.keys[keyCode]){
@@ -64,7 +89,7 @@ class Mekadon{
 		this.controller.setKey(keyCode, true)
 		this.keys[keyCode] = setTimeout(function(){
 			self.clearKey(keyCode)
-        },100)
+		}, 100)
 	}
 	clearKey(keyCode){
 		this.controller.setKey(keyCode, false)

public/src/js/p2.js

@@ -5,18 +5,25 @@ class P2Connection{
 		this.msgCallbacks = {}
 		this.closeCallbacks = new Set()
 		this.openCallbacks = new Set()
-		this.notes = []
 		this.otherConnected = false
 		this.onmessage("gamestart", () => {
 			this.otherConnected = true
 			this.notes = []
+			this.drumrollPace = 45
+			this.results = false
 		})
 		this.onmessage("gameend", () => {
 			this.otherConnected = false
 		})
+		this.onmessage("gameresults", response => {
+			this.results = response
+		})
 		this.onmessage("note", response => {
 			this.notes.push(response)
 		})
+		this.onmessage("drumroll", response => {
+			this.drumrollPace = response.pace
+		})
 	}
 	open(){
 		this.closed = false
@@ -92,7 +99,7 @@ class P2Connection{
 			this.msgCallbacks[data.type].forEach(obj => {
 				obj.callback(data.value)
 				if(obj.once){
-					delete this.msgCallbacks[obj]
+					this.msgCallbacks[data.type].delete(obj)
 				}
 			})
 		}
@@ -113,7 +120,10 @@ class P2Connection{
 	}
 	play(circle, mekadon){
 		if(this.otherConnected || this.notes.length > 0){
-			if(this.notes.length == 0){
+			var type = circle.getType()
+			if(type == "balloon"|| type == "drumroll" || type == "daiDrumroll"){
+				mekadon.playDrumrollAt(circle, 0, this.drumrollPace)
+			}else if(this.notes.length == 0){
 				mekadon.play(circle)
 			}else{
 				var note = this.notes[0]

public/src/js/parsesong.js

-function ParseSong(fileContent){
-	
-	var _this = this;
-	var _data = fileContent;
-	var _generalInfo={audioFilename:"", audioWait:0};
-	var _metadata={title:'', artist:''};
-	var _difficulty={sliderMultiplier:0, sliderTickRate:0, approachRate:0};
-	var _beatInfo={beatInterval:0, bpm:0};
-	var _editor={distanceSpacing:0, beatDivisor:0, gridSize:0};
-	var _circleID=0;
-	var _circles=[];
-	var _timingPoints=[];
-	var _measures=[];
-	
-	this.getStartEndIndexes = function(type){
-
-        var indexes = {start:0, end:0};
-        
-        while(indexes.start<_data.length){
-            if(_data[indexes.start].match(type))
-                break;
-            else
-                indexes.start++;
+class ParseSong{
+	constructor(fileContent){
+		this.data = fileContent
+		this.osu = {
+			OFFSET: 0,
+			MSPERBEAT: 1,
+			METER: 2,
+			SAMPLESET: 3,
+			SAMPLEINDEX: 4,
+			VOLUME: 5,
+			INHERITED: 6,
+			KIAIMODE: 7,
+			
+			X: 0,
+			Y: 1,
+			TIME: 2,
+			TYPE: 3,
+			HITSOUND: 4,
+			EXTRAS: 5,
+			ENDTIME: 5,
+			
+			CIRCLE: 1,
+			SLIDER: 2,
+			NEWCOMBO: 4,
+			SPINNER: 8,
+			
+			NORMAL: 1,
+			WHISTLE: 2,
+			FINISH: 4,
+			CLAP: 8,
+			
+			CURVEPOINTS: 0,
+			REPEAT: 1,
+			PIXELLENGTH: 2,
+			EDGEHITSOUNDS: 3,
+			EDGEADDITIONS: 4
 		}
-        indexes.start++;
-        
-        indexes.end = indexes.start;
-        while(indexes.end<_data.length){
-            if(_data[indexes.end].match(/^\s*$/))
-                break;
-            else
-                indexes.end++;
-        }
-        indexes.end--;
-        
-        return indexes;
+		this.beatInfo = {
+			beatInterval: 0,
+			bpm: 0
 		}
-    
-    this.parseDifficulty = function(){
-        
-        var indexes = _this.getStartEndIndexes("Difficulty");
-
-        for(var i=indexes.start; i<= indexes.end; i++){
-    
-            var splitted = _data[i].split(":");
-            var item = splitted[0];
-            var key = splitted[1];
-            
+		this.generalInfo = this.parseGeneralInfo()
+		this.metadata = this.parseMetadata()
+		this.editor = this.parseEditor()
+		this.difficulty = this.parseDifficulty()
+		this.timingPoints = this.parseTiming()
+		this.circles = this.parseCircles()
+		this.measures = this.parseMeasures()
+	}
+	getStartEndIndexes(type){
+		var indexes = {
+			start: 0,
+			end: 0
+		}
+		while(indexes.start < this.data.length){
+			if(this.data[indexes.start].match(type)){
+				break
+			}
+			indexes.start++
+		}
+		indexes.start++
+		indexes.end = indexes.start
+		while(indexes.end < this.data.length){
+			if(this.data[indexes.end].match(/^\s*$/)){
+				break
+			}
+			indexes.end++
+		}
+		indexes.end--
+		return indexes
+	}
+	parseDifficulty(){
+		var difficulty = {
+			sliderMultiplier: 0,
+			sliderTickRate: 0,
+			approachRate: 0
+		}
+		var indexes = this.getStartEndIndexes("Difficulty")
+		for(var i = indexes.start; i <= indexes.end; i++){
+			var [item, key] = this.data[i].split(":")
 			switch(item){
-             
-                case 'SliderMultiplier':
-                    _difficulty.sliderMultiplier = key;
-                    _difficulty.originalMultiplier = key;
-                    break;
-                case 'SliderTickRate':
-                    _difficulty.sliderTickRate = key;
-                    break;
-                case 'ApproachRate':
-                    _difficulty.approachRate = key;
-                    break;
+				case "SliderMultiplier":
+					difficulty.sliderMultiplier = key
+					difficulty.originalMultiplier = key
+					break
+				case "SliderTickRate":
+					difficulty.sliderTickRate = key
+					break
+				case "ApproachRate":
+					difficulty.approachRate = key
+					break
+				case "OverallDifficulty":
+					difficulty.overallDifficulty = key
+					break
 			}
 		}
-            
+		return difficulty
 	}
-        
-    this.parseTiming = function(){
-        
-        var indexes = _this.getStartEndIndexes("TimingPoints");
-        var lastBeatInterval = parseInt(_data[indexes.start].split(",")[1]);
-
-        for(var i=indexes.start; i<= indexes.end; i++){
-    
-            var values = _data[i].split(",");
-            
-            var start=parseInt(values[0])
-            var msOrPercent=parseFloat(values[1])
-            if(i==indexes.start){
-                start=0
-                _beatInfo.beatInterval=msOrPercent;
-                _beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60);
-            }
-            if(msOrPercent<0){
-                var sliderMultiplier=_difficulty.originalMultiplier*1/Math.abs(msOrPercent/100);
+	parseTiming(){
+		var timingPoints = []
+		var indexes = this.getStartEndIndexes("TimingPoints")
+		var lastBeatInterval = parseInt(this.data[indexes.start].split(",")[1])
+		for(var i = indexes.start; i<= indexes.end; i++){
+			var values = this.data[i].split(",")
+			var start = parseInt(values[this.osu.OFFSET])
+			var msOrPercent = parseFloat(values[this.osu.MSPERBEAT])
+			if(i == indexes.start){
+				start = 0
+				this.beatInfo.beatInterval = msOrPercent
+				this.beatInfo.bpm = Math.floor(1000 / this.beatInfo.beatInterval * 60)
+			}
+			if(msOrPercent < 0){
+				var sliderMultiplier = this.difficulty.lastMultiplier / Math.abs(msOrPercent / 100)
 			}else{
-                var sliderMultiplier=500/msOrPercent;
-                _difficulty.originalMultiplier=sliderMultiplier
+				var sliderMultiplier = 500 / msOrPercent
+				if(i == 0){
+					this.difficulty.originalMultiplier = sliderMultiplier
 				}
-            
-            _timingPoints.push({
-                start:start,
-                sliderMultiplier:sliderMultiplier,
-                measure:parseInt(values[2]),
-            });
-            
+				this.difficulty.lastMultiplier = sliderMultiplier
 			}
+			timingPoints.push({
+				start: start,
+				sliderMultiplier: sliderMultiplier,
+				measure: parseInt(values[this.osu.METER])
+			})
 		}
-    
-    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,
-                    nb:measureNumber,
-                    speed:_timingPoints[i].sliderMultiplier
-                });
-                measureNumber++;
-                if(measureNumber==_timingPoints[i].measure+1){
-                    measureNumber=0;
+		return timingPoints
 	}
-                
+	parseMeasures(){
+		var measures = []
+		var measureNumber = 0
+		for(var i = 0; i<this.timingPoints.length; i++){
+			if(this.timingPoints[i + 1]){
+				var limit = this.timingPoints[i + 1].start
+			}else{
+				var limit = this.circles[this.circles.length - 1].getMS()
 			}
+			for(var j = this.timingPoints[i].start; j <= limit; j += this.beatInfo.beatInterval){
+				measures.push({
+					ms: j,
+					nb: measureNumber,
+					speed: this.timingPoints[i].sliderMultiplier
+				})
+				measureNumber++
+				if(measureNumber == this.timingPoints[i].measure + 1){
+					measureNumber = 0
 				}
-        
 			}
-	
-	this.parseGeneralInfo = function(){
-        
-        var indexes = _this.getStartEndIndexes("General");
-        
-        for(var i=indexes.start; i<= indexes.end; i++){
-    
-            var splitted = _data[i].split(":");
-            var item = splitted[0];
-            var key = splitted[1];
-            
+		}
+		return measures
+	}
+	parseGeneralInfo(){
+		var generalInfo = {
+			audioFilename: "",
+			audioWait: 0
+		}
+		var indexes = this.getStartEndIndexes("General")
+		for(var i = indexes.start; i<= indexes.end; i++){
+			var [item, key] = this.data[i].split(":")
 			switch(item){
-             
-                case 'SliderMultiple':
-                    _generalInfo.audioFilename = key;
-                    break;
-                case 'AudioWait':
-                    _generalInfo.audioWait = parseInt(key);
-                    break;
+				case "SliderMultiple":
+					generalInfo.audioFilename = key
+					break
+				case "AudioWait":
+					generalInfo.audioWait = parseInt(key)
+					break
 			}
 		}
-
+		return generalInfo
 	}
-    
-    this.parseMetadata = function(){
-        
-        var indexes = _this.getStartEndIndexes("Metadata");
-        
-        for(var i=indexes.start; i<= indexes.end; i++){
-    
-            var splitted = _data[i].split(":");
-            var item = splitted[0];
-            var key = splitted[1];
-            
+	parseMetadata(){
+		var metadata = {
+			title: "",
+			artist: ""
+		}
+		var indexes = this.getStartEndIndexes("Metadata")
+		for(var i = indexes.start; i <= indexes.end; i++){
+			var [item, key] = this.data[i].split(":")
 			switch(item){
-             
-                case 'TitleUnicode':
-                    _metadata.title = key;
-                    break;
-                    
-                case 'ArtistUnicode':
-                    _metadata.artist = key;
-                    break;
+				case "TitleUnicode":
+					metadata.title = key
+					break
+				case "ArtistUnicode":
+					metadata.artist = key
+					break
 			}
 		}
+		return metadata
 	}
-    
-    this.parseEditor = function(){
-        
-        var indexes = _this.getStartEndIndexes("Editor");
-        
-        for(var i=indexes.start; i<= indexes.end; i++){
-    
-            var splitted = _data[i].split(":");
-            var item = splitted[0];
-            var key = splitted[1];
-            
+	parseEditor(){
+		var editor = {
+			distanceSpacing: 0,
+			beatDivisor: 0,
+			gridSize: 0
+		}
+		var indexes = this.getStartEndIndexes("Editor")
+		for(var i = indexes.start; i <= indexes.end; i++){
+			var [item, key] = this.data[i].split(":")
 			switch(item){
-             
-                case 'DistanceSpacing':
-                    _editor.distanceSpacing = parseFloat(key);
-                    break;
-                    
-                case 'BeatDivisor':
-                    _editor.beatDivisor = parseInt(key);
-                    break;
-                    
-                case 'GridSize':
-                    _editor.gridSize = parseInt(key);
-                    break;
+				case "DistanceSpacing":
+					editor.distanceSpacing = parseFloat(key)
+					break
+				case "BeatDivisor":
+					editor.beatDivisor = parseInt(key)
+					break
+				case "GridSize":
+					editor.gridSize = parseInt(key)
+					break
 			}
 		}
-        
+		return editor
+	}
+	difficultyRange(difficulty, min, mid, max){
+		if(difficulty > 5){
+			return mid + (max - mid) * (difficulty - 5) / 5
+		}
+		if(difficulty < 5){
+			return mid - (mid - min) * (5 - difficulty) / 5
+		}
+		return mid
+	}
+	parseCircles(){
+		var circles = []
+		var circleID = 0
+		var indexes = this.getStartEndIndexes("HitObjects")
+		for(var i = indexes.start; i <= indexes.end; i++){
+			circleID++
+			var values = this.data[i].split(",")
+			var emptyValue = false
+			var start = parseInt(values[this.osu.TIME])
+			var speed = this.difficulty.originalMultiplier
+			var osuType = parseInt(values[this.osu.TYPE])
+			var hitSound = parseInt(values[this.osu.HITSOUND])
+			
+			for(var j = 0; j < this.timingPoints.length; j++){
+				if(this.timingPoints[j].start > start){
+					break
+				}
+				speed = this.timingPoints[j].sliderMultiplier
 			}
 			
-    this.parseCircles = function(){
-        
-        var indexes = _this.getStartEndIndexes("HitObjects");
-
-        for(var i=indexes.start; i<= indexes.end; i++){
+			if(osuType & this.osu.SPINNER){
 				
-            _circleID++;
-            var values = _data[i].split(",");
+				var endTime = parseInt(values[this.osu.ENDTIME])
+				var hitMultiplier = this.difficultyRange(this.difficulty.overallDifficulty, 3, 5, 7.5) * 1.65
+				var requiredHits = Math.floor(Math.max(1, (endTime - start) / 1000 * hitMultiplier))
+				circles.push(new Circle(circleID, start, "balloon", "ふうせん", speed, endTime, requiredHits))
 				
-            var type;
-            var txt;
-            var emptyValue=false;
-            var start=parseInt(values[2])
-            var speed=_difficulty.originalMultiplier
+			}else if(osuType & this.osu.SLIDER){
 				
-            for(var j=0; j<_timingPoints.length; j++){
-                if(_timingPoints[j].start<=start){
-                    speed=_timingPoints[j].sliderMultiplier
+				var extras = values.slice(this.osu.EXTRAS)
+				var pixelLength = parseFloat(extras[this.osu.PIXELLENGTH])
+				var endTime = start + pixelLength / (this.difficulty.originalMultiplier * 100) * this.beatInfo.beatInterval
+				if(hitSound & this.osu.FINISH){
+					type = "daiDrumroll"
+					txt = "連打(大)ーっ!!"
 				}else{
-                    break
+					type = "drumroll"
+					txt = "連打ーっ!!"
 				}
+				circles.push(new Circle(circleID, start, type, txt, speed, endTime))
+				
+			}else if(osuType & this.osu.CIRCLE){
+				
+				var type
+				var txt
+				if(hitSound & this.osu.FINISH){
+					if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
+						type = "daiKa"
+						txt = "カッ(大)"
+					}else if(hitSound & this.osu.NORMAL || hitSound == this.osu.FINISH){
+						type = "daiDon"
+						txt = "ドン(大)"
+					}else{
+						emptyValue = true
 					}
-                
-            switch(parseInt(values[4])){
-                case 0:
-                    type="don";
-                    txt="ドン";
-                    break;
-                case 2:
-                    type="ka";
-                    txt="カッ";
-                    break;
-                case 4:
-                    type="daiDon";
-                    txt="ドン(大)";
-                    break;
-                case 6:
-                    type="daiKa";
-                    txt="カッ(大)";
-                    break;
-                case 8:
-                    type="ka";
-                    txt="カッ";
-                    break;
-                case 10:
-                    type="ka";
-                    txt="カッ";
-                    break;
-                case 12:
-                    type="daiKa";
-                    txt="カッ(大)";
-                    break;
-                case 14:
-                    type="daiKa";
-                    txt="カッ(大)";
-                    break;
-                default:
-                    console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]);
-                    emptyValue=true;
-                    break;
-				}
-				if(!emptyValue)
-				    _circles.push(new Circle(_circleID,start,type,txt,speed));
+				}else if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
+					type = "ka"
+					txt = "カッ"
+				}else if(hitSound & this.osu.NORMAL || hitSound == 0){
+					type = "don"
+					txt = "ドン"
+				}else{
+					emptyValue = true
 				}
+				if(!emptyValue){
+					circles.push(new Circle(circleID, start, type, txt, speed))
 				}
 				
-	_this.parseGeneralInfo(); 
-	_this.parseMetadata();
-	_this.parseEditor();
-	_this.parseDifficulty();
-	_this.parseTiming();
-	_this.parseCircles();
-	_this.parseMeasures();
-
-	this.getData = function(){
+			}else{
+				emptyValue = true
+			}
+			if(emptyValue){
+				console.warn("Unknown note type found on line " + (i + 1) + ": " + this.data[i])
+			}
+		}
+		return circles
+	}
+	getData(){
 		return {
-			generalInfo: _generalInfo,
-			metaData: _metadata,
-			editor: _editor,
-			beatInfo: _beatInfo,
-			difficulty: _difficulty,
-			timingPoints: _timingPoints,
-			circles: _circles,
-			measures: _measures
-		};
+			generalInfo: this.generalInfo,
+			metaData: this.metadata,
+			editor: this.editor,
+			beatInfo: this.beatInfo,
+			difficulty: this.difficulty,
+			timingPoints: this.timingPoints,
+			circles: this.circles,
+			measures: this.measures
+		}
 	}
 }

public/src/js/scoresheet.js

-
-function Scoresheet(controller, score){
-	
-	var _this = this;
-	var _score = score;
-	var _mark;
-	
-	this.setResults = function(){
-		
-		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 == '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);
-		$("#nb-good").html(_score.good);
-		$("#nb-fail").html(_score.fail);
-		$("#max-combo").html(_score.maxCombo);
-		
-		$('.result-song').attr('alt', _score.song).html(_score.song);
-		
+class Scoresheet{
+	constructor(controller, score, multiplayer){
+		this.controller = controller
+		this.score = score
+		this.multiplayer = multiplayer
+		$("#screen").load("/src/views/scoresheet.html", () =>{
+			this.run()
+		})
 	}
-	
-	this.positionning = function(){
-		
-		$("#score-cont").css("top", $("#result-bar").height()/2 - ($("#score-cont").height()/2));
-		
-		var markSize = 0.1*$("#score-cont").width();
-		var markX = $("#score-cont").offset().left - markSize - (0.5*markSize);
-		var markY = $("#score-cont").offset().top;
-		
-		$("#score-mark").width(markSize);
-		$("#score-mark").height(markSize);
-		$("#score-mark").css("left", markX);
-		$("#score-mark").css("top", markY);
-		
-		var scoreBarW = 0.9*$("#score-cont").width();
-
-		$("#score-hp-bar-bg").width(scoreBarW);
-		$("#score-hp-bar-bg").height((51/703)*scoreBarW);
-		
-		var bgW = $("#score-hp-bar-bg").width();
-		var bgH = $("#score-hp-bar-bg").height();
-		var bgX = $("#score-hp-bar-bg").position().left;
-		var bgY = $("#score-hp-bar-bg").position().top;
-		
-		$("#score-hp-bar-colour").css("left", bgX+(0.008*bgW));
-		$("#score-hp-bar-colour").css("top", bgY+(0.15*bgH));
-		$("#score-hp-bar-colour").width(bgW-(0.08*bgW));
-		$("#score-hp-bar-colour").height(bgH-(0.25*bgH));
-		
-		$("#score-details").css("top", bgY+bgH+(bgH));
-
-		var barY = $("#result-bar").position().top;
-		var barH = $("#result-bar").height();
-		
-		var bottomY = barY+barH+15;
-		var bottomH = $(window).height()-bottomY;
-		
-		$("#bottom-part").css("top", bottomY);
-		$("#bottom-part").height(bottomH);
-		
-		
+	setResults(score, scoreCont){
+		this.positionning(scoreCont)
+		var scoreMark = this.elem("score-mark", scoreCont)
+		var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont)
+		
+		if(score.fail == 0){
+			var mark = "gold"
+		}else if (score.hp >= 50){
+			var mark = "silver"
 		}
-	
-	this.run = function(){
-		_this.positionning();
-		_this.setResults();
-		
-		$("#song-select").click(function(){
-			assets.sounds["don"].play();
-			assets.sounds["bgm_result"].stop();
-			controller.songSelection();
-		});
-		
-		$("#replay").click(function(){
-			assets.sounds["don"].play();
-			assets.sounds["bgm_result"].stop();
-			controller.restartSong();
-		});
-		
-		$(window).resize(_this.positionning);
-		
+		scoreHpBarColour.dataset.hp = score.hp
+		var imgW = score.hp * scoreHpBarColour.offsetWidth / 100
+		var imgH = scoreHpBarColour.offsetHeight
+		scoreHpBarColour.getElementsByTagName("img")[0].style.clip = "rect(0, " + imgW + "px, " + imgH + "px, 0)"
+		
+		if(mark == "gold"){
+			scoreMark.src = "/assets/img/ranking-X.png"
+		}else if(mark == "silver"){
+			scoreMark.src = "/assets/img/ranking-S.png"
+		}else{
+			scoreMark.parentNode.removeChild(scoreMark)
 		}
-	
+		this.altText(this.elem("score-points", scoreCont), score.points + "点")
+		this.altText(this.elem("nb-great", scoreCont), score.great)
+		this.altText(this.elem("nb-good", scoreCont), score.good)
+		this.altText(this.elem("nb-fail", scoreCont), score.fail)
+		this.altText(this.elem("max-combo", scoreCont), score.maxCombo)
+		
+		addEventListener("resize", () => {
+			this.positionning(scoreCont)
+		})
+	}
+	elem(className, parent){
+		return parent.getElementsByClassName(className)[0]
+	}
+	text(string){
+		return document.createTextNode(string)
+	}
+	altText(element, string){
+		element.appendChild(this.text(string))
+		element.setAttribute("alt", string)
+	}
+	positionning(scoreCont){
+		var scoreHpBarBg = this.elem("score-hp-bar-bg", scoreCont)
+		var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont)
+		
+		var scoreBarW = scoreCont.offsetWidth * 0.9
+		var bgW = scoreBarW
+		var bgH = 51 / 703 * scoreBarW
+		
+		scoreHpBarBg.style.width = bgW + "px"
+		scoreHpBarBg.style.height = bgH + "px"
+		var bgX = scoreHpBarBg.offsetLeft
+		var bgY = scoreHpBarBg.offsetTop
+		
+		scoreHpBarColour.style.left = (bgW * 0.008) + "px"
+		scoreHpBarColour.style.top = (bgH * 0.15) + "px"
+		scoreHpBarColour.style.width = (bgW - bgW * 0.08) + "px"
+		scoreHpBarColour.style.height = (bgH - bgH * 0.25) + "px"
+		
+		var imgW = scoreHpBarColour.dataset.hp * scoreHpBarColour.offsetWidth / 100
+		var imgH = scoreHpBarColour.offsetHeight
+		scoreHpBarColour.getElementsByTagName("img")[0].style.clip = "rect(0, " + imgW + "px, " + imgH + "px, 0)"
+	}
+	run(){
+		this.scoresheet = document.getElementsByClassName("scoresheet")[0]
+		var scoreCont = this.elem("score-cont", this.scoresheet)
+		var scoreContHtml = scoreCont.innerHTML
 		assets.sounds["results"].play()
 		assets.sounds["bgm_result"].playLoop(0.1, false, 0, 0.847, 17.689)
 		
-	$("#screen").load("/src/views/scoresheet.html", _this.run);
-    
+		this.setResults(this.score, scoreCont)
+		this.altText(this.elem("result-song", this.scoresheet), this.score.song)
+		
+		this.elem("song-select", this.scoresheet).addEventListener("click", () => {
+			assets.sounds["don"].play()
+			assets.sounds["bgm_result"].stop()
+			this.controller.songSelection()
+		})
+		this.elem("replay", this.scoresheet).addEventListener("click", () => {
+			assets.sounds["don"].play()
+			assets.sounds["bgm_result"].stop()
+			this.controller.restartSong()
+		})
+		
+		if(this.multiplayer && p2.results){
+			var scoreCont2 = document.createElement("div")
+			scoreCont2.classList.add("score-cont")
+			scoreCont2.innerHTML = scoreContHtml
+			scoreCont.parentNode.appendChild(scoreCont2)
+			this.setResults(p2.results, scoreCont2)
+		}
+	}
 }

public/src/js/view.js

@@ -40,6 +40,8 @@ class View{
 		this.songTitle = title
 		this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
 		
+		this.drumroll = []
+		
 		this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
 		this.assets = []
 		this.don = this.createAsset(frame => {
@@ -69,22 +71,15 @@ class View{
 		this.don.setAnimation("normal")
 		this.don.setUpdateSpeed(this.beatInterval / 16)
 	}
-	
 	run(){
 		this.ctx.font = "normal 14pt TnT"
 		this.setBackground()
 		$(".game-song").attr("alt", this.songTitle).html(this.songTitle)
 		this.refresh()
 	}
-	
 	setBackground(){
 		$("#game").css("background-image", "url('" + this.bg + "')")
 	}
-	
-	getDistanceForCircle(){
-		return this.distanceForCircle
-	}
-	
 	positionning(){
 		this.canvas.rescale()
 		var height = $(window).height()
@@ -133,7 +128,6 @@ class View{
 		this.diffX = this.taikoX * 0.10
 		this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
 	}
-	
 	refresh(){
 		this.positionning()
 		this.distanceForCircle = this.winW - this.slotX
@@ -147,7 +141,8 @@ class View{
 		this.drawMeasures()
 		this.drawHPBar()
 		this.drawScore()
-		this.drawCircles()
+		this.drawCircles(this.controller.getCircles())
+		this.drawCircles(this.drumroll)
 		this.drawTaikoSquare()
 		this.drawDifficulty()
 		this.drawPressedKeys()
@@ -156,7 +151,6 @@ class View{
 		this.updateDonFaces()
 		//this.drawTime()
 	}
-	
 	updateDonFaces(){
 		if(this.controller.getElapsedTime().ms >= this.nextBeat){
 			this.nextBeat += this.beatInterval
@@ -170,7 +164,6 @@ class View{
 			}
 		}
 	}
-	
 	drawHPBar(){
 		var z = this.canvas.scale
 		
@@ -221,7 +214,6 @@ class View{
 			hpBar.canvasW, this.HPBarColH
 		)
 	}
-	
 	getHP(){
 		var circles = this.controller.getCircles()
 		var currentCircle = this.controller.getCurrentCircle()
@@ -232,7 +224,6 @@ class View{
 			canvasW: width / 650 * this.HPBarColMaxW
 		}
 	}
-	
 	drawMeasures(){
 		var measures = this.controller.getSongData().measures
 		var currentTime = this.controller.getElapsedTime().ms
@@ -248,7 +239,6 @@ class View{
 			}
 		})
 	}
-	
 	drawMeasure(measure){
 		var z = this.canvas.scale
 		var currentTime = this.controller.getElapsedTime().ms
@@ -261,7 +251,6 @@ class View{
 		this.ctx.closePath()
 		this.ctx.stroke()
 	}
-	
 	drawCombo(){
 		var comboCount = this.controller.getCombo()
 		if(comboCount >= 10){
@@ -314,14 +303,12 @@ class View{
 			this.scoreDispCount++
 		}
 	}
-	
 	strokeFillText(text, x, y){
 		this.ctx.strokeText(text, x, y)
 		this.ctx.fillText(text, x, y)
 	}
-	
 	drawGlobalScore(){
-		/* Draw score square */
+		// Draw score square
 		this.ctx.fillStyle="#000"
 		this.ctx.beginPath()
 		this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10)
@@ -350,7 +337,6 @@ class View{
 			)
 		}
 	}
-	
 	drawPressedKeys(){
 		var keys = this.controller.getKeys()
 		var kbd = this.controller.getBindings()
@@ -399,14 +385,12 @@ class View{
 			)
 		}
 	}
-	
 	displayScore(score, notPlayed){
 		this.currentScore = score
 		this.special = notPlayed ? "-b" : ""
 		this.scoreDispCount = 0
 		this.scoreOpacity = 1
 	}
-	
 	drawScore(){
 		if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
 			this.ctx.globalAlpha = this.scoreOpacity
@@ -427,39 +411,37 @@ class View{
 		}
 		this.ctx.globalAlpha = 1
 	}
-	
-	drawCircles(){
-		var circles = this.controller.getCircles()
+	posToMs(pos, speed){
+		return 70 / this.circleSize * pos / speed
+	}
+	msToPos(ms, speed){
+		return speed / (70 / this.circleSize) * ms
+	}
+	drawCircles(circles){
 		for(var i = circles.length; i--;){
 			var circle = circles[i]
+			var ms = this.controller.getElapsedTime().ms
+			var speed = circle.getSpeed()
 			
-			var currentTime = this.controller.getElapsedTime().ms
-			var timeForDistance = 70 / this.circleSize * this.distanceForCircle / circle.getSpeed() + this.bigCircleSize / 2
+			var timeForDistance = this.posToMs(this.distanceForCircle + this.bigCircleSize / 2, speed)
 			var startingTime = circle.getMS() - timeForDistance
-			// At circle.getMS(), the cirlce fits the slot
-			var finishTime = circle.getMS() + 100
+			var finishTime = circle.getEndTime() + this.posToMs(this.slotX - this.taikoSquareW + this.bigCircleSize / 2, speed)
 			
-			if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){
+			if(!circle.getPlayed() || circle.getScore() == 0){
+				if(ms >= startingTime && ms <= finishTime){
 					this.drawCircle(circle)
 				}
-			else{
-				// Animate circle to the HP bar
-				
-				// Animation in ms
-				var animationDuration = 470
-				
-				if(!circle.isAnimated()){
-					if(circle.getScore() != 0){
+			}else if(!circle.isAnimated()){
 				// Start animation to HP bar
 				circle.animate()
 			}
-				}
 			if(circle.isAnimated()){
-					if(currentTime <= finishTime + animationDuration){
+				var animationDuration = 470
+				if(ms <= finishTime + animationDuration){
 					var curveDistance = this.HPBarX + this.HPBarW - this.slotX
 					var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
-							x: this.slotX,
-							y: this.circleY
+						x: this.slotX + this.circleSize * 0.4,
+						y: this.circleY - this.circleSize * 0.8
 					}, {
 						x: this.slotX + curveDistance * 0.15,
 						y: this.barH * 0.5
@@ -482,8 +464,6 @@ class View{
 			}
 		}
 	}
-	}
-	
 	calcBezierPoint(t, data){
 		var at = 1 - t
 		
@@ -498,66 +478,111 @@ class View{
 		
 		return data[0]
 	}
-	
 	drawCircle(circle, circlePos){
 		var z = this.canvas.scale
-		
 		var fill, size, faceID
+		var type = circle.getType()
+		var ms = this.controller.getElapsedTime().ms
+		var circleMs = circle.getMS()
+		var endTime = circle.getEndTime()
+		var animated = circle.isAnimated()
+		var speed = circle.getSpeed()
+		
 		if(!circlePos){
-			var currentTime = this.controller.getElapsedTime().ms
 			circlePos = {
-				x: this.slotX + circle.getSpeed() / (70 / this.circleSize) * (circle.getMS() - currentTime),
+				x: this.slotX + this.msToPos(circleMs - ms, speed),
 				y: this.circleY
 			}
 		}
 		
-		if(circle.getPlayed()){
-			var currentDonFace = 1
+		if(animated){
+			var currentDonFace = 0
 			var currentBigDonFace = 1
 		}else{
 			var currentDonFace = this.currentDonFace
 			var currentBigDonFace = this.currentBigDonFace
 		}
 		
-		switch(circle.getType()){
+		switch(type){
 			case "don":
-				fill = "#f54c25"
+				fill = "#f34728"
 				size = this.circleSize
 				faceID = "don-" + currentDonFace
 				break
 			case "ka":
-				fill = "#75cee9"
+				fill = "#65bdbb"
 				size = this.circleSize
 				faceID = "don-" + currentDonFace
 				break
 			case "daiDon":
-				fill = "#f54c25"
+				fill = "#f34728"
 				size = this.bigCircleSize
 				faceID = "big-don-" + currentBigDonFace
 				break
 			case "daiKa":
-				fill = "#75cee9"
+				fill = "#65bdbb"
 				size = this.bigCircleSize
 				faceID = "big-don-" + currentBigDonFace
 				break
+			case "balloon":
+				if(animated){
+					fill = "#f34728"
+					size = this.bigCircleSize * 0.8
+					faceID = "big-don-" + currentBigDonFace
+					break
+				}
+				fill = "#f87700"
+				size = this.circleSize
+				faceID = "don-" + currentDonFace
+				var h = size * 1.8
+				if(circleMs < ms && ms <= endTime){
+					circlePos.x = this.slotX
+				}else if(ms > endTime){
+					circlePos.x = this.slotX + this.msToPos(endTime - ms, speed)
+				}
+				this.ctx.drawImage(assets.image["balloon"],
+					circlePos.x + size - 3,
+					circlePos.y - h / 2,
+					h / 61 * 115,
+					h
+				)
+				break
+			case "drumroll":
+			case "daiDrumroll":
+				fill = "#f3b500"
+				if(type == "drumroll"){
+					size = this.circleSize
+					faceID = "don-" + currentDonFace
+				}else{
+					size = this.bigCircleSize
+					faceID = "big-don-" + currentBigDonFace
+				}
+				var endX = this.msToPos(endTime - circleMs, speed)
+				this.ctx.fillStyle = fill
+				this.ctx.strokeStyle = "#1f1a17"
+				this.ctx.lineWidth = this.lyricsSize / 10
+				this.ctx.beginPath()
+				this.ctx.moveTo(circlePos.x, circlePos.y - size)
+				this.ctx.lineTo(circlePos.x + endX, circlePos.y - size)
+				this.ctx.arc(circlePos.x + endX, circlePos.y, size, -Math.PI / 2, Math.PI / 2)
+				this.ctx.lineTo(circlePos.x, circlePos.y + size)
+				this.ctx.fill()
+				this.ctx.stroke()
+				break
 		}
-		
 		// Main circle
 		this.ctx.fillStyle = fill
 		this.ctx.beginPath()
 		this.ctx.arc(circlePos.x, circlePos.y, size, 0, Math.PI * 2)
 		this.ctx.closePath()
 		this.ctx.fill()
-		
 		// Face on circle
-		var face = assets.image[faceID]
-		this.ctx.drawImage(face,
+		this.ctx.drawImage(assets.image[faceID],
 			circlePos.x - size - 2,
 			circlePos.y - size - 4,
 			size * 2 + 5,
 			size * 2 + 6
 		)
-		
 		if(!circle.isAnimated()){
 			// Text
 			this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka"
@@ -571,7 +596,6 @@ class View{
 			)
 		}
 	}
-	
 	togglePauseMenu(){
 		if($("#pause-menu").is(":visible")){
 			$("#pause-menu").hide()
@@ -579,7 +603,6 @@ class View{
 			$("#pause-menu").show()
 		}
 	}
-	
 	drawDifficulty(){
 		this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
 			this.diffX, this.diffY,
@@ -591,7 +614,6 @@ class View{
 			this.taikoW, this.taikoH
 		)
 	}
-	
 	drawTime(){
 		var z = this.canvas.scale
 		var time = this.controller.getElapsedTime()
@@ -614,7 +636,6 @@ class View{
 		)
 		this.ctx.fillText(time.ms, this.winW - 10 * z, this.winH - 10 * z)
 	}
-	
 	drawBar(){
 		this.ctx.strokeStyle = "#000"
 		this.ctx.fillStyle = "#232323"
@@ -641,7 +662,6 @@ class View{
 			this.ctx.fill()
 			this.ctx.globalAlpha = 1
 		}
-		
 		this.ctx.stroke()
 		// Lyrics bar
 		this.ctx.fillStyle = "#888888"
@@ -651,7 +671,6 @@ class View{
 		this.ctx.fill()
 		this.ctx.stroke()
 	}
-	
 	drawSlot(){
 		// Main circle
 		this.ctx.fillStyle = "#6f6f6e"
@@ -659,7 +678,6 @@ class View{
 		this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI)
 		this.ctx.closePath()
 		this.ctx.fill()
-		
 		// Big stroke circle
 		this.ctx.strokeStyle = "#9e9f9f"
 		this.ctx.lineWidth = 3
@@ -667,7 +685,6 @@ class View{
 		this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI)
 		this.ctx.closePath()
 		this.ctx.stroke()
-		
 		// Bigger stroke circle
 		this.ctx.strokeStyle = "#6f6f6e"
 		this.ctx.lineWidth = 3
@@ -676,7 +693,6 @@ class View{
 		this.ctx.closePath()
 		this.ctx.stroke()
 	}
-	
 	drawTaikoSquare(){
 		// Taiko square
 		this.ctx.lineWidth = 7
@@ -688,13 +704,11 @@ class View{
 		this.ctx.closePath()
 		this.ctx.stroke()
 	}
-	
 	createAsset(image, position){
 		var asset = new CanvasAsset(this, image, position)
 		this.assets.push(asset)
 		return asset
 	}
-	
 	drawAssets(){
 		if(this.controller.multiplayer != 2){
 			this.assets.forEach(asset => {
@@ -702,7 +716,6 @@ class View{
 			})
 		}
 	}
-	
 	updateCombo(combo){
 		if(combo > 0 && combo % 10 == 0 && this.don.getAnimation() != "10combo"){
 			this.don.setAnimation("10combo")

public/src/views/scoresheet.html

-<div id='scoresheet'>
-	
-	<div id='top-part'>
+<div class="scoresheet">
+	<div class="top-part">
 		<h2 alt="成績発表" class="stroke-main result-title">成績発表</h2>
 		<h3 alt="" class="stroke-sub result-song"></h3>
 	</div>
-	
-	<div id='result-bar'>
-		
-		<img id='score-mark' />
-		
-		<div id='score-cont'>
-			<div id='score-hp-bar-bg'>
-				<div id='score-hp-bar-colour'>
+	<div class="result-bar">
+		<div class="score-cont">
+			<img class="score-mark" />
+			<div class="score-hp-bar-bg">
+				<div class="score-hp-bar-colour">
 					<img src="/assets/img/hp-bar-colour.png" />
 				</div>
 			</div> 
-		
-			<div id='score-points'></div>
-			<table id='score-details'>
+			<div class="score-points"></div>
+			<table class="score-details">
 				<tr>
-					<td class='floatLeft'>良</td><td class='value' id='nb-great'></td>
-					<td>最大コンボ数</td><td class='value' id='max-combo'></td>
+					<th class="header-great stroke-sub" alt="良">良</th>
+					<td class="value nb-great stroke-sub"></td>
+					<td class="stroke-sub" alt="最大コンボ数">最大コンボ数</td><td class="value max-combo stroke-sub"></td>
 				</tr>
 				<tr>
-					<td class='floatLeft'>可</td><td class='value' id='nb-good'></td>
-					<!--<td>連打数</td><td id='nb-rendasu'></td>-->
+					<th class="header-good stroke-sub" alt="可">可</th>
+					<td class="value nb-good stroke-sub"></td>
+					<!--<td class="stroke-sub" alt="連打数">連打数</td><td class="value nb-rendasu stroke-sub"></td>-->
 				</tr>
 				<tr>
-					<td class='floatLeft'>不可</td><td class='value' id='nb-fail'></td>
+					<th class="header-fail stroke-sub" alt="不可">不可</th>
+					<td class="value nb-fail stroke-sub"></td>
 					<td></td><td></td>
 				</tr>
 			</table>
 		</div>
 	</div>
-	
-	<div id='bottom-part'>
-		<div class='gradient-overlay'></div>
-		<button type='button' id='song-select'>Song select</button>
-		<button type='button' id='replay'>Replay</button>
+	<div class="bottom-part">
+		<div class="gradient-overlay"></div>
+		<button type="button" class="song-select">Song select</button>
+		<button type="button" class="replay">Replay</button>
 	</div>
-	
 </div>

server.py

@@ -4,9 +4,9 @@ import asyncio
 import websockets
 import json
 
-users = []
 server_status = {
-	"waiting": {}
+	"waiting": {},
+	"users": []
 }
 
 def msgobj(type, value=None):
@@ -25,7 +25,7 @@ def status_event():
 	return msgobj("users", value)
 
 async def notify_status():
-	ready_users = [user for user in users if "ws" in user and user["action"] == "ready"]
+	ready_users = [user for user in server_status["users"] if "ws" in user and user["action"] == "ready"]
 	if ready_users:
 		sent_msg = status_event()
 		await asyncio.wait([user["ws"].send(sent_msg) for user in ready_users])
@@ -36,7 +36,7 @@ async def connection(ws, path):
 		"ws": ws,
 		"action": "ready"
 	}
-	users.append(user)
+	server_status["users"].append(user)
 	try:
 		# Notify user about other users
 		await ws.send(status_event())
@@ -126,8 +126,8 @@ async def connection(ws, path):
 				elif action == "playing":
 					# Playing with another user
 					if "other_user" in user and "ws" in user["other_user"]:
-						if type == "note":
-							await user["other_user"]["ws"].send(msgobj("note", value))
+						if type == "note" or type == "drumroll" or type == "gameresults":
+							await user["other_user"]["ws"].send(msgobj(type, value))
 						if type == "gameend":
 							# User wants to disconnect
 							user["action"] = "ready"
@@ -151,7 +151,7 @@ async def connection(ws, path):
 	finally:
 		# User disconnected
 		del user["ws"]
-		del users[users.index(user)]
+		del server_status["users"][server_status["users"].index(user)]
 		if "other_user" in user and "ws" in user["other_user"]:
 			user["other_user"]["action"] = "ready"
 			await asyncio.wait([