diff --git a/app.js b/app.js index a8fb80e..9afc8d5 100644 --- a/app.js +++ b/app.js @@ -592,6 +592,7 @@ class Stats { if (score > this.highScore) { this.highScore = score } + scoreDiv.innerText = score.toLocaleString() } get score() { @@ -608,12 +609,22 @@ class Stats { this.lockDelay = 500 * Math.pow(0.9, level - 15) levelInput.value = level messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>NIVEAU<br/>${this.level}</h1>` }) + levelDiv.innerText = level } get level() { return this._level } + set goal(goal) { + this._goal = goal + goalDiv.innerText = goal + } + + get goal() { + return this._goal + } + set combo(combo) { this._combo = combo if (combo > this.maxCombo) this.maxCombo = combo @@ -750,6 +761,10 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", { timeZone: "UTC" }) +function tick() { + timeDiv.innerText = stats.timeFormat.format(stats.time) +} + /* Scene */ @@ -983,6 +998,7 @@ function pauseSettings() { scheduler.clearTimeout(lockDown) scheduler.clearTimeout(repeat) scheduler.clearInterval(autorepeat) + scheduler.clearInterval(tick) music.pause() document.onkeydown = null @@ -1036,6 +1052,8 @@ function resume(event) { music.play() } + scheduler.setInterval(tick) + if (piece) scheduler.setInterval(fall, stats.fallPeriod) else generate() } @@ -1199,6 +1217,8 @@ function gameOver() { playing = false music.pause() + scheduler.clearInterval(tick) + stats.show() } diff --git a/index.html b/index.html index 4ec5212..613d3c1 100644 --- a/index.html +++ b/index.html @@ -125,12 +125,17 @@ </div> </div> - <span id="messagesSpan" class ="position-absolute"> + <span id="messagesSpan"> <div class="progress" role="progressbar"> <div id="loadingBar" class="progress-bar overflow-visible progress-bar-striped progress-bar-animated" style="width: 0%">Chargement...</div> </div> </span> + <span id="scoreSpan">Score<br/><div id="scoreDiv">0</div></span> + <span id="timeSpan">Temps<br/><div id="timeDiv">00:00:00</div></span> + <span id="levelSpan">Niveau<br/><div id="levelDiv">0</div></span> + <span id="goalSpan">Objectif<br/><div id="goalDiv">0</div></span> + <div class="modal fade" id="statsModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog"> diff --git a/style.css b/style.css index 4906d8a..9d0b2df 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,10 @@ body { margin: 0 } +span { + position: absolute; +} + #messagesSpan .progress { margin-top: 70vh; opacity: 1; @@ -11,6 +15,30 @@ body { opacity: inherit; } +#scoreSpan { + top: 1rem; + left: 1rem; + text-align: left; +} + +#timeSpan { + top: 1rem; + right: 1rem; + text-align: right; +} + +#levelSpan { + bottom: 1rem; + left: 1rem; + text-align: left; +} + +#goalSpan { + bottom: 1rem; + right: 1rem; + text-align: right; +} + @supports (backdrop-filter: blur()) { .card, .modal-content {