View: Add touch controls

public/index.html

@@ -14,7 +14,7 @@
 	<meta charset="utf-8">
 	<title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title>
 	<link rel="icon" href="/assets/img/favicon.png" type="image/png">
-	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta name="viewport" content="width=device-width, user-scalable=no">
 	
 	<link rel="stylesheet" href="/src/css/main.css"/>
 	<link rel="stylesheet" href="/src/css/loader.css">

public/src/css/game.css

@@ -51,3 +51,62 @@
 	pointer-events: none;
 	z-index: 1;
 }
+#touch-bg{
+	display: none;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50%;
+	background: url(/assets/img/touch_bg.png) center bottom;
+	background-size: cover;
+	overflow: hidden;
+}
+#touch-bg-blue{
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: url(/assets/img/touch_bg_blue.png) center bottom;
+	background-size: cover;
+	opacity: 0;
+}
+#touch-drum{
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	text-align: center;
+	margin: auto;
+}
+#touch-drum img{
+	width: 100%;
+}
+#touch-buttons{
+	display: none;
+	position: absolute;
+	top: 7vh;
+	right: 2vh;
+	opacity: 0.5;
+	z-index: 5;
+}
+#touch-buttons img{
+	width: 12vh;
+}
+.touch-visible #touch-bg,
+.touch-visible #touch-buttons{
+	display: block;
+}
+.touch-visible .window{
+	width: 80vmin;
+	height: 53vmin;
+}
+.touch-visible #pause-menu .window button{
+	font-size: 5vmin;
+}
+.touch-visible #pause-menu .window button.selected{
+	color: #000;
+	background: #fff;
+	border-color: #ae7a26;
+}

public/src/js/assets.js

@@ -39,7 +39,12 @@ var assets = {
 		"bg_genre_7.png",
 		"bg_score_p1.png",
 		"bg_score_p2.png",
-		"badge_auto.png"
+		"badge_auto.png",
+		"touch_bg.png",
+		"touch_bg_blue.png",
+		"touch_drum.png",
+		"touch_pause.png",
+		"touch_fullscreen.png"
 	],
 	"audioSfx": [
 		"don.wav",

public/src/js/controller.js

 class Controller{
-	constructor(selectedSong, songData, autoPlayEnabled, multiplayer){
+	constructor(selectedSong, songData, autoPlayEnabled, multiplayer, touchEnabled){
 		this.selectedSong = selectedSong
 		this.songData = songData
 		this.autoPlayEnabled = autoPlayEnabled
 		this.multiplayer = multiplayer
+		this.touchEnabled = touchEnabled
 		this.snd = this.multiplayer ? "_p" + this.multiplayer : ""
 		
 		var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png"
@@ -202,6 +203,9 @@ class Controller{
 		}
 	}
 	clean(){
+		if(this.syncWith){
+			this.syncWith.clean()
+		}
 		this.stopMainLoop()
 		this.keyboard.clean()
 		this.view.clean()

public/src/js/game.js

@@ -289,10 +289,10 @@ class Game{
 				this.controller.displayResults()
 				this.musicFadeOut++
 			}else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){
+				this.controller.clean()
 				if(this.controller.scoresheet){
 					this.controller.scoresheet.startRedraw()
 				}
-				this.controller.clean()
 			}
 		}
 	}

public/src/js/keyboard.js

@@ -79,11 +79,12 @@ class Keyboard{
 					this.setKey(keyCode, false)
 				}
 			})
+		}else{
+			this.checkKeySound(this.kbd["don_l"], "don")
+			this.checkKeySound(this.kbd["don_r"], "don")
+			this.checkKeySound(this.kbd["ka_l"], "ka")
+			this.checkKeySound(this.kbd["ka_r"], "ka")
 		}
-		this.checkKeySound(this.kbd["don_l"], "don")
-		this.checkKeySound(this.kbd["don_r"], "don")
-		this.checkKeySound(this.kbd["ka_l"], "ka")
-		this.checkKeySound(this.kbd["ka_r"], "ka")
 	}
 	checkMenuKeys(){
 		if(!this.controller.multiplayer){
@@ -171,7 +172,7 @@ class Keyboard{
 			var circles = this.controller.getCircles()
 			var circle = circles[this.controller.getCurrentCircle()]
 			if(
-				(keyCode === this.kbd["don_l"] || keyCode === this.kbd["don_r"])
+				sound === "don"
 				&& circle
 				&& !circle.getPlayed()
 				&& circle.getType() === "balloon"
@@ -191,6 +192,11 @@ class Keyboard{
 		if(down){
 			this.keys[keyCode] = true
 			this.keyTime[keyCode] = ms
+			if(keyCode == this.kbd.don_l || keyCode == this.kbd.don_r){
+				this.checkKeySound(keyCode, "don")
+			}else if(keyCode == this.kbd.ka_l || keyCode == this.kbd.ka_r){
+				this.checkKeySound(keyCode, "ka")
+			}
 		}else{
 			this.keys[keyCode] = false
 			this.waitKeyupScore[keyCode] = false

public/src/js/loadsong.js

 class loadSong{
-	constructor(selectedSong, autoPlayEnabled, multiplayer){
+	constructor(selectedSong, autoPlayEnabled, multiplayer, touchEnabled){
 		this.selectedSong = selectedSong
-		this.multiplayer = multiplayer
 		this.autoPlayEnabled = autoPlayEnabled
+		this.multiplayer = multiplayer
+		this.touchEnabled = touchEnabled
 		loader.changePage("loadsong")
 		this.run()
 	}
@@ -81,7 +82,7 @@ class loadSong{
 				}else if(event.type === "gamestart"){
 					this.clean()
 					loader.changePage("game")
-					var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1)
+					var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
 					var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2)
 					taikoGame1.run(taikoGame2)
 				}
@@ -93,7 +94,7 @@ class loadSong{
 		}else{
 			this.clean()
 			loader.changePage("game")
-			var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
+			var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
 			taikoGame.run()
 		}
 	}

public/src/js/scoresheet.js

@@ -29,8 +29,6 @@ class Scoresheet{
 		this.redrawRunning = true
 		this.redrawBind = this.redraw.bind(this)
 		this.redraw()
-		pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
-		pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
 		
 		assets.sounds["results"].play()
 		assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689)
@@ -56,7 +54,11 @@ class Scoresheet{
 		}
 	}
 	mouseDown(event){
-		if(event.which !== 1){
+		if(event.type === "touchstart"){
+			event.preventDefault()
+			this.canvas.style.cursor = ""
+			this.state.pointerLocked = true
+		}else if(event.which !== 1){
 			return
 		}
 		this.toNext()
@@ -81,6 +83,10 @@ class Scoresheet{
 		requestAnimationFrame(this.redrawBind)
 		this.winW = null
 		this.winH = null
+		
+		pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
+		pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
+		pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
 	}
 	
 	redraw(){
@@ -218,7 +224,9 @@ class Scoresheet{
 		if(elapsed >= 0){
 			if(this.state.hasPointer === 0){
 				this.state.hasPointer = 1
-				this.canvas.style.cursor = "pointer"
+				if(!this.state.pointerLocked){
+					this.canvas.style.cursor = "pointer"
+				}
 			}
 			ctx.save()
 			ctx.setTransform(1, 0, 0, 1, 0, 0)
@@ -643,6 +651,7 @@ class Scoresheet{
 		this.redrawRunning = false
 		pageEvents.keyRemove(this, "all")
 		pageEvents.remove(this.canvas, "mousedown")
+		pageEvents.remove(this.canvas, "touchstart")
 		delete this.ctx
 		delete this.canvas
 	}

public/src/js/songselect.js

@@ -197,6 +197,7 @@ class SongSelect{
 		pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
 		pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this))
 		pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
+		pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
 	}
 	
 	keyDown(event, code){
@@ -256,10 +257,21 @@ class SongSelect{
 	}
 	
 	mouseDown(event){
-		if(event.which !== 1){
-			return
+		if(event.type === "mousedown"){
+			if(event.which !== 1){
+				return
+			}
+			var mouse = this.mouseOffset(event.offsetX, event.offsetY)
+			var shift = event.shiftKey
+			var ctrl = event.ctrlKey
+			var touch = false
+		}else{
+			event.preventDefault()
+			var mouse = this.mouseOffset(event.touches[0].pageX, event.touches[0].pageY)
+			var shift = false
+			var ctrl = false
+			var touch = true
 		}
-		var mouse = this.mouseOffset(event)
 		if(this.state.screen === "song"){
 			var moveBy = this.songSelMouse(mouse.x, mouse.y)
 			if(moveBy === 0){
@@ -276,12 +288,12 @@ class SongSelect{
 			){
 				this.toSongSelect()
 			}else if(moveBy !== null){
-				this.toLoadSong(moveBy - 1, event.shiftKey, event.ctrlKey)
+				this.toLoadSong(moveBy - 1, shift, ctrl, touch)
 			}
 		}
 	}
 	mouseMove(event){
-		var mouse = this.mouseOffset(event)
+		var mouse = this.mouseOffset(event.offsetX, event.offsetY)
 		var moveTo = null
 		if(this.state.screen === "song"){
 			var moveTo = this.songSelMouse(mouse.x, mouse.y)
@@ -298,10 +310,10 @@ class SongSelect{
 		}
 		this.pointer(moveTo !== null)
 	}
-	mouseOffset(event){
+	mouseOffset(offsetX, offsetY){
 		return {
-			x: (event.offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
-			y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
+			x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
+			y: (offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
 		}
 	}
 	pointer(enabled){
@@ -425,7 +437,7 @@ class SongSelect{
 			assets.sounds["cancel"].play()
 		}
 	}
-	toLoadSong(difficulty, shift, ctrl){
+	toLoadSong(difficulty, shift, ctrl, touch){
 		this.clean()
 		var selectedSong = this.songs[this.selectedSong]
 		assets.sounds["diffsel"].stop()
@@ -439,7 +451,7 @@ class SongSelect{
 			"folder": selectedSong.id,
 			"difficulty": this.difficultyId[difficulty],
 			"category": selectedSong.category
-		}, shift, ctrl)
+		}, shift, ctrl, touch)
 	}
 	toTitleScreen(){
 		assets.sounds["cancel"].play()

public/src/js/titlescreen.js

@@ -3,7 +3,8 @@ class Titlescreen{
 		loader.changePage("titlescreen")
 		this.titleScreen = document.getElementById("title-screen")
 		pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this))
-		pageEvents.once(this.titleScreen, "click").then(this.onPressed.bind(this))
+		pageEvents.once(this.titleScreen, "mousedown").then(this.onPressed.bind(this))
+		pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this))
 		assets.sounds["title"].play()
 		this.gamepad = new Gamepad({
 			"start": ["b", "x", "y", "start"],
@@ -15,6 +16,7 @@ class Titlescreen{
 		})
 	}
 	onPressed(){
+		this.titleScreen.style.cursor = "auto"
 		this.clean()
 		assets.sounds["don"].play()
 		setTimeout(this.goNext.bind(this), 500)
@@ -22,7 +24,7 @@ class Titlescreen{
 	goNext(){
 		if(localStorage.getItem("tutorial") !== "true"){
 			new Tutorial()
-		} else {
+		}else{
 			new SongSelect()
 		}
 	}
@@ -30,7 +32,8 @@ class Titlescreen{
 		this.gamepad.clean()
 		assets.sounds["title"].stop()
 		pageEvents.keyRemove(this, 13)
-		pageEvents.remove(this.titleScreen, "click")
+		pageEvents.remove(this.titleScreen, "mousedown")
+		pageEvents.remove(this.titleScreen, "touchstart")
 		delete this.titleScreen
 	}
 }

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
 	}

public/src/views/game.html

 <div id="game">
 	<h3 alt="" class="stroke-sub game-song"></h3>
+	<div id="touch-bg">
+		<div id="touch-bg-blue"></div>
+		<div id="touch-drum">
+			<img src="/assets/img/touch_drum.png">
+		</div>
+	</div>
 	<canvas id="canvas"></canvas>
 	<div id="pause-menu">
 		<div class="window">
@@ -8,5 +14,8 @@
 			<button type="button" id="song-selection-butt">Song selection</button>
 		</div>
 	</div>
+	<div id="touch-buttons">
+		<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png"><img id="touch-pause-btn" src="/assets/img/touch_pause.png">
+	</div>
 	<div id="cursor"></div>
 </div>