Merge pull request #60 from LoveEevee/view-rewrite

View: Rewrite

public/src/css/game.css

 #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",
-		"don-1.png",
-		"big-don-0.png",
-		"big-don-1.png",
+		"notes.png",
+		"notes_drumroll.png",
+		"notes_hit.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){
-				pos.callback()
-			}
+			this.ctx.restore()
 		}
 	}
 	mod(length, index){

public/src/js/canvascache.js

 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){
-		this.map.clear()
+		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/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(score.bad === 0){
-			vp = "fullcombo"
-			this.playSoundMeka("fullcombo", 1.350)
-		}else if(score.gauge >= 50){
-			vp = "clear"
+		if(Math.round(score.gauge / 2) - 1 >= 25){
+			if(score.bad === 0){
+				vp = "fullcombo"
+				this.playSoundMeka("fullcombo", 1.350)
+			}else{
+				vp = "clear"
+			}
 		}else{
 			vp = "fail"
 		}
@@ -132,8 +141,8 @@ class Controller{
 			this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
 		}
 	}
-	displayScore(score, notPlayed){
-		this.view.displayScore(score, notPlayed)
+	displayScore(score, notPlayed, bigNote){
+		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

-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

-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
-		}
-	}
-}
\ No newline at end of file

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"],
-					552, 120, 688, 48
-				)
-				var gauge = results.gauge / 100
-				if(gauge > 0){
-					ctx.drawImage(assets.image["hp-bar-colour"],
-						0, 0, 650 * gauge, 40,
-						557, 127, 635 * gauge, 37,
-					)
-				}
+				var gaugePercent = Math.round(results.gauge / 2) / 50
+				var w = 712
+				this.draw.gauge({
+					ctx: ctx,
+					x: 558 + w,
+					y: 116,
+					clear: 25 / 50,
+					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"){
-					crownType = "gold"
-				}else if(results.gauge >= 50){
-					crownType = "silver"
+				if(Math.round(results.gauge / 2) - 1 >= 25){
+					crownType = results.bad === "0" ? "gold" : "silver"
 				}
 				if(crownType !== null){
 					noCrownResultWait = 0;

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 h = (this.view.barH * imgh) / scale
+			var w = imgw
+			var h = imgh
 			return {
 				sx: Math.floor(frame / 10) * imgw,
-				sy: (frame % 10) * imgh,
+				sy: (frame % 10) * imgh + 1,
 				sw: imgw,
-				sh: imgh,
-				x: this.view.taikoSquareW - w + this.view.barH * 0.2,
-				y: this.view.barY - h,
+				sh: imgh - 1,
+				x: view.portrait ? -60 : 0,
+				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 ms = this.controller.getElapsedTime()
+			var scale = 130
+			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 h = (this.view.barH * imgh) / scale * grow
+			var w = (barH * imgw) / 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,
-				y: this.view.circleY - h / 2,
+				x: this.view.slotPos.x - w / 2,
+				y: this.view.slotPos.y - h / 2,
 				w: w,
-				h: h,
-				callback: () => {
-					this.ctx.globalCompositeOperation = "source-over"
-					this.ctx.globalAlpha = 1
-				}
+				h: h
 			}
 		})
 		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 h = (this.view.barH * imgh) / scale
+				var w = imgw
+				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),
-					y: this.view.winH - h,
+					x: winW / 4 * i - w / 2 * (i / 2),
+					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()
-				}
-			})
-		}
+		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

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