Moved categories to its own object instead of allstrings and adjusted code in...

Moved categories to its own object instead of allstrings and adjusted code in the other files in order to maintain multilangual support

public/src/js/assets.js

@@ -151,7 +151,7 @@ var assets = {
 	"sounds": {},
 	"image": {},
 	"pages": {},
-	"categories": {}
+	"categories": []
 }
 
 var gameConfig = {}

public/src/js/loader.js

@@ -105,13 +105,18 @@ class Loader{
 			}), url)
 		})
 
-		this.addPromise(this.ajax("/api/categories").then(categories => {
-			assets.categories = JSON.parse(categories)
-			assets.categories.forEach(cat => {
+		this.addPromise(this.ajax("/api/categories").then(cats => {
+			let jsonCategories = JSON.parse(cats)
+			
+			for (var i in jsonCategories) { //rename the song_skin property and add category title to categories array
+				let cat = jsonCategories[i]
+				cat.songSkin = cat.song_Skin
+				delete cat.song_Skin
+				assets.categories.push(cat)
 				let title = cat.title
-					translations.categories[title] = cat.title_lang					
-			});
-			separateStrings() //load categories into strings.js to handle multi language
+				categories[title] = cat.title_lang	
+			}
+
 			assets.categories.push({
 				title: "default",
 				songSkin: {
@@ -145,6 +150,7 @@ class Loader{
 			if(this.error){
 				return
 			}
+			separateStrings() //iterate over strings and apply translations where required
 			
 			assets.categories //load category backgrounds to DOM
 				.filter(cat=>cat.songSkin && cat.songSkin.bg_img)

public/src/js/settings.js

@@ -145,12 +145,9 @@ class Settings{
 		}
 		return this.allLanguages[0]
 	}
-	setLang(lang, noEvent){
-		strings = lang
-		var boldFonts = strings.font === "Microsoft YaHei, sans-serif"
-		loader.screen.style.fontFamily = strings.font
-		loader.screen.style.fontWeight = boldFonts ? "bold" : ""
-		loader.screen.classList[boldFonts ? "add" : "remove"]("bold-fonts")
+	setLang(lang, noEvent, stringRepo){
+		stringRepo = lang
+		
 		if(!noEvent){
 			pageEvents.send("language-change", lang.id)
 		}

public/src/js/songselect.js

@@ -54,6 +54,12 @@ class SongSelect{
 				background: "#fab5d3",
 				border: ["#ffe7ef", "#d36aa2"],
 				outline: "#d36aa2"
+			},
+			"default": {
+				background: "#ececec",
+				border: ["#fbfbfb", "#8b8b8b"],
+				outline: "#656565",
+				infoFill: "#656565"
 			}
 		}
 
@@ -917,13 +923,11 @@ class SongSelect{
 			
 			this.nameplateCache.resize(274, 134, ratio + 0.2)
 			
-			var categories = 0
 			var lastCategory
 			this.songs.forEach(song => {
 				var cat = (song.category || "") + song.skin.outline
 				if(lastCategory !== cat){
 					lastCategory = cat
-					categories++
 				}
 			})
 			this.categoryCache.resize(280, this.songAsset.marginTop + 1 , ratio + 0.5)

public/src/js/strings.js

@@ -45,9 +45,6 @@ var translations = {
 	},
 	titleCopyright: {
 		en: "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	},
-	categories: {
-		
 	},
 	selectSong: {
 		ja: "曲をえらぶ",
@@ -1076,14 +1073,20 @@ var translations = {
 		ko: "가사가있는"
 	}
 }
+var categories = {}
 var allStrings = {}
+
 function separateStrings(){
+	let categoriesTemp =  Object.assign({}, categories);
+	categories = {}
+
 	for(var j in languageList){
 		var lang = languageList[j]
 		allStrings[lang] = {
 			id: lang
 		}
 		var str = allStrings[lang]
+		
 		var translateObj = function(obj, name, str){
 			if(obj != null && "en" in obj && obj["en"] != null){
 				for(var i in obj){
@@ -1094,11 +1097,21 @@ function separateStrings(){
 				for(var i in obj){
 					translateObj(obj[i], i, str[name])
 				}
+			}else{ //key appears in string obj but has no language values, so just apply the key name to each language for consistency and as fallback
+				str[name] = name
 			}
 		}
+
 		for(var i in translations){
 			translateObj(translations[i], i, str)
 		}
+
+		categories[lang] = {
+			id: lang
+		}
+		var str = categories[lang]
+		for(var i in categoriesTemp){
+			translateObj(categoriesTemp[i], i, str)
+		}
 	}
 }
-separateStrings()

public/src/js/titlescreen.js

@@ -11,7 +11,7 @@ class Titlescreen{
 			this.disclaimerCopyright = document.getElementById("title-disclaimer-copyright")
 			this.logo = new Logo()
 		}
-		this.setLang(allStrings[settings.getItem("language")])
+		this.setLang()
 		
 		if(songId){
 			if(localStorage.getItem("tutorial") === "true"){
@@ -76,8 +76,21 @@ class Titlescreen{
 			}, 500)
 		}
 	}
-	setLang(lang, noEvent){
-		settings.setLang(lang, true)
+	setLang(){
+		let stringLang = allStrings[settings.getItem("language")]
+		let categoryLang = categories[settings.getItem("language")]
+		
+		strings = stringLang
+		strings.categories = categoryLang
+
+		settings.setLang(stringLang, true, allStrings)
+		settings.setLang(categoryLang, true, categories)
+
+		let boldFonts = strings.font === "Microsoft YaHei, sans-serif"
+		loader.screen.style.fontFamily = strings.font
+		loader.screen.style.fontWeight = boldFonts ? "bold" : ""
+		loader.screen.classList[boldFonts ? "add" : "remove"]("bold-fonts")
+
 		if(this.songId){
 			return
 		}