2018-10-14 19:02:50 +08:00
|
|
|
|
class About{
|
2022-02-11 22:28:22 +08:00
|
|
|
|
constructor(...args){
|
|
|
|
|
this.init(...args)
|
|
|
|
|
}
|
|
|
|
|
init(touchEnabled){
|
2018-10-14 16:04:31 +08:00
|
|
|
|
this.touchEnabled = touchEnabled
|
2019-01-16 20:33:42 +08:00
|
|
|
|
loader.changePage("about", true)
|
2018-10-14 16:04:31 +08:00
|
|
|
|
cancelTouch = false
|
|
|
|
|
|
2019-04-17 02:06:41 +08:00
|
|
|
|
this.endButton = this.getElement("view-end-button")
|
2020-03-16 17:54:21 +08:00
|
|
|
|
this.diagTxt = this.getElement("diag-txt")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
this.version = document.getElementById("version-link").href
|
2019-04-17 02:06:41 +08:00
|
|
|
|
this.tutorialOuter = this.getElement("view-outer")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
if(touchEnabled){
|
|
|
|
|
this.tutorialOuter.classList.add("touch-enabled")
|
|
|
|
|
}
|
2019-01-25 12:24:43 +08:00
|
|
|
|
this.linkIssues = document.getElementById("link-issues")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
this.linkEmail = document.getElementById("link-email")
|
|
|
|
|
|
2019-04-17 02:06:41 +08:00
|
|
|
|
var tutorialTitle = this.getElement("view-title")
|
2019-01-23 02:47:09 +08:00
|
|
|
|
tutorialTitle.innerText = strings.aboutSimulator
|
|
|
|
|
tutorialTitle.setAttribute("alt", strings.aboutSimulator)
|
2019-04-17 02:06:41 +08:00
|
|
|
|
var tutorialContent = this.getElement("view-content")
|
2019-01-23 02:47:09 +08:00
|
|
|
|
strings.about.bugReporting.forEach(string => {
|
|
|
|
|
tutorialContent.appendChild(document.createTextNode(string))
|
|
|
|
|
tutorialContent.appendChild(document.createElement("br"))
|
|
|
|
|
})
|
|
|
|
|
var span = document.createElement("span")
|
|
|
|
|
span.classList.add("text-warn")
|
|
|
|
|
span.innerText = strings.about.diagnosticWarning
|
|
|
|
|
tutorialContent.appendChild(span)
|
|
|
|
|
this.endButton.innerText = strings.tutorial.ok
|
|
|
|
|
this.endButton.setAttribute("alt", strings.tutorial.ok)
|
|
|
|
|
|
2019-11-28 14:04:40 +08:00
|
|
|
|
this.items = []
|
|
|
|
|
|
2020-03-09 20:36:57 +08:00
|
|
|
|
this.getLink(this.linkIssues).innerText = strings.about.issues
|
|
|
|
|
this.linkIssues.setAttribute("alt", strings.about.issues)
|
2019-02-07 02:49:25 +08:00
|
|
|
|
var versionUrl = gameConfig._version.url
|
2019-01-25 12:24:43 +08:00
|
|
|
|
this.getLink(this.linkIssues).href = versionUrl + "issues"
|
2019-11-28 14:04:40 +08:00
|
|
|
|
this.items.push(this.linkIssues)
|
|
|
|
|
|
2019-09-16 00:15:41 +08:00
|
|
|
|
var contactEmail = gameConfig.email
|
2019-11-28 14:04:40 +08:00
|
|
|
|
this.hasEmail = typeof contactEmail === "string"
|
|
|
|
|
if(this.hasEmail){
|
2019-09-16 00:15:41 +08:00
|
|
|
|
this.linkEmail.setAttribute("alt", contactEmail)
|
|
|
|
|
this.getLink(this.linkEmail).href = "mailto:" + contactEmail
|
2019-11-28 14:04:40 +08:00
|
|
|
|
this.getLink(this.linkEmail).innerText = contactEmail
|
|
|
|
|
this.items.push(this.linkEmail)
|
|
|
|
|
}else{
|
|
|
|
|
this.linkEmail.parentNode.removeChild(this.linkEmail)
|
2019-09-16 00:15:41 +08:00
|
|
|
|
}
|
2019-11-28 14:04:40 +08:00
|
|
|
|
|
2019-01-25 12:24:43 +08:00
|
|
|
|
pageEvents.add(this.linkIssues, ["click", "touchend"], this.linkButton.bind(this))
|
2019-11-28 14:04:40 +08:00
|
|
|
|
if(this.hasEmail){
|
|
|
|
|
pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton.bind(this))
|
|
|
|
|
}
|
2019-04-06 03:53:51 +08:00
|
|
|
|
pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
|
2019-11-28 14:04:40 +08:00
|
|
|
|
this.items.push(this.endButton)
|
|
|
|
|
this.selected = this.items.length - 1
|
2018-10-14 16:04:31 +08:00
|
|
|
|
|
2019-04-17 02:06:41 +08:00
|
|
|
|
this.keyboard = new Keyboard({
|
|
|
|
|
confirm: ["enter", "space", "don_l", "don_r"],
|
|
|
|
|
previous: ["left", "up", "ka_l"],
|
|
|
|
|
next: ["right", "down", "ka_r"],
|
|
|
|
|
back: ["escape"]
|
|
|
|
|
}, this.keyPressed.bind(this))
|
2018-10-14 16:04:31 +08:00
|
|
|
|
this.gamepad = new Gamepad({
|
2019-04-06 03:53:51 +08:00
|
|
|
|
"confirm": ["b", "ls", "rs"],
|
|
|
|
|
"previous": ["u", "l", "lb", "lt", "lsu", "lsl"],
|
|
|
|
|
"next": ["d", "r", "rb", "rt", "lsd", "lsr"],
|
|
|
|
|
"back": ["start", "a"]
|
|
|
|
|
}, this.keyPressed.bind(this))
|
2018-10-14 16:04:31 +08:00
|
|
|
|
|
Custom scripting, #song=, translations
- A song can be linked directly by adding "#song=<id>" to the url, replace `<id>` with the id in the database, after loading it jumps immediately jumps to the difficulty selection
- Added tutorial translations
- Fixed song preview not playing
- Use text fallback for the logo when there are no vectors
- Increased combo cache by 1 pixel
- A custom javascript file can be loaded from config.json by defining "custom_js" value
- Added lots of events to help writing custom js files: `version-link, title-screen, language-change, song-select, song-select-move, song-select-difficulty, song-select-back, about, about-link, tutorial, import-songs, import-songs-default, session, session-start, session-end, debug, load-song, load-song-player2, load-song-unfocused, load-song-cancel, load-song-error, game-start, key-events, p2-game-end, p2-disconnected, p2-abandoned, pause, unpause, pause-restart, pause-song-select, game-lag, scoresheet, scoresheet-player2`
- Event syntax example:
```js
addEventListener("game-start", event => {
console.log("game-start", event.detail)
})
```
2019-02-14 17:32:45 +08:00
|
|
|
|
pageEvents.send("about", this.addDiag())
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
2019-04-17 02:06:41 +08:00
|
|
|
|
getElement(name){
|
|
|
|
|
return loader.screen.getElementsByClassName(name)[0]
|
2019-04-06 03:53:51 +08:00
|
|
|
|
}
|
|
|
|
|
keyPressed(pressed, name){
|
|
|
|
|
if(!pressed){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var selected = this.items[this.selected]
|
|
|
|
|
if(name === "confirm"){
|
|
|
|
|
if(selected === this.endButton){
|
|
|
|
|
this.onEnd()
|
|
|
|
|
}else{
|
|
|
|
|
this.getLink(selected).click()
|
|
|
|
|
pageEvents.send("about-link", selected)
|
|
|
|
|
assets.sounds["se_don"].play()
|
|
|
|
|
}
|
|
|
|
|
}else if(name === "previous" || name === "next"){
|
|
|
|
|
selected.classList.remove("selected")
|
|
|
|
|
this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1))
|
|
|
|
|
this.items[this.selected].classList.add("selected")
|
|
|
|
|
assets.sounds["se_ka"].play()
|
|
|
|
|
}else if(name === "back"){
|
|
|
|
|
this.onEnd()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
mod(length, index){
|
|
|
|
|
return ((index % length) + length) % length
|
|
|
|
|
}
|
2018-10-14 16:04:31 +08:00
|
|
|
|
onEnd(event){
|
|
|
|
|
var touched = false
|
2019-04-06 03:53:51 +08:00
|
|
|
|
if(event){
|
|
|
|
|
if(event.type === "touchstart"){
|
|
|
|
|
event.preventDefault()
|
|
|
|
|
touched = true
|
|
|
|
|
}else if(event.which !== 1){
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
|
|
|
|
this.clean()
|
2019-02-04 17:14:42 +08:00
|
|
|
|
assets.sounds["se_don"].play()
|
2018-10-14 16:04:31 +08:00
|
|
|
|
localStorage.setItem("tutorial", "true")
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
new SongSelect("about", false, touched)
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
addDiag(){
|
|
|
|
|
var diag = []
|
|
|
|
|
|
|
|
|
|
diag.push("```")
|
|
|
|
|
diag.push("Taiko-Web version: " + this.version)
|
2018-11-21 17:02:53 +08:00
|
|
|
|
diag.push("URL: " + location.href)
|
2018-10-14 16:04:31 +08:00
|
|
|
|
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")
|
|
|
|
|
}
|
2018-10-14 18:37:27 +08:00
|
|
|
|
diag.push("Blur performance: " + perf.blur + "ms, all images: " + perf.allImg + "ms")
|
|
|
|
|
diag.push("Page load: " + (perf.load / 1000).toFixed(1) + "s")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
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)
|
2020-10-31 19:47:42 +08:00
|
|
|
|
gamepadDiag.push("buttons: " + gamepads[i].buttons.length)
|
2018-10-14 16:04:31 +08:00
|
|
|
|
gamepadDiag.push("axes: " + gamepads[i].axes.length)
|
|
|
|
|
diag.push("Gamepad #" + (i + 1) + ": " + gamepadDiag.join(", "))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-01-23 02:47:09 +08:00
|
|
|
|
var userLangStr = " (none)"
|
|
|
|
|
if("languages" in navigator){
|
|
|
|
|
var userLang = navigator.languages.slice()
|
|
|
|
|
if(userLang[0] !== navigator.language){
|
|
|
|
|
userLang.unshift(navigator.language)
|
|
|
|
|
}
|
|
|
|
|
if(userLang.length !== 0){
|
|
|
|
|
userLangStr = " (" + userLang.join(", ") + ")"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
diag.push("Language: " + strings.id + userLangStr)
|
2019-11-28 14:04:40 +08:00
|
|
|
|
var latency = settings.getItem("latency")
|
|
|
|
|
diag.push("Audio Latency: " + (latency.audio > 0 ? "+" : "") + latency.audio.toString() + "ms, Video Latency: " + (latency.video > 0 ? "+" : "") + latency.video.toString() + "ms")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
var errorObj = {}
|
|
|
|
|
if(localStorage["lastError"]){
|
|
|
|
|
try{
|
|
|
|
|
errorObj = JSON.parse(localStorage["lastError"])
|
|
|
|
|
}catch(e){}
|
|
|
|
|
}
|
|
|
|
|
if(errorObj.timestamp && errorObj.stack){
|
2018-12-13 17:18:52 +08:00
|
|
|
|
if(errorObj.timestamp + 1000 * 60 * 60 * 24 > Date.now()){
|
2018-10-14 16:04:31 +08:00
|
|
|
|
diag.push("Last error: " + errorObj.stack)
|
|
|
|
|
diag.push("Error date: " + new Date(errorObj.timestamp).toGMTString())
|
|
|
|
|
}else{
|
|
|
|
|
localStorage.removeItem("lastError")
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
diag.push("```")
|
2018-10-14 18:37:27 +08:00
|
|
|
|
var diag = diag.join("\n")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
|
2018-10-14 18:37:27 +08:00
|
|
|
|
if(navigator.userAgent.indexOf("Android") >= 0){
|
|
|
|
|
var iframe = document.createElement("iframe")
|
|
|
|
|
this.diagTxt.appendChild(iframe)
|
|
|
|
|
var body = iframe.contentWindow.document.body
|
|
|
|
|
body.innerText = diag
|
|
|
|
|
|
|
|
|
|
body.setAttribute("style", `
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
margin: 2px 0 0 2px;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
cursor: text;
|
2018-10-14 16:04:31 +08:00
|
|
|
|
`)
|
2018-10-14 18:37:27 +08:00
|
|
|
|
body.setAttribute("onblur", `
|
|
|
|
|
getSelection().removeAllRanges()
|
|
|
|
|
`)
|
|
|
|
|
}else{
|
|
|
|
|
this.textarea = document.createElement("textarea")
|
|
|
|
|
this.textarea.readOnly = true
|
|
|
|
|
this.textarea.value = diag
|
|
|
|
|
this.diagTxt.appendChild(this.textarea)
|
|
|
|
|
if(!this.touchEnabled){
|
|
|
|
|
pageEvents.add(this.textarea, "focus", () => {
|
|
|
|
|
this.textarea.select()
|
|
|
|
|
})
|
|
|
|
|
pageEvents.add(this.textarea, "blur", () => {
|
|
|
|
|
getSelection().removeAllRanges()
|
|
|
|
|
})
|
|
|
|
|
}
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
2018-10-14 18:37:27 +08:00
|
|
|
|
|
2019-03-16 05:34:48 +08:00
|
|
|
|
var issueBody = strings.about.issueTemplate + "\n\n\n\n" + diag
|
2019-11-28 14:04:40 +08:00
|
|
|
|
if(this.hasEmail){
|
|
|
|
|
this.getLink(this.linkEmail).href += "?body=" + encodeURIComponent(issueBody.replace(/\n/g, "<br>\r\n"))
|
|
|
|
|
}
|
Custom scripting, #song=, translations
- A song can be linked directly by adding "#song=<id>" to the url, replace `<id>` with the id in the database, after loading it jumps immediately jumps to the difficulty selection
- Added tutorial translations
- Fixed song preview not playing
- Use text fallback for the logo when there are no vectors
- Increased combo cache by 1 pixel
- A custom javascript file can be loaded from config.json by defining "custom_js" value
- Added lots of events to help writing custom js files: `version-link, title-screen, language-change, song-select, song-select-move, song-select-difficulty, song-select-back, about, about-link, tutorial, import-songs, import-songs-default, session, session-start, session-end, debug, load-song, load-song-player2, load-song-unfocused, load-song-cancel, load-song-error, game-start, key-events, p2-game-end, p2-disconnected, p2-abandoned, pause, unpause, pause-restart, pause-song-select, game-lag, scoresheet, scoresheet-player2`
- Event syntax example:
```js
addEventListener("game-start", event => {
console.log("game-start", event.detail)
})
```
2019-02-14 17:32:45 +08:00
|
|
|
|
|
|
|
|
|
return diag
|
2018-10-14 18:37:27 +08:00
|
|
|
|
}
|
|
|
|
|
getLink(target){
|
|
|
|
|
return target.getElementsByTagName("a")[0]
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
|
|
|
|
linkButton(event){
|
2019-02-15 06:10:34 +08:00
|
|
|
|
if(event.target === event.currentTarget){
|
|
|
|
|
this.getLink(event.currentTarget).click()
|
2019-04-06 03:53:51 +08:00
|
|
|
|
pageEvents.send("about-link", event.currentTarget)
|
|
|
|
|
assets.sounds["se_don"].play()
|
2019-02-15 06:10:34 +08:00
|
|
|
|
}
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
|
|
|
|
clean(){
|
|
|
|
|
cancelTouch = true
|
2019-04-17 02:06:41 +08:00
|
|
|
|
this.keyboard.clean()
|
2018-10-14 16:04:31 +08:00
|
|
|
|
this.gamepad.clean()
|
2019-01-25 12:24:43 +08:00
|
|
|
|
pageEvents.remove(this.linkIssues, ["click", "touchend"])
|
2019-11-28 14:04:40 +08:00
|
|
|
|
if(this.hasEmail){
|
|
|
|
|
pageEvents.remove(this.linkEmail, ["click", "touchend"])
|
|
|
|
|
}
|
2018-10-14 16:04:31 +08:00
|
|
|
|
pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
|
2018-10-14 18:37:27 +08:00
|
|
|
|
if(this.textarea){
|
|
|
|
|
pageEvents.remove(this.textarea, ["focus", "blur"])
|
|
|
|
|
}
|
2019-04-06 03:53:51 +08:00
|
|
|
|
pageEvents.keyRemove(this, "all")
|
2018-10-14 16:04:31 +08:00
|
|
|
|
delete this.endButton
|
|
|
|
|
delete this.diagTxt
|
|
|
|
|
delete this.version
|
|
|
|
|
delete this.tutorialOuter
|
2019-01-25 12:24:43 +08:00
|
|
|
|
delete this.linkIssues
|
2018-10-14 16:04:31 +08:00
|
|
|
|
delete this.linkEmail
|
2018-10-14 18:37:27 +08:00
|
|
|
|
delete this.textarea
|
2018-10-14 16:04:31 +08:00
|
|
|
|
}
|
|
|
|
|
}
|