diff --git a/public/assets/img/vectors.json b/public/assets/img/vectors.json index 0e55a2a..536fb30 100644 --- a/public/assets/img/vectors.json +++ b/public/assets/img/vectors.json @@ -66,8 +66,5 @@ "", "logo5": -"", - -"globe": "" } diff --git a/public/src/css/main.css b/public/src/css/main.css index e312d72..11e4c64 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -176,7 +176,8 @@ kbd{ .setting-box:first-child{ 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{ background: #ffb547; animation: 2s linear border-pulse infinite; @@ -192,6 +193,7 @@ kbd{ box-sizing: border-box; } #tutorial-content:not(:hover) .setting-box.selected .setting-name, +#tutorial-outer:not(.settings-outer) .setting-box.selected .setting-name, .setting-box:hover .setting-name{ color: #fff; z-index: 0; diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css index 6a280a3..3ca80fc 100644 --- a/public/src/css/titlescreen.css +++ b/public/src/css/titlescreen.css @@ -38,53 +38,6 @@ -webkit-text-stroke: 0.25em #f00; 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 { text-align: center; position: absolute; diff --git a/public/src/js/settings.js b/public/src/js/settings.js index e57b2c1..d17c92b 100644 --- a/public/src/js/settings.js +++ b/public/src/js/settings.js @@ -116,30 +116,37 @@ class Settings{ } class SettingsView{ - constructor(touchEnabled){ + constructor(touchEnabled, tutorial){ this.touchEnabled = touchEnabled - loader.changePage("settings", false) - assets.sounds["bgm_settings"].playLoop(0.1, false, 0, 1.392, 26.992) - + this.tutorial = tutorial + if(!tutorial){ + loader.changePage("settings", tutorial) + 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){ document.getElementById("tutorial-outer").classList.add("touch-enabled") } this.mode = "settings" this.tutorialTitle = document.getElementById("tutorial-title") - this.defaultButton = document.getElementById("settings-default") this.endButton = document.getElementById("tutorial-end-button") - this.setStrings() + if(!tutorial){ + this.setStrings() + } this.resolution = settings.getItem("resolution") var content = document.getElementById("tutorial-content") this.items = [] - this.selected = 0 + this.selected = tutorial ? 1 : 0 for(let i in settings.items){ var current = settings.items[i] if( !touchEnabled && current.touch === true || - touchEnabled && current.touch === false + touchEnabled && current.touch === false || + tutorial && current.type !== "language" ){ continue } @@ -172,17 +179,19 @@ class SettingsView{ valueDiv: valueDiv }) } - this.items.push({ - id: "default", - settingBox: this.defaultButton - }) + if(!tutorial){ + this.items.push({ + id: "default", + settingBox: this.defaultButton + }) + pageEvents.add(this.defaultButton, ["mousedown", "touchstart"], this.defaultSettings.bind(this)) + } this.items.push({ id: "back", settingBox: this.endButton }) this.setKbd() - pageEvents.add(this.defaultButton, ["mousedown", "touchstart"], this.defaultSettings.bind(this)) pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this)) pageEvents.keyAdd(this, "all", "down", this.keyEvent.bind(this)) this.gamepad = new Gamepad({ @@ -192,8 +201,9 @@ class SettingsView{ "next": ["d", "r", "rb", "rt", "lsd", "lsr"], "back": ["start", "a"] }, this.keyPressed.bind(this)) - - pageEvents.send("settings") + if(!tutorial){ + pageEvents.send("settings") + } } setKbd(){ var kbdSettings = settings.getItem("keyboardSettings") @@ -308,7 +318,9 @@ class SettingsView{ do{ this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1)) }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() }else if(name === "back"){ this.onEnd() @@ -362,6 +374,10 @@ class SettingsView{ assets.sounds["se_don"].play() } onEnd(event){ + if(this.tutorial){ + this.clean() + return this.tutorial.onEnd(event) + } var touched = false if(event){ if(event.type === "touchstart"){ @@ -394,12 +410,16 @@ class SettingsView{ 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) + if(this.tutorial){ + this.tutorial.setStrings() + }else{ + 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 @@ -411,8 +431,10 @@ class SettingsView{ for(var i in this.items){ pageEvents.remove(this.items[i].settingBox, ["mousedown", "touchstart"]) } + if(this.defaultButton){ + delete this.defaultButton + } delete this.tutorialTitle - delete this.defaultButton delete this.endButton delete this.items if(this.resolution !== settings.getItem("resolution")){ diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 7e62525..a5ba7b6 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -7,15 +7,11 @@ class Titlescreen{ this.titleScreen = document.getElementById("title-screen") 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.disclaimerCopyright = document.getElementById("title-disclaimer-copyright") - document.getElementById("globe-path").setAttribute("d", vectors.globe) this.logo = new Logo() } - this.lang = settings.getItem("language") - this.setLang(allStrings[this.lang], true) + this.setLang(allStrings[settings.getItem("language")]) if(songId){ if(localStorage.getItem("tutorial") === "true"){ @@ -24,11 +20,8 @@ class Titlescreen{ new Tutorial(false, this.songId) } }else{ - this.addLangs() - pageEvents.keyAdd(this, "all", "down", this.keyDown.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() var kbdSettings = settings.getItem("keyboardSettings") @@ -86,7 +79,7 @@ class Titlescreen{ goNext(fromP2){ if(p2.session && !fromP2){ p2.send("songsel") - }else if(fromP2 || this.touched || localStorage.getItem("tutorial") === "true"){ + }else if(fromP2 || localStorage.getItem("tutorial") === "true"){ if(this.touched){ localStorage.setItem("tutorial", "true") } @@ -96,20 +89,17 @@ class Titlescreen{ }, 500) }else{ setTimeout(() => { - new Tutorial(false, this.songId) + new Tutorial(false, this.songId, this.touched) }, 500) } } - setLang(lang, noEvent){ - settings.setLang(lang, noEvent || this.songId) + settings.setLang(lang, true) if(this.songId){ return } this.proceed.innerText = 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.setAttribute("alt", strings.titleDisclaimer) @@ -118,34 +108,15 @@ class Titlescreen{ 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(){ this.gamepad.clean() this.logo.clean() assets.sounds["v_title"].stop() pageEvents.keyRemove(this, "all") pageEvents.remove(this.titleScreen, ["mousedown", "touchstart"]) - pageEvents.remove(this.langDropdown, "change") delete this.titleScreen delete this.proceed delete this.titleDisclaimer delete this.titleCopyright - delete this.langDropdown } } diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js index 7a1f484..01a30a7 100644 --- a/public/src/js/tutorial.js +++ b/public/src/js/tutorial.js @@ -1,65 +1,32 @@ class Tutorial{ - constructor(fromSongSel, songId){ + constructor(fromSongSel, songId, touchEnabled){ this.fromSongSel = fromSongSel 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) this.endButton = document.getElementById("tutorial-end-button") - var tutorialTitle = document.getElementById("tutorial-title") - tutorialTitle.innerText = strings.howToPlay - tutorialTitle.setAttribute("alt", strings.howToPlay) - var tutorialContent = document.getElementById("tutorial-content") - 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) + this.tutorialTitle = document.getElementById("tutorial-title") + this.tutorialDiv = document.createElement("div") + document.getElementById("tutorial-content").appendChild(this.tutorialDiv) + this.setStrings() - pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this)) - pageEvents.keyAdd(this, "all", "down", event => { - if(event.keyCode === 13 || event.keyCode === 27 || event.keyCode === 8){ - // Enter, Esc, Backspace - this.onEnd.bind(this) - } - }) - - this.gamepad = new Gamepad({ - "confirm": ["start", "b", "ls", "rs"] - }, this.onEnd.bind(this)) + if(fromSongSel){ + pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this)) + pageEvents.keyAdd(this, "all", "down", event => { + if(event.keyCode === 13 || event.keyCode === 27 || event.keyCode === 8){ + // Enter, Esc, Backspace + this.onEnd.bind(this) + } + }) + + this.gamepad = new Gamepad({ + "confirm": ["start", "b", "ls", "rs"] + }, this.onEnd.bind(this)) + }else{ + new SettingsView(touchEnabled, this) + } pageEvents.send("tutorial") } insertText(text, parent){ @@ -87,11 +54,65 @@ class Tutorial{ new SongSelect(this.fromSongSel ? "tutorial" : false, false, touched, this.songId) }, 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(){ - this.gamepad.clean() + if(this.fromSongSel){ + this.gamepad.clean() + pageEvents.remove(this.endButton, ["mousedown", "touchstart"]) + pageEvents.keyRemove(this, "all") + } assets.sounds["bgm_setsume"].stop() - pageEvents.remove(this.endButton, ["mousedown", "touchstart"]) - pageEvents.keyRemove(this, "all") + delete this.tutorialTitle delete this.endButton + delete this.tutorialDiv } } diff --git a/public/src/views/titlescreen.html b/public/src/views/titlescreen.html index e660734..449427f 100644 --- a/public/src/views/titlescreen.html +++ b/public/src/views/titlescreen.html @@ -6,8 +6,3 @@ -