Add balloon and drumroll notes

public/src/css/scoresheet.css

-#scoresheet{
-    width:100%;
+.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;
+	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.multiplayer != 2){
-				new Scoresheet(this, this.getGlobalScore())
+			if(this.mainLoopRunning){
+				this.stopMainLoop()
+				if(this.multiplayer != 2){
+					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", () => {
-			var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
-			taikoGame.run()
+			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/keyboard.js

@@ -91,7 +91,20 @@ function Keyboard(controller){
     
     this.checkKeySound = function(keyCode, sound){
         _this.checkKey(keyCode, "sound", function(){
-            assets.sounds["note_"+sound].play()
+            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

 class Mekadon{
-    constructor(controller, game){
-        this.controller = controller
-        this.game = game
-        this.lr = false
-        this.keys = {}
-    }
-    play(circle){
-        if(circle.getStatus() == 450){
-            return this.playNow(circle)
-        }
-    }
-    playAt(circle, ms, score){
-        var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
-        if(ms > currentMs - 10){
-            return this.playNow(circle, score)
-        }
-    }
-    miss(circle){
-        var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
-        if(0 > currentMs - 10){
-            this.controller.displayScore(0, true)
-            this.game.updateCurrentCircle()
-            this.game.updateCombo(0)
-            this.game.updateGlobalScore(0)
-            return true
-        }
-    }
-    playNow(circle, score){
-        var kbd = this.controller.getBindings()
-        if(circle.getType() == "don"){
-            this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"])
-            this.lr = !this.lr
-        }else if(circle.getType() == "daiDon"){
-            this.setKey(kbd["don_l"])
-            this.setKey(kbd["don_r"])
-            this.lr = false
-        }else if(circle.getType() == "ka"){
-            this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
-            this.lr = !this.lr
-        }else if(circle.getType() == "daiKa"){
-            this.setKey(kbd["ka_l"])
-            this.setKey(kbd["ka_r"])
-            this.lr = false
-        }
-        if(typeof score == "undefined"){
-            score = this.game.checkScore(circle)
-        }else{
-            this.controller.displayScore(score)
-            this.game.updateCombo(score)
-            this.game.updateGlobalScore(score)
-        }
-        circle.updateStatus(score)
-        circle.played(score)
-        this.game.updateCurrentCircle()
-        return true
-    }
-    setKey(keyCode){
-        var self = this
-        if(this.keys[keyCode]){
-            clearTimeout(this.keys[keyCode])
-            self.clearKey(keyCode)
-        }
-        this.controller.setKey(keyCode, true)
-        this.keys[keyCode] = setTimeout(function(){
-            self.clearKey(keyCode)
-        },100)
-    }
-    clearKey(keyCode){
-        this.controller.setKey(keyCode, false)
-        delete this.keys[keyCode]
-    }
+	constructor(controller, game){
+		this.controller = controller
+		this.game = game
+		this.lr = false
+		this.keys = {}
+		this.lastHit = -Infinity
+	}
+	play(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.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.getMS()
+		if(0 >= currentMs - 10){
+			this.controller.displayScore(0, true)
+			this.game.updateCurrentCircle()
+			this.game.updateCombo(0)
+			this.game.updateGlobalScore(0)
+			return true
+		}
+	}
+	playNow(circle, score){
+		var kbd = this.controller.getBindings()
+		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(type == "daiDon"){
+			this.setKey(kbd["don_l"])
+			this.setKey(kbd["don_r"])
+			this.lr = false
+		}else if(type == "ka"){
+			this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
+			this.lr = !this.lr
+		}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.lastHit = this.getMS()
+		return true
+	}
+	getMS(){
+		return this.controller.getElapsedTime().ms
+	}
+	setKey(keyCode){
+		var self = this
+		if(this.keys[keyCode]){
+			clearTimeout(this.keys[keyCode])
+			self.clearKey(keyCode)
+		}
+		this.controller.setKey(keyCode, true)
+		this.keys[keyCode] = setTimeout(function(){
+			self.clearKey(keyCode)
+		}, 100)
+	}
+	clearKey(keyCode){
+		this.controller.setKey(keyCode, false)
+		delete this.keys[keyCode]
+	}
 }

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/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"
+		}
+		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)
+		})
 	}
-	
-	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);
-		
+	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)
+		
+		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)
+		}
 	}
-	
-	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);
-    
-}
+}
\ No newline at end of file

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'>
-					<img  src="/assets/img/hp-bar-colour.png" />
+	<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>
+</div>
\ No newline at end of file

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([