diff --git a/css/webtris.css b/css/webtris.css index 0197694..7151577 100644 --- a/css/webtris.css +++ b/css/webtris.css @@ -57,6 +57,8 @@ canvas { .hold { width: 120px; + flex-grow: 0; + justify-content: right; } .stats { @@ -64,7 +66,6 @@ canvas { flex-direction: row; margin: 10% 0; font-size: 1.2em; - width: 120px; } .stats-names { @@ -75,6 +76,7 @@ canvas { .stats-values { text-align: right; font-family: 'Share Tech Mono'; + min-width: 90px; } .matrix { diff --git a/js/webtris.js b/js/webtris.js index fbc9712..9d70b81 100644 --- a/js/webtris.js +++ b/js/webtris.js @@ -249,8 +249,8 @@ function drawMino(context, pos, color1, color2=null, spotlight=[0, 0]) { class HoldQueue { - constructor(context) { - this.context = context + constructor() { + this.context = document.getElementById("hold").getContext("2d") this.piece = null this.width = HOLD_COLUMNS*MINO_SIZE this.height = HOLD_ROWS*MINO_SIZE @@ -266,16 +266,17 @@ class HoldQueue { } -timeFormat = new Intl.DateTimeFormat("en-US", { - hour: "numeric", minute: "2-digit", second: "2-digit", hourCycle: "h24", timeZone: "UTC" +timeFormat = new Intl.DateTimeFormat("fr-FR", { + minute: "2-digit", second: "2-digit", hourCycle: "h24", timeZone: "UTC" }).format class Stats { - constructor (div) { - this.div = div + constructor () { + this.div = document.getElementById("stats-values") this._score = 0 - this.highScore = 0 + this.lastHighScore = localStorage.getItem('highScore') || 0 + this.highScore = this.lastHighScore this.goal = 0 this.linesCleared = 0 this.startTime = Date.now() @@ -340,14 +341,19 @@ class Stats { } print() { - this.div.innerHTML = `${this.score}
${this.highScore}
${this.level}
${this.goal}
${this.linesCleared}
${timeFormat(Date.now() - this.startTime)}` + this.div.innerHTML = `${this.score}
+ ${this.highScore}
+ ${timeFormat(Date.now() - this.startTime)}
+ ${this.level}
+ ${this.goal}
+ ${this.linesCleared}` } } class Matrix { - constructor(context) { - this.context = context + constructor() { + this.context = document.getElementById("matrix").getContext("2d") this.context.textAlign = "center" this.context.textBaseline = "center" this.context.font = "3vw 'Share Tech', sans-serif" @@ -458,8 +464,8 @@ class Matrix { class NextQueue { - constructor(context) { - this.context = context + constructor() { + this.context = document.getElementById("next").getContext("2d") this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT_PIECES_POSITIONS[k])) this.width = NEXT_COLUMNS*MINO_SIZE this.height = NEXT_ROWS*MINO_SIZE @@ -598,6 +604,11 @@ function gameOver() { scheduler.clearTimeout(locksDown) scheduler.clearInterval(clock) requestAnimationFrame(draw) + + if (stats.score > stats.lastHighScore) { + alert("Bravo ! Vous avez battu votre meilleur score.") + localStorage.setItem('highScore', stats.highScore) + } } function autorepeat() { @@ -692,12 +703,12 @@ function rotateCCW() { function hold() { if (this.matrix.piece.holdEnabled) { - this.matrix.piece.holdEnabled = false scheduler.clearInterval(move) scheduler.clearInterval(locksDown) var shape = this.matrix.piece.shape this.matrix.piece = this.holdQueue.piece this.holdQueue.piece = new Tetromino(HELD_PIECE_POSITION, shape) + this.holdQueue.piece.holdEnabled = false this.generationPhase(this.matrix.piece) } } @@ -748,10 +759,10 @@ function draw() { window.onload = function() { tempTexts = [] - holdQueue = new HoldQueue(document.getElementById("hold").getContext("2d")) - stats = new Stats(document.getElementById("stats-values")) - matrix = new Matrix(document.getElementById("matrix").getContext("2d")) - nextQueue = new NextQueue(document.getElementById("next").getContext("2d")) + holdQueue = new HoldQueue() + stats = new Stats() + matrix = new Matrix() + nextQueue = new NextQueue() pressedKeys = new Set() actionsToRepeat = [] diff --git a/webtris.html b/webtris.html index 7f58e7f..5334967 100644 --- a/webtris.html +++ b/webtris.html @@ -19,11 +19,11 @@
SCORE
- HIGH
- LEVEL
- GOAL
- LINES
- TIME
+ MEILLEUR
+ TEMPS
+ NIVEAU
+ OBJECTIF
+ LIGNES