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

This commit is contained in:
Bui 2019-01-26 19:39:05 +01:00 committed by Gitea
commit faa6f1991e
10 changed files with 201 additions and 87 deletions

View File

@ -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;
}

View File

@ -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{

View File

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

View File

@ -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()

View File

@ -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

View File

@ -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)

View File

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

View File

@ -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(),

View File

@ -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){

View File

@ -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})