View: Add touch controls

public/src/js/view.js

@@ -7,6 +7,7 @@ class View{
 		
 		this.pauseMenu = document.getElementById("pause-menu")
 		this.cursor = document.getElementById("cursor")
+		this.gameDiv = document.getElementById("game")
 		
 		var docW = document.body.offsetWidth
 		var docH = document.body.offsetHeight
@@ -14,7 +15,7 @@ class View{
 			this.canvas = new ScalableCanvas("canvas-p2", docW, docH / 3 * 2)
 			this.canvas.canvas.style.position = "absolute"
 			this.canvas.canvas.style.top = "33%"
-			document.getElementById("game").appendChild(this.canvas.canvas)
+			this.gameDiv.appendChild(this.canvas.canvas)
 		}else{
 			this.canvas = new ScalableCanvas("canvas", docW, docH)
 		}
@@ -49,6 +50,39 @@ class View{
 		
 		this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
 		this.assets = new ViewAssets(this)
+		
+		this.touch = {
+			don_l: -Infinity,
+			don_r: -Infinity,
+			don_c: -Infinity,
+			ka_l: -Infinity,
+			ka_r: -Infinity,
+			ka_c: -Infinity,
+			cursor: {
+				ms: -Infinity,
+				x: 0,
+				y: 0
+			}
+		}
+		
+		if(this.controller.touchEnabled){
+			this.touchEnabled = true
+			
+			this.touchBgDiv = document.getElementById("touch-bg")
+			this.touchBgBlueDiv = document.getElementById("touch-bg-blue")
+			this.touchDrumDiv = document.getElementById("touch-drum")
+			this.gameDiv.classList.add("touch-visible")
+			
+			pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this))
+			
+			this.touchFullBtn = document.getElementById("touch-full-btn")
+			pageEvents.add(this.touchFullBtn, "click", this.toggleFullscreen)
+			
+			this.touchPauseBtn = document.getElementById("touch-pause-btn")
+			pageEvents.add(this.touchPauseBtn, "click", () => {
+				this.controller.togglePauseMenu()
+			})
+		}
 	}
 	run(){
 		this.ctx.font = "normal 14pt TnT"
@@ -133,6 +167,37 @@ class View{
 		this.diffW = this.diffH * diffRatio
 		this.diffX = this.taikoX * 0.10
 		this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
+		this.touchDrum = (() => {
+			var sw = 842
+			var sh = 340
+			var x = 0
+			var y = this.barY + this.barH + 5
+			var paddingTop = this.barH * 0.1
+			var w = this.winW
+			var maxH = this.winH - (this.barY + this.barH + 5)
+			var h = maxH - paddingTop
+			if(w / h >= sw / sh){
+				w = h / sh * sw
+				x = (this.winW - w) / 2
+				y += paddingTop
+			}else{
+				h = w / sw * sh
+				y = y + (maxH - h)
+			}
+			return {
+				x: x, y: y, w: w, h: h
+			}
+		})()
+		this.touchCircle = (() => {
+			var padTop = this.touchDrum.h * 0.062
+			var padLeft = this.touchDrum.h * 0.05
+			return {
+				x: this.winW / 2,
+				y: this.winH + padTop,
+				rx: this.touchDrum.w / 2 - padLeft * 2,
+				ry: this.touchDrum.h
+			}
+		})()
 	}
 	refresh(){
 		this.positionning()
@@ -158,7 +223,10 @@ class View{
 		this.updateDonFaces()
 		this.drawGogoTime()
 		this.mouseIdle()
-		this.assets.drawAssets("foreground")
+		if(!this.touchEnabled){
+			this.assets.drawAssets("foreground")
+		}
+		this.drawTouch()
 		//this.drawTime()
 	}
 	updateDonFaces(){
@@ -809,6 +877,147 @@ class View{
 			don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
 		}
 	}
+	drawTouch(){
+		if(this.touchEnabled){
+			var ms = this.controller.getElapsedTime()
+			this.ctx.save()
+			
+			var bgHeight = (this.winH - (this.barY + this.barH + 5)) / this.canvas.scale
+			if(bgHeight !== this.touchBgHeight){
+				this.touchBgHeight = bgHeight
+				this.touchBgDiv.style.height = bgHeight + "px"
+			}
+			var drumWidth = this.touchDrum.w / this.canvas.scale
+			var drumHeight = this.touchDrum.h / this.canvas.scale
+			if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){
+				this.touchDrumWidth = drumWidth
+				this.touchDrumHeight = drumHeight
+				this.touchDrumDiv.style.width = drumWidth + "px"
+				this.touchDrumDiv.style.height = drumHeight + "px"
+			}
+			
+			var lastKa = this.touch.ka_l > this.touch.ka_r ? this.touch.ka_l : this.touch.ka_r
+			if(ms < lastKa + 150){
+				if(!this.blueBgShown){
+					this.blueBgShown = true
+					this.touchBgBlueDiv.style.opacity = 0.5
+				}
+			}else if(this.blueBgShown){
+				this.blueBgShown = false
+				this.touchBgBlueDiv.style.opacity = 0
+			}
+			
+			var c = this.touchCircle
+			var pi = Math.PI
+			var lastDon = this.touch.don_l > this.touch.don_r ? this.touch.don_l : this.touch.don_r
+			if(lastDon > ms - 150){
+				this.ctx.fillStyle = "rgba(239, 86, 51, 0.5)"
+				this.ctx.beginPath()
+				this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
+				this.ctx.fill()
+			}
+			if(this.touch.don_c > ms - 150){
+				this.ctx.beginPath()
+				this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
+				this.ctx.fill()
+			}
+			if(this.touch.ka_c > ms - 150){
+				this.ctx.fillStyle = "rgba(33, 191, 211, 0.5)"
+				this.ctx.beginPath()
+				this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
+				this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, 0, pi, true)
+				this.ctx.fill()
+			}
+			
+			this.ctx.restore()
+		}
+	}
+	ontouch(event){
+		for(let touch of event.touches){
+			event.preventDefault()
+			var scale = this.canvas.scale
+			var pageX = touch.pageX * scale
+			var pageY = touch.pageY * scale
+			
+			this.touch.cursor = {
+				ms: this.controller.getElapsedTime(),
+				x: pageX,
+				y: pageY
+			}
+			
+			var c = this.touchCircle
+			var pi = Math.PI
+			var inPath = () => this.ctx.isPointInPath(pageX, pageY)
+			
+			this.ctx.beginPath()
+			this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
+			
+			if(inPath()){
+				this.touchNote("don_c")
+			}else{
+				this.ctx.beginPath()
+				this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
+				
+				if(inPath()){
+					if(pageX < this.winW / 2){
+						this.touchNote("don_l")
+					}else{
+						this.touchNote("don_r")
+					}
+				}else{
+					
+					this.ctx.beginPath()
+					this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
+					
+					if(inPath()){
+						this.touchNote("ka_c")
+					}else if(pageX < this.winW / 2){
+						this.touchNote("ka_l")
+					}else{
+						this.touchNote("ka_r")
+					}
+				}
+			}
+		}
+	}
+	touchNote(note){
+		var keyboard = this.controller.keyboard
+		var kbd = keyboard.getBindings()
+		var ms = this.controller.game.getAccurateTime()
+		this.touch[note] = ms
+		if(note === "don_c"){
+			this.touchNote("don_l")
+			this.touchNote("don_r")
+		}else if(note === "ka_c"){
+			this.touchNote("ka_l")
+			this.touchNote("ka_r")
+		}else{
+			keyboard.setKey(kbd[note], false)
+			keyboard.setKey(kbd[note], true, ms)
+		}
+	}
+	toggleFullscreen(){
+		var root = document.documentElement
+		if("requestFullscreen" in root){
+			if(document.fullscreenElement){
+				document.exitFullscreen()
+			}else{
+				root.requestFullscreen()
+			}
+		}else if("webkitRequestFullscreen" in root){
+			if(document.webkitFullscreenElement){
+				document.webkitExitFullscreen()
+			}else{
+				root.webkitRequestFullscreen()
+			}
+		}else if("mozRequestFullScreen" in root){
+			if(document.mozFullScreenElement){
+				document.mozCancelFullScreen()
+			}else{
+				root.mozRequestFullScreen()
+			}
+		}
+	}
 	onmousemove(event){
 		this.lastMousemove = this.controller.getElapsedTime()
 		this.cursorHidden = false
@@ -832,10 +1041,22 @@ class View{
 		pageEvents.mouseRemove(this)
 		if(this.controller.multiplayer === 2){
 			this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
+		}else{
+			this.cursor.parentNode.removeChild(this.cursor)
+		}
+		if(this.touchEnabled){
+			pageEvents.remove(this.canvas.canvas, "touchstart")
+			pageEvents.remove(this.touchFullBtn, "click")
+			pageEvents.remove(this.touchPauseBtn, "click")
+			this.gameDiv.classList.remove("touch-visible")
+			delete this.touchBgDiv
+			delete this.touchFullBtn
+			delete this.touchPauseBtn
+			delete this.touchBgBlueDiv
 		}
-		this.cursor.parentNode.removeChild(this.cursor)
 		delete this.pauseMenu
 		delete this.cursor
+		delete this.gameDiv
 		delete this.canvas
 		delete this.ctx
 	}