From 8d50b9ceea3c11ad4048e53d737d79f738c37e5d Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sat, 26 Jan 2019 21:29:13 +0300 Subject: [PATCH] BrowserSupport: Translate --- public/src/css/loader.css | 33 +++--- public/src/css/songbg.css | 26 +++-- public/src/js/assets.js | 1 - public/src/js/browsersupport.js | 180 ++++++++++++++++++++++---------- public/src/js/circle.js | 1 + public/src/js/game.js | 3 +- public/src/js/scoresheet.js | 1 + public/src/js/strings.js | 30 ++++++ public/src/js/titlescreen.js | 3 + public/src/js/view.js | 10 +- 10 files changed, 201 insertions(+), 87 deletions(-) diff --git a/public/src/css/loader.css b/public/src/css/loader.css index de0e97d..2899ce0 100644 --- a/public/src/css/loader.css +++ b/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{ - content: "!"; +#unsupportedWarn{ display: inline-block; - width: 30px; - height: 30px; - margin-right: 10px; + width: 1.5em; + height: 1.5em; + 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; - border: 3px solid #39a; - padding: 5px; + margin: 0.5em 2.5em 0 2.5em; + border: 0.15em solid #39a; + padding: 0.25em; cursor: auto; user-select: text; } @@ -111,10 +110,10 @@ body{ position: absolute; right: 0; top: 0; - width: 50px; - height: 50px; + width: 2.5em; + 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; } diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css index 6261158..05cbe6b 100644 --- a/public/src/css/songbg.css +++ b/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{ diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 91eb0fa..22ddedd 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -26,7 +26,6 @@ var assets = { "about.js", "debug.js", "session.js", - "strings.js", "importsongs.js" ], "css": [ diff --git a/public/src/js/browsersupport.js b/public/src/js/browsersupport.js index ab142f9..0ba2898 100644 --- a/public/src/js/browsersupport.js +++ b/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("
  • " + name + "
    • ") + failedTests.push(name) } } if(failedTests.length !== 0){ - var div = document.createElement("div") - div.id = "unsupportedBrowser" - - div.innerHTML = -'
    x
    \ -You are running an unsupported browser (\ -Details...)\ -
    \ -The following tests have failed:\ -\ -Please use a supported browser such as \ -Google Chrome\ -
    ' - - 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() diff --git a/public/src/js/circle.js b/public/src/js/circle.js index de780e7..6d3c650 100644 --- a/public/src/js/circle.js +++ b/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 diff --git a/public/src/js/game.js b/public/src/js/game.js index ac74ee8..75ad645 100644 --- a/public/src/js/game.js +++ b/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) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 392d8e4..c90381f 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -396,6 +396,7 @@ class Scoresheet{ fontFamily: this.font, x: 1257, y: 20, + width: 600, align: "right", forceShadow: true }, [ diff --git a/public/src/js/strings.js b/public/src/js/strings.js index e0a68c2..90fd159 100644 --- a/public/src/js/strings.js +++ b/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(), diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index ee12b42..c39f9ea 100644 --- a/public/src/js/titlescreen.js +++ b/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){ diff --git a/public/src/js/view.js b/public/src/js/view.js index 046286f..4de2e81 100644 --- a/public/src/js/view.js +++ b/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})