SongSelect: Add About screen

2018-10-14 11:04:31 +03:00
parent b16f74d252
commit 68d69d4a0a
11 changed files with 296 additions and 47 deletions
--- a/public/src/js/about.js
+++ b/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
+	}
+}