Titlescreen: Add language selection menu

public/src/css/loader.css

@@ -17,7 +17,6 @@ body{
 	background-color: #000;
 	background-position: top center;
 	background-size: 30vh;
-	font-family: TnT, Meiryo, sans-serif;
 }
 #screen.pattern-bg{
 	background-color: #fe7839;

public/src/css/titlescreen.css

@@ -41,5 +41,25 @@
 .click-to-continue::before{
 	-webkit-text-stroke: 0.25em #f00;
 	filter: blur(0.3vmin);
-	left: auto;
+}
+#lang{
+	font-size: 3vmin;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background-repeat: no-repeat;
+	background-size: auto 70%;
+	background-position: center;
+	width: 4em;
+	height: 4em;
+}
+#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%;
 }

public/src/js/assets.js

@@ -82,7 +82,8 @@ var assets = {
 		"mimizu.png",
 		"results_flowers.png",
 		"results_mikoshi.png",
-		"results_tetsuohana.png"
+		"results_tetsuohana.png",
+		"globe.svg"
 	],
 	"audioSfx": [
 		"don.wav",

public/src/js/canvasdraw.js

@@ -285,6 +285,7 @@
 			inputText = inputText.slice(0, matches.index)
 			ura = matches[0]
 		}
+		var bold = this.bold(config.fontFamily)
 		
 		var string = inputText.split("")
 		var drawn = []
@@ -296,30 +297,54 @@
 				drawn.push({text: symbol, x: 0, y: 0, h: 18})
 			}else if(symbol === "ー"){
 				// Long-vowel mark
-				drawn.push({realText: symbol, svg: this.longVowelMark, x: -4, y: 5, h: 33, scale: [mul, mul]})
+				if(bold){
+					drawn.push({text: symbol, x: -1, y: -1, h: 33, rotate: true})
+				}else{
+					drawn.push({realText: symbol, svg: this.longVowelMark, x: -4, y: 5, h: 33, scale: [mul, mul]})
+				}
 			}else if(symbol === "∀"){
 				drawn.push({text: symbol, x: 0, y: 0, h: 39, rotate: true})
 			}else if(symbol === "↓"){
 				drawn.push({text: symbol, x: 0, y: 12, h: 45})
 			}else if(symbol === "．"){
-				drawn.push({realText: symbol, text: ".", x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
+				if(bold){
+					drawn.push({realText: symbol, text: ".", x: 13, y: -15, h: 15})
+				}else{
+					drawn.push({realText: symbol, text: ".", x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
+				}
 			}else if(symbol === "…"){
-				drawn.push({text: symbol, x: 0, y: 5, h: 25, rotate: true})
+				drawn.push({text: symbol, x: bold ? 9 : 0, y: 5, h: 25, rotate: true})
 			}else if(r.comma.test(symbol)){
 				// Comma, full stop
-				drawn.push({text: symbol, x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
+				if(bold){
+					drawn.push({text: symbol, x: 13, y: -15, h: 15})
+				}else{
+					drawn.push({text: symbol, x: 13, y: -7, h: 15, scale: [1.2, 0.7]})
+				}
 			}else if(r.ideographicComma.test(symbol)){
 				// Ideographic comma, full stop
 				drawn.push({text: symbol, x: 16, y: -16, h: 18})
 			}else if(r.apostrophe.test(symbol)){
 				// Apostrophe
-				drawn.push({realText: symbol, text: ",", x: 20, y: -39, h: 0, scale: [1.2, 0.7]})
+				if(bold){
+					drawn.push({text: symbol, x: 20, y: -25, h: 0})
+				}else{
+					drawn.push({realText: symbol, text: ",", x: 20, y: -39, h: 0, scale: [1.2, 0.7]})
+				}
 			}else if(r.degree.test(symbol)){
 				// Degree
-				drawn.push({text: symbol, x: 16, y: 3, h: 18})
+				if(bold){
+					drawn.push({text: symbol, x: 16, y: 9, h: 25})
+				}else{
+					drawn.push({text: symbol, x: 16, y: 3, h: 18})
+				}
 			}else if(r.brackets.test(symbol)){
 				// Rotated brackets
-				drawn.push({text: symbol, x: 0, y: -5, h: 25, rotate: true})
+				if(bold){
+					drawn.push({text: symbol, x: 0, y: 0, h: 35, rotate: true})
+				}else{
+					drawn.push({text: symbol, x: 0, y: -5, h: 25, rotate: true})
+				}
 			}else if(r.tilde.test(symbol)){
 				// Rotated hyphen, tilde
 				drawn.push({realText: symbol, text: symbol === "~" ? "～" : symbol, x: 0, y: 2, h: 35, rotate: true})
@@ -448,7 +473,7 @@
 			actions.push("selectable")
 		}
 		for(let action of actions){
-			ctx.font = config.fontSize + "px " + config.fontFamily
+			ctx.font = bold + config.fontSize + "px " + config.fontFamily
 			ctx.textBaseline = "top"
 			if(action === "stroke"){
 				ctx.strokeStyle = config.outline
@@ -571,6 +596,7 @@
 			inputText = inputText.slice(0, matches.index)
 			ura = matches[0]
 		}
+		var bold = this.bold(config.fontFamily)
 		
 		var string = inputText.split("")
 		var drawn = []
@@ -587,12 +613,20 @@
 			}else if(symbol === "'"){
 				drawn.push({text: ",", x: 0, y: -15, w: 7, scale: [1, 0.7]})
 			}else if(symbol === "∀"){
-				drawn.push({text: symbol, x: -3, y: 0, w: 55})
+				if(bold){
+					drawn.push({text: symbol, x: 0, y: 0, w: 40})
+				}else{
+					drawn.push({text: symbol, x: -3, y: 0, w: 55})
+				}
 			}else if(symbol === "．"){
 				drawn.push({text: symbol, x: -9, y: 0, w: 37})
 			}else if(r.comma.test(symbol)){
 				// Comma, full stop
-				drawn.push({text: symbol, x: -3, y: 13, w: 13, scale: [1.2, 0.7]})
+				if(bold){
+					drawn.push({text: symbol, x: -3, y: 0, w: 13})
+				}else{
+					drawn.push({text: symbol, x: -3, y: 13, w: 13, scale: [1.2, 0.7]})
+				}
 			}else if(r.en.test(symbol)){
 				// n-width
 				drawn.push({text: symbol, x: 0, y: 0, w: 28})
@@ -614,7 +648,11 @@
 				drawn.push({text: number, x: 0, y: 0, w: 32})
 			}else if(r.degree.test(symbol)){
 				// Degree
-				drawn.push({text: symbol, x: 5, y: 0, w: 0})
+				if(bold){
+					drawn.push({text: symbol, x: 0, y: 0, w: 20})
+				}else{
+					drawn.push({text: symbol, x: 5, y: 0, w: 0})
+				}
 			}else if(r.uppercase.test(symbol)){
 				// Latin script uppercase
 				drawn.push({text: symbol, x: 0, y: 0, w: 32})
@@ -668,7 +706,7 @@
 			drawn.reverse()
 		}
 		
-		ctx.font = config.fontSize + "px " + config.fontFamily
+		ctx.font = bold + config.fontSize + "px " + config.fontFamily
 		ctx.textBaseline = config.baseline || "top"
 		ctx.textAlign = "center"
 		
@@ -1252,6 +1290,10 @@
 		}
 	}
 	
+	bold(font){
+		return font === "Microsoft YaHei, sans-serif" ? "bold " : ""
+	}
+	
 	getMS(){
 		return Date.now()
 	}

public/src/js/main.js

@@ -80,9 +80,10 @@ var perf = {
 	allImg: 0,
 	load: 0
 }
+var strings
 
 pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
-	if(event.cancelable && cancelTouch){
+	if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){
 		event.preventDefault()
 	}
 })

public/src/js/parseosu.js

@@ -319,10 +319,10 @@ class ParseOsu{
 				if(hitSound & this.osu.FINISH){
 					if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
 						type = "daiKa"
-						txt = "カッ(大)"
+						txt = strings.note.daiKa
 					}else if(hitSound & this.osu.NORMAL || hitSound === this.osu.FINISH){
 						type = "daiDon"
-						txt = "ドン(大)"
+						txt = strings.note.daiDon
 					}else{
 						emptyValue = true
 					}

public/src/js/scoresheet.js

@@ -16,7 +16,7 @@ class Scoresheet{
 		this.fadeScreen.id = "fade-screen"
 		this.game.appendChild(this.fadeScreen)
 		
-		this.font = "TnT, Meiryo, sans-serif"
+		this.font = strings.font
 		this.state = {
 			screen: "fadeIn",
 			screenMS: this.getMS(),

public/src/js/songselect.js

@@ -90,14 +90,15 @@ class SongSelect{
 				outline: "#656565"
 			}
 		}
-		this.font = "TnT, Meiryo, sans-serif"
+		this.font = strings.font
 		
 		this.songs = []
 		for(let song of assets.songs){
+			var en = strings.id === "en"
 			this.songs.push({
 				id: song.id,
-				title: song.title,
-				subtitle: song.subtitle,
+				title: en ? song.title_en : song.title,
+				subtitle: en ? song.subtitle_en : song.subtitle,
 				skin: song.category in this.songSkin ? this.songSkin[song.category] : this.songSkin.default,
 				stars: song.stars,
 				category: song.category,
@@ -886,6 +887,7 @@ class SongSelect{
 					fontFamily: this.font,
 					x: 53,
 					y: 30,
+					width: 280,
 					letterSpacing: 2,
 					forceShadow: true
 				}, [
@@ -1089,8 +1091,7 @@ class SongSelect{
 			highlight = 0
 		}
 		
-		if(this.currentSongId !== currentSong.id || this.currentSongTitle !== currentSong.title){
-			this.currentSongId = currentSong.id
+		if(this.currentSongTitle !== currentSong.title){
 			this.currentSongTitle = currentSong.title
 			this.currentSongCache.clear()
 		}
@@ -1279,15 +1280,16 @@ class SongSelect{
 							h: (songSel ? 88 : 135) + 10,
 							id: this.difficulty[currentUra ? 4 : i] + (songSel ? "1" : "0")
 						}, ctx => {
+							var ja = strings.id === "ja"
 							this.draw.verticalText({
 								ctx: ctx,
 								text: this.difficulty[i],
 								x: offset,
 								y: 0,
 								width: songSel ? 44 : 56,
-								height: songSel ? (i === 1 ? 66 : 88) : (i === 0 ? 130 : (i === 1 ? 110 : 135)),
+								height: songSel ? (i === 1 && ja ? 66 : 88) : (ja ? 130 : (i === 1 && ja ? 110 : 135)),
 								fill: currentUra ? "#fff" : "#000",
-								fontSize: songSel ? 25 : (i === 2 ? 45 : 40),
+								fontSize: songSel ? 25 : (i === 2 && ja ? 45 : 40),
 								fontFamily: this.font,
 								outline: currentUra ? "#003C52" : false,
 								outlineSize: currentUra ? this.songAsset.letterBorder : 0

public/src/js/titlescreen.js

 class Titlescreen{
 	constructor(){
 		loader.changePage("titlescreen", false)
+		
 		this.titleScreen = document.getElementById("title-screen")
-		var proceed = document.getElementById("title-proceed")
-		proceed.appendChild(document.createTextNode(strings.titleProceed))
-		proceed.setAttribute("alt", strings.titleProceed)
+		this.proceed = document.getElementById("title-proceed")
+		this.langDropdown = document.getElementById("lang-dropdown")
+		
+		this.lang = this.getLang()
+		this.setLang(allStrings[this.lang])
+		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["title"].play()
 		this.gamepad = new Gamepad({
 			"13": ["a", "b", "x", "y", "start", "ls", "rs"]
@@ -24,7 +30,11 @@ class Titlescreen{
 			})
 		}
 	}
+	
 	keyDown(event, code){
+		if(event && event.target === this.langDropdown){
+			return
+		}
 		if(!code){
 			code = event.keyCode
 		}
@@ -61,11 +71,56 @@ class Titlescreen{
 			}, 500)
 		}
 	}
+	
+	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){
+		strings = lang
+		this.proceed.innerText = strings.titleProceed
+		this.proceed.setAttribute("alt", strings.titleProceed)
+		loader.screen.style.fontFamily = strings.font
+		loader.screen.style.fontWeight = strings.font === "Microsoft YaHei, sans-serif" ? "bold" : ""
+	}
+	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
+		localStorage.lang = this.lang
+		this.setLang(allStrings[this.lang])
+	}
+	
 	clean(){
 		this.gamepad.clean()
 		assets.sounds["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.langDropdown
 	}
 }

public/src/js/view.js

@@ -69,7 +69,7 @@
 		this.drumroll = []
 		
 		this.beatInterval = this.controller.parsedSongData.beatInfo.beatInterval
-		this.font = "TnT, Meiryo, sans-serif"
+		this.font = strings.font
 		
 		this.draw = new CanvasDraw()
 		this.assets = new ViewAssets(this)
@@ -260,9 +260,14 @@
 					})
 					ctx.fill()
 					
+					if(selectedSong.category in strings.categories){
+						var categoryName = strings.categories[selectedSong.category]
+					}else{
+						var categoryName = selectedSong.category
+					}
 					this.draw.layeredText({
 						ctx: ctx,
-						text: selectedSong.category,
+						text: categoryName,
 						fontSize: 15,
 						fontFamily: this.font,
 						align: "center",
@@ -629,7 +634,7 @@
 		
 		// Score
 		ctx.save()
-		ctx.font = "30px " + this.font
+		ctx.font = "30px TnT, Meiryo, sans-serif"
 		ctx.fillStyle = "#fff"
 		ctx.strokeStyle = "#fff"
 		ctx.lineWidth = 0.3
@@ -763,11 +768,13 @@
 			}else{
 				ctx.fillStyle = "#fff"
 			}
-			ctx.font = fontSize + "px " + this.font
+			ctx.font = this.draw.bold(this.font) + fontSize + "px " + this.font
 			ctx.lineWidth = 7 * mul
 			ctx.textAlign = "center"
-			ctx.strokeText("コンボ", comboX, comboTextY)
-			ctx.fillText("コンボ", comboX, comboTextY)
+			ctx.miterLimit = 1
+			ctx.strokeText(strings.combo, comboX, comboTextY)
+			ctx.miterLimit = 10
+			ctx.fillText(strings.combo, comboX, comboTextY)
 		}
 		
 		// Slot
@@ -931,7 +938,7 @@
 						x: _w / 2,
 						y: 18,
 						width: _w,
-						height: _h,
+						height: _h - 54,
 						fontSize: 40,
 						fontFamily: this.font,
 						letterSpacing: -1
@@ -1292,7 +1299,7 @@
 			var text = circle.getText()
 			var textX = circlePos.x
 			var textY = circlePos.y + 83 * mul
-			ctx.font = lyricsSize + "px Kozuka"
+			ctx.font = lyricsSize + "px Kozuka, Microsoft YaHei, sans-serif"
 			ctx.textBaseline = "middle"
 			ctx.textAlign = "center"
 			
@@ -1373,7 +1380,7 @@
 						ctx: ctx,
 						text: i.toString(),
 						fontSize: fontSize,
-						fontFamily: this.font,
+						fontFamily: "TnT, Meiryo, sans-serif",
 						x: textX,
 						y: textY
 					}, [

public/src/views/titlescreen.html

@@ -2,3 +2,6 @@
 	<div class="logo-big">太鼓の達人ウェブ</div>
 	<div class="click-to-continue stroke-sub" id="title-proceed"></div>
 </div>
+<div id="lang">
+	<select id="lang-dropdown"></select>
+</div>