Merge branch 'browsersupport-translate' of LoveEevee/taiko-web into master

public/src/css/loader.css

@@ -64,28 +64,27 @@ body{
 	left: 0;
 	max-height: 100%;
 	overflow: hidden auto;
-	padding: 10px;
+	padding: 0.5em;
 	background: #aef;
 	font-family: sans-serif;
 	font-size: 20px;
 	cursor: default;
 	z-index: 10;
 }
-#unsupportedBrowser::before{
+#unsupportedWarn{
-	content: "!";
 	display: inline-block;
-	width: 30px;
+	width: 1.5em;
-	height: 30px;
+	height: 1.5em;
-	margin-right: 10px;
+	margin-right: 0.5em;
 	background: #39a;
 	color: #fff;
 	text-align: center;
-	line-height: 30px;
+	line-height: 1.5em;
 }
 #unsupportedBrowser.hidden{
-	width: 30px;
+	width: 1.5em;
 }
-#unsupportedBrowser.hidden *{
+#unsupportedBrowser.hidden *:not(#unsupportedWarn){
 	display: none !important;
 }
 #unsupportedBrowser a{
@@ -97,13 +96,13 @@ body{
 	text-decoration: underline;
 }
 #unsupportedBrowser ul{
-	margin: 5px;
+	margin: 0.25em;
 }
 #unsupportedDetails{
 	display: none;
-	margin: 10px 50px 0 50px;
+	margin: 0.5em 2.5em 0 2.5em;
-	border: 3px solid #39a;
+	border: 0.15em solid #39a;
-	padding: 5px;
+	padding: 0.25em;
 	cursor: auto;
 	user-select: text;
 }
@@ -111,10 +110,10 @@ body{
 	position: absolute;
 	right: 0;
 	top: 0;
-	width: 50px;
+	width: 2.5em;
-	height: 50px;
+	height: 2.5em;
 	text-align: center;
-	line-height: 45px;
+	line-height: 2.25em;
 	color: #777;
-	text-shadow: 1px 1px #fff;
+	text-shadow: 0.05em 0.05em #fff;
 }

public/src/css/songbg.css

@@ -110,9 +110,13 @@
 	top: calc(50% + -1vw);
 	bottom: auto;
 }
-@keyframes donbg-scroll{
+@keyframes donbg-scroll1{
 	from{background-position-x: 0}
-	to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw) * -1)}
+	to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw1) * -1)}
+}
+@keyframes donbg-scroll2{
+	from{background-position-x: 0}
+	to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw2) * -1)}
 }
 @keyframes donbg-raise{
 	from{background-position-y: 0}
@@ -134,7 +138,7 @@
 	30%{background-position-y: 0}
 }
 .donlayer1{
-	animation: 5s linear donbg-scroll infinite;
+	animation: 5s linear donbg-scroll1 infinite;
 	background-size: auto 100%;
 }
 .donlayer2{
@@ -154,21 +158,27 @@
 .donbg-4 .donlayer2,
 .donbg-6 .donlayer2,
 .donbg-raise .donlayer2{
-	animation: 5s linear donbg-scroll infinite, 1s linear donbg-raise infinite alternate;
+	animation: 5s linear donbg-scroll2 infinite, 1s linear donbg-raise infinite alternate;
 }
 .donbg-3 .donlayer2,
 .donbg-anim3 .donlayer2{
-	animation: 3.4s linear donbg-scroll infinite, 1.8s linear donbg-anim3 infinite;
+	animation: 3.4s linear donbg-scroll2 infinite, 1.8s linear donbg-anim3 infinite;
 }
 .donbg-5 .donlayer2,
 .donbg-anim5 .donlayer2{
-	animation: 2.7s linear donbg-scroll infinite, 2.2s linear donbg-anim5 infinite;
+	animation: 2.7s linear donbg-scroll2 infinite, 2.2s linear donbg-anim5 infinite;
+}
+.donbg-equalscroll .donlayer1{
+	animation: 5.3s linear donbg-scroll1 infinite;
+}
+.donbg-equalscroll .donlayer2{
+	animation: 5.3s linear donbg-scroll2 infinite;
 }
 .donbg-fastscroll .donlayer1{
-	animation: 2s linear donbg-scroll infinite;
+	animation: 2s linear donbg-scroll1 infinite;
 }
 .donbg-fastscroll .donlayer2{
-	animation: 1s linear donbg-scroll infinite;
+	animation: 1s linear donbg-scroll2 infinite;
 }
 
 #tetsuohana{

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")
+		showUnsupported()
-		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()
-		})
 	}
 }
+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
+		this.donBg.style.setProperty("--sw1", assets.image[asset1].width)
-		var w2 = assets.image[asset2].width
+		this.donBg.style.setProperty("--sw2", assets.image[asset2].width)
-		this.donBg.style.setProperty("--sw", w1 > w2 ? w1 : w2)
 		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})