Merge pull request #60 from LoveEevee/view-rewrite

View: Rewrite

public/src/css/game.css

@@ -1,9 +1,10 @@
 #game{
 	width: 100%;
 	height: 100%;
-	position: asbolute;
+	position: absolute;
 	overflow: hidden;
 	background-size: cover;
+	background-position: center;
 }
 #game.default-bg{
 	background-size: calc(100vh / 720 * 512);
@@ -70,7 +71,7 @@
 #touch-buttons{
 	display: none;
 	position: absolute;
-	top: 6.5vh;
+	top: 8vh;
 	right: 2vh;
 	opacity: 0.5;
 	z-index: 5;
@@ -79,6 +80,12 @@
 	width: 12.5vmin;
 	height: 12.5vmin;
 }
+.portrait #touch-buttons{
+	top: 11vh;
+}
+.touchp2 #touch-buttons{
+	top: -1.9vh;
+}
 .touch-visible #touch-drum,
 .touch-visible #touch-buttons{
 	display: block;

public/src/js/assets.js

@@ -2,20 +2,11 @@ var assets = {
 	"img": [
 		"title-screen.png",
 		"logo-big.png",
-		"don-0.png",
+		"notes.png",
-		"don-1.png",
+		"notes_drumroll.png",
-		"big-don-0.png",
+		"notes_hit.png",
-		"big-don-1.png",
 		"balloon.png",
 		"taiko.png",
-		"taiko-key-blue.png",
-		"taiko-key-red.png",
-		"hp-bar-bg.png",
-		"hp-bar-colour.png",
-		"score-0.png",
-		"score-0-b.png",
-		"score-230.png",
-		"score-450.png",
 		"dancing-don.gif",
 		"bg-pattern-1.png",
 		"muzu_easy.png",

public/src/js/canvasasset.js

@@ -27,6 +27,7 @@ class CanvasAsset{
 			}else{
 				frame = this.mod(this.animation, index)
 			}
+			this.ctx.save()
 			var pos = this.position(frame)
 			if(this.image){
 				this.ctx.drawImage(this.image,
@@ -35,9 +36,7 @@ class CanvasAsset{
 					pos.x, pos.y, pos.w, pos.h
 				)
 			}
-			if(pos.callback){
+			this.ctx.restore()
-				pos.callback()
-			}
 		}
 	}
 	mod(length, index){

public/src/js/canvascache.js

@@ -1,14 +1,17 @@
 class CanvasCache{
 	constructor(w, h, scale){
-		this.canvas = document.createElement("canvas")
-		this.ctx = this.canvas.getContext("2d")
-		this.map = new Map()
 		if(w){
 			this.resize(w, h, scale)
 		}
 	}
 	resize(w, h, scale){
+		if(this.canvas){
 			this.map.clear()
+		}else{
+			this.map = new Map()
+			this.canvas = document.createElement("canvas")
+			this.ctx = this.canvas.getContext("2d")
+		}
 		this.scale = scale
 		this.x = 0
 		this.y = 0
@@ -20,8 +23,11 @@ class CanvasCache{
 		this.canvas.height = this.h * this.scale
 		this.ctx.scale(this.scale, this.scale)
 	}
-	get(config, callback){
+	get(config, callback, setOnly){
 		var img = this.map.get(config.id)
+		if(img && setOnly || !img && !callback){
+			return
+		}
 		var saved = false
 		if(!img){
 			var w = config.w
@@ -50,6 +56,10 @@ class CanvasCache{
 			
 			callback(this.ctx)
 		}
+		if(setOnly){
+			this.ctx.restore()
+			return
+		}
 		var z = this.scale
 		config.ctx.drawImage(this.canvas,
 			img.x * z |0, img.y * z |0, img.w * z |0, img.h * z |0,
@@ -59,6 +69,9 @@ class CanvasCache{
 			this.ctx.restore()
 		}
 	}
+	set(config, callback){
+		return this.get(config, callback, true)
+	}
 	clean(){
 		delete this.map
 		delete this.ctx

public/src/js/canvasdraw.js

@@ -39,6 +39,13 @@
 		
 		this.crownPath = new Path2D("m82 21c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6C85 27 82 25 82 21ZM41.5 6c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6-2.5 0-5.5-2-5.5-6zM1 21C1 17 4 15 6.5 15 9 15 12 17 12 21 12 25 9 27 6.5 27 4 27 1 25 1 21Zm12 46h68l2 11H11ZM13 62 5 18 29 34 47 6 65 34 89 18 81 62Z")
 		
+		this.soulPath = new Path2D("m37 29c1-4 7 2 7 4 0 1-2 2-4 2-1 0-1-4-3-6zm-4-7c3 1 5 3 4 5-1 2-3 3-3 4 3-2 5-2 5-2 0 0-1 3-5 5-4 3-5-1-3-4 2-3 3-6 0-7zm-3 8c1 3-5 10 8 7 6-1 2-4 2-4 5 1 7 3 7 5 0 3-8 4-12 4-4 0-9-2-9-5 0 0 0-6-1-8 0-3 3-3 5 1zM20 23h8C27 27 20 44 9 42 18 36 23 28 21 26 19 24 20 23 20 23Zm0-6c4-2 9-4 14-2v2c-5 0-9 1-14 2zm8-7v12h-4c2-1 1-9-1-10zm-6 12c3 0 10-2 10-2 0 0 1-10 0-10-5 1-8 3-12 3 0 0 2 5 2 9zm0-12c0 0 6-1 9-3 3-2 9 3 8 6-1 3-2 6-4 9-2 2-15 2-15 2-1 0-3-7-2-11zM21 0c8 0 10 3 8 5 0 0-6 7-15 10C22 8 23 3 23 3 23 1 21 0 21 0ZM5 9c-1 3 2 6 4 6 5-1 13-6 4-7-3 0-5 5-8 1zm7 17c2-1 4-1 6 1 2 2 1 6-2 6-1 0-2-2-2-2-1-2-3-4-2-5zm2 4c-3 2-4 5-5 6-1 1-4 2-6-2-1-2 0-3 2-5l4-4c0-1-1 0-4 1-2 1-5-2-4-4 2-5 1 0 3-1 6-4 9-5 11-3 2 2 0 3-2 5-1 1-3 4-4 6 0 1 3-1 4-2")
+		
+		this.optionsPath = {
+			shadow: new Path2D("M4-1V8H9V0l1-1 3 6v4l-4 5v10l4 5v4l-2 4-2 1V30H4L5 37 3 38 0 33V29L4 24V14L0 9V5L3 0Z"),
+			main: new Path2D("M4 0V8H9V0h1l3 5v4l-4 5v10l4 5v4l-3 5H9V30H4v8H3L0 33V29L4 24V14L0 9V5L3 0Z")
+		}
+		
 		this.regex = {
 			comma: /[,.]/,
 			ideographicComma: /[、。]/,
@@ -76,11 +83,25 @@
 		var h = config.h
 		var r = config.radius
 		ctx.beginPath()
-		ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
+		this.roundedCorner(ctx, x, y, r, 0)
-		ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, 0)
+		this.roundedCorner(ctx, x + w, y, r, 1)
-		ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2)
+		this.roundedCorner(ctx, x + w, y + h, r, 2)
-		ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI)
+		this.roundedCorner(ctx, x, y + h, r, 3)
-		ctx.lineTo(x, y + r)
+		ctx.closePath()
+	}
+	
+	roundedCorner(ctx, x, y, r, rotation){
+		var pi = Math.PI
+		switch(rotation){
+			case 0:
+				return ctx.arc(x + r, y + r, r, pi, pi / -2)
+			case 1:
+				return ctx.arc(x - r, y + r, r, pi / -2, 0)
+			case 2:
+				return ctx.arc(x - r, y - r, r, 0, pi / 2)
+			case 3:
+				return ctx.arc(x + r, y - r, r, pi / 2, pi)
+		}
 	}
 	
 	songFrame(config){
@@ -428,6 +449,9 @@
 		}
 		
 		ctx.translate(config.x, config.y)
+		if(config.scale){
+			ctx.scale(config.scale[0], config.scale[1])
+		}
 		var scale = 1
 		if(config.width && drawnWidth > config.width){
 			scale = config.width / drawnWidth
@@ -438,7 +462,13 @@
 		ctx.textAlign = "center"
 		
 		for(let layer of layers){
+			var savedLayer = false
 			var action = "strokeText"
+			if(layer.scale){
+				savedLayer = true
+				ctx.save()
+				ctx.scale(layer.scale[0], layer.scale[1])
+			}
 			if(layer.outline){
 				ctx.strokeStyle = layer.outline
 				ctx.lineJoin = "round"
@@ -452,7 +482,10 @@
 				action = "fillText"
 			}
 			if(layer.shadow){
+				if(!savedLayer){
+					savedLayer = true
 					ctx.save()
+				}
 				this.shadow({
 					ctx: ctx,
 					fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")",
@@ -501,7 +534,7 @@
 				}
 				offsetX += symbol.w * mul
 			}
-			if(layer.shadow){
+			if(savedLayer){
 				ctx.restore()
 			}
 		}
@@ -538,6 +571,8 @@
 	diffOptionsIcon(config){
 		var ctx = config.ctx
 		ctx.save()
+		
+		if(config.iconName === "back"){
 			ctx.translate(config.x - 21, config.y - 21)
 			
 			var drawLine = y => {
@@ -574,6 +609,21 @@
 			ctx.globalCompositeOperation = "darken"
 			drawLine(11)
 			drawTriangle()
+		}else if(config.iconName === "options"){
+			ctx.translate(config.x, config.y)
+			ctx.rotate(-55 * Math.PI / 180)
+			ctx.translate(-6, -20)
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = 6
+			ctx.stroke(this.optionsPath.main)
+			ctx.translate(-2, 2)
+			ctx.stroke(this.optionsPath.main)
+			ctx.fillStyle = "#7e7c76"
+			ctx.fill(this.optionsPath.shadow)
+			ctx.translate(2, -2)
+			ctx.fillStyle = "#d9d6ce"
+			ctx.fill(this.optionsPath.main)
+		}
 		
 		ctx.restore()
 	}
@@ -676,9 +726,13 @@
 			ctx.scale(1 / mul, 1 / mul)
 		}
 		ctx.fillStyle = ctx.createPattern(config.img, "repeat")
+		if(config.shape){
+			config.shape(ctx, mul)
+		}else{
 			ctx.beginPath()
 			ctx.rect(config.x * mul, config.y * mul, config.w * mul, config.h * mul)
-		ctx.translate(config.dx, config.dy)
+		}
+		ctx.translate(config.dx * mul, config.dy * mul)
 		ctx.fill()
 		
 		ctx.restore()
@@ -692,6 +746,9 @@
 		if(config.scale){
 			ctx.scale(config.scale, config.scale)
 		}
+		if(config.align === "center"){
+			ctx.translate(config.score === "bad" ? -49 / 2 : -23 / 2, 0)
+		}
 		ctx.strokeStyle = "#000"
 		ctx.lineWidth = 7
 		if(config.score === "good"){
@@ -790,6 +847,160 @@
 		ctx.restore()
 	}
 	
+	gauge(config){
+		var ctx = config.ctx
+		ctx.save()
+		
+		ctx.translate(config.x, config.y)
+		if(config.scale){
+			ctx.scale(config.scale, config.scale)
+		}
+		ctx.translate(-788, 0)
+		
+		var firstTop = config.multiplayer ? 0 : 30
+		var secondTop = config.multiplayer ? 0 : 8
+		
+		var cleared = config.percentage - 1 / 50 >= config.clear
+		
+		var gaugeW = 14 * 50
+		var gaugeClear = gaugeW * config.clear
+		var gaugeFilled = gaugeW * config.percentage
+		
+		ctx.fillStyle = "#000"
+		ctx.beginPath()
+		if(config.scoresheet){
+			ctx.moveTo(-4, 26)
+			ctx.lineTo(gaugeClear - 4, 26)
+			this.roundedCorner(ctx, gaugeClear - 4, 4, 13, 0)
+			this.roundedCorner(ctx, 760, 4, 13, 1)
+			ctx.lineTo(760, 56)
+			ctx.lineTo(-4, 56)
+		}else if(config.multiplayer){
+			ctx.moveTo(gaugeClear - 7, 27)
+			ctx.lineTo(788, 27)
+			ctx.lineTo(788, 52)
+			this.roundedCorner(ctx, gaugeClear - 7, 52, 18, 3)
+		}else{
+			ctx.moveTo(gaugeClear - 7, 24)
+			this.roundedCorner(ctx, gaugeClear - 7, 0, 18, 0)
+			ctx.lineTo(788, 0)
+			ctx.lineTo(788, 24)
+		}
+		ctx.fill()
+		
+		if(gaugeFilled <= gaugeClear){
+			ctx.fillStyle = "#680000"
+			var x = Math.max(0, gaugeFilled - 5)
+			ctx.fillRect(x, firstTop, gaugeClear - x + 2, 22)
+		}
+		if(gaugeFilled > 0){
+			var w = Math.min(gaugeClear + 1, gaugeFilled - 4)
+			ctx.fillStyle = "#ff3508"
+			ctx.fillRect(0, firstTop + 2, w, 20)
+			ctx.fillStyle = "#ff9e94"
+			ctx.fillRect(0, firstTop, w, 3)
+		}
+		if(gaugeFilled < gaugeW - 4){
+			ctx.fillStyle = "#684c00"
+			var x = Math.max(gaugeClear + 9, gaugeFilled - gaugeClear + 9)
+			ctx.fillRect(x, secondTop, gaugeW - 4 - x, 44)
+		}
+		if(gaugeFilled > gaugeClear + 14){
+			var w = Math.min(gaugeW - 4, gaugeFilled - gaugeClear - 14)
+			ctx.fillStyle = "#ff0"
+			ctx.fillRect(gaugeClear + 9, secondTop + 2, w, 42)
+			ctx.fillStyle = "#fff"
+			ctx.fillRect(gaugeClear + 9, secondTop, w, 3)
+		}
+		ctx.fillStyle = cleared ? "#ff0" : "#684c00"
+		ctx.beginPath()
+		if(config.multiplayer){
+			this.roundedCorner(ctx, gaugeClear, secondTop + 44, 10, 3)
+			ctx.lineTo(gaugeClear, secondTop)
+			ctx.lineTo(gaugeClear + 10, secondTop)
+		}else{
+			ctx.moveTo(gaugeClear, secondTop + 44)
+			this.roundedCorner(ctx, gaugeClear, secondTop, 10, 0)
+			ctx.lineTo(gaugeClear + 10, secondTop + 44)
+		}
+		ctx.fill()
+		if(cleared){
+			ctx.save()
+			ctx.clip()
+			ctx.fillStyle = "#fff"
+			ctx.fillRect(gaugeClear, secondTop, 10, 3)
+			ctx.restore()
+		}
+		
+		ctx.strokeStyle = "rgba(0, 0, 0, 0.16)"
+		ctx.beginPath()
+		ctx.lineWidth = 5
+		for(var i = 0; i < 49; i++){
+			var x = 14 + i * 14 - ctx.lineWidth / 2
+			if(i === 26){
+				ctx.stroke()
+				ctx.beginPath()
+				ctx.lineWidth = 4
+			}
+			ctx.moveTo(x, x < gaugeClear ? firstTop : secondTop)
+			ctx.lineTo(x, x < gaugeClear ? firstTop + 22 : secondTop + 44)
+		}
+		ctx.stroke()
+		this.layeredText({
+			ctx: ctx,
+			text: "クリア",
+			fontSize: 18,
+			fontFamily: config.font,
+			x: gaugeClear - 6,
+			y: config.multiplayer ? 22 : 11,
+			letterSpacing: -2
+		}, [
+			{scale: [1.1, 1.01], outline: "#000", letterBorder: 6},
+			{scale: [1.11, 1], fill: cleared ? "#fff" : "#737373"}
+		])
+		
+		ctx.restore()
+	}
+	
+	soul(config){
+		var ctx = config.ctx
+		ctx.save()
+		
+		ctx.translate(config.x, config.y)
+		if(config.scale){
+			ctx.scale(config.scale, config.scale)
+		}
+		ctx.translate(-23, -21)
+		
+		ctx.fillStyle = config.cleared ? "#fff" : "#737373"
+		ctx.fill(this.soulPath)
+		
+		ctx.restore()
+	}
+	
+	slot(ctx, x, y, size){
+		var mul = size / 106
+		
+		ctx.save()
+		ctx.globalAlpha = 0.7
+		ctx.globalCompositeOperation = "screen"
+		ctx.fillStyle = "#444544"
+		ctx.beginPath()
+		ctx.arc(x, y, 26 * mul, 0, Math.PI * 2)
+		ctx.fill()
+		ctx.lineWidth = 3
+		ctx.strokeStyle = "#9c9e9c"
+		ctx.beginPath()
+		ctx.arc(x, y, 33.5 * mul, 0, Math.PI * 2)
+		ctx.stroke()
+		ctx.lineWidth = 3.5
+		ctx.strokeStyle = "#5d5e5d"
+		ctx.beginPath()
+		ctx.arc(x, y, 51.5 * mul, 0, Math.PI * 2)
+		ctx.stroke()
+		ctx.restore()
+	}
+	
 	alpha(amount, ctx, callback){
 		if(amount >= 1){
 			return callback(ctx)

public/src/js/controller.js

@@ -81,6 +81,17 @@ class Controller{
 					if(this.syncWith){
 						this.syncWith.mainLoop()
 					}
+					
+					if(this.scoresheet){
+						if(this.view.ctx){
+							this.view.ctx.save()
+							this.view.ctx.setTransform(1, 0, 0, 1, 0, 0)
+						}
+						this.scoresheet.redraw()
+						if(this.view.ctx){
+							this.view.ctx.restore()
+						}
+					}
 				})
 			}
 			var ms = this.game.elapsedTime
@@ -104,10 +115,6 @@ class Controller{
 				this.view.refresh()
 			}
 			this.keyboard.checkMenuKeys()
-			
-			if(this.scoresheet){
-				this.scoresheet.redraw()
-			}
 		}
 	}
 	togglePauseMenu(){
@@ -117,11 +124,13 @@ class Controller{
 	gameEnded(){
 		var score = this.getGlobalScore()
 		var vp
+		if(Math.round(score.gauge / 2) - 1 >= 25){
 			if(score.bad === 0){
 				vp = "fullcombo"
 				this.playSoundMeka("fullcombo", 1.350)
-		}else if(score.gauge >= 50){
+			}else{
 				vp = "clear"
+			}
 		}else{
 			vp = "fail"
 		}
@@ -132,8 +141,8 @@ class Controller{
 			this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
 		}
 	}
-	displayScore(score, notPlayed){
+	displayScore(score, notPlayed, bigNote){
-		this.view.displayScore(score, notPlayed)
+		this.view.displayScore(score, notPlayed, bigNote)
 	}
 	songSelection(fadeIn){
 		if(!fadeIn){

public/src/js/debug.js

@@ -117,6 +117,10 @@ class Debug{
 						break
 					}
 				}
+				if(game.mainMusicPlaying){
+					game.mainMusicPlaying = false
+					game.mainAsset.stop()
+				}
 			}
 			this.autoplayCheckbox.checked = this.controller.autoPlayEnabled
 		}

public/src/js/element.js

@@ -1,49 +0,0 @@
-function element(){
-	var parent
-	var lasttag
-	var createdtag
-	var toreturn={}
-	for(var i=0;i<arguments.length;i++){
-		var current=arguments[i]
-		if(current){
-			if(current.nodeType){
-				parent=lasttag=current
-			}else if(Array.isArray(current)){
-				lasttag=parent
-				for(var j=0;j<current.length;j++){
-					if(current[j]){
-						if(j==0&&typeof current[j]=="string"){
-							var tagname=current[0].split("#")
-							lasttag=createdtag=document.createElement(tagname[0])
-							if(tagname[1]){
-								toreturn[tagname[1]]=createdtag
-							}
-						}else if(current[j].constructor==Object){
-							if(lasttag){
-								for(var value in current[j]){
-									if(value!="style"&&value in lasttag){
-										lasttag[value]=current[j][value]
-									}else{
-										lasttag.setAttribute(value,current[j][value])
-									}
-								}
-							}
-						}else{
-							var returned=element(lasttag,current[j])
-							for(var k in returned){
-								toreturn[k]=returned[k]
-							}
-						}
-					}
-				}
-			}else if(current){
-				createdtag=document.createTextNode(current)
-			}
-			if(parent&&createdtag){
-				parent.appendChild(createdtag)
-			}
-			createdtag=0
-		}
-	}
-	return toreturn
-}

public/src/js/game.js

@@ -116,9 +116,6 @@ class Game{
 			}
 		}
 	}
-	setHPGain(gain){
-		this.HPGain = gain
-	}
 	checkPlays(){
 		var circles = this.songData.circles
 		var circle = circles[this.currentCircle]
@@ -200,14 +197,15 @@ class Game{
 				if(circleStatus === 230 || circleStatus === 450){
 					score = circleStatus
 				}
-				this.controller.displayScore(score)
+				circle.played(score, score === 0 ? typeDai : keyDai)
+				this.controller.displayScore(score, false, typeDai && keyDai)
 			}else{
-				this.controller.displayScore(score, true)
+				circle.played(-1, typeDai)
+				this.controller.displayScore(score, true, false)
 			}
 			this.updateCombo(score)
 			this.updateGlobalScore(score, typeDai && keyDai ? 2 : 1, circle.gogoTime)
 			this.updateCurrentCircle()
-			circle.played(score, score === 0 ? typeDai : keyDai)
 			if(this.controller.multiplayer == 1){
 				p2.send("note", {
 					score: score,

public/src/js/keyboard.js

@@ -111,7 +111,7 @@ class Keyboard{
 				this.controller.togglePauseMenu()
 				for(var key in this.keyTime){
 					this.keys[key] = null
-					this.keyTime[key] = null
+					this.keyTime[key] = -Infinity
 				}
 			})
 			var moveMenuMinus = () => {

public/src/js/loadsong.js

@@ -94,7 +94,7 @@ class loadSong{
 					this.clean()
 					loader.changePage("game")
 					var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
-					var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2)
+					var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2, this.touchEnabled)
 					taikoGame1.run(taikoGame2)
 				}
 			})

public/src/js/scalablecanvas.js

@@ -1,42 +0,0 @@
-class ScalableCanvas{
-	constructor(id, width, height, noStyle){
-		var oldCanvas = document.getElementById(id)
-		if(oldCanvas){
-			this.canvas = oldCanvas
-		}else{
-			this.canvas = document.createElement("canvas")
-			this.canvas.id = id
-		}
-		this.ctx = this.canvas.getContext("2d")
-		this.rescale()
-		this.resize(width, height, noStyle)
-	}
-	resize(width, height, noStyle){
-		if(width != this.width || height != this.height){
-			this.width = width
-			this.height = height
-			this.scaledWidth = width * this.scale
-			this.canvas.width = this.scaledWidth
-			this.scaledHeight = height * this.scale
-			this.canvas.height = this.scaledHeight
-			if(noStyle || this.scale == 1){
-				if(this.canvas.style.width){
-					this.canvas.style.width = ""
-				}
-				if(this.canvas.style.height){
-					this.canvas.style.height = ""
-				}
-			}else{
-				this.canvas.style.width = width + "px"
-				this.canvas.style.height = height + "px"
-			}
-		}
-	}
-	rescale(){
-		var scale = window.devicePixelRatio || 1
-		if(scale != this.scale){
-			this.ctx.scale(scale, scale)
-			this.scale = scale
-		}
-	}
-}

public/src/js/scoresheet.js

@@ -416,16 +416,25 @@ class Scoresheet{
 					results = p2.results
 					ctx.translate(0, p2Offset)
 				}
-				ctx.drawImage(assets.image["hp-bar-bg"],
+				var gaugePercent = Math.round(results.gauge / 2) / 50
-					552, 120, 688, 48
+				var w = 712
-				)
+				this.draw.gauge({
-				var gauge = results.gauge / 100
+					ctx: ctx,
-				if(gauge > 0){
+					x: 558 + w,
-					ctx.drawImage(assets.image["hp-bar-colour"],
+					y: 116,
-						0, 0, 650 * gauge, 40,
+					clear: 25 / 50,
-						557, 127, 635 * gauge, 37,
+					percentage: gaugePercent,
-					)
+					font: this.font,
-				}
+					scale: w / 788,
+					scoresheet: true
+				})
+				this.draw.soul({
+					ctx: ctx,
+					x: 1215,
+					y: 144,
+					scale: 36 / 42,
+					cleared: gaugePercent - 1 / 50 >= 25 / 50
+				})
 			}
 			ctx.restore()
 		}
@@ -441,10 +450,8 @@ class Scoresheet{
 					results = p2.results
 				}
 				var crownType = null
-				if(results.bad === "0"){
+				if(Math.round(results.gauge / 2) - 1 >= 25){
-					crownType = "gold"
+					crownType = results.bad === "0" ? "gold" : "silver"
-				}else if(results.gauge >= 50){
-					crownType = "silver"
 				}
 				if(crownType !== null){
 					noCrownResultWait = 0;

public/src/js/songselect.js

@@ -156,6 +156,21 @@ class SongSelect{
 			letterBorder: 12
 		}
 		
+		this.diffOptions = [{
+			text: "もどる",
+			fill: "#efb058",
+			iconName: "back",
+			iconFill: "#f7d39c",
+			letterSpacing: 4
+		}, {
+			text: "演奏オプション",
+			fill: "#b2e442",
+			iconName: "options",
+			iconFill: "#d9f19f",
+			letterSpacing: 0
+		}]
+		this.optionsList = ["なし", "オート", "ネットプレイ"]
+		
 		this.draw = new CanvasDraw()
 		this.songTitleCache = new CanvasCache()
 		this.selectTextCache = new CanvasCache()
@@ -185,7 +200,7 @@ class SongSelect{
 			this.playBgm(false)
 		}
 		if("selectedDiff" in localStorage){
-			this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
+			this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), this.diffOptions.length + 3)
 		}
 		
 		this.songSelect = document.getElementById("song-select")
@@ -202,7 +217,8 @@ class SongSelect{
 			ura: 0,
 			moveHover: null,
 			locked: true,
-			hasPointer: false
+			hasPointer: false,
+			options: 0
 		}
 		this.songSelecting = {
 			speed: 800,
@@ -218,6 +234,8 @@ class SongSelect{
 			"8": ["a"],
 			"37": ["l", "lb", "lt", "lsl"],
 			"39": ["r", "rb", "rt", "lsr"],
+			"38": ["u", "lsu"],
+			"40": ["d", "lsd"],
 			"ctrl": ["y"],
 			"shift": ["x"]
 		})
@@ -259,10 +277,14 @@ class SongSelect{
 			// Enter, Space, F, J
 			cancel: code == 27 || code == 8,
 			// Esc, Backspace
-			left: code == 68,
+			left: code == 37 || code == 68,
 			// Left, D
-			right: code == 75
+			right: code == 39 || code == 75,
 			// Right, K
+			up: code == 38,
+			// Up
+			down: code == 40
+			// Down
 		}
 		if(key.cancel && event){
 			event.preventDefault()
@@ -281,8 +303,10 @@ class SongSelect{
 			if(key.confirm){
 				if(this.selectedDiff === 0){
 					this.toSongSelect()
+				}else if(this.selectedDiff === 1){
+					this.toOptions(1)
 				}else{
-					this.toLoadSong(this.selectedDiff - 1, modifiers.shift, modifiers.ctrl)
+					this.toLoadSong(this.selectedDiff - this.diffOptions.length, modifiers.shift, modifiers.ctrl)
 				}
 			}else if(key.cancel){
 				this.toSongSelect()
@@ -290,6 +314,8 @@ class SongSelect{
 				this.moveToDiff(-1)
 			}else if(key.right){
 				this.moveToDiff(1)
+			}else if(this.selectedDiff === 1 && (key.up || key.down)){
+				this.toOptions(key.up ? -1 : 1)
 			}
 		}
 	}
@@ -319,20 +345,21 @@ class SongSelect{
 			}
 		}else if(this.state.screen === "difficulty"){
 			var moveBy = this.diffSelMouse(mouse.x, mouse.y)
-			if(
+			if(mouse.x < 55 || mouse.x > 967 || mouse.y < 40 || mouse.y > 540){
-				moveBy === 0
-				|| mouse.x < 55 || mouse.x > 967
-				|| mouse.y < 40 || mouse.y > 540
-			){
 				this.toSongSelect()
-			}else if(moveBy === 5){
+			}else if(moveBy === 0){
+				this.selectedDiff = 0
+				this.toSongSelect()
+			}else if(moveBy === 1){
+				this.toOptions(1)
+			}else if(moveBy === this.diffOptions.length + 4){
 				this.state.ura = !this.state.ura
 				assets.sounds["ka"].play()
-				if(this.selectedDiff === 5 && !this.state.ura){
+				if(this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura){
 					this.state.move = -1
 				}
 			}else if(moveBy !== null){
-				this.toLoadSong(moveBy - 1, shift, ctrl, touch)
+				this.toLoadSong(moveBy - this.diffOptions.length, shift, ctrl, touch)
 			}
 		}
 	}
@@ -393,12 +420,12 @@ class SongSelect{
 	}
 	diffSelMouse(x, y){
 		if(this.state.locked === 0){
-			if(100 < x && x < 160 && 120 < y && y < 420){
+			if(95 < x && x < 239 && 118 < y && y < 422){
-				return 0
+				return Math.floor((x - 95) / ((239 - 95) / 2))
 			}else if(422 < x && x < 922 && 95 < y && y < 524){
-				var moveBy = Math.floor((x - 422) / ((922 - 422) / 5)) + 1
+				var moveBy = Math.floor((x - 422) / ((922 - 422) / 5)) + this.diffOptions.length
 				var currentSong = this.songs[this.selectedSong]
-				if(this.state.ura && moveBy === 4 || currentSong.stars[moveBy - 1]){
+				if(this.state.ura && moveBy === this.diffOptions + 3 || currentSong.stars[moveBy - this.diffOptions.length]){
 					return moveBy
 				}
 			}
@@ -451,8 +478,8 @@ class SongSelect{
 				this.state.locked = true
 				this.state.moveHover = null
 				this.state.ura = 0
-				if(this.selectedDiff === 5){
+				if(this.selectedDiff === this.diffOptions.length + 4){
-					this.selectedDiff = 4
+					this.selectedDiff = this.diffOptions.length + 3
 				}
 				
 				assets.sounds["don"].play()
@@ -497,11 +524,22 @@ class SongSelect{
 		assets.sounds["don"].play()
 		
 		localStorage["selectedSong"] = this.selectedSong
-		localStorage["selectedDiff"] = difficulty + 1
+		localStorage["selectedDiff"] = difficulty + this.diffOptions.length
 		
 		if(difficulty === 3 && this.state.ura){
 			difficulty = 4
 		}
+		var autoplay = false
+		var multiplayer = false
+		if(this.state.options === 1){
+			autoplay = true
+		}else if(this.state.options === 2){
+			multiplayer = true
+		}else if(shift){
+			autoplay = shift
+		}else{
+			multiplayer = ctrl
+		}
 		
 		new loadSong({
 			"title": selectedSong.title,
@@ -510,7 +548,12 @@ class SongSelect{
 			"category": selectedSong.category,
 			"type": selectedSong.type,
 			"offset": selectedSong.offset
-		}, shift, ctrl, touch)
+		}, autoplay, multiplayer, touch)
+	}
+	toOptions(moveBy){
+		assets.sounds["ka"].play()
+		this.selectedDiff = 1
+		this.state.options = this.mod(this.optionsList.length, this.state.options + moveBy)
 	}
 	toTitleScreen(){
 		assets.sounds["cancel"].play()
@@ -745,25 +788,25 @@ class SongSelect{
 				do{
 					if(hasUra && this.state.move > 0){
 						this.selectedDiff += this.state.move
-						if(this.selectedDiff > 5){
+						if(this.selectedDiff > this.diffOptions.length + 4){
 							this.state.ura = !this.state.ura
 							if(this.state.ura){
-								this.selectedDiff = previousSelection === 4 ? 5 : previousSelection
+								this.selectedDiff = previousSelection === this.diffOptions.length + 3 ? this.diffOptions.length + 4 : previousSelection
 								break
 							}else{
 								this.state.move = -1
 							}
 						}
 					}else{
-						this.selectedDiff = this.mod(6, this.selectedDiff + this.state.move)
+						this.selectedDiff = this.mod(this.diffOptions.length + 5, this.selectedDiff + this.state.move)
 					}
 				}while(
-					this.selectedDiff !== 0 && !currentSong.stars[this.selectedDiff - 1]
+					this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]
-					|| this.selectedDiff === 4 && this.state.ura
+					|| this.selectedDiff === this.diffOptions.length + 3 && this.state.ura
-					|| this.selectedDiff === 5 && !this.state.ura
+					|| this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura
 				)
 				this.state.move = 0
-			}else if(!currentSong.stars[this.selectedDiff - 1]){
+			}else if(this.selectedDiff < 0 || this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]){
 				this.selectedDiff = 0
 			}
 		}
@@ -897,9 +940,11 @@ class SongSelect{
 					})
 					var opened = 1
 					var songSel = false
-					var _x = x + 62
+					
+					for(var i = 0; i < this.diffOptions.length; i++){
+						var _x = x + 62 + i * 72
 						var _y = y + 67
-					ctx.fillStyle = "#efb058"
+						ctx.fillStyle = this.diffOptions[i].fill
 						ctx.lineWidth = 5
 						this.draw.roundedRect({
 							ctx: ctx,
@@ -911,19 +956,25 @@ class SongSelect{
 						})
 						ctx.fill()
 						ctx.stroke()
-					ctx.fillStyle = "#f7d39c"
+						ctx.fillStyle = this.diffOptions[i].iconFill
 						ctx.beginPath()
 						ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
 						ctx.fill()
 						this.draw.diffOptionsIcon({
 							ctx: ctx,
 							x: _x,
-						y: _y + 28
+							y: _y + 28,
+							iconName: this.diffOptions[i].iconName
 						})
 						
+						var text = this.diffOptions[i].text
+						if(this.diffOptions[i].iconName === "options" && (this.selectedDiff === i || this.state.options !== 0)){
+							text = this.optionsList[this.state.options]
+						}
+						
 						this.draw.verticalText({
 							ctx: ctx,
-						text: "もどる",
+							text: text,
 							x: _x,
 							y: _y + 57,
 							width: 56,
@@ -934,12 +985,13 @@ class SongSelect{
 							letterBorder: 4,
 							fontSize: 28,
 							fontFamily: this.font,
-						letterSpacing: 4
+							letterSpacing: this.diffOptions[i].letterSpacing
 						})
+						
 						var highlight = 0
-					if(this.state.moveHover === 0){
+						if(this.state.moveHover === i){
 							highlight = 2
-					}else if(this.selectedDiff === 0){
+						}else if(this.selectedDiff === i){
 							highlight = 1
 						}
 						if(highlight){
@@ -954,7 +1006,7 @@ class SongSelect{
 								opacity: highlight === 2 ? 0.8 : 1,
 								radius: 24
 							})
-						if(this.selectedDiff === 0){
+							if(this.selectedDiff === i && !this.touchEnabled){
 								this.draw.diffCursor({
 									ctx: ctx,
 									font: this.font,
@@ -964,6 +1016,7 @@ class SongSelect{
 							}
 						}
 					}
+				}
 				var drawDifficulty = (ctx, i, currentUra) => {
 					if(currentSong.stars[i] || currentUra){
 						if(songSel){
@@ -1057,8 +1110,8 @@ class SongSelect{
 								})
 							}
 						}
-						var currentDiff = this.selectedDiff - 1
+						var currentDiff = this.selectedDiff - this.diffOptions.length
-						if(this.selectedDiff === 5){
+						if(this.selectedDiff === 4 + this.diffOptions.length){
 							currentDiff = 3
 						}
 						if(i === currentSong.p2Cursor){
@@ -1074,12 +1127,12 @@ class SongSelect{
 						}
 						if(!songSel){
 							var highlight = 0
-							if(this.state.moveHover - 1 === i){
+							if(this.state.moveHover - this.diffOptions.length === i){
 								highlight = 2
 							}else if(currentDiff === i){
 								highlight = 1
 							}
-							if(currentDiff === i){
+							if(currentDiff === i && !this.touchEnabled){
 								this.draw.diffCursor({
 									ctx: ctx,
 									font: this.font,

public/src/js/viewassets.js

@@ -9,17 +9,17 @@ class ViewAssets{
 			var imgw = 360
 			var imgh = 184
 			var scale = 165
-			var w = (this.view.barH * imgw) / scale
+			var w = imgw
-			var h = (this.view.barH * imgh) / scale
+			var h = imgh
 			return {
 				sx: Math.floor(frame / 10) * imgw,
-				sy: (frame % 10) * imgh,
+				sy: (frame % 10) * imgh + 1,
 				sw: imgw,
-				sh: imgh,
+				sh: imgh - 1,
-				x: this.view.taikoSquareW - w + this.view.barH * 0.2,
+				x: view.portrait ? -60 : 0,
-				y: this.view.barY - h,
+				y: view.portrait ? (view.multiplayer === 2 ? 560 : 35) : (view.multiplayer === 2 ? 360 : 2),
 				w: w,
-				h: h
+				h: h - 1
 			}
 		})
 		this.don.addFrames("normal", [
@@ -41,7 +41,7 @@ class ViewAssets{
 				var length = this.don.getAnimationLength("gogo")
 				this.don.setUpdateSpeed(4 / length)
 				this.don.setAnimation("gogo")
-			}else if(this.controller.getGlobalScore().gauge >= 50){
+			}else if(Math.round(this.controller.getGlobalScore().gauge / 2) - 1 >= 25){
 				this.don.setAnimationStart(0)
 				var length = this.don.getAnimationLength("clear")
 				this.don.setUpdateSpeed(2 / length)
@@ -58,31 +58,31 @@ class ViewAssets{
 		this.fire = this.createAsset("bar", frame => {
 			var imgw = 360
 			var imgh = 370
-			var scale = 175
+			var scale = 130
-			var ms = this.controller.getElapsedTime()
+			var ms = this.view.getMS()
 			var elapsed = ms - this.view.gogoTimeStarted
+			
+			var mul = this.view.slotPos.size / 106
+			var barH = 130 * mul
+			
 			if(this.view.gogoTime){
 				var grow = 3 - Math.min(200, elapsed) / 100
 				this.ctx.globalAlpha = Math.min(200, elapsed) / 200
 			}else{
 				var grow = 1 - Math.min(100, elapsed) / 100
 			}
-			var w = (this.view.barH * imgw) / scale * grow
+			var w = (barH * imgw) / scale * grow
-			var h = (this.view.barH * imgh) / scale * grow
+			var h = (barH * imgh) / scale * grow
 			this.ctx.globalCompositeOperation = "lighter"
 			return {
 				sx: frame * imgw,
 				sy: 0,
 				sw: imgw,
 				sh: imgh,
-				x: this.view.slotX - w / 2,
+				x: this.view.slotPos.x - w / 2,
-				y: this.view.circleY - h / 2,
+				y: this.view.slotPos.y - h / 2,
 				w: w,
-				h: h,
+				h: h
-				callback: () => {
-					this.ctx.globalCompositeOperation = "source-over"
-					this.ctx.globalAlpha = 1
-				}
 			}
 		})
 		this.fire.addFrames("normal", 7, "fire_anim")
@@ -93,15 +93,17 @@ class ViewAssets{
 				var imgw = 230
 				var imgh = 460
 				var scale = 165
-				var w = (this.view.barH * imgw) / scale
+				var w = imgw
-				var h = (this.view.barH * imgh) / scale
+				var h = imgh
+				var winW = this.view.winW / this.view.ratio
+				var winH = this.view.winH / this.view.ratio
 				return {
 					sx: Math.floor(frame / 4) * imgw,
 					sy: (frame % 4) * imgh,
 					sw: imgw,
 					sh: imgh,
-					x: this.view.winW / 4 * i - w / 2 * (i / 2),
+					x: winW / 4 * i - w / 2 * (i / 2),
-					y: this.view.winH - h,
+					y: winH - h,
 					w: w,
 					h: h
 				}
@@ -118,17 +120,22 @@ class ViewAssets{
 		return asset
 	}
 	drawAssets(layer){
-		if(this.controller.multiplayer !== 2 || layer === "bar"){
 		this.allAssets.forEach(asset => {
 			if(layer === asset.layer){
 				asset.draw()
 			}
 		})
 	}
-	}
 	changeBeatInterval(beatMS, initial){
 		this.allAssets.forEach(asset => {
 			asset.changeBeatInterval(beatMS, initial)
 		})
 	}
+	clean(){
+		delete this.ctx
+		delete this.don
+		delete this.fire
+		delete this.fireworks
+		delete this.allAssets
+	}
 }

public/src/views/game.html

@@ -1,5 +1,4 @@
 <div id="game">
-	<h3 alt="" class="stroke-sub game-song"></h3>
 	<div id="touch-drum">
 		<img id="touch-drum-img" src="/assets/img/touch_drum.png">
 	</div>

templates/index.html

@@ -39,8 +39,6 @@
 	<script src="/src/js/mekadon.js?{{version.commit_short}}"></script>
 	<script src="/src/js/gamepad.js?{{version.commit_short}}"></script>
 	<script src="/src/js/tutorial.js?{{version.commit_short}}"></script>
-	<script src="/src/js/scalablecanvas.js?{{version.commit_short}}"></script>
-	<script src="/src/js/element.js?{{version.commit_short}}"></script>
 	<script src="/src/js/soundbuffer.js?{{version.commit_short}}"></script>
 	<script src="/src/js/p2.js?{{version.commit_short}}"></script>
 	<script src="/src/js/canvasasset.js?{{version.commit_short}}"></script>