SongSelect: Translatable song titles

app.py

@@ -166,7 +166,7 @@ def route_api_songs():
     categories = {}
     def_category = {'title': None, 'title_en': None}
     for cat in raw_categories:
-        categories[cat[0]] = {'title': cat[1], 'title_en': cat[2]}
+        categories[cat[0]] = cat[1]
     
     raw_song_skins = query_db('select * from song_skins')
     song_skins = {}
@@ -185,15 +185,14 @@ def route_api_songs():
         songs_out.append({
             'id': song_id,
             'title': song[1],
-            'title_en': song[2],
+            'title_lang': song[2],
             'subtitle': song[3],
-            'subtitle_en': song[4],
+            'subtitle_lang': song[4],
             'stars': [
                 song[5], song[6], song[7], song[8], song[9]
             ],
             'preview': preview,
-            'category': category_out['title'],
+            'category': category_out,
-            'category_en': category_out['title_en'],
             'type': song_type,
             'offset': song[13],
             'song_skin': song_skin_out

public/src/css/songbg.css

@@ -33,7 +33,8 @@
 	max-height: calc(50% + 24vw);
 }
 .touchp2 #songbg{
-	height: calc(50% - 5.5vw);
+	height: calc(50% - 5.9vw);
+	min-height: 39.5%;
 }
 .multiplayer.portrait #songbg{
 	height: calc(50% - 37vw);
@@ -89,6 +90,9 @@
 	height: calc(50% - 13.7vw);
 	min-height: 25.6%;
 }
+.multiplayer .donbg{
+	min-height: 27.2%;
+}
 .portrait .donbg{
 	height: calc(50% - 48.9vw);
 	min-height: 22.5%;

public/src/js/controller.js

@@ -32,13 +32,15 @@ class Controller{
 		this.playedSounds = {}
 	}
 	run(syncWith){
+		if(syncWith){
+			this.syncWith = syncWith
+		}
 		this.game.run()
 		this.view.run()
-		if(syncWith){
+		if(this.multiplayer === 1){
-			syncWith.run()
+			syncWith.run(this)
 			syncWith.game.elapsedTime = this.game.elapsedTime
 			syncWith.game.startDate = this.game.startDate
-			this.syncWith = syncWith
 		}
 		requestAnimationFrame(() => {
 			this.startMainLoop()
@@ -54,16 +56,20 @@ class Controller{
 		this.mainLoopRunning = true
 		this.gameLoop()
 		this.viewLoop()
+		if(this.multiplayer !== 2){
 			this.gameInterval = setInterval(this.gameLoop.bind(this), 1000 / 60)
 		}
+	}
 	stopMainLoop(){
 		this.mainLoopRunning = false
 		this.mainAsset.stop()
+		if(this.multiplayer !== 2){
 			clearInterval(this.gameInterval)
 		}
+	}
 	gameLoop(){
 		if(this.mainLoopRunning){
-			if(this.syncWith){
+			if(this.multiplayer === 1){
 				this.syncWith.game.elapsedTime = this.game.elapsedTime
 				this.syncWith.game.startDate = this.game.startDate
 			}
@@ -83,6 +89,9 @@ class Controller{
 					this.game.playMainMusic()
 				}
 			}
+			if(this.multiplayer === 1){
+				this.syncWith.gameLoop()
+			}
 		}
 	}
 	viewLoop(){
@@ -90,7 +99,7 @@ class Controller{
 			if(this.multiplayer !== 2){
 				requestAnimationFrame(() => {
 					this.viewLoop()
-					if(this.syncWith){
+					if(this.multiplayer === 1){
 						this.syncWith.viewLoop()
 					}
 					if(this.scoresheet){
@@ -161,7 +170,7 @@ class Controller{
 		this.playSound(soundID + meka, time)
 	}
 	togglePause(){
-		if(this.syncWith){
+		if(this.multiplayer === 1){
 			this.syncWith.game.togglePause()
 		}
 		this.game.togglePause()
@@ -207,7 +216,7 @@ class Controller{
 		}
 	}
 	clean(){
-		if(this.syncWith){
+		if(this.multiplayer === 1){
 			this.syncWith.clean()
 		}
 		this.stopMainLoop()

public/src/js/game.js

@@ -43,6 +43,12 @@ class Game{
 	initTiming(){
 		// Date when the chrono is started (before the game begins)
 		var offsetTime = Math.max(0, this.timeForDistanceCircle - this.songData.circles[0].ms) |0
+		if(this.controller.multiplayer){
+			var syncWith = this.controller.syncWith
+			var syncCircles = syncWith.game.songData.circles
+			var syncOffsetTime = Math.max(0, this.timeForDistanceCircle - syncCircles[0].ms) |0
+			offsetTime = Math.max(offsetTime, syncOffsetTime)
+		}
 		this.elapsedTime = -offsetTime
 		// The real start for the game will start when chrono will reach 0
 		this.startDate = Date.now() + offsetTime
@@ -320,7 +326,7 @@ class Game{
 				this.musicFadeOut++
 			}else if(this.musicFadeOut === 1 && ms >= started + 1600){
 				this.controller.gameEnded()
-				if(!p2.session){
+				if(!p2.session && this.controller.multiplayer === 1){
 					p2.send("gameend")
 				}
 				this.musicFadeOut++

public/src/js/importsongs.js

@@ -35,33 +35,23 @@
 			"ura": 4
 		}
 		this.categories = {
-			"j-pop": "J-POP",
-			"pop": "J-POP",
-			"アニメ": "アニメ",
-			"anime": "アニメ",
-			"アニメ": "アニメ",
-			"ボーカロイド™曲": "ボーカロイド™曲",
 			"ボーカロイド曲": "ボーカロイド™曲",
 			"ボーカロイド": "ボーカロイド™曲",
-			"vocaloid™ music": "ボーカロイド™曲",
 			"vocaloid music": "ボーカロイド™曲",
 			"vocaloid": "ボーカロイド™曲",
-			"バラエティ": "バラエティ",
 			"バラエティー": "バラエティ",
 			"どうよう": "バラエティ",
 			"童謡・民謡": "バラエティ",
-			"variety": "バラエティ",
 			"children": "バラエティ",
 			"children/folk": "バラエティ",
 			"children-folk": "バラエティ",
-			"クラシック": "クラシック",
 			"クラッシック": "クラシック",
-			"classical": "クラシック",
+			"classic": "クラシック"
-			"classic": "クラシック",
+		}
-			"ゲームミュージック": "ゲームミュージック",
+		for(var i in allStrings){
-			"game music": "ゲームミュージック",
+			for(var ja in allStrings[i].categories){
-			"ナムコオリジナル": "ナムコオリジナル",
+				this.categories[allStrings[i].categories[ja].toLowerCase()] = ja
-			"namco original": "ナムコオリジナル"
+			}
 		}
 		
 		for(var i = 0; i < files.length; i++){

public/src/js/songselect.js

@@ -94,11 +94,12 @@ class SongSelect{
 		
 		this.songs = []
 		for(let song of assets.songs){
-			var en = strings.id === "en" && song.title_en
+			var title = this.getLocalTitle(song.title, song.title_lang)
+			var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
 			this.songs.push({
 				id: song.id,
-				title: en ? song.title_en : song.title,
+				title: title,
-				subtitle: en ? song.subtitle_en : song.subtitle,
+				subtitle: subtitle,
 				skin: song.category in this.songSkin ? this.songSkin[song.category] : this.songSkin.default,
 				stars: song.stars,
 				category: song.category,
@@ -1325,7 +1326,7 @@ class SongSelect{
 						if(this.selectedDiff === 4 + this.diffOptions.length){
 							currentDiff = 3
 						}
-						if(i === currentSong.p2Cursor){
+						if(i === currentSong.p2Cursor && p2.socket.readyState === 1){
 							this.draw.diffCursor({
 								ctx: ctx,
 								font: this.font,
@@ -1349,7 +1350,7 @@ class SongSelect{
 									font: this.font,
 									x: _x,
 									y: _y - 65,
-									side: currentSong.p2Cursor === currentDiff
+									side: currentSong.p2Cursor === currentDiff && p2.socket.readyState === 1
 								})
 							}
 							if(highlight){
@@ -1664,7 +1665,7 @@ class SongSelect{
 			})
 		}
 		this.draw.songFrame(config)
-		if(config.song.p2Cursor){
+		if(config.song.p2Cursor && p2.socket.readyState === 1){
 			this.draw.diffCursor({
 				ctx: ctx,
 				font: this.font,
@@ -1853,6 +1854,22 @@ class SongSelect{
 		return ((index % length) + length) % length
 	}
 	
+	getLocalTitle(title, titleLang){
+		if(titleLang){
+			titleLang = titleLang.split("\n")
+			titleLang.forEach(line => {
+				var space = line.indexOf(" ")
+				var id = line.slice(0, space)
+				if(id === strings.id){
+					title = line.slice(space + 1)
+				}else if(titleLang.length === 1 && strings.id === "en" && !(id in allStrings)){
+					title = line
+				}
+			})
+		}
+		return title
+	}
+	
 	getMS(){
 		return Date.now()
 	}

public/src/js/view.js

@@ -220,7 +220,7 @@
 		
 		this.drawGogoTime()
 		
-		if(!touchMultiplayer){
+		if(!touchMultiplayer || this.multiplayer === 1 && frameTop >= 0){
 			this.assets.drawAssets("background")
 		}