BrowserSupport: Translate

public/src/js/assets.js

@@ -26,7 +26,6 @@ var assets = {
 		"about.js",
 		"debug.js",
 		"session.js",
-		"strings.js",
 		"importsongs.js"
 	],
 	"css": [

public/src/js/browsersupport.js

@@ -49,72 +49,138 @@ function browserSupport(){
 			return el.style.length !== 0
 		}
 	}
-	var failedTests = []
+	failedTests = []
 	for(var name in tests){
 		var result = false
 		try{
 			result = tests[name]()
 		}catch(e){}
 		if(result === false){
-			failedTests.push("<li>" + name + "</li>")
+			failedTests.push(name)
 		}
 	}
 	if(failedTests.length !== 0){
-		var div = document.createElement("div")
-		div.id = "unsupportedBrowser"
-		
-		div.innerHTML =
-'<div id="unsupportedHide">x</div>\
-<span>You are running an unsupported browser (\
-<a id="unsupportedLink">Details...</a>)</span>\
-<div id="unsupportedDetails">\
-The following tests have failed:\
-<ul>'
-+ failedTests.join("")
-+ '</ul>\
-Please use a supported browser such as \
-<a href="https://www.google.com/chrome/" id="unsupportedChrome">Google Chrome</a>\
-</div>'
-		
-		document.body.appendChild(div)
-		var link = document.getElementById("unsupportedLink")
-		var details = document.getElementById("unsupportedDetails")
-		var hide = document.getElementById("unsupportedHide")
-		var chrome = document.getElementById("unsupportedChrome")
-		var divClick = function(event){
-			if(event.type === "touchstart"){
-				event.preventDefault()
-				getSelection().removeAllRanges()
-			}
-			div.classList.remove("hidden")
-		}
-		div.addEventListener("click", divClick)
-		div.addEventListener("touchstart", divClick)
-		var toggleDetails = function(event){
-			if(event.type === "touchstart"){
-				event.preventDefault()
-			}
-			if(details.style.display === "block"){
-				details.style.display = ""
-			}else{
-				details.style.display = "block"
-			}
-		}
-		link.addEventListener("click", toggleDetails)
-		link.addEventListener("touchstart", toggleDetails)
-		var hideClick = function(event){
-			if(event.type === "touchstart"){
-				event.preventDefault()
-			}
-			event.stopPropagation()
-			div.classList.add("hidden")
-		}
-		hide.addEventListener("click", hideClick)
-		hide.addEventListener("touchstart", hideClick)
-		chrome.addEventListener("touchend", function(event){
-			event.preventDefault()
-			chrome.click()
-		})
+		showUnsupported()
 	}
 }
+function showUnsupported(strings){
+	if(!strings){
+		var lang
+		try{
+			if("localStorage" in window && window.localStorage.lang && window.localStorage.lang in allStrings){
+				lang = window.localStorage.lang
+			}
+			if(!lang && "languages" in navigator){
+				var userLang = navigator.languages.slice()
+				userLang.unshift(navigator.language)
+				for(var i in userLang){
+					for(var j in allStrings){
+						if(allStrings[j].regex.test(userLang[i])){
+							lang = j
+						}
+					}
+				}
+			}
+		}catch(e){}
+		if(!lang){
+			lang = "en"
+		}
+		strings = allStrings[lang]
+	}
+	
+	var div = document.getElementById("unsupportedBrowser")
+	if(div){
+		div.parentNode.removeChild(div)
+	}
+	div = document.createElement("div")
+	div.id = "unsupportedBrowser"
+	
+	var warn = document.createElement("div")
+	warn.id = "unsupportedWarn"
+	warn.innerText = "!"
+	div.appendChild(warn)
+	var hide = document.createElement("div")
+	hide.id = "unsupportedHide"
+	hide.innerText = "x"
+	div.appendChild(hide)
+	
+	var span = document.createElement("span")
+	var browserWarning = strings.browserSupport.browserWarning.split("%s")
+	for(var i = 0; i < browserWarning.length; i++){
+		if(i !== 0){
+			var link = document.createElement("a")
+			link.innerText = strings.browserSupport.details
+			span.appendChild(link)
+		}
+		span.appendChild(document.createTextNode(browserWarning[i]))
+	}
+	div.appendChild(span)
+	
+	var details = document.createElement("div")
+	details.id = "unsupportedDetails"
+	details.appendChild(document.createTextNode(strings.browserSupport.failedTests))
+	
+	var ul = document.createElement("ul")
+	for(var i = 0; i < failedTests.length; i++){
+		var li = document.createElement("li")
+		li.innerText = failedTests[i]
+		ul.appendChild(li)
+	}
+	details.appendChild(ul)
+	
+	var supportedBrowser = strings.browserSupport.supportedBrowser.split("%s")
+	for(var i = 0; i < supportedBrowser.length; i++){
+		if(i !== 0){
+			var chrome = document.createElement("a")
+			chrome.href = "https://www.google.com/chrome/"
+			chrome.innerText = "Google Chrome"
+			details.appendChild(chrome)
+		}
+		details.appendChild(document.createTextNode(supportedBrowser[i]))
+	}
+	
+	div.appendChild(details)
+	
+	document.body.appendChild(div)
+	var divClick = function(event){
+		if(event.type === "touchstart"){
+			event.preventDefault()
+			getSelection().removeAllRanges()
+		}
+		div.classList.remove("hidden")
+	}
+	div.addEventListener("click", divClick)
+	div.addEventListener("touchstart", divClick)
+	var toggleDetails = function(event){
+		if(event.type === "touchstart"){
+			event.preventDefault()
+		}
+		if(details.style.display === "block"){
+			details.style.display = ""
+		}else{
+			details.style.display = "block"
+		}
+	}
+	link.addEventListener("click", toggleDetails)
+	link.addEventListener("touchstart", toggleDetails)
+	var hideClick = function(event){
+		if(event.type === "touchstart"){
+			event.preventDefault()
+		}
+		event.stopPropagation()
+		div.classList.add("hidden")
+	}
+	hide.addEventListener("click", hideClick)
+	hide.addEventListener("touchstart", hideClick)
+	chrome.addEventListener("touchend", function(event){
+		event.preventDefault()
+		chrome.click()
+	})
+	var touchText = function(){
+		div.style.fontSize = "4em"
+		removeEventListener("touchstart", touchText)
+	}
+	addEventListener("touchstart", touchText)
+}
+var failedTests
 browserSupport()

public/src/js/circle.js

@@ -22,6 +22,7 @@ class Circle{
 		this.gogoTime = config.gogoTime
 		this.gogoChecked = false
 		this.beatMS = config.beatMS
+		this.fixedPos = config.fixedPos
 	}
 	getMS(){
 		return this.ms

public/src/js/game.js

@@ -284,7 +284,8 @@ class Game{
 			type: sound,
 			txt: "",
 			speed: circle.speed,
-			gogoTime: circle.gogoTime
+			gogoTime: circle.gogoTime,
+			fixedPos: document.hasFocus()
 		})
 		circleAnim.played(score, dai)
 		circleAnim.animate(ms)

public/src/js/scoresheet.js

@@ -396,6 +396,7 @@ class Scoresheet{
 						fontFamily: this.font,
 						x: 1257,
 						y: 20,
+						width: 600,
 						align: "right",
 						forceShadow: true
 					}, [

public/src/js/strings.js

@@ -88,6 +88,12 @@
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
 		cancel: "Cancel"
 	}
+	this.browserSupport = {
+		browserWarning: "サポートされていないブラウザを実行しています (%s)",
+		details: "詳しく",
+		failedTests: "このテストは失敗しました：",
+		supportedBrowser: "%sなどのサポートされているブラウザを使用してください"
+	}
 }
 function StringsEn(){
 	this.id = "en"
@@ -179,6 +185,12 @@ function StringsEn(){
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
 		cancel: "Cancel"
 	}
+	this.browserSupport = {
+		browserWarning: "You are running an unsupported browser (%s)",
+		details: "Details...",
+		failedTests: "The following tests have failed:",
+		supportedBrowser: "Please use a supported browser such as %s"
+	}
 }
 function StringsCn(){
 	this.id = "cn"
@@ -270,6 +282,12 @@ function StringsCn(){
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
 		cancel: "Cancel"
 	}
+	this.browserSupport = {
+		browserWarning: "You are running an unsupported browser (%s)",
+		details: "Details...",
+		failedTests: "The following tests have failed:",
+		supportedBrowser: "Please use a supported browser such as %s"
+	}
 }
 function StringsTw(){
 	this.id = "tw"
@@ -361,6 +379,12 @@ function StringsTw(){
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
 		cancel: "Cancel"
 	}
+	this.browserSupport = {
+		browserWarning: "You are running an unsupported browser (%s)",
+		details: "Details...",
+		failedTests: "The following tests have failed:",
+		supportedBrowser: "Please use a supported browser such as %s"
+	}
 }
 function StringsKo(){
 	this.id = "ko"
@@ -452,6 +476,12 @@ function StringsKo(){
 		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
 		cancel: "Cancel"
 	}
+	this.browserSupport = {
+		browserWarning: "You are running an unsupported browser (%s)",
+		details: "Details...",
+		failedTests: "The following tests have failed:",
+		supportedBrowser: "Please use a supported browser such as %s"
+	}
 }
 var allStrings = {
 	"ja": new StringsJa(),

public/src/js/titlescreen.js

@@ -98,6 +98,9 @@ class Titlescreen{
 		this.langId.setAttribute("alt", strings.id.toUpperCase())
 		loader.screen.style.fontFamily = strings.font
 		loader.screen.style.fontWeight = strings.font === "Microsoft YaHei, sans-serif" ? "bold" : ""
+		if(failedTests.length !== 0){
+			showUnsupported(strings)
+		}
 	}
 	addLangs(){
 		for(var i in allStrings){

public/src/js/view.js

@@ -1062,9 +1062,8 @@
 			}
 			this.setLayers(donLayers, filename + songSkinName + (notStatic ? "_" : ""), notStatic)
 		}
-		var w1 = assets.image[asset1].width
-		var w2 = assets.image[asset2].width
-		this.donBg.style.setProperty("--sw", w1 > w2 ? w1 : w2)
+		this.donBg.style.setProperty("--sw1", assets.image[asset1].width)
+		this.donBg.style.setProperty("--sw2", assets.image[asset2].width)
 		this.donBg.style.setProperty("--sh1", assets.image[asset1].height)
 		this.donBg.style.setProperty("--sh2", assets.image[asset2].height)
 	}
@@ -1163,6 +1162,11 @@
 				var animT = circle.getAnimT()
 				if(ms < animT + 490){
 					
+					if(circle.fixedPos){
+						circle.fixedPos = false
+						circle.animT = ms
+						animT = ms
+					}
 					var animPoint = (ms - animT) / 490
 					var bezierPoint = this.calcBezierPoint(this.draw.easeOut(animPoint), this.animateBezier)
 					this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})