diff --git a/app.js b/app.js
index 6aa96ef..d7cab39 100644
--- a/app.js
+++ b/app.js
@@ -445,10 +445,7 @@ class Stats {
this.lockDelay = 500 * Math.pow(0.9, level - 15)
levelInput.value = level
levelCell.innerText = level
- let div = document.createElement("div")
- div.className = "show-level-animation"
- div.innerHTML = `
LEVEL
${this.level}
`
- messagesSpan.appendChild(div)
+ messagesSpan.addDiv({ className: "show-level-animation", innerHTML: `LEVEL
${this.level}
` })
}
get level() {
@@ -476,24 +473,20 @@ class Stats {
lockDown(nbClearedLines, tSpin) {
// Cleared lines & T-Spin
let patternScore = SCORES[tSpin][nbClearedLines] * this.level
- if (tSpin) {
- let div = document.createElement("div")
- div.className = "rotate-in-animation"
- div.innerHTML = tSpin
- messagesSpan.appendChild(div)
- }
- if (nbClearedLines) {
- let div = document.createElement("div")
- div.className = "zoom-in-animation"
- div.innerHTML = CLEARED_LINES_NAMES[nbClearedLines]
- messagesSpan.appendChild(div)
- }
+ if (tSpin) messagesSpan.addDiv({
+ className: "rotate-in-animation",
+ innerHTML: tSpin
+ })
+ if (nbClearedLines) messagesSpan.addDiv({
+ className: "zoom-in-animation",
+ innerHTML: CLEARED_LINES_NAMES[nbClearedLines]
+ })
if (patternScore) {
- let div = document.createElement("div")
- div.className = "zoom-in-animation"
- div.style = "animation-delay: .2s"
- div.innerHTML = patternScore
- messagesSpan.appendChild(div)
+ messagesSpan.addDiv({
+ className: "zoom-in-animation",
+ style: "animation-delay: .2s",
+ innerHTML: patternScore
+ })
this.score += patternScore
}
@@ -502,11 +495,11 @@ class Stats {
this.combo++
if (this.combo >= 1) {
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"
- div.innerHTML = `COMBO x${this.combo}
${comboScore}`
- messagesSpan.appendChild(div)
+ messagesSpan.addDiv({
+ className: "zoom-in-animation",
+ style: "animation-delay: .4s",
+ innerHTML: `COMBO x${this.combo}
${comboScore}`
+ })
this.score += comboScore
}
} else {
@@ -518,14 +511,14 @@ class Stats {
this.b2b++
if (this.b2b >= 1) {
let b2bScore = patternScore / 2
- let div = document.createElement("div")
- div.className = "zoom-in-animation"
- div.style = "animation-delay: .4s"
- div.innerHTML = `BACK TO BACK x${this.b2b}
${b2bScore}`
- messagesSpan.appendChild(div)
+ messagesSpan.addDiv({
+ className: "zoom-in-animation",
+ style: "animation-delay: .4s",
+ innerHTML: `BACK TO BACK x${this.b2b}
${b2bScore}`
+ })
this.score += b2bScore
}
- } else if ((0 < nbClearedLines) && (nbClearedLines < 4) && !tSpin) {
+ } else if (nbClearedLines && !tSpin ) {
this.b2b = -1
}
@@ -549,6 +542,14 @@ messagesSpan.onanimationend = function(event) {
event.target.remove()
}
+messagesSpan.addDiv = function(attributes) {
+ let div = document.createElement("div")
+ for (key in attributes) {
+ div[key] = attributes[key]
+ }
+ messagesSpan.appendChild(div)
+}
+
let scheduler = new Scheduler()
let settings = new Settings()
let stats = new Stats()
@@ -767,10 +768,12 @@ function gameOver() {
scheduler.clearInterval(clock)
- let div = document.createElement("div")
- div.className = "show-level-animation"
- div.innerHTML = "GAME
OVER
"
- messagesSpan.appendChild(div)
+ messagesSpan.onanimationend = null
+ messagesSpan.addDiv({
+ className: "game-over-animation",
+ style: "opacity: 100%",
+ innerHTML: "GAME
OVER
"
+ })
}
window.onbeforeunload = function(event) {
diff --git a/css/common.css b/css/common.css
index ff5d88a..02e4e94 100644
--- a/css/common.css
+++ b/css/common.css
@@ -117,11 +117,10 @@ span {
}
}
-div.show-level-animation {
+#messagesSpan div.show-level-animation {
animation: show-level-animation;
animation-timing-function: (0.4, 0, 0.6, 1);
animation-duration: 2s;
- animation-delay: 1s;
}
@keyframes zoom-in-animation {
@@ -181,4 +180,22 @@ div.show-level-animation {
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
transform-origin:center;
animation-duration: 1s;
+}
+
+@keyframes game-over-animation {
+ from {
+ opacity: 0;
+ transform: translateY(200%);
+ }
+ to {
+ opacity: 100%;
+ transform: translateY(0) scaleY(1);
+ line-height: var(--bs-body-line-height);
+ }
+}
+
+#messagesSpan div.game-over-animation {
+ animation: game-over-animation;
+ animation-timing-function: (0.4, 0, 0.6, 1);
+ animation-duration: 2s;
}
\ No newline at end of file