Move language settings from title screen

public/assets/img/vectors.json

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

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;

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;

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)
+		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")
+		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
 			})
 		}
+		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,9 +201,10 @@ class SettingsView{
 			"next": ["d", "r", "rb", "rt", "lsd", "lsr"],
 			"back": ["start", "a"]
 		}, this.keyPressed.bind(this))
-		
+		if(!tutorial){
 			pageEvents.send("settings")
 		}
+	}
 	setKbd(){
 		var kbdSettings = settings.getItem("keyboardSettings")
 		this.kbd = {
@@ -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,6 +410,9 @@ class SettingsView{
 		this.setStrings()
 	}
 	setStrings(){
+		if(this.tutorial){
+			this.tutorial.setStrings()
+		}else{
 			this.tutorialTitle.innerText = strings.gameSettings
 			this.tutorialTitle.setAttribute("alt", strings.gameSettings)
 			this.defaultButton.innerText = strings.settings.default
@@ -401,6 +420,7 @@ class SettingsView{
 			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"])
 		}
-		delete this.tutorialTitle
+		if(this.defaultButton){
 			delete this.defaultButton
+		}
+		delete this.tutorialTitle
 		delete this.endButton
 		delete this.items
 		if(this.resolution !== settings.getItem("resolution")){

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

public/src/js/tutorial.js

@@ -1,54 +1,18 @@
 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()
 		
+		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){
@@ -60,6 +24,9 @@ class Tutorial{
 			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(){
+		if(this.fromSongSel){
 			this.gamepad.clean()
-		assets.sounds["bgm_setsume"].stop()
 			pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
 			pageEvents.keyRemove(this, "all")
+		}
+		assets.sounds["bgm_setsume"].stop()
+		delete this.tutorialTitle
 		delete this.endButton
+		delete this.tutorialDiv
 	}
 }

public/src/views/titlescreen.html

@@ -6,8 +6,3 @@
 		<span class="stroke-sub" id="title-disclaimer-copyright"></span>
 	</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>