SongSelect: Add Settings

- Resolution can be adjusted, as well as touch drum animation on mobile
- A translation text file "songtitle.txt" can be imported
  - Titles and translated titles are each on their own line, if a line begins with a language code, it will translate the song title that is above
  - An example file can be found here: https://gist.github.com/LoveEevee/65fe66f0b54c0536f96fd2f4862984d4
- The page will fail to load if version on the page does not match /api/config
- Disabled Tab key while playing, before hitting it would focus the version link
- Fix forcing branches in debug not working
- Fixed not being able to click on songs that do not have oni but have ura
- Fix unexpected category being used as a fallback
- Fix verticalText and layeredText not accepting anything except strings

public/src/js/view.js

@@ -118,6 +118,7 @@
 		
 		this.touchEnabled = this.controller.touchEnabled
 		this.touch = -Infinity
+		this.touchAnimation = settings.getItem("touchAnimation")
 		
 		if(this.multiplayer !== 2){
 			
@@ -125,6 +126,8 @@
 				this.touchDrumDiv = document.getElementById("touch-drum")
 				this.touchDrumImg = document.getElementById("touch-drum-img")
 				
+				this.setBgImage(this.touchDrumImg, assets.image["touch_drum"].src)
+				
 				if(this.controller.autoPlayEnabled){
 					this.touchDrumDiv.style.display = "none"
 				}
@@ -180,6 +183,14 @@
 		var touchMultiplayer = this.touchEnabled && this.multiplayer && !this.portrait
 		
 		this.pixelRatio = window.devicePixelRatio || 1
+		var resolution = settings.getItem("resolution")
+		if(resolution === "medium"){
+			this.pixelRatio *= 0.75
+		}else if(resolution === "low"){
+			this.pixelRatio *= 0.5
+		}else if(resolution === "lowest"){
+			this.pixelRatio *= 0.25
+		}
 		winW *= this.pixelRatio
 		winH *= this.pixelRatio
 		if(this.portrait){
@@ -1123,6 +1134,7 @@
 		
 		if(!selectedSong.songSkin.stage){
 			this.songStage.classList.add("song-stage-" + selectedSong.songStage)
+			this.setBgImage(this.songStage, assets.image["bg_stage_" + selectedSong.songStage].src)
 		}else if(selectedSong.songSkin.stage !== "none"){
 			var prefix = selectedSong.songSkin.prefix || ""
 			this.setBgImage(this.songStage, assets.image[prefix + "bg_stage_" + songSkinName].src)
@@ -1180,9 +1192,10 @@
 	}
 	setDonBgHeight(){
 		this.donBg.style.setProperty("--h", getComputedStyle(this.donBg).height)
-		this.gameDiv.classList.add("fix-animations")
+		var gameDiv = this.gameDiv
+		gameDiv.classList.add("fix-animations")
 		setTimeout(()=>{
-			this.gameDiv.classList.remove("fix-animations")
+			gameDiv.classList.remove("fix-animations")
 		}, 50)
 	}
 	setLayers(elements, file, ab){
@@ -1700,14 +1713,16 @@
 				this.touchDrumDiv.style.width = drumWidth + "px"
 				this.touchDrumDiv.style.height = drumHeight + "px"
 			}
-			if(this.touch > ms - 100){
-				if(!this.drumPadding){
-					this.drumPadding = true
-					this.touchDrumImg.style.backgroundPositionY = "7px"
+			if(this.touchAnimation){
+				if(this.touch > ms - 100){
+					if(!this.drumPadding){
+						this.drumPadding = true
+						this.touchDrumImg.style.backgroundPositionY = "7px"
+					}
+				}else if(this.drumPadding){
+					this.drumPadding = false
+					this.touchDrumImg.style.backgroundPositionY = ""
 				}
-			}else if(this.drumPadding){
-				this.drumPadding = false
-				this.touchDrumImg.style.backgroundPositionY = ""
 			}
 		}
 	}