Move language settings from title screen

This commit is contained in:
LoveEevee 2019-04-06 22:14:44 +03:00
parent a33ff2a868
commit a4d938e888
7 changed files with 131 additions and 170 deletions

View File

@ -66,8 +66,5 @@
"", "",
"logo5": "logo5":
"",
"globe":
"" ""
} }

View File

@ -176,7 +176,8 @@ kbd{
.setting-box:first-child{ .setting-box:first-child{
margin-top: 0; margin-top: 0;
} }
#tutorial-content:not(:hover) .setting-box.selected, .settings-outer #tutorial-content:not(:hover) .setting-box.selected,
#tutorial-outer:not(.settings-outer) .setting-box.selected,
.setting-box:hover{ .setting-box:hover{
background: #ffb547; background: #ffb547;
animation: 2s linear border-pulse infinite; animation: 2s linear border-pulse infinite;
@ -192,6 +193,7 @@ kbd{
box-sizing: border-box; box-sizing: border-box;
} }
#tutorial-content:not(:hover) .setting-box.selected .setting-name, #tutorial-content:not(:hover) .setting-box.selected .setting-name,
#tutorial-outer:not(.settings-outer) .setting-box.selected .setting-name,
.setting-box:hover .setting-name{ .setting-box:hover .setting-name{
color: #fff; color: #fff;
z-index: 0; z-index: 0;

View File

@ -38,53 +38,6 @@
-webkit-text-stroke: 0.25em #f00; -webkit-text-stroke: 0.25em #f00;
filter: blur(0.3vmin); filter: blur(0.3vmin);
} }
#lang{
font-size: 3vmin;
position: absolute;
bottom: 0;
left: 0;
width: 7em;
height: 4em;
color: #000;
z-index: 5;
}
#lang:focus-within{
outline: #4d90fe auto 5px;
}
#lang-dropdown{
font-size: 1.7em;
font-family: Microsoft YaHei, sans-serif;
opacity: 0;
width: 100%;
height: 100%;
color: #000;
cursor: pointer;
}
#lang-id{
position: absolute;
top: 0;
bottom: 0;
left: 2.6em;
font-family: TnT, Meiryo, sans-serif;
font-size: 1.5em;
font-weight: normal;
color: #fff;
line-height: 2.75em;
z-index: 0;
}
#lang-icon{
position: absolute;
width: 2.8em;
height: 2.8em;
padding: 0.6em;
fill: currentColor;
}
#lang:hover #lang-icon{
color: #f00;
}
#lang:hover #lang-id::before {
-webkit-text-stroke: 0.25em #f00;
}
#title-disclaimer { #title-disclaimer {
text-align: center; text-align: center;
position: absolute; position: absolute;

View File

@ -116,30 +116,37 @@ class Settings{
} }
class SettingsView{ class SettingsView{
constructor(touchEnabled){ constructor(touchEnabled, tutorial){
this.touchEnabled = touchEnabled this.touchEnabled = touchEnabled
loader.changePage("settings", false) this.tutorial = tutorial
if(!tutorial){
loader.changePage("settings", tutorial)
assets.sounds["bgm_settings"].playLoop(0.1, false, 0, 1.392, 26.992) assets.sounds["bgm_settings"].playLoop(0.1, false, 0, 1.392, 26.992)
this.defaultButton = document.getElementById("settings-default")
}else if(touchEnabled){
document.getElementById("tutorial-outer").classList.add("settings-outer")
}
if(touchEnabled){ if(touchEnabled){
document.getElementById("tutorial-outer").classList.add("touch-enabled") document.getElementById("tutorial-outer").classList.add("touch-enabled")
} }
this.mode = "settings" this.mode = "settings"
this.tutorialTitle = document.getElementById("tutorial-title") this.tutorialTitle = document.getElementById("tutorial-title")
this.defaultButton = document.getElementById("settings-default")
this.endButton = document.getElementById("tutorial-end-button") this.endButton = document.getElementById("tutorial-end-button")
if(!tutorial){
this.setStrings() this.setStrings()
}
this.resolution = settings.getItem("resolution") this.resolution = settings.getItem("resolution")
var content = document.getElementById("tutorial-content") var content = document.getElementById("tutorial-content")
this.items = [] this.items = []
this.selected = 0 this.selected = tutorial ? 1 : 0
for(let i in settings.items){ for(let i in settings.items){
var current = settings.items[i] var current = settings.items[i]
if( if(
!touchEnabled && current.touch === true || !touchEnabled && current.touch === true ||
touchEnabled && current.touch === false touchEnabled && current.touch === false ||
tutorial && current.type !== "language"
){ ){
continue continue
} }
@ -172,17 +179,19 @@ class SettingsView{
valueDiv: valueDiv valueDiv: valueDiv
}) })
} }
if(!tutorial){
this.items.push({ this.items.push({
id: "default", id: "default",
settingBox: this.defaultButton settingBox: this.defaultButton
}) })
pageEvents.add(this.defaultButton, ["mousedown", "touchstart"], this.defaultSettings.bind(this))
}
this.items.push({ this.items.push({
id: "back", id: "back",
settingBox: this.endButton settingBox: this.endButton
}) })
this.setKbd() this.setKbd()
pageEvents.add(this.defaultButton, ["mousedown", "touchstart"], this.defaultSettings.bind(this))
pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this)) pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
pageEvents.keyAdd(this, "all", "down", this.keyEvent.bind(this)) pageEvents.keyAdd(this, "all", "down", this.keyEvent.bind(this))
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
@ -192,9 +201,10 @@ class SettingsView{
"next": ["d", "r", "rb", "rt", "lsd", "lsr"], "next": ["d", "r", "rb", "rt", "lsd", "lsr"],
"back": ["start", "a"] "back": ["start", "a"]
}, this.keyPressed.bind(this)) }, this.keyPressed.bind(this))
if(!tutorial){
pageEvents.send("settings") pageEvents.send("settings")
} }
}
setKbd(){ setKbd(){
var kbdSettings = settings.getItem("keyboardSettings") var kbdSettings = settings.getItem("keyboardSettings")
this.kbd = { this.kbd = {
@ -308,7 +318,9 @@ class SettingsView{
do{ do{
this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1)) this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1))
}while(this.items[this.selected].id === "default" && name !== "previous") }while(this.items[this.selected].id === "default" && name !== "previous")
this.items[this.selected].settingBox.classList.add("selected") selected = this.items[this.selected]
selected.settingBox.classList.add("selected")
selected.settingBox.scrollIntoView()
assets.sounds["se_ka"].play() assets.sounds["se_ka"].play()
}else if(name === "back"){ }else if(name === "back"){
this.onEnd() this.onEnd()
@ -362,6 +374,10 @@ class SettingsView{
assets.sounds["se_don"].play() assets.sounds["se_don"].play()
} }
onEnd(event){ onEnd(event){
if(this.tutorial){
this.clean()
return this.tutorial.onEnd(event)
}
var touched = false var touched = false
if(event){ if(event){
if(event.type === "touchstart"){ if(event.type === "touchstart"){
@ -394,6 +410,9 @@ class SettingsView{
this.setStrings() this.setStrings()
} }
setStrings(){ setStrings(){
if(this.tutorial){
this.tutorial.setStrings()
}else{
this.tutorialTitle.innerText = strings.gameSettings this.tutorialTitle.innerText = strings.gameSettings
this.tutorialTitle.setAttribute("alt", strings.gameSettings) this.tutorialTitle.setAttribute("alt", strings.gameSettings)
this.defaultButton.innerText = strings.settings.default this.defaultButton.innerText = strings.settings.default
@ -401,6 +420,7 @@ class SettingsView{
this.endButton.innerText = strings.settings.ok this.endButton.innerText = strings.settings.ok
this.endButton.setAttribute("alt", strings.settings.ok) this.endButton.setAttribute("alt", strings.settings.ok)
} }
}
mod(length, index){ mod(length, index){
return ((index % length) + length) % length return ((index % length) + length) % length
} }
@ -411,8 +431,10 @@ class SettingsView{
for(var i in this.items){ for(var i in this.items){
pageEvents.remove(this.items[i].settingBox, ["mousedown", "touchstart"]) pageEvents.remove(this.items[i].settingBox, ["mousedown", "touchstart"])
} }
delete this.tutorialTitle if(this.defaultButton){
delete this.defaultButton delete this.defaultButton
}
delete this.tutorialTitle
delete this.endButton delete this.endButton
delete this.items delete this.items
if(this.resolution !== settings.getItem("resolution")){ if(this.resolution !== settings.getItem("resolution")){

View File

@ -7,15 +7,11 @@ class Titlescreen{
this.titleScreen = document.getElementById("title-screen") this.titleScreen = document.getElementById("title-screen")
this.proceed = document.getElementById("title-proceed") this.proceed = document.getElementById("title-proceed")
this.langDropdown = document.getElementById("lang-dropdown")
this.langId = document.getElementById("lang-id")
this.disclaimerText = document.getElementById("title-disclaimer-text") this.disclaimerText = document.getElementById("title-disclaimer-text")
this.disclaimerCopyright = document.getElementById("title-disclaimer-copyright") this.disclaimerCopyright = document.getElementById("title-disclaimer-copyright")
document.getElementById("globe-path").setAttribute("d", vectors.globe)
this.logo = new Logo() this.logo = new Logo()
} }
this.lang = settings.getItem("language") this.setLang(allStrings[settings.getItem("language")])
this.setLang(allStrings[this.lang], true)
if(songId){ if(songId){
if(localStorage.getItem("tutorial") === "true"){ if(localStorage.getItem("tutorial") === "true"){
@ -24,11 +20,8 @@ class Titlescreen{
new Tutorial(false, this.songId) new Tutorial(false, this.songId)
} }
}else{ }else{
this.addLangs()
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this)) pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
pageEvents.add(this.titleScreen, ["mousedown", "touchstart"], this.onPressed.bind(this)) pageEvents.add(this.titleScreen, ["mousedown", "touchstart"], this.onPressed.bind(this))
pageEvents.add(this.langDropdown, "change", this.langChange.bind(this))
assets.sounds["v_title"].play() assets.sounds["v_title"].play()
var kbdSettings = settings.getItem("keyboardSettings") var kbdSettings = settings.getItem("keyboardSettings")
@ -86,7 +79,7 @@ class Titlescreen{
goNext(fromP2){ goNext(fromP2){
if(p2.session && !fromP2){ if(p2.session && !fromP2){
p2.send("songsel") p2.send("songsel")
}else if(fromP2 || this.touched || localStorage.getItem("tutorial") === "true"){ }else if(fromP2 || localStorage.getItem("tutorial") === "true"){
if(this.touched){ if(this.touched){
localStorage.setItem("tutorial", "true") localStorage.setItem("tutorial", "true")
} }
@ -96,20 +89,17 @@ class Titlescreen{
}, 500) }, 500)
}else{ }else{
setTimeout(() => { setTimeout(() => {
new Tutorial(false, this.songId) new Tutorial(false, this.songId, this.touched)
}, 500) }, 500)
} }
} }
setLang(lang, noEvent){ setLang(lang, noEvent){
settings.setLang(lang, noEvent || this.songId) settings.setLang(lang, true)
if(this.songId){ if(this.songId){
return return
} }
this.proceed.innerText = strings.titleProceed this.proceed.innerText = strings.titleProceed
this.proceed.setAttribute("alt", strings.titleProceed) this.proceed.setAttribute("alt", strings.titleProceed)
this.langId.innerText = strings.id.toUpperCase()
this.langId.setAttribute("alt", strings.id.toUpperCase())
this.disclaimerText.innerText = strings.titleDisclaimer this.disclaimerText.innerText = strings.titleDisclaimer
this.disclaimerText.setAttribute("alt", strings.titleDisclaimer) this.disclaimerText.setAttribute("alt", strings.titleDisclaimer)
@ -118,34 +108,15 @@ class Titlescreen{
this.logo.updateSubtitle() this.logo.updateSubtitle()
} }
addLangs(){
for(var i in allStrings){
var option = document.createElement("option")
option.value = i
if(i === this.lang){
option.selected = true
}
option.appendChild(document.createTextNode(allStrings[i].name))
this.langDropdown.appendChild(option)
}
}
langChange(){
this.lang = this.langDropdown.value
settings.setItem("language", this.lang)
this.setLang(allStrings[this.lang])
}
clean(){ clean(){
this.gamepad.clean() this.gamepad.clean()
this.logo.clean() this.logo.clean()
assets.sounds["v_title"].stop() assets.sounds["v_title"].stop()
pageEvents.keyRemove(this, "all") pageEvents.keyRemove(this, "all")
pageEvents.remove(this.titleScreen, ["mousedown", "touchstart"]) pageEvents.remove(this.titleScreen, ["mousedown", "touchstart"])
pageEvents.remove(this.langDropdown, "change")
delete this.titleScreen delete this.titleScreen
delete this.proceed delete this.proceed
delete this.titleDisclaimer delete this.titleDisclaimer
delete this.titleCopyright delete this.titleCopyright
delete this.langDropdown
} }
} }

View File

@ -1,54 +1,18 @@
class Tutorial{ class Tutorial{
constructor(fromSongSel, songId){ constructor(fromSongSel, songId, touchEnabled){
this.fromSongSel = fromSongSel this.fromSongSel = fromSongSel
this.songId = songId this.songId = songId
loader.changePage("tutorial", true) this.touchEnabled = touchEnabled
loader.changePage("tutorial", fromSongSel || !touchEnabled)
assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054)
this.endButton = document.getElementById("tutorial-end-button") this.endButton = document.getElementById("tutorial-end-button")
var tutorialTitle = document.getElementById("tutorial-title") this.tutorialTitle = document.getElementById("tutorial-title")
tutorialTitle.innerText = strings.howToPlay this.tutorialDiv = document.createElement("div")
tutorialTitle.setAttribute("alt", strings.howToPlay) document.getElementById("tutorial-content").appendChild(this.tutorialDiv)
var tutorialContent = document.getElementById("tutorial-content") this.setStrings()
var kbdSettings = settings.getItem("keyboardSettings")
var keys = [
kbdSettings.don_l[0].toUpperCase(),
kbdSettings.don_r[0].toUpperCase(),
kbdSettings.ka_l[0].toUpperCase(),
kbdSettings.ka_r[0].toUpperCase(),
"Q", "SHIFT", "CTRL"
]
var keyIndex = 0
strings.tutorial.basics.forEach(string => {
var par = document.createElement("p")
var stringKeys = string.split("%s")
stringKeys.forEach((stringKey, i) => {
if(i !== 0){
this.insertKey(keys[keyIndex++], par)
}
this.insertText(stringKey, par)
})
tutorialContent.appendChild(par)
})
var par = document.createElement("p")
var span = document.createElement("span")
span.style.fontWeight = "bold"
span.innerText = strings.tutorial.otherControls
par.appendChild(span)
strings.tutorial.otherTutorial.forEach(string => {
par.appendChild(document.createElement("br"))
var stringKeys = string.split("%s")
stringKeys.forEach((stringKey, i) => {
if(i !== 0){
this.insertKey(keys[keyIndex++], par)
}
this.insertText(stringKey, par)
})
})
tutorialContent.appendChild(par)
this.endButton.innerText = strings.tutorial.ok
this.endButton.setAttribute("alt", strings.tutorial.ok)
if(fromSongSel){
pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this)) pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
pageEvents.keyAdd(this, "all", "down", event => { pageEvents.keyAdd(this, "all", "down", event => {
if(event.keyCode === 13 || event.keyCode === 27 || event.keyCode === 8){ if(event.keyCode === 13 || event.keyCode === 27 || event.keyCode === 8){
@ -60,6 +24,9 @@ class Tutorial{
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
"confirm": ["start", "b", "ls", "rs"] "confirm": ["start", "b", "ls", "rs"]
}, this.onEnd.bind(this)) }, this.onEnd.bind(this))
}else{
new SettingsView(touchEnabled, this)
}
pageEvents.send("tutorial") pageEvents.send("tutorial")
} }
insertText(text, parent){ insertText(text, parent){
@ -87,11 +54,65 @@ class Tutorial{
new SongSelect(this.fromSongSel ? "tutorial" : false, false, touched, this.songId) new SongSelect(this.fromSongSel ? "tutorial" : false, false, touched, this.songId)
}, 500) }, 500)
} }
setStrings(){
if(!this.fromSongSel && this.touchEnabled){
this.tutorialTitle.innerText = strings.gameSettings
this.tutorialTitle.setAttribute("alt", strings.gameSettings)
this.endButton.innerText = strings.settings.ok
this.endButton.setAttribute("alt", strings.settings.ok)
return
}
this.tutorialTitle.innerText = strings.howToPlay
this.tutorialTitle.setAttribute("alt", strings.howToPlay)
this.endButton.innerText = strings.tutorial.ok
this.endButton.setAttribute("alt", strings.tutorial.ok)
this.tutorialDiv.innerHTML = ""
var kbdSettings = settings.getItem("keyboardSettings")
var keys = [
kbdSettings.don_l[0].toUpperCase(),
kbdSettings.don_r[0].toUpperCase(),
kbdSettings.ka_l[0].toUpperCase(),
kbdSettings.ka_r[0].toUpperCase(),
"Q", "SHIFT", "CTRL"
]
var keyIndex = 0
strings.tutorial.basics.forEach(string => {
var par = document.createElement("p")
var stringKeys = string.split("%s")
stringKeys.forEach((stringKey, i) => {
if(i !== 0){
this.insertKey(keys[keyIndex++], par)
}
this.insertText(stringKey, par)
})
this.tutorialDiv.appendChild(par)
})
var par = document.createElement("p")
var span = document.createElement("span")
span.style.fontWeight = "bold"
span.innerText = strings.tutorial.otherControls
par.appendChild(span)
strings.tutorial.otherTutorial.forEach(string => {
par.appendChild(document.createElement("br"))
var stringKeys = string.split("%s")
stringKeys.forEach((stringKey, i) => {
if(i !== 0){
this.insertKey(keys[keyIndex++], par)
}
this.insertText(stringKey, par)
})
})
this.tutorialDiv.appendChild(par)
}
clean(){ clean(){
if(this.fromSongSel){
this.gamepad.clean() this.gamepad.clean()
assets.sounds["bgm_setsume"].stop()
pageEvents.remove(this.endButton, ["mousedown", "touchstart"]) pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
pageEvents.keyRemove(this, "all") pageEvents.keyRemove(this, "all")
}
assets.sounds["bgm_setsume"].stop()
delete this.tutorialTitle
delete this.endButton delete this.endButton
delete this.tutorialDiv
} }
} }

View File

@ -6,8 +6,3 @@
<span class="stroke-sub" id="title-disclaimer-copyright"></span> <span class="stroke-sub" id="title-disclaimer-copyright"></span>
</div> </div>
</div> </div>
<div id="lang">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" id="lang-icon"><circle cx="19" cy="19" r="19"/><path id="globe-path" style="fill:none;stroke-width:2;stroke:#fff"/><circle cx="19" cy="19" r="15" style="fill:none;stroke-width:2;stroke:#fff"/></svg>
<div id="lang-id" class="stroke-sub"></div>
<select id="lang-dropdown"></select>
</div>