adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

scoreSpan

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-04-21 20:10:03 +02:00
parent ee639d459e
commit e0290a4918
3 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app.js
View File

@ -464,13 +464,11 @@ class Stats {
}
lockDown(nbClearedLines, tSpin) {
messagesSpan.innerHTML = ""
// Cleared lines & T-Spin
let patternScore = SCORES[tSpin][nbClearedLines] * this.level
if (tSpin) messagesSpan.innerHTML += `<div class="rotate-in-animation">${tSpin}</div>\n`
if (nbClearedLines) messagesSpan.innerHTML += `<div class="zoom-in-animation">${CLEARED_LINES_NAMES[nbClearedLines]}</div>\n`
if (patternScore) messagesSpan.innerHTML += `<div class="zoom-in-animation">${patternScore}</div>\n`
if (tSpin) scoreSpan.innerHTML += `<div class="rotate-in-animation">${tSpin}</div>\n`
if (nbClearedLines) scoreSpan.innerHTML += `<div class="zoom-in-animation">${CLEARED_LINES_NAMES[nbClearedLines]}</div>\n`
if (patternScore) scoreSpan.innerHTML += `<div class="zoom-in-animation">${patternScore}</div>\n`
this.score += patternScore
// Combo
@ -478,7 +476,7 @@ class Stats {
this.combo++
if (this.combo >= 1) {
let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
messagesSpan.innerHTML += `<div class="zoom-in-animation">COMBO x${this.combo}<br/>${comboScore}</div>\n`
scoreSpan.innerHTML += `<div class="zoom-in-animation">COMBO x${this.combo}<br/>${comboScore}</div>\n`
this.score += comboScore
}
} else {
@ -490,7 +488,7 @@ class Stats {
this.b2b++
if (this.b2b >= 1) {
let b2bScore = patternScore / 2
messagesSpan.innerHTML += `<div class="zoom-in-animation">BACK TO BACK x${this.b2b}<br/>${b2bScore}</div>\n`
scoreSpan.innerHTML += `<div class="zoom-in-animation">BACK TO BACK x${this.b2b}<br/>${b2bScore}</div>\n`
this.score += b2bScore
}
} else if ((0 < nbClearedLines) && (nbClearedLines < 4) && !tSpin) {
@ -508,6 +506,10 @@ onanimationend = function (event) {
event.target.classList.remove(event.animationName)
}
scoreSpan.onanimationend = function(event) {
console.log(event)
event.target.remove()
}
let scheduler = new Scheduler()
let settings = new Settings()

39
css/common.css
View File

@ -87,9 +87,9 @@ tr.line-cleared-animation{
span {
position: absolute;
top: 35%;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
font-size: 3vmin;
@ -160,37 +160,46 @@ span {
}
}
#messagesSpan div {
#scoreSpan div {
opacity: 0;
}
#messagesSpan div.rotate-in-animation {
#scoreSpan div.rotate-in-animation {
animation-name: rotate-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
animation-duration: 1s;
}
#messagesSpan div.zoom-in-animation {
#scoreSpan div.zoom-in-animation {
animation-name: zoom-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
transform-origin:center;
}
#messagesSpan div.zoom-in-animation:first-child {
animation-duration: 1s;
}
#messagesSpan div.zoom-in-animation:nth-child(2) {
#scoreSpan div.zoom-in-animation:nth-child(2) {
animation-delay: .2s;
animation-duration: .9s;
}
#messagesSpan div.zoom-in-animation:nth-child(3) {
#scoreSpan div.zoom-in-animation:nth-child(3) {
animation-delay: .4s;
animation-duration: .8s;
}
#messagesSpan div.zoom-in-animation:nth-child(4) {
#scoreSpan div.zoom-in-animation:nth-child(4) {
animation-delay: .6s;
animation-duration: .7s;
}
#messagesSpan div.zoom-in-animation:nth-child(5) {
#scoreSpan div.zoom-in-animation:nth-child(5) {
animation-delay: .8s;
animation-duration: .6s;
}
#scoreSpan div.zoom-in-animation:nth-child(6) {
animation-delay: 1s;
}
#scoreSpan div.zoom-in-animation:nth-child(7) {
animation-delay: 1.2s;
}
#scoreSpan div.zoom-in-animation:nth-child(8) {
animation-delay: 1.4s;
}
#scoreSpan div.zoom-in-animation:nth-child(9) {
animation-delay: 1.6s;
}
#scoreSpan div.zoom-in-animation:nth-child(10) {
animation-delay: 1.8s;
}

2
index.html
View File

@ -157,7 +157,7 @@
</table>
</div>
<span id="levelSpan"></span>
<span id="messagesSpan"></span>
<span id="scoreSpan"></span>
</div>
<div class="col">
<div class="card">