Add language to settings

This commit is contained in:
LoveEevee 2019-04-06 13:19:10 +03:00
parent 8565a3cbba
commit b3c0f8cd73
5 changed files with 113 additions and 57 deletions

View File

@ -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%;

View File

@ -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)

View File

@ -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

View File

@ -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",

View File

@ -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])
}