From b3c0f8cd73591116a0e85cad9f125a7a1691a779 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sat, 6 Apr 2019 13:19:10 +0300 Subject: [PATCH] Add language to settings --- public/src/css/main.css | 3 + public/src/js/pageevents.js | 1 + public/src/js/settings.js | 110 +++++++++++++++++++++++++++-------- public/src/js/strings.js | 21 ++++++- public/src/js/titlescreen.js | 35 ++--------- 5 files changed, 113 insertions(+), 57 deletions(-) diff --git a/public/src/css/main.css b/public/src/css/main.css index 9b44bb3..e312d72 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -181,6 +181,9 @@ kbd{ background: #ffb547; animation: 2s linear border-pulse infinite; } +.bold-fonts .setting-box{ + line-height: 1em; +} .setting-name{ position: relative; width: 50%; diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js index a1bba1d..c180802 100644 --- a/public/src/js/pageevents.js +++ b/public/src/js/pageevents.js @@ -84,6 +84,7 @@ class PageEvents{ keyEvent(event){ if(this.kbd.indexOf(event.key.toLowerCase()) !== -1){ this.lastKeyEvent = Date.now() + event.preventDefault() } this.keyListeners.forEach(addedKeyCode => { this.checkListener(addedKeyCode.get("all"), event) diff --git a/public/src/js/settings.js b/public/src/js/settings.js index b72c13b..1056fd9 100644 --- a/public/src/js/settings.js +++ b/public/src/js/settings.js @@ -4,6 +4,11 @@ class Settings{ var phone = /Android|iPhone|iPad/.test(navigator.userAgent) this.items = { + language: { + type: "language", + options: ["ja", "en", "cn", "tw", "ko"], + default: this.getLang() + }, resolution: { type: "select", options: ["high", "medium", "low", "lowest"], @@ -31,13 +36,18 @@ class Settings{ var storage = JSON.parse(localStorage.getItem("settings") || "{}") for(var i in this.items){ var current = this.items[i] - if(i in storage){ + if(current.type === "language"){ + this.storage[i] = localStorage.getItem("lang") + if(current.options.indexOf(this.storage[i]) === -1){ + this.storage[i] = null + } + }else if(i in storage){ if(current.type === "select" && current.options.indexOf(storage[i]) === -1){ this.storage[i] = null }else if(current.type === "keyboard"){ var obj = {} for(var j in current.default){ - if(storage[i][j] && storage[i][j][0]){ + if(storage[i] && storage[i][j] && storage[i][j][0]){ obj[j] = storage[i][j] }else{ obj = null @@ -65,9 +75,44 @@ class Settings{ setItem(name, value){ this.storage[name] = value try{ - localStorage.setItem("settings", JSON.stringify(this.storage)) + if(name === "language"){ + if(value){ + localStorage.setItem("lang", value) + }else{ + localStorage.removeItem("lang") + } + }else{ + var language = this.storage.language + delete this.storage.language + localStorage.setItem("settings", JSON.stringify(this.storage)) + this.storage.language = language + } }catch(e){} } + getLang(){ + if("languages" in navigator){ + var userLang = navigator.languages.slice() + userLang.unshift(navigator.language) + for(var i in userLang){ + for(var j in allStrings){ + if(allStrings[j].regex.test(userLang[i])){ + return j + } + } + } + } + return "ja" + } + setLang(lang, noEvent){ + strings = lang + var boldFonts = strings.font === "Microsoft YaHei, sans-serif" + loader.screen.style.fontFamily = strings.font + loader.screen.style.fontWeight = boldFonts ? "bold" : "" + loader.screen.classList[boldFonts ? "add" : "remove"]("bold-fonts") + if(!noEvent){ + pageEvents.send("language-change", lang.id) + } + } } class SettingsView{ @@ -81,15 +126,10 @@ class SettingsView{ } this.mode = "settings" - var tutorialTitle = document.getElementById("tutorial-title") - tutorialTitle.innerText = strings.gameSettings - tutorialTitle.setAttribute("alt", strings.gameSettings) + this.tutorialTitle = document.getElementById("tutorial-title") this.defaultButton = document.getElementById("settings-default") - this.defaultButton.innerText = strings.settings.default - this.defaultButton.setAttribute("alt", strings.settings.default) this.endButton = document.getElementById("tutorial-end-button") - this.endButton.innerText = strings.settings.ok - this.endButton.setAttribute("alt", strings.settings.ok) + this.setStrings() this.resolution = settings.getItem("resolution") var content = document.getElementById("tutorial-content") @@ -128,6 +168,7 @@ class SettingsView{ this.items.push({ id: i, settingBox: settingBox, + nameDiv: nameDiv, valueDiv: valueDiv }) } @@ -167,7 +208,9 @@ class SettingsView{ getValue(name, valueDiv){ var current = settings.items[name] var value = settings.getItem(name) - if(current.type === "select"){ + if(current.type === "language"){ + value = allStrings[value].name + " (" + value + ")" + }else if(current.type === "select"){ value = strings.settings[name][value] }else if(current.type === "toggle"){ value = value ? strings.settings.on : strings.settings.off @@ -199,7 +242,7 @@ class SettingsView{ this.selected = selectedIndex selected.settingBox.classList.add("selected") } - if(current.type === "select"){ + if(current.type === "language" || current.type === "select"){ value = current.options[this.mod(current.options.length, current.options.indexOf(value) + 1)] }else if(current.type === "toggle"){ value = !value @@ -215,6 +258,9 @@ class SettingsView{ settings.setItem(name, value) this.getValue(name, this.items[this.selected].valueDiv) assets.sounds["se_ka"].play() + if(current.type === "language"){ + this.setLang(allStrings[value]) + } } keyEvent(event){ if(event.keyCode === 27 || event.keyCode === 8 || event.keyCode === 9){ @@ -231,6 +277,7 @@ class SettingsView{ } } if(this.mode === "keyboard"){ + event.preventDefault() var currentKey = event.key.toLowerCase() for(var i in this.keyboardKeys){ if(this.keyboardKeys[i][0] === currentKey || !currentKey){ @@ -304,21 +351,13 @@ class SettingsView{ if(event && event.type === "touchstart"){ event.preventDefault() } - var selectedIndex = this.items.findIndex(item => item.id === "default") - if(this.selected !== selectedIndex){ - this.items[this.selected].settingBox.classList.remove("selected") - this.selected = selectedIndex - this.items[this.selected].settingBox.classList.add("selected") + if(this.mode === "keyboard"){ + this.keyboardBack(this.items[this.selected]) } for(var i in settings.items){ settings.setItem(i, null) } - for(var i in this.items){ - var item = this.items[i] - if(item.valueDiv){ - this.getValue(item.id, item.valueDiv) - } - } + this.setLang(allStrings[settings.getItem("language")]) assets.sounds["se_don"].play() } onEnd(event){ @@ -337,6 +376,30 @@ class SettingsView{ new SongSelect("settings", false, touched) }, 500) } + setLang(lang){ + settings.setLang(lang) + if(failedTests.length !== 0){ + showUnsupported(strings) + } + for(var i in this.items){ + var item = this.items[i] + if(item.valueDiv){ + var name = strings.settings[item.id].name + item.nameDiv.innerText = name + item.nameDiv.setAttribute("alt", name) + this.getValue(item.id, item.valueDiv) + } + } + this.setStrings() + } + setStrings(){ + this.tutorialTitle.innerText = strings.gameSettings + this.tutorialTitle.setAttribute("alt", strings.gameSettings) + this.defaultButton.innerText = strings.settings.default + this.defaultButton.setAttribute("alt", strings.settings.default) + this.endButton.innerText = strings.settings.ok + this.endButton.setAttribute("alt", strings.settings.ok) + } mod(length, index){ return ((index % length) + length) % length } @@ -347,6 +410,7 @@ class SettingsView{ for(var i in this.items){ pageEvents.remove(this.items[i].settingBox, ["mousedown", "touchstart"]) } + delete this.tutorialTitle delete this.defaultButton delete this.endButton delete this.items diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 9d692ba..57134ef 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -100,6 +100,9 @@ cancel: "キャンセル" } this.settings = { + language: { + name: "言語" + }, resolution: { name: "ゲームの解像度", high: "高", @@ -231,6 +234,9 @@ function StringsEn(){ cancel: "Cancel" } this.settings = { + language: { + name: "Language" + }, resolution: { name: "Game Resolution", high: "High", @@ -362,6 +368,9 @@ function StringsCn(){ cancel: "取消" } this.settings = { + language: { + name: "语言" + }, resolution: { name: "游戏分辨率", high: "高", @@ -373,7 +382,7 @@ function StringsCn(){ name: "触摸动画" }, keyboardSettings: { - name: "Keyboard Settings", + name: "键盘设置", ka_l: "Left Rim", don_l: "Left Surface", don_r: "Right Surface", @@ -493,6 +502,9 @@ function StringsTw(){ cancel: "取消" } this.settings = { + language: { + name: "語系" + }, resolution: { name: "遊戲分辨率", high: "高", @@ -504,7 +516,7 @@ function StringsTw(){ name: "觸摸動畫" }, keyboardSettings: { - name: "Keyboard Settings", + name: "鍵盤設置", ka_l: "Left Rim", don_l: "Left Surface", don_r: "Right Surface", @@ -624,6 +636,9 @@ function StringsKo(){ cancel: "취소" } this.settings = { + language: { + name: "언어" + }, resolution: { name: "게임 해상도", high: "높은", @@ -635,7 +650,7 @@ function StringsKo(){ name: "터치 애니메이션" }, keyboardSettings: { - name: "Keyboard Settings", + name: "키보드 설정", ka_l: "Left Rim", don_l: "Left Surface", don_r: "Right Surface", diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 709de14..7e62525 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -14,7 +14,7 @@ class Titlescreen{ document.getElementById("globe-path").setAttribute("d", vectors.globe) this.logo = new Logo() } - this.lang = this.getLang() + this.lang = settings.getItem("language") this.setLang(allStrings[this.lang], true) if(songId){ @@ -101,32 +101,8 @@ class Titlescreen{ } } - getLang(){ - if(localStorage.lang && localStorage.lang in allStrings){ - return localStorage.lang - } - if("languages" in navigator){ - var userLang = navigator.languages.slice() - userLang.unshift(navigator.language) - for(var i in userLang){ - for(var j in allStrings){ - if(allStrings[j].regex.test(userLang[i])){ - return j - } - } - } - } - return "ja" - } - setLang(lang, initial){ - strings = lang - - loader.screen.style.fontFamily = strings.font - loader.screen.style.fontWeight = strings.font === "Microsoft YaHei, sans-serif" ? "bold" : "" - - if(failedTests.length !== 0){ - showUnsupported(strings) - } + setLang(lang, noEvent){ + settings.setLang(lang, noEvent || this.songId) if(this.songId){ return } @@ -141,9 +117,6 @@ class Titlescreen{ this.disclaimerCopyright.setAttribute("alt", strings.titleCopyright) this.logo.updateSubtitle() - if(!initial){ - pageEvents.send("language-change", lang.id) - } } addLangs(){ for(var i in allStrings){ @@ -158,7 +131,7 @@ class Titlescreen{ } langChange(){ this.lang = this.langDropdown.value - localStorage.lang = this.lang + settings.setItem("language", this.lang) this.setLang(allStrings[this.lang]) }