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 => {
+		this.addPromise(this.ajax("/api/categories").then(cats => {
-			assets.categories = JSON.parse(categories)
+			let jsonCategories = JSON.parse(cats)
-			assets.categories.forEach(cat => {
+			
+			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					
+				categories[title] = cat.title_lang	
-			});
+			}
-			separateStrings() //load categories into strings.js to handle multi language
+
 			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){
+	setLang(lang, noEvent, stringRepo){
-		strings = lang
+		stringRepo = 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")
 		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){
+	setLang(){
-		settings.setLang(lang, true)
+		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
 		}