diff --git a/app.js b/app.js
index 7bb7216..6aa96ef 100644
--- a/app.js
+++ b/app.js
@@ -29,7 +29,7 @@ const CLEARED_LINES_NAMES = [
"SINGLE",
"DOUBLE",
"TRIPLE",
- "<h4>QUATRIS</h4>",
+ "QUATRIS",
]
const DELAY = {
@@ -379,11 +379,9 @@ class Settings {
load() {
for (let input of keyBindFielset.getElementsByTagName("input")) {
this[input.name] = KEY_NAMES[input.value] || input.value
- localStorage[input.name] = input.value
}
for (let input of autorepearFieldset.getElementsByTagName("input")) {
this[input.name] = input.valueAsNumber
- localStorage[input.name] = input.value
}
this.keyBind = {}
@@ -447,8 +445,10 @@ class Stats {
this.lockDelay = 500 * Math.pow(0.9, level - 15)
levelInput.value = level
levelCell.innerText = level
- levelSpan.innerHTML = `<h1>LEVEL<br/>${this.level}</h1>`
- levelSpan.classList.add("show-level-animation")
+ let div = document.createElement("div")
+ div.className = "show-level-animation"
+ div.innerHTML = `<h1>LEVEL<br/>${this.level}</h1>`
+ messagesSpan.appendChild(div)
}
get level() {
@@ -480,20 +480,20 @@ class Stats {
let div = document.createElement("div")
div.className = "rotate-in-animation"
div.innerHTML = tSpin
- scoreSpan.appendChild(div)
+ messagesSpan.appendChild(div)
}
if (nbClearedLines) {
let div = document.createElement("div")
div.className = "zoom-in-animation"
div.innerHTML = CLEARED_LINES_NAMES[nbClearedLines]
- scoreSpan.appendChild(div)
+ messagesSpan.appendChild(div)
}
if (patternScore) {
let div = document.createElement("div")
div.className = "zoom-in-animation"
- div.style = "animation-delay: .2s; animation-duration: .8s"
+ div.style = "animation-delay: .2s"
div.innerHTML = patternScore
- scoreSpan.appendChild(div)
+ messagesSpan.appendChild(div)
this.score += patternScore
}
@@ -504,9 +504,9 @@ class Stats {
let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
let div = document.createElement("div")
div.className = "zoom-in-animation"
- div.style = "animation-delay: .4s; animation-duration: .6s"
+ div.style = "animation-delay: .4s"
div.innerHTML = `COMBO x${this.combo}<br/>${comboScore}`
- scoreSpan.appendChild(div)
+ messagesSpan.appendChild(div)
this.score += comboScore
}
} else {
@@ -520,9 +520,9 @@ class Stats {
let b2bScore = patternScore / 2
let div = document.createElement("div")
div.className = "zoom-in-animation"
- div.style = "animation-delay: .4s; animation-duration: .6s"
+ div.style = "animation-delay: .4s"
div.innerHTML = `BACK TO BACK x${this.b2b}<br/>${b2bScore}`
- scoreSpan.appendChild(div)
+ messagesSpan.appendChild(div)
this.score += b2bScore
}
} else if ((0 < nbClearedLines) && (nbClearedLines < 4) && !tSpin) {
@@ -545,7 +545,7 @@ onanimationend = function (event) {
event.target.classList.remove(event.animationName)
}
-scoreSpan.onanimationend = function(event) {
+messagesSpan.onanimationend = function(event) {
event.target.remove()
}
@@ -570,7 +570,7 @@ function pause() {
settings.modal.show()
}
-//window.onblur = pause()
+window.onblur = pause()
pause()
@@ -767,9 +767,17 @@ function gameOver() {
scheduler.clearInterval(clock)
+ let div = document.createElement("div")
+ div.className = "show-level-animation"
+ div.innerHTML = "<h1>GAME<br/>OVER</h1>"
+ messagesSpan.appendChild(div)
+}
+
+window.onbeforeunload = function(event) {
localStorage["highScore"] = stats.highScore
- levelSpan.innerHTML = "<h1>GAME<br/>OVER</h1>"
- levelSpan.classList.add("show-level-animation")
+ for (let input of settingsForm.getElementsByTagName("input")) {
+ localStorage[input.name] = input.value
+ }
}
if ('serviceWorker' in navigator) {
diff --git a/css/common.css b/css/common.css
index 5810dca..b6dbf45 100644
--- a/css/common.css
+++ b/css/common.css
@@ -72,7 +72,7 @@ td.hard-drop-animation {
from {
background-color: rgb(206, 255, 255, 40%);
filter: saturate(50%) brightness(300%);
- box-shadow: -60px 0 5px white, 60px 0 5px white;
+ box-shadow: -100px 0 5px white, 100px 0 5px white;
}
to {
background-color: transparent;
@@ -85,7 +85,7 @@ tr.cleared-line-animation{
span {
position: absolute;
- top: 20%;
+ top: 25%;
left: 50%;
transform: translate(-50%, 0);
color: rgba(255, 255, 255, 0.8);
@@ -94,29 +94,27 @@ span {
text-align: center;
}
-#levelSpan {
- font-size: 4vmin;
- font-weight: bold;
+#messagesSpan div {
opacity: 0;
}
@keyframes show-level-animation {
from {
opacity: 0;
- top: 70%;
+ transform: translateY(200%);
}
50% {
opacity: 100%;
- top: 40%
+ transform: translateY(0);
}
to {
opacity: 0;
- top: 20%
+ transform: translateY(-100%);
}
}
-#levelSpan.show-level-animation {
- animation: cubic-bezier(0.4, 0, 0.6, 1) 2s show-level-animation;
+div.show-level-animation {
+ animation: show-level-animation cubic-bezier(0.4, 0, 0.6, 1) 2s 1s;
}
@keyframes zoom-in-animation {
@@ -162,19 +160,15 @@ span {
}
}
-#scoreSpan div {
- opacity: 0;
-}
-
-#scoreSpan div.rotate-in-animation {
+#messagesSpan div.rotate-in-animation {
animation-name: rotate-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
- animation-duration: 1s;
+ animation-duration: 1.5s;
}
-#scoreSpan div.zoom-in-animation {
+#messagesSpan div.zoom-in-animation {
animation-name: zoom-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
transform-origin:center;
- animation-duration: 1s;
+ animation-duration: 1.5s;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 69b3ffe..76d97f5 100644
--- a/index.html
+++ b/index.html
@@ -157,8 +157,7 @@
<tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
- <span id="levelSpan"></span>
- <span id="scoreSpan"></span>
+ <span id="messagesSpan"></span>
</div>
<div class="col">
<div class="card">