Merge pull request #128 from LoveEevee/strings-translate-views

Strings: Translate views

public/src/js/about.js

 class About{
 	constructor(touchEnabled){
-		this.issueTemplate = [
-			"###### 下記の問題を説明してください。 スクリーンショットと診断情報を含めてください。",
-			"###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
-		]
-		
 		this.touchEnabled = touchEnabled
 		loader.changePage("about", true)
 		cancelTouch = false
@@ -19,6 +14,21 @@
 		this.linkGithub = document.getElementById("link-github")
 		this.linkEmail = document.getElementById("link-email")
 		
+		var tutorialTitle = document.getElementById("tutorial-title")
+		tutorialTitle.innerText = strings.aboutSimulator
+		tutorialTitle.setAttribute("alt", strings.aboutSimulator)
+		var tutorialContent = document.getElementById("tutorial-content")
+		strings.about.bugReporting.forEach(string => {
+			tutorialContent.appendChild(document.createTextNode(string))
+			tutorialContent.appendChild(document.createElement("br"))
+		})
+		var span = document.createElement("span")
+		span.classList.add("text-warn")
+		span.innerText = strings.about.diagnosticWarning
+		tutorialContent.appendChild(span)
+		this.endButton.innerText = strings.tutorial.ok
+		this.endButton.setAttribute("alt", strings.tutorial.ok)
+		
 		pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton.bind(this))
 		pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton.bind(this))
 		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
@@ -71,6 +81,17 @@
 				}
 			}
 		}
+		var userLangStr = " (none)"
+		if("languages" in navigator){
+			var userLang = navigator.languages.slice()
+			if(userLang[0] !== navigator.language){
+				userLang.unshift(navigator.language)
+			}
+			if(userLang.length !== 0){
+				userLangStr = " (" + userLang.join(", ") + ")"
+			}
+		}
+		diag.push("Language: " + strings.id + userLangStr)
 		var errorObj = {}
 		if(localStorage["lastError"]){
 			try{
@@ -119,7 +140,7 @@
 			}
 		}
 		
-		var issueBody = this.issueTemplate.join("\n") + "\n\n\n\n" + diag
+		var issueBody = strings.issueTemplate + "\n\n\n\n" + diag
 		this.getLink(this.linkGithub).href += "?body=" + encodeURIComponent(issueBody)
 		this.getLink(this.linkEmail).href += "?body=" + encodeURIComponent(issueBody.replace(/\n/g, "<br>\r\n"))
 	}

public/src/js/scoresheet.js

@@ -377,7 +377,7 @@ class Scoresheet{
 						fontFamily: this.font,
 						x: 23,
 						y: 15,
-						letterSpacing: 3,
+						letterSpacing: strings.id === "en" ? 0 : 3,
 						forceShadow: true
 					}, [
 						{x: -2, y: -2, outline: "#000", letterBorder: 22},
@@ -417,6 +417,18 @@ class Scoresheet{
 						168, 143,
 						300, 150, 189, 162
 					)
+					var diff = results.difficulty
+					var text = strings[diff === "ura" ? "oni" : diff]
+					ctx.font = this.draw.bold(this.font) + "28px " + this.font
+					ctx.textAlign = "center"
+					ctx.textBaseline = "bottom"
+					ctx.strokeStyle = "#000"
+					ctx.fillStyle = "#fff"
+					ctx.lineWidth = 9
+					ctx.miterLimit = 1
+					ctx.strokeText(text, 395, 308)
+					ctx.fillText(text, 395, 308)
+					ctx.miterLimit = 10
 					
 					if(this.controller.autoPlayEnabled){
 						ctx.drawImage(assets.image["badge_auto"],

public/src/js/session.js

@@ -8,6 +8,13 @@ class Session{
 		}
 		this.sessionInvite = document.getElementById("session-invite")
 		
+		var tutorialTitle = document.getElementById("tutorial-title")
+		tutorialTitle.innerText = strings.session.multiplayerSession
+		tutorialTitle.setAttribute("alt", strings.session.multiplayerSession)
+		this.sessionInvite.parentNode.insertBefore(document.createTextNode(strings.session.linkTutorial), this.sessionInvite)
+		this.endButton.innerText = strings.session.cancel
+		this.endButton.setAttribute("alt", strings.session.cancel)
+		
 		pageEvents.add(window, ["mousedown", "touchstart"], this.mouseDown.bind(this))
 		pageEvents.keyOnce(this, 27, "down").then(this.onEnd.bind(this))
 		

public/src/js/songselect.js

@@ -94,7 +94,7 @@ class SongSelect{
 		
 		this.songs = []
 		for(let song of assets.songs){
-			var en = strings.id === "en"
+			var en = strings.id === "en" && song.title_en
 			this.songs.push({
 				id: song.id,
 				title: en ? song.title_en : song.title,
@@ -135,7 +135,7 @@ class SongSelect{
 			}
 		}else{
 			this.songs.push({
-				title: strings.tutorial,
+				title: strings.howToPlay,
 				skin: this.songSkin.tutorial,
 				action: "tutorial",
 				category: strings.random
@@ -890,7 +890,7 @@ class SongSelect{
 					x: 53,
 					y: 30,
 					width: textW,
-					letterSpacing: 2,
+					letterSpacing: strings.id === "en" ? 0 : 2,
 					forceShadow: true
 				}, [
 					{x: -2, y: -2, outline: "#000", letterBorder: 22},

public/src/js/strings.js

@@ -19,7 +19,7 @@
 	this.back = "もどる"
 	this.random = "ランダム"
 	this.randomSong = "ランダムに曲をえらぶ"
-	this.tutorial = "あそびかた説明"
+	this.howToPlay = "あそびかた説明"
 	this.aboutSimulator = "このシミュレータについて"
 	this.browse = "参照する…"
 	this.defaultSongList = "デフォルト曲リスト"
@@ -58,6 +58,36 @@
 	this.points = "点"
 	this.maxCombo = "最大コンボ数"
 	this.drumroll = "連打数"
+	
+	this.tutorial = {
+		basics: [
+			"Hit the drum when the notes reach the taiko!",
+			"For red notes, hit the face of the drum (%s or %s)...",
+			"...and for blue notes, hit the rim! (%s or %s)",
+			"USB controllers are also supported!"
+		],
+		otherControls: "Other controls",
+		otherTutorial: [
+			"%s \u2014 pause game",
+			"%s while selecting difficulty \u2014 enable autoplay mode",
+			"%s while selecting difficulty \u2014 enable 2P mode"
+		],
+		ok: "OK"
+	}
+	this.about = {
+		bugReporting: [
+			"このシミュレータは現在開発中です。",
+			"バグが発生した場合は、報告してください。",
+			"GitHubかメールでバグを報告してください。"
+		],
+		diagnosticWarning: "以下の端末診断情報も併せて報告してください！",
+		issueTemplate: "###### 下記の問題を説明してください。 スクリーンショットと診断情報を含めてください。"
+	}
+	this.session = {
+		multiplayerSession: "Multiplayer Session",
+		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+		cancel: "Cancel"
+	}
 }
 function StringsEn(){
 	this.id = "en"
@@ -80,7 +110,7 @@ function StringsEn(){
 	this.back = "Back"
 	this.random = "Random"
 	this.randomSong = "Random Song"
-	this.tutorial = "How to Play"
+	this.howToPlay = "How to Play"
 	this.aboutSimulator = "About Simulator"
 	this.browse = "Browse…"
 	this.defaultSongList = "Default Song List"
@@ -119,11 +149,41 @@ function StringsEn(){
 	this.points = "pts"
 	this.maxCombo = "MAX Combo"
 	this.drumroll = "Drumroll"
+	
+	this.tutorial = {
+		basics: [
+			"Hit the drum when the notes reach the taiko!",
+			"For red notes, hit the face of the drum (%s or %s)...",
+			"...and for blue notes, hit the rim! (%s or %s)",
+			"USB controllers are also supported!"
+		],
+		otherControls: "Other controls",
+		otherTutorial: [
+			"%s \u2014 pause game",
+			"%s while selecting difficulty \u2014 enable autoplay mode",
+			"%s while selecting difficulty \u2014 enable 2P mode"
+		],
+		ok: "OK"
+	}
+	this.about = {
+		bugReporting: [
+			"This simulator is still in development.",
+			"Please report any bugs you find.",
+			"You can report bugs either via GitHub or email."
+		],
+		diagnosticWarning: "Be sure to include the following diagnostic data!",
+		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
+	}
+	this.session = {
+		multiplayerSession: "Multiplayer Session",
+		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+		cancel: "Cancel"
+	}
 }
 function StringsCn(){
 	this.id = "cn"
 	this.name = "简体中文"
-	this.regex = /^zh$|^zh-CN$/
+	this.regex = /^zh$|^zh-CN$|^zh-SG$/
 	this.font = "Microsoft YaHei, sans-serif"
 	
 	this.titleProceed = "点击或按回车！"
@@ -141,7 +201,7 @@ function StringsCn(){
 	this.back = "返回"
 	this.random = "随机"
 	this.randomSong = "随机选曲"
-	this.tutorial = "操作说明"
+	this.howToPlay = "操作说明"
 	this.aboutSimulator = "关于模拟器"
 	this.browse = "浏览…"
 	this.defaultSongList = "默认歌曲列表"
@@ -180,6 +240,36 @@ function StringsCn(){
 	this.points = "点"
 	this.maxCombo = "最多连段数"
 	this.drumroll = "连打数"
+	
+	this.tutorial = {
+		basics: [
+			"Hit the drum when the notes reach the taiko!",
+			"For red notes, hit the face of the drum (%s or %s)...",
+			"...and for blue notes, hit the rim! (%s or %s)",
+			"USB controllers are also supported!"
+		],
+		otherControls: "Other controls",
+		otherTutorial: [
+			"%s \u2014 pause game",
+			"%s while selecting difficulty \u2014 enable autoplay mode",
+			"%s while selecting difficulty \u2014 enable 2P mode"
+		],
+		ok: "OK"
+	}
+	this.about = {
+		bugReporting: [
+			"This simulator is still in development.",
+			"Please report any bugs you find.",
+			"You can report bugs either via GitHub or email."
+		],
+		diagnosticWarning: "Be sure to include the following diagnostic data!",
+		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
+	}
+	this.session = {
+		multiplayerSession: "Multiplayer Session",
+		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+		cancel: "Cancel"
+	}
 }
 function StringsTw(){
 	this.id = "tw"
@@ -202,7 +292,7 @@ function StringsTw(){
 	this.back = "返回"
 	this.random = "隨機"
 	this.randomSong = "隨機選曲"
-	this.tutorial = "操作說明"
+	this.howToPlay = "操作說明"
 	this.aboutSimulator = "關於模擬器"
 	this.browse = "開啟檔案…"
 	this.defaultSongList = "默認歌曲列表"
@@ -241,11 +331,41 @@ function StringsTw(){
 	this.points = "分"
 	this.maxCombo = "最多連段數"
 	this.drumroll = "連打數"
+	
+	this.tutorial = {
+		basics: [
+			"Hit the drum when the notes reach the taiko!",
+			"For red notes, hit the face of the drum (%s or %s)...",
+			"...and for blue notes, hit the rim! (%s or %s)",
+			"USB controllers are also supported!"
+		],
+		otherControls: "Other controls",
+		otherTutorial: [
+			"%s \u2014 pause game",
+			"%s while selecting difficulty \u2014 enable autoplay mode",
+			"%s while selecting difficulty \u2014 enable 2P mode"
+		],
+		ok: "OK"
+	}
+	this.about = {
+		bugReporting: [
+			"This simulator is still in development.",
+			"Please report any bugs you find.",
+			"You can report bugs either via GitHub or email."
+		],
+		diagnosticWarning: "Be sure to include the following diagnostic data!",
+		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
+	}
+	this.session = {
+		multiplayerSession: "Multiplayer Session",
+		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+		cancel: "Cancel"
+	}
 }
 function StringsKo(){
 	this.id = "ko"
 	this.name = "한국어"
-	this.regex = /^ko$/
+	this.regex = /^ko$|^ko-/
 	this.font = "Microsoft YaHei, sans-serif"
 	
 	this.titleProceed = "클릭하거나 Enter를 누릅니다!"
@@ -263,7 +383,7 @@ function StringsKo(){
 	this.back = "돌아간다"
 	this.random = "랜덤"
 	this.randomSong = "랜덤"
-	this.tutorial = "지도 시간"
+	this.howToPlay = "지도 시간"
 	this.aboutSimulator = "게임 정보"
 	this.browse = "찾아보기…"
 	this.defaultSongList = "기본 노래 목록"
@@ -302,6 +422,36 @@ function StringsKo(){
 	this.points = "점"
 	this.maxCombo = "최대 콤보 수"
 	this.drumroll = "연타 횟수"
+	
+	this.tutorial = {
+		basics: [
+			"Hit the drum when the notes reach the taiko!",
+			"For red notes, hit the face of the drum (%s or %s)...",
+			"...and for blue notes, hit the rim! (%s or %s)",
+			"USB controllers are also supported!"
+		],
+		otherControls: "Other controls",
+		otherTutorial: [
+			"%s \u2014 pause game",
+			"%s while selecting difficulty \u2014 enable autoplay mode",
+			"%s while selecting difficulty \u2014 enable 2P mode"
+		],
+		ok: "OK"
+	}
+	this.about = {
+		bugReporting: [
+			"This simulator is still in development.",
+			"Please report any bugs you find.",
+			"You can report bugs either via GitHub or email."
+		],
+		diagnosticWarning: "Be sure to include the following diagnostic data!",
+		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
+	}
+	this.session = {
+		multiplayerSession: "Multiplayer Session",
+		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+		cancel: "Cancel"
+	}
 }
 var allStrings = {
 	"ja": new StringsJa(),

public/src/js/tutorial.js

@@ -5,6 +5,42 @@ class Tutorial{
 		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 keys = ["F", "J", "D", "K", "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)
+		
 		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
 		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
 		
@@ -12,6 +48,14 @@ class Tutorial{
 			"confirm": ["start", "b", "ls", "rs"]
 		}, this.onEnd.bind(this))
 	}
+	insertText(text, parent){
+		parent.appendChild(document.createTextNode(text))
+	}
+	insertKey(key, parent){
+		var kbd = document.createElement("kbd")
+		kbd.innerText = key
+		parent.appendChild(kbd)
+	}
 	onEnd(event){
 		var touched = false
 		if(event && event.type === "touchstart"){

public/src/js/view.js

@@ -556,6 +556,18 @@
 				16, this.multiplayer === 2 ? 194 : 232,
 				141, 120
 			)
+			var diff = this.controller.selectedSong.difficulty
+			var text = strings[diff === "ura" ? "oni" : diff]
+			ctx.font = this.draw.bold(this.font) + "20px " + this.font
+			ctx.textAlign = "center"
+			ctx.textBaseline = "bottom"
+			ctx.strokeStyle = "#000"
+			ctx.fillStyle = "#fff"
+			ctx.lineWidth = 7
+			ctx.miterLimit = 1
+			ctx.strokeText(text, 87, this.multiplayer === 2 ? 310 : 348)
+			ctx.fillText(text, 87, this.multiplayer === 2 ? 310 : 348)
+			ctx.miterLimit = 10
 			
 			// Badges
 			if(this.controller.autoPlayEnabled && !this.controller.multiplayer){

public/src/views/about.html

 <div id="tutorial-outer">
 	<div id="tutorial">
-		<div id="tutorial-title" class="stroke-sub" alt="このシミュレータについて / About">このシミュレータについて / About</div>
-		<div id="tutorial-content">
-			このシミュレータは現在開発中です。<br>
-			バグが発生した場合は、報告してください。<br>
-			GitHubかメールでバグを報告してください。<br>
-			<span class="text-warn">以下の端末診断情報も併せて報告してください！</span><br>
-			<br>
-			This simulator is still in development.<br>
-			Please report any bugs you find.<br>
-			You can report bugs either via GitHub or email.<br>
-			<span class="text-warn">Be sure to include the following diagnostic data!</span>
-			
-		</div>
+		<div id="tutorial-title" class="stroke-sub"></div>
+		<div id="tutorial-content"></div>
 		<div id="diag-txt"></div>
 		<div id="about-link-btns">
 			<div id="link-github" class="taibtn stroke-sub link-btn" alt="GitHub">
@@ -22,6 +11,6 @@
 				<a href="mailto:taiko@bui.pm">taiko@bui.pm</a>
 			</div>
 		</div>
-		<div id="tutorial-end-button" class="taibtn stroke-sub" alt="OK">OK</div>
+		<div id="tutorial-end-button" class="taibtn stroke-sub"></div>
 	</div>
 </div>

public/src/views/session.html

 <div id="tutorial-outer">
 	<div id="tutorial">
-		<div id="tutorial-title" class="stroke-sub" alt="Multiplayer Session">Multiplayer Session</div>
+		<div id="tutorial-title" class="stroke-sub"></div>
 		<div id="tutorial-content">
-			Share this link with your friend to start playing together! Do not leave this screen while they join.
 			<div id="session-invite"></div>
 		</div>
-
-		<div id="tutorial-end-button" class="taibtn stroke-sub" alt="Cancel">Cancel</div>
+		<div id="tutorial-end-button" class="taibtn stroke-sub"></div>
 	</div>
 </div>

public/src/views/tutorial.html

 <div id="tutorial-outer">
 	<div id="tutorial">
-		<div id="tutorial-title" class="stroke-sub" alt="How to Play">How to Play</div>
-		<div id="tutorial-content">
-			<p>Hit the drum when the notes reach the taiko!</p>
-			<p>For red notes, hit the face of the drum (<kbd>F</kbd> or <kbd>J</kbd>)...</p>
-			<p>...and for blue notes, hit the rim! (<kbd>D</kbd> or <kbd>K</kbd>)</p>
-			<p>USB controllers are also supported!</p>
-			<p>
-				<span style="font-weight:bold;">Other controls</span><br>
-				<kbd>Q</kbd> &mdash; pause game<br>
-				<kbd>SHIFT</kbd> while selecting difficulty &mdash; enable autoplay mode<br>
-				<kbd>CTRL</kbd> while selecting difficulty &mdash; enable 2P mode
-			</p>
-		</div>
-
-		<div id="tutorial-end-button" class="taibtn stroke-sub" alt="OK">OK</div>
+		<div id="tutorial-title" class="stroke-sub"></div>
+		<div id="tutorial-content"></div>
+		<div id="tutorial-end-button" class="taibtn stroke-sub"></div>
 	</div>
 </div>