SongSelect: Add About screen

public/src/js/about.js

@@ -0,0 +1,122 @@
+class About{
+	constructor(touchEnabled){
+		this.touchEnabled = touchEnabled
+		loader.changePage("about")
+		cancelTouch = false
+		
+		this.endButton = document.getElementById("tutorial-end-button")
+		this.diagTxt = document.getElementById("diag-txt")
+		this.version = document.getElementById("version-link").href
+		this.tutorialOuter = document.getElementById("tutorial-outer")
+		if(touchEnabled){
+			this.tutorialOuter.classList.add("touch-enabled")
+		}
+		this.linkGithub = document.getElementById("link-github")
+		this.linkEmail = document.getElementById("link-email")
+		
+		pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton)
+		pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton)
+		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
+		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
+		
+		this.gamepad = new Gamepad({
+			"confirm": ["start", "b", "ls", "rs"]
+		}, this.onEnd.bind(this))
+		
+		this.addDiag()
+	}
+	onEnd(event){
+		var touched = false
+		if(event && event.type === "touchstart"){
+			event.preventDefault()
+			touched = true
+		}
+		this.clean()
+		assets.sounds["don"].play()
+		localStorage.setItem("tutorial", "true")
+		setTimeout(() => {
+			new SongSelect("about", false, touched)
+		}, 500)
+	}
+	addDiag(){
+		var diag = []
+		
+		diag.push("```")
+		diag.push("Taiko-Web version: " + this.version)
+		diag.push("User agent: " + navigator.userAgent)
+		diag.push("Screen size: " + innerWidth + "x" + innerHeight + ", outer: " + outerWidth + "x" + outerHeight + ", ratio: " + (window.devicePixelRatio || 1).toFixed(2))
+		if(this.touchEnabled){
+			diag.push("Touch enabled: true")
+		}
+		if(!fullScreenSupported){
+			diag.push("Full screen supported: false")
+		}
+		if("getGamepads" in navigator){
+			var gamepads = navigator.getGamepads()
+			for(var i = 0; i < gamepads.length; i++){
+				if(gamepads[i]){
+					var gamepadDiag = []
+					gamepadDiag.push(gamepads[i].id)
+					gamepadDiag.push("buttons: " + 	gamepads[i].buttons.length)
+					gamepadDiag.push("axes: " + gamepads[i].axes.length)
+					diag.push("Gamepad #" + (i + 1) + ": " + gamepadDiag.join(", "))
+				}
+			}
+		}
+		var errorObj = {}
+		if(localStorage["lastError"]){
+			try{
+				errorObj = JSON.parse(localStorage["lastError"])
+			}catch(e){}
+		}
+		if(errorObj.timestamp && errorObj.stack){
+			if(errorObj.timestamp + 1000 * 60 * 60 * 24 > (+new Date)){
+				diag.push("Last error: " + errorObj.stack)
+				diag.push("Error date: " + new Date(errorObj.timestamp).toGMTString())
+			}else{
+				localStorage.removeItem("lastError")
+			}
+		}
+		diag.push("```")
+		
+		var body = this.diagTxt.contentWindow.document.body
+		body.innerText = diag.join("\n")
+		
+		body.setAttribute("style", `
+			font-family: monospace;
+			margin: 2px 0 0 2px;
+			white-space: pre-wrap;
+			word-break: break-all;
+			cursor: text;
+		`)
+		body.setAttribute("onblur", `
+			getSelection().removeAllRanges()
+		`)
+		if(!this.touchEnabled){
+			body.setAttribute("onfocus", `
+				var selection = getSelection()
+				selection.removeAllRanges()
+				var range = document.createRange()
+				range.selectNodeContents(document.body)
+				selection.addRange(range)
+			`)
+		}
+	}
+	linkButton(event){
+		event.currentTarget.getElementsByTagName("a")[0].click()
+	}
+	clean(){
+		cancelTouch = true
+		this.gamepad.clean()
+		pageEvents.remove(this.linkGithub, ["click", "touchend"])
+		pageEvents.remove(this.linkEmail, ["click", "touchend"])
+		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
+		pageEvents.keyRemove(this, 13)
+		delete this.endButton
+		delete this.diagTxt
+		delete this.version
+		delete this.tutorialOuter
+		delete this.linkGithub
+		delete this.linkEmail
+	}
+}

public/src/js/assets.js

@@ -123,7 +123,8 @@ var assets = {
 		"loadsong.html",
 		"songselect.html",
 		"titlescreen.html",
-		"tutorial.html"
+		"tutorial.html",
+		"about.html"
 	],
 	
 	"songs": [],

public/src/js/loader.js

@@ -6,15 +6,6 @@ class Loader{
 		this.canvasTest = new CanvasTest()
 		p2 = new P2Connection()
 		this.ajax("src/views/loader.html").then(this.run.bind(this))
-		
-		pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
-			event.preventDefault()
-		})
-		var versionDiv = document.getElementById("version")
-		var versionLink = document.getElementById("version-link")
-		pageEvents.add(versionDiv, ["click", "touchend"], () => {
-			versionLink.click()
-		})
 	}
 	run(page){
 		this.promises = []

public/src/js/main.js

@@ -1,3 +1,16 @@
+addEventListener("error", err => {
+	var stack
+	if("error" in err){
+		stack = err.error.stack
+	}else{
+		stack = err.message + "\n    at " + err.filename + ":" + err.lineno + ":" + err.colno
+	}
+	localStorage["lastError"] = JSON.stringify({
+		timestamp: +new Date,
+		stack: stack
+	})
+})
+
 function toggleFullscreen(){
 	if("requestFullscreen" in root){
 		if(document.fullscreenElement){
@@ -19,6 +32,14 @@ function toggleFullscreen(){
 		}
 	}
 }
+
+function resizeRoot(){
+	if(lastHeight !== innerHeight){
+		lastHeight = innerHeight
+		root.style.height = innerHeight + "px"
+	}
+}
+
 var root = document.documentElement
 var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscreen" in root || "mozRequestFullScreen" in root
 
@@ -26,6 +47,22 @@ var pageEvents = new PageEvents()
 var snd = {}
 var p2
 var disableBlur = false
+var cancelTouch = true
+var lastHeight
+
+pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
+	if(event.cancelable && cancelTouch){
+		event.preventDefault()
+	}
+})
+var versionDiv = document.getElementById("version")
+var versionLink = document.getElementById("version-link")
+pageEvents.add(versionDiv, ["click", "touchend"], () => {
+	versionLink.click()
+})
+resizeRoot()
+pageEvents.add(window, "resize", resizeRoot)
+
 var loader = new Loader(() => {
 	new Titlescreen()
 })

public/src/js/songselect.js

@@ -29,6 +29,12 @@ class SongSelect{
 				border: ["#d6ffff", "#6bae9c"],
 				outline: "#31ae94"
 			},
+			"about": {
+				sort: 7,
+				background: "#91cfff",
+				border: ["#dff0ff", "#6890b2"],
+				outline: "#217abb"
+			},
 			"J-POP": {
 				sort: 0,
 				background: "#219fbb",
@@ -114,7 +120,9 @@ class SongSelect{
 			category: "ランダム"
 		})
 		if(touchEnabled){
-			fromTutorial = false
+			if(fromTutorial === "tutorial"){
+				fromTutorial = false
+			}
 		}else{
 			this.songs.push({
 				title: "あそびかた説明",
@@ -123,6 +131,12 @@ class SongSelect{
 				category: "ランダム"
 			})
 		}
+		this.songs.push({
+			title: "について",
+			skin: this.songSkin.about,
+			action: "about",
+			category: "ランダム"
+		})
 		this.songs.push({
 			title: "もどる",
 			skin: this.songSkin.back,
@@ -155,16 +169,20 @@ class SongSelect{
 		this.selectedDiff = 0
 		assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
 		
-		if(touchEnabled || !fromTutorial && "selectedSong" in localStorage){
+		if(!touchEnabled && !fromTutorial && !("selectedSong" in localStorage)){
+			fromTutorial = "tutorial"
+		}
+		
+		if(fromTutorial){
+			this.selectedSong = this.songs.findIndex(song => song.action === fromTutorial)
+			this.playBgm(true)
+		}else{
 			if("selectedSong" in localStorage){
 				this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length)
 			}
 			assets.sounds["song-select"].play()
 			snd.musicGain.fadeOut()
 			this.playBgm(false)
-		}else{
-			this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
-			this.playBgm(true)
 		}
 		if("selectedDiff" in localStorage){
 			this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
@@ -454,6 +472,8 @@ class SongSelect{
 				}, 200)
 			}else if(currentSong.action === "tutorial"){
 				this.toTutorial()
+			}else if(currentSong.action === "about"){
+				this.toAbout()
 			}
 			this.pointer(false)
 		}
@@ -505,6 +525,13 @@ class SongSelect{
 			new Tutorial(true)
 		}, 500)
 	}
+	toAbout(){
+		assets.sounds["don"].play()
+		this.clean()
+		setTimeout(() => {
+			new About(this.touchEnabled)
+		}, 500)
+	}
 	
 	redraw(){
 		if(!this.redrawRunning){

public/src/js/tutorial.js

@@ -22,7 +22,7 @@ class Tutorial{
 		assets.sounds["don"].play()
 		localStorage.setItem("tutorial", "true")
 		setTimeout(() => {
-			new SongSelect(this.fromSongSel, false, touched)
+			new SongSelect(this.fromSongSel ? "tutorial" : false, false, touched)
 		}, 500)
 	}
 	clean(){

public/src/js/view.js

@@ -949,8 +949,10 @@ class View{
 	}
 	clean(){
 		pageEvents.mouseRemove(this)
-		if(this.controller.multiplayer === 2 && this.canvas){
-			this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
+		if(this.controller.multiplayer === 2){
+			if(this.canvas){
+				this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
+			}
 		}else{
 			this.cursor.parentNode.removeChild(this.cursor)
 		}