css animation

app.js

@@ -1,47 +1,25 @@
-// Customize Array to be use as coordinates
-Object.defineProperty(Array.prototype, "x", {
-    get: function () { return this[0] },
-    set: function (x) { this[0] = x}
-})
-Object.defineProperty(Array.prototype, "y", {
-    get: function () { return this[1] },
-    set: function (y) { this[1] = y}
-})
-Array.prototype.add =       function(other)  { return this.map((x, i) => x + other[i]) }
-Array.prototype.mul =       function(k)      { return this.map(x => k * x) }
-Array.prototype.translate = function(vector) { return this.map(pos => pos.add(vector)) }
-Array.prototype.rotate =    function(spin)   { return [-spin*this.y, spin*this.x] }
-Array.prototype.pick =      function()       { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
-
 // Constants
 const NEXT_PIECES = 6
-const HOLD = {
+const MATRIX_INVISIBLE_ROWS = 4
-    PIECE_POSITION: [2, 3]
+const START_POSITION = {
-}
+    HOLD: [2, 3],
-const MATRIX = {
+    MATRIX: [4, 3],
-    INVISIBLE_ROWS: 4,
+    NEXT: Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3])
-    PIECE_POSITION: [4, 3]
-}
-const NEXT= {
-    PIECE_POSITION: Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3])
-}
-const THEME = {
-    PIECE_POSITION: [1, 1]
 }
+
 const CLASSNAME = {
-    EMPTY_CELL: "empty-cell",
+    EMPTY_CELL: "",
     MINO: "mino",
-    LOCKED: "locked-mino",
+    LOCKED: "locked",
-    TRAIL: "trail",
+    TRAIL: "mino trail",
     GHOST: "ghost",
-    CLEARED_LINE: "mino cleared-line"
+    CLEARED_LINE: "cleared-line",
+    MESSAGE_SPAN_FADE_OUT: "messageSpan-fade-out"
 }
 const DELAY = {
     LOCK: 500,
     FALL: 1000,
-    AUTOREPEAT: 300,
+    ANIMATION: 200,
-    AUTOREPEAT_PERIOD: 10,
-    ANIMATION: 100,
     MESSAGE: 700
 }
 const MOVEMENT = {
@@ -51,7 +29,7 @@ const MOVEMENT = {
 }
 const SPIN = {
     CW:   1,  // ClockWise
-    CCW: -1   // CounterClockWise
+    CCW: -1   // Counterstats.ClockWise
 }
 const T_SPIN = {
     NONE: "",
@@ -77,25 +55,30 @@ const SCORES = [
     {linesClearedName: "TRIPLE", "": 500, "T-SPIN": 1600},
     {linesClearedName: "TETRIS", "": 800},
 ]
-const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
 const STATE = {
     WAITING: "WAITING",
     PLAYING: "PLAYING",
     PAUSED: "PAUSE",
     GAME_OVER: "GAME OVER",
 }
-const actionsDefaultKeys = {
-    moveLeft: "ArrowLeft",
-    moveRight: "ArrowRight",
-    softDrop: "ArrowDown",
-    hardDrop: " ",
-    rotateCW: "ArrowUp",
-    rotateCCW: "z",
-    hold: "c",
-    pause: "Escape",
-}
 const RETRIES = 3
-const DEFAULT_THEME = "light-relief"
+
+
+// Customize Array to be use as coordinates
+Object.defineProperty(Array.prototype, "x", {
+    get: function () { return this[0] },
+    set: function (x) { this[0] = x}
+})
+Object.defineProperty(Array.prototype, "y", {
+    get: function () { return this[1] },
+    set: function (y) { this[1] = y}
+})
+Array.prototype.add =       function(other)  { return this.map((x, i) => x + other[i]) }
+Array.prototype.mul =       function(k)      { return this.map(x => k * x) }
+Array.prototype.translate = function(vector) { return this.map(pos => pos.add(vector)) }
+Array.prototype.rotate =    function(spin)   { return [-spin*this.y, spin*this.x] }
+Array.prototype.pick =      function()       { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
+
 
 
 // Classes
@@ -246,7 +229,7 @@ class HoldQueue extends MinoesTable {
 
     draw() {
         this.clearTable()
-        if (this.piece && state != STATE.PAUSED)
+        if (this.piece)
             this.drawPiece(this.piece)
     }
 }
@@ -276,37 +259,33 @@ class Matrix extends MinoesTable {
     }
     
     draw() {
-        // grid
-        if (state == STATE.PAUSED) {
         this.clearTable()
-        } else {
-            for (var y = 0; y < this.rows; y++) {
-                for (var x = 0; x < this.columns; x++) {
-                    if (this.clearedLines.includes(y))
-                        var className = CLASSNAME.CLEARED_LINE
-                    else
-                        var className = this.lockedMinoes[y][x] || CLASSNAME.EMPTY_CELL
-                    this.drawMino(x, y, className)
-                }
-            }
         
         // ghost
-            if (showGhost && !this.piece.locked && state != STATE.GAME_OVER) {
+        if (showGhostCheckbox.value && !this.piece.locked && state != STATE.GAME_OVER) {
             for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
             ghost.pos.y--
             this.drawPiece(ghost)
         }
 
-            this.drawPiece(this.piece)
-
         // trail
         if (this.trail.height) {
             this.trail.minoesPos.forEach(pos => {
                 for (var y = pos.y; y < pos.y + this.trail.height; y++)
-                        if (this.table.rows[y].cells[pos.x].className == CLASSNAME.EMPTY_CELL)
                     this.drawMino(pos.x, y, CLASSNAME.TRAIL)
             })
         }
+
+        this.drawPiece(this.piece)
+
+        // locked minoes
+        for (var y = 0; y < this.rows; y++) {
+            for (var x = 0; x < this.columns; x++) {
+                if (this.clearedLines.includes(y))
+                    this.drawMino(x, y, CLASSNAME.CLEARED_LINE)
+                else if (this.lockedMinoes[y][x])
+                    this.drawMino(x, y, this.lockedMinoes[y][x])
+            }
         }
     }
 }
@@ -318,24 +297,14 @@ class NextQueue extends MinoesTable {
     }
 
     newGame() {
-        this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT.PIECE_POSITION[k]))
+        this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(START_POSITION.NEXT[k]))
     }
 
     draw() {
         this.clearTable()
-        if (state != STATE.PAUSED) {
         this.pieces.forEach(piece => this.drawPiece(piece))
     }
 }
-}
-
-
-class ThemePreview extends MinoesTable {
-    constructor() {
-        super("themePreviewTable")
-        this.piece = new Tetromino(THEME.PIECE_POSITION, "T")
-    }
-}
 
 
 class Stats {
@@ -348,6 +317,11 @@ class Stats {
         this.clearedLinesCell = document.getElementById("clearedLines")
         this.highScore = Number(localStorage.getItem('highScore'))
         this.highScoreCell.innerText = this.highScore.toLocaleString()
+        this.timeFormat = new Intl.DateTimeFormat("fr-FR", {
+            minute: "2-digit",
+            second: "2-digit",
+            timeZone: "UTC"
+        })
     }
 
     newGame() {
@@ -357,10 +331,11 @@ class Stats {
         this.clearedLines = 0
         this.clearedLinesCell.innerText = this.clearedLines
         this.time = 0
-        this.timeCell.innerText = timeFormat(0)
+        this.timeCell.innerText = this.timeFormat.format(0)
         this.combo = -1
         this.lockDelay = DELAY.LOCK
         this.fallPeriod = DELAY.FALL
+        this.b2bSequence = false
     }
 
     get score() {
@@ -374,11 +349,12 @@ class Stats {
             this.highScore = score
             this.highScoreCell.innerText = this.highScore.toLocaleString()
         }
+        document.title = `Webtris - Score : ${score}`
     }
 
     newLevel(level=null) {
         this.level = level || this.level + 1
-        location.hash = "#level" + this.level
+        location.hash = this.level
         this.levelCell.innerText = this.level
         printTempTexts(`NIVEAU<br/>${this.level}`)
         this.goal += 5 * this.level
@@ -392,7 +368,8 @@ class Stats {
     lockDown(tSpin, clearedLines) {
         var patternName = []
         var patternScore = 0
-        var combo_score = 0
+        var b2bScore = 0
+        var comboScore = 0
         
         if (tSpin)
             patternName.push(tSpin)
@@ -410,44 +387,138 @@ class Stats {
             this.goalCell.innerText = this.goal
             patternName = patternName.join("\n")
         }
-        if (this.combo >= 1)
-            combo_score = (clearedLines == 1 ? 20 : 50) * this.combo * this.level
 
-        if (patternScore || combo_score)
+        if (this.b2bSequence) {
-            this.score += patternScore + combo_score
+            if ((clearedLines == 4) || (tSpin && clearedLines)) {
+                    b2bScore = patternScore / 2
+            } else if ((0 < clearedLines) && (clearedLines < 4) && !tSpin) {
+                this.b2bSequence = false
+            }
+        } else if ((clearedLines == 4) || (tSpin && clearedLines)) {
+            this.b2bSequence = true
+        }
+
+        if (this.combo >= 1)
+            comboScore = (clearedLines == 1 ? 20 : 50) * this.combo * this.level
 
         if (patternScore) {
             var messages = [patternName, patternScore]
-            if (combo_score)
+            if (b2bScore)
-                messages.push(`COMBO x${this.combo}`, combo_score)
+                messages.push(`BACK TO BACK BONUS`, b2bScore)
+            if (comboScore)
+                messages.push(`COMBO x${this.combo}`, comboScore)
             printTempTexts(messages.join("<br/>"))
         }
+
+        this.score += patternScore + comboScore + b2bScore
+    }
+}
+
+
+class Settings {
+    constructor() {
+        this.keyBind = {}
+        for (let button of settingsSection.getElementsByTagName("button")) {
+            let keyName = localStorage.getItem(button.id)
+            if (keyName) {
+                button.innerHTML = keyName
+                this.keyBind[keyName == "Space"? " ": keyName] = playerAction[button.id]
+            }
+        }
+
+        let autorepeatDelay = localStorage.getItem("autorepeatDelay")
+        if (autorepeatDelay) {
+            autorepeatDelayRange.value = autorepeatDelay
+            autorepeatDelayRange.oninput()
+        }
+        let autorepeatPeriod = localStorage.getItem("autorepeatPeriod")
+        if (autorepeatPeriod) {
+            autorepeatPeriodRange.value = autorepeatPeriod
+            autorepeatPeriodRange.oninput()
+        }
+
+        let themeName = localStorage.getItem("themeName")
+        if (themeName) themeSelect.value = themeName
+        let showGhost = localStorage.getItem("showGhost")
+        if (showGhost) showGhostCheckbox.checked = showGhost == "true"
+
+        let startLevel = localStorage.getItem("startLevel")
+        if (startLevel) startLevelInput.value = startLevel
+    }
+
+    applyTheme = () => new Promise((resolve, reject) => {
+        var link  = document.createElement('link')
+        link.id = 'theme'
+        link.rel = 'stylesheet'
+        link.type = 'text/css'
+        link.href = `themes/${themeSelect.value}/style.css`
+        link.media = 'all'
+        link.onload = resolve
+        document.head.appendChild(link)
+    })
+
+    save() {
+        for (let button of settingsSection.getElementsByTagName("button")) {
+            localStorage.setItem(button.id, button.innerHTML)
+        }
+        localStorage.setItem("autorepeatDelay", autorepeatDelayRange.value)
+        localStorage.setItem("autorepeatPeriod", autorepeatPeriodRange.value)
+        localStorage.setItem("themeName", themeSelect.value)
+        localStorage.setItem("showGhost", showGhostCheckbox.checked)
+        localStorage.setItem("startLevel", startLevelInput.value)
+    }
+
+    waitKey(button) {
+        document.onkeydown  = null
+        document.onkeyup = null
+        button.previousKey = button.innerHTML
+        button.innerHTML = "Touche ?"
+        button.onkeyup = function(event) {
+            event.preventDefault()
+            button.innerHTML = (event.key == " ") ? "Space" : event.key
+            settings.keyBind[event.key] = playerAction[button.id]
+            button.onkeyup = null
+            button.onblur = null
+            document.onkeydown  = onkeydown
+            document.onkeyup = onkeyup
+        }
+        button.onblur = function(event) {
+            button.innerHTML = button.previousKey
+            button.onkeyup = null
+            button.onblur = null
+            document.onkeydown  = onkeydown
+            document.onkeyup = onkeyup
+        }
     }
 }
 
 
 // Functions
+
+// Game logic
+state = STATE.WAITING
+
 function newGame(startLevel) {
     startButton.blur()
 
+    settings.save()
+
     holdQueue.newGame()
     matrix.newGame()
     nextQueue.newGame()
     stats.newGame()
     
-    localStorage.setItem("startLevel", startLevel)
-
     startSection.style.display = "none"
     gameSection.style.display = "block"
     settingsSection.style.display = "none"
-    leaderboardLinkSection.style.display = "none"
+    footer.style.display = "none"
 
     state = STATE.PLAYING
     pressedKeys = new Set()
     actionsToRepeat = []
-    addEventListener("keydown", keyDownHandler, false)
+    scheduler.setInterval(stats.clock, 1000)
-    addEventListener("keyup", keyUpHandler, false)
+    document.onkeydown  = onkeydown
-    scheduler.setInterval(clock, 1000)
+    document.onkeyup = onkeyup
     newLevel(startLevel)
 }
 
@@ -460,10 +531,10 @@ function generationPhase(held_piece=null) {
     if (!held_piece) {
         matrix.piece = nextQueue.pieces.shift()
         nextQueue.pieces.push(new Tetromino())
-        nextQueue.pieces.forEach((piece, i) => piece.pos = NEXT.PIECE_POSITION[i])
+        nextQueue.pieces.forEach((piece, i) => piece.pos = START_POSITION.NEXT[i])
     }
     nextQueue.draw()
-    matrix.piece.pos = MATRIX.PIECE_POSITION
+    matrix.piece.pos = START_POSITION.MATRIX
     if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos))){
         scheduler.clearInterval(lockPhase)
         scheduler.setInterval(lockPhase, stats.fallPeriod)
@@ -472,62 +543,19 @@ function generationPhase(held_piece=null) {
         gameOver()
 }
 
+function lockPhase() {
+    move(MOVEMENT.DOWN)
+}
+
 function fallingPhase() {
     scheduler.clearTimeout(lockDown)
     matrix.piece.locked = false
     matrix.draw()
 }
 
-function lockPhase() {
-    move(MOVEMENT.DOWN)
-}
-
-function move(movement, testMinoesPos=matrix.piece.minoesPos, hardDrop=false) {
-    const testPos = matrix.piece.pos.add(movement)
-    if (matrix.spaceToMove(testMinoesPos.translate(testPos))) {
-        matrix.piece.pos = testPos
-        matrix.piece.minoesPos = testMinoesPos
-        matrix.piece.rotatedLast = false
-        if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
-            fallingPhase()
-        else if (!hardDrop) {
-            matrix.piece.locked = true
-            scheduler.clearTimeout(lockDown)
-            scheduler.setTimeout(lockDown, stats.lockDelay)
-        }
-        if (!hardDrop)
-            matrix.draw()
-        return true
-    } else {
-        if (movement == MOVEMENT.DOWN) {
-            matrix.piece.locked = true
-            if (!scheduler.timeoutTasks.has(lockDown))
-                scheduler.setTimeout(lockDown, stats.lockDelay)
-            matrix.draw()
-        }
-        return false
-    }
-}
-
-function rotate(spin) {
-    const test_minoes_pos = matrix.piece.minoesPos.map(pos => pos.rotate(spin))
-    rotationPoint = 1
-    for (const movement of matrix.piece.srs[spin][matrix.piece.orientation]) {
-        if (move(movement, test_minoes_pos)) {
-            matrix.piece.orientation = (matrix.piece.orientation + spin + 4) % 4
-            matrix.piece.rotatedLast = true
-            if (rotationPoint == 5)
-                matrix.piece.rotationPoint5Used = true
-            return true
-        }
-        rotationPoint++
-    }
-    return false
-}
-
 function lockDown(){
     scheduler.clearInterval(lockPhase)
-    if (matrix.piece.minoesAbsPos.every(pos => pos.y < MATRIX.INVISIBLE_ROWS)) {
+    if (matrix.piece.minoesAbsPos.every(pos => pos.y < MATRIX_INVISIBLE_ROWS)) {
         matrix.piece.locked = false
         matrix.draw()
         gameOver()
@@ -576,12 +604,12 @@ function clearLinesCleared() {
 
 function gameOver() {
     state = STATE.GAME_OVER
+    document.onkeydown  = null
+    document.onkeyup = null
     messageSpan.innerHTML = "GAME<br/>OVER"
     scheduler.clearInterval(lockPhase)
     scheduler.clearTimeout(lockDown)
-    scheduler.clearInterval(clock)
+    scheduler.clearInterval(stats.clock)
-    removeEventListener("keydown", keyDownHandler, false)
-    removeEventListener("keyup", keyUpHandler, false)
 
     var info = `GAME OVER\nScore : ${stats.score.toLocaleString()}`
     if (stats.score == stats.highScore) {
@@ -611,8 +639,7 @@ function gameOver() {
                 }
                 request.open('POST', 'publish.php')
                 request.send(fd)
-            }
+            } else
-        } else {
             alert(info)
         }
     }
@@ -627,12 +654,146 @@ function gameOver() {
     request.open('POST', 'inleaderboard.php')
     request.send(fd)
     
-    location.hash = "#game-over"
+    location.hash = "game-over"
 
     startSection.style.display = "block"
-    gameSection.style.display = "block"
+    footer.style.display = "block"
+}
+
+function move(movement, testMinoesPos=matrix.piece.minoesPos, hardDrop=false) {
+    const testPos = matrix.piece.pos.add(movement)
+    if (matrix.spaceToMove(testMinoesPos.translate(testPos))) {
+        matrix.piece.pos = testPos
+        matrix.piece.minoesPos = testMinoesPos
+        matrix.piece.rotatedLast = false
+        if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
+            fallingPhase()
+        else if (!hardDrop) {
+            matrix.piece.locked = true
+            scheduler.clearTimeout(lockDown)
+            scheduler.setTimeout(lockDown, stats.lockDelay)
+        }
+        if (!hardDrop)
+            matrix.draw()
+        return true
+    } else {
+        if (movement == MOVEMENT.DOWN) {
+            matrix.piece.locked = true
+            if (!scheduler.timeoutTasks.has(lockDown))
+                scheduler.setTimeout(lockDown, stats.lockDelay)
+            matrix.draw()
+        }
+        return false
+    }
+}
+
+function rotate(spin) {
+    const test_minoes_pos = matrix.piece.minoesPos.map(pos => pos.rotate(spin))
+    let rotationPoint = 1
+    for (const movement of matrix.piece.srs[spin][matrix.piece.orientation]) {
+        if (move(movement, test_minoes_pos)) {
+            matrix.piece.orientation = (matrix.piece.orientation + spin + 4) % 4
+            matrix.piece.rotatedLast = true
+            if (rotationPoint == 5)
+                matrix.piece.rotationPoint5Used = true
+            return true
+        }
+        rotationPoint++
+    }
+    return false
+}
+
+function pause() {
+    state = STATE.PAUSED
+    location.hash = "pause"
+    stats.startTime = performance.now() - stats.startTime
+    actionsToRepeat = []
+    scheduler.clearInterval(lockPhase)
+    scheduler.clearTimeout(lockDown)
+    scheduler.clearTimeout(autorepeat)
+    scheduler.clearInterval(stats.clock)
+    scheduler.clearInterval(delTempTexts)
+    holdQueue.draw()
+    matrix.draw()
+    nextQueue.draw()
+    header.style.display = "block"
+    gameSection.style.display = "none"
+    settingsSection.style.display = "block"
+}
+
+function resume() {
+    settings.save()
     settingsSection.style.display = "none"
-    leaderboardLinkSection.style.display = "block"
+    gameSection.style.display = "block"
+    location.hash = stats.level
+    state = STATE.PLAYING
+    stats.startTime = performance.now() - stats.startTime
+    messageSpan.innerHTML = ""
+    scheduler.setInterval(lockPhase, stats.fallPeriod)
+    if (matrix.piece.locked)
+        scheduler.setTimeout(lockDown, stats.lockDelay)
+    scheduler.setInterval(stats.clock, 1000)
+    holdQueue.draw()
+    matrix.draw()
+    nextQueue.draw()
+    if (tempTexts.length)
+        scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
+}
+
+playerAction = {
+    moveLeft: function () {
+        move(MOVEMENT.LEFT)
+    },
+
+    moveRight: function () {
+        move(MOVEMENT.RIGHT)
+    },
+
+    softDrop: function () {
+        if (move(MOVEMENT.DOWN))
+            stats.score++
+    },
+
+    hardDrop: function () {
+        scheduler.clearInterval(lockPhase)
+        scheduler.clearTimeout(lockDown)
+        matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos)
+        for (matrix.trail.height = 0; move(MOVEMENT.DOWN, matrix.piece.minoesPos, true); matrix.trail.height++) {}
+        stats.score += 2 * matrix.trail.height
+        matrix.draw()
+        lockDown()
+        scheduler.setTimeout(() => {matrix.trail.height = 0; matrix.draw()}, DELAY.ANIMATION)
+    },
+
+    rotateCW: function () {
+        rotate(SPIN.CW)
+    },
+
+    rotateCCW: function () {
+        rotate(SPIN.CCW)
+    },
+
+    hold: function () {
+        if (matrix.piece.holdEnabled) {
+            scheduler.clearInterval(move)
+            scheduler.clearInterval(lockDown)
+            var shape = matrix.piece.shape
+            matrix.piece = holdQueue.piece
+            holdQueue.piece = new Tetromino(START_POSITION.HOLD, shape)
+            holdQueue.piece.holdEnabled = false
+            holdQueue.draw()
+            generationPhase(matrix.piece)
+            matrix.piece.holdEnabled = false
+        }
+    },
+
+    pauseResume: function() {
+        if (state == STATE.PLAYING) {
+            pause()
+        } else {
+            resume()
+        }
+    }
 }
 
 function autorepeat() {
@@ -640,7 +801,7 @@ function autorepeat() {
         actionsToRepeat[0]()
         if (scheduler.timeoutTasks.has(autorepeat)) {
             scheduler.clearTimeout(autorepeat)
-            scheduler.setInterval(autorepeat, autorepeatPeriod)
+            scheduler.setInterval(autorepeat, autorepeatPeriodRange.value)
         }
     } else {
         scheduler.clearTimeout(autorepeat)
@@ -648,31 +809,36 @@ function autorepeat() {
     }
 }
 
-function keyDownHandler(e) {
+// Handle player inputs
-    if (e.key in actions[state])
+const REPEATABLE_ACTION = [playerAction.moveLeft, playerAction.moveRight, playerAction.softDrop]
-        e.preventDefault()
+pressedKeys = new Set()
-    if (!pressedKeys.has(e.key)) {
+actionsToRepeat = []
-        pressedKeys.add(e.key)
+
-        if (e.key in actions[state]) {
+function onkeydown(event) {
-            action = actions[state][e.key]
+    if (event.key in settings.keyBind)
+        event.preventDefault()
+    if (!pressedKeys.has(event.key)) {
+        pressedKeys.add(event.key)
+        if (event.key in settings.keyBind) {
+            action = settings.keyBind[event.key]
             action()
-            if (REPEATABLE_ACTIONS.includes(action)) {
+            if (REPEATABLE_ACTION.includes(action)) {
                 actionsToRepeat.unshift(action)
                 scheduler.clearTimeout(autorepeat)
                 scheduler.clearInterval(autorepeat)
                 if (action == softDrop)
                     scheduler.setInterval(autorepeat, stats.fallPeriod / 20)
                 else
-                    scheduler.setTimeout(autorepeat, autorepeatDelay)
+                    scheduler.setTimeout(autorepeat, autorepeatDelayRange.value)
             }
         }
     }
 }
 
-function keyUpHandler(e) {
+function onkeyup(event) {
-    pressedKeys.delete(e.key)
+    pressedKeys.delete(event.key)
-    if (e.key in actions[state]) {
+    if (event.key in settings.keyBind) {
-        action = actions[state][e.key]
+        action = settings.keyBind[event.key]
         if (actionsToRepeat.includes(action)) {
             actionsToRepeat.splice(actionsToRepeat.indexOf(action), 1)
             if (!actionsToRepeat.length) {
@@ -683,102 +849,18 @@ function keyUpHandler(e) {
     }
 }
 
-// actions
+// Text display
-function moveLeft() {
+tempTexts = []
-    move(MOVEMENT.LEFT);
-}
-
-function moveRight() {
-    move(MOVEMENT.RIGHT)
-}
-
-function softDrop() {
-    if (move(MOVEMENT.DOWN))
-        stats.score++
-}
-
-function hardDrop() {
-    scheduler.clearInterval(lockPhase)
-    scheduler.clearTimeout(lockDown)
-    matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos)
-    for (matrix.trail.height = 0; move(MOVEMENT.DOWN, matrix.piece.minoesPos, true); matrix.trail.height++) {}
-    stats.score += 2 * matrix.trail.height
-    matrix.draw()
-    lockDown()
-    scheduler.setTimeout(clearTrail, DELAY.ANIMATION)
-}
-
-function clearTrail() {
-    matrix.trail.height = 0
-    matrix.draw()
-}
-
-function rotateCW() {
-    rotate(SPIN.CW)
-}
-
-function rotateCCW() {
-    rotate(SPIN.CCW)
-}
-
-function hold() {
-    if (matrix.piece.holdEnabled) {
-        scheduler.clearInterval(move)
-        scheduler.clearInterval(lockDown)
-        var shape = matrix.piece.shape
-        matrix.piece = holdQueue.piece
-        holdQueue.piece = new Tetromino(HOLD.PIECE_POSITION, shape)
-        holdQueue.piece.holdEnabled = false
-        holdQueue.draw()
-        generationPhase(matrix.piece)
-        matrix.piece.holdEnabled = false
-    }
-}
-
-function pause() {
-    state = STATE.PAUSED
-    location.hash = "#pause"
-    stats.startTime = performance.now() - stats.startTime
-    actionsToRepeat = []
-    scheduler.clearInterval(lockPhase)
-    scheduler.clearTimeout(lockDown)
-    scheduler.clearTimeout(autorepeat)
-    scheduler.clearInterval(clock)
-    scheduler.clearInterval(delTempTexts)
-    holdQueue.draw()
-    matrix.draw()
-    nextQueue.draw()
-    gameSection.style.display = "none"
-    settingsSection.style.display = "block"
-}
-
-function resume() {
-    applySettings()
-    settingsSection.style.display = "none"
-    gameSection.style.display = "block"
-    location.hash = "#level" + stats.level
-    state = STATE.PLAYING
-    stats.startTime = performance.now() - stats.startTime
-    messageSpan.innerHTML = ""
-    scheduler.setInterval(lockPhase, stats.fallPeriod)
-    if (matrix.piece.locked)
-        scheduler.setTimeout(lockDown, stats.lockDelay)
-    scheduler.setInterval(clock, 1000)
-    holdQueue.draw()
-    matrix.draw()
-    nextQueue.draw()
-    if (tempTexts.length)
-        scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
-}
-
 function printTempTexts(text) {
     tempTexts.push(text)
     messageSpan.innerHTML = tempTexts[0]
     if (!scheduler.intervalTasks.has(delTempTexts))
         scheduler.setInterval(delTempTexts, DELAY.MESSAGE)
+    messageSpan.classList.add(CLASSNAME.MESSAGE_SPAN_FADE_OUT)
 }
 
 function delTempTexts(self) {
+    messageSpan.classList.remove(CLASSNAME.MESSAGE_SPAN_FADE_OUT)
     if (tempTexts.length) 
         tempTexts.shift()
     if (tempTexts.length) 
@@ -789,167 +871,28 @@ function delTempTexts(self) {
     }
 }
 
-function clock(timestamp) {
+function clock() {
-        stats.timeCell.innerText = timeFormat(1000 * ++stats.time)
+    timeCell.innerText = stats.timeFormat.format(1000 * ++stats.time)
 }
 
-function getKeyName(action) {
-    return localStorage.getItem(action) || actionsDefaultKeys[action]
-}
-
-// Settings functions
-function applySettings() {
-    actions[STATE.PLAYING] = {}
-    actions[STATE.PLAYING][getKeyName("moveLeft")] = moveLeft
-    actions[STATE.PLAYING][getKeyName("moveRight")] = moveRight
-    actions[STATE.PLAYING][getKeyName("softDrop")] = softDrop
-    actions[STATE.PLAYING][getKeyName("hardDrop")] = hardDrop
-    actions[STATE.PLAYING][getKeyName("rotateCW")] = rotateCW
-    actions[STATE.PLAYING][getKeyName("rotateCCW")] = rotateCCW
-    actions[STATE.PLAYING][getKeyName("hold")] = hold
-    actions[STATE.PLAYING][getKeyName("pause")] = pause
-    actions[STATE.PAUSED] = {}
-    actions[STATE.PAUSED][getKeyName("pause")] = resume
-    actions[STATE.GAME_OVER] = {}
-
-    autorepeatDelay = localStorage.getItem("autorepeatDelay") || DELAY.AUTOREPEAT
-    autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || DELAY.AUTOREPEAT_PERIOD
-
-    themeName = localStorage.getItem("themeName") || DEFAULT_THEME
-    loadTheme()
-
-    showGhost = localStorage.getItem("showGhost")
-    if (showGhost)
-        showGhost = (showGhost == "true")
-    else
-    showGhost = true
-}
-
-function replaceSpace(key) {
-    return (key == " ") ? "Space" : key
-}
-
-function loadSettings() {
-    if (state == STATE.PLAYING)
-        pause()
-
-    moveLeftSetKeyButton.innerHTML = replaceSpace(getKeyName("moveLeft"))
-    moveRightSetKeyButton.innerHTML = replaceSpace(getKeyName("moveRight"))
-    softDropSetKeyButton.innerHTML = replaceSpace(getKeyName("softDrop"))
-    hardDropSetKeyButton.innerHTML = replaceSpace(getKeyName("hardDrop"))
-    rotateCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCW"))
-    rotateCCWSetKeyButton.innerHTML = replaceSpace(getKeyName("rotateCCW"))
-    holdSetKeyButton.innerHTML = replaceSpace(getKeyName("hold"))
-    pauseSetKeyButton.innerHTML = replaceSpace(getKeyName("pause"))
-
-    autorepeatDelayRange.value = autorepeatDelay
-    autorepeatDelayRangeLabel.innerText = `Délai initial : ${autorepeatDelay}ms`
-    autorepeatPeriodRange.value = autorepeatPeriod
-    autorepeatPeriodRangeLabel.innerText = `Période : ${autorepeatPeriod}ms`
-
-    themeSelect.value=themeName;
-    themePreview.drawPiece(themePreview.piece)
-
-    showGhostCheckbox.checked = showGhost
-
-    /*startSection.style.display = "grid"
-    gameSection.style.display = "grid"
-    settingsSection.style.display = "block"
-    settingsButtonSection.style.display = "flex"
-
-    switch(state) {
-        case STATE.WAITING:
-            document.getElementById("start").style.display = "block"
-            document.getElementById("hideSettingsButton").style.display = "none"
-        break
-        case STATE.GAME_OVER:
-            document.getElementById("start").style.display = "block"
-            document.getElementById("hideSettingsButton").style.display = "flex"
-        break
-        case STATE.PAUSED:
-            document.getElementById("start").style.display = "none"
-            document.getElementById("hideSettingsButton").style.display = "flex"
-            
-    }*/
-}
-
-function waitKey(button, action) {
-    button.innerHTML = "Touche ?"
-    selectedButton = button
-    selectedAction = action
-    button.blur()
-    addEventListener("keyup", changeKey, false)
-}
-
-function changeKey(e) {
-    if (selectedButton) {
-        localStorage.setItem(selectedAction, e.key)
-        selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
-        selectedButton = null
-    }
-    removeEventListener("keyup", changeKey, false)
-}
-
-function autorepeatDelayChanged() {
-    localStorage.setItem("autorepeatDelay", autorepeatDelayRange.value)
-    document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai initial : ${autorepeatDelayRange.value}ms`
-}
-
-function autorepeatPeriodChanged() {
-    localStorage.setItem("autorepeatPeriod", autorepeatPeriodRange.value)
-    document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriodRange.value}ms`
-}
-
-function themeChanged() {
-    themeName = document.getElementById("themeSelect").value
-    localStorage.setItem("themeName", themeName)
-    loadTheme()
-}
-
-function loadTheme() {
-    theme = document.getElementById("theme")
-    if (theme) document.head.removeChild(theme)
-    var link  = document.createElement('link')
-    link.id   = "theme";
-    link.rel  = 'stylesheet'
-    link.type = 'text/css'
-    link.href = 'themes/' + themeName+ '/style.css'
-    link.media = 'all'
-    document.head.appendChild(link);
-}
-
-function showGhostChanged() {
-    showGhost = (showGhostCheckbox.checked == true)
-    localStorage.setItem("showGhost", showGhost)
-}
-
-// global variables
-timeFormat = new Intl.DateTimeFormat("fr-FR", {
-    minute: "2-digit",
-    second: "2-digit",
-    timeZone: "UTC"
-}).format
-state = STATE.WAITING
-tempTexts = []
-actions = {}
-selectedButton = null
-selectedAction = ""
-
-window.onload = function() {
-    location.hash = ""
-    
-    startLevelInput.value = localStorage.getItem("startLevel") || 1
 
+// Initialization
+window.onload = async function() {
     scheduler = new Scheduler()
     holdQueue = new HoldQueue()
     stats     = new Stats()
     matrix    = new Matrix()
     nextQueue = new NextQueue()
-    themePreview = new ThemePreview()
+    settings  = new Settings()
-    
+    await settings.applyTheme()
-    applySettings()
+    let startLevel = parseInt(location.hash.slice(1))
-    loadSettings()
+    body.style.display = "block"
-    
+    if (1 <= startLevel && startLevel <= 15) {
-    startButton.disabled = false
+        newGame(startLevel)
+    } else {
+        location.hash = ""
         startButton.focus()
     }
+}
+
+window.onblur = pause

index.php

@@ -7,7 +7,7 @@
         "rotateCW"    => ["label"=>"Rotation horaire",      "defaultKey"=>"ArrowUp"],
         "rotateCCW"   => ["label"=>"Rotation anti-horaire", "defaultKey"=>"z"],
         "hold"        => ["label"=>"Garde",                 "defaultKey"=>"c"],
-        "pause"     => ["label"=>"Pause/Reprise",         "defaultKey"=>"Escape"]
+        "pauseResume" => ["label"=>"Pause/Reprise",         "defaultKey"=>"Escape"]
     ];
 
     function echoTable($id, $invisibleRows, $visibleRows, $columns) {
@@ -15,7 +15,7 @@
         for ($y = 0; $y < $invisibleRows; $y++) {
             echo "                    <tr>";
             for ($x = 0; $x < $columns; $x++) {
-                echo "<th class=empty-cell></td>";
+                echo "<th></td>";
             }
             echo "</tr>\n";
         }
@@ -35,43 +35,13 @@
         <meta charset="utf-8" />
         <title>Webtris</title>
         <link rel="icon" type="image/png" href="favicon.png">
-        <link id="theme" rel="stylesheet" type="text/css" href="themes/default/style.css" />
+        <script type="text/javascript" src="app.js"></script>
-        <script type="text/javascript" src="webtris.js"></script>
+        <link rel="manifest" href="manifest.json">
     </head>
-    <body>
+    <body id="body" style="display:none">
-        <section id="gameSection" style="display: none">
+        <header id="header">
-            <div>
+            <h1>WEBTRIS</h1>
-<?php
+        </header>
-    echoTable("holdTable",   6,  0,  6);
-    echoTable("matrixTable", 4, 20, 10);
-    echoTable("nextTable",  24,  0,  6);
-?>
-                <table id="statsTable">
-                    <tr><th class="name" colspan=2>SCORE</th></tr>
-                    <tr><td class="value" id="score" colspan=2>0</td></tr>
-                    <tr><th class="name" colspan=2>RECORD</th></tr>
-                    <tr><td class="value" id="highScore" colspan=2>0</td></tr>
-                    <tr><th class="name" colspan=2>TEMPS</th></tr>
-                    <tr><td class="value" id="time" colspan=2>00:00</td></tr>
-                    <tr><td colspan=2><br/></td class="name"></tr>
-                    <tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
-                    <tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
-                    <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
-                </table>
-                <span id="messageSpan"></span>
-            </div>
-        </section>
-        <section id="startSection">
-            <fieldset>
-                <legend>Nouvelle partie</legend>
-                <div>
-                    <div></div>
-                    <button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))" disabled>JOUER</button>
-                    <label for="startLevel">Niveau</label>
-                    <input type="number" id="startLevelInput" min="1" max="15" step="1">
-                </div>
-            </fieldset>
-        </section>
         <section id="settingsSection">
             <fieldset>
                 <legend>Clavier</legend>
@@ -79,8 +49,8 @@
 <?php
     foreach($actions as $action=>$parameters) {
 ?>
-                    <label for='<?=$action?>SetKeyButton'><?=$parameters["label"]?></label>
+                    <label for='<?=$action?>'><?=$parameters["label"]?></label>
-                    <button id='<?=$action?>SetKeyButton' type='button' onclick="waitKey(this, '<?=$action?>')"><?=$parameters["defaultKey"]?></button>
+                    <button id='<?=$action?>' type='button' onclick="settings.waitKey(this)"><?=$parameters["defaultKey"]?></button>
 <?php
     }
 ?>
@@ -90,16 +60,16 @@
                 <legend>Répétition automatique</legend>
                 <div>
                     <label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange">Délai initial : 300ms</label>
-                    <input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="500" step="10" />
+                    <input id="autorepeatDelayRange" type="range" oninput="this.previousElementSibling.innerText = `Délai initial : ${this.value}ms`" value="300" min="100" max="500" step="10"/>
                     <label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange">Période : 10ms</label>
-                    <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2" />
+                    <input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="this.previousElementSibling.innerText = `Période : ${autorepeatPeriodRange.value}ms`" value="10" min="2" max="50" step="2"/>
                 </div>
             </fieldset>
             <fieldset>
-                <legend>Thème</legend>
+                <legend>Style</legend>
                 <div>
-                    <div></div>
+                    <label for="themeSelect">Thème</label>
-                    <select id="themeSelect" onchange="themeChanged()">
+                    <select id="themeSelect" oninput="settings.applyTheme()" value="default">
 <?php
     foreach(array_slice(scandir("themes"), 2) as $theme) {
        if (is_dir(pathinfo($theme)['dirname']))
@@ -107,20 +77,97 @@
     }
 ?>
                     </select>
-<?php
-    echoTable("themePreviewTable",   2,  0,  3);
-?>
-                    <div>
-                        <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
                     <label for="showGhostCheckbox">Afficher le fantôme</label>
-                    </div>
+                    <input id="showGhostCheckbox" type="checkbox" checked/>
+                    <table id="themePreviewTable" class="minoes-table">
+                        <tbody>
+                            <tr>
+                                <th class="mino I"></th>
+                                <th></th>
+                                <th class="mino J"></th>
+                                <th class="mino J"></th>
+                                <th class="mino J"></th>
+                                <th></th>
+                                <th class="mino S"></th>
+                                <th></th>
+                            </tr>
+                            <tr>
+                                <th class="mino I"></th>
+                                <th class="mino O"></th>
+                                <th class="mino O"></th>
+                                <th></th>
+                                <th class="mino J"></th>
+                                <th class="mino Z"></th>
+                                <th class="mino S"></th>
+                                <th class="mino S"></th>
+                            </tr>
+                            <tr>
+                                <th class="mino I"></th>
+                                <th class="mino O"></th>
+                                <th class="mino O"></th>
+                                <th class="mino L"></th>
+                                <th class="mino Z"></th>
+                                <th class="mino Z"></th>
+                                <th class="mino T"></th>
+                                <th class="mino S"></th>
+                            </tr>
+                            <tr>
+                                <th class="mino I"></th>
+                                <th class="mino L"></th>
+                                <th class="mino L"></th>
+                                <th class="mino L"></th>
+                                <th class="mino Z"></th>
+                                <th class="mino T"></th>
+                                <th class="mino T"></th>
+                                <th class="mino T"></th>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </fieldset>
         </section>
-        <section id="leaderboardLinkSection">
+        <section id="gameSection" style="display: none">
+            <div>
+<?php
+    echoTable("holdTable",   6,  0,  6);
+    echoTable("matrixTable", 4, 20, 10);
+    echoTable("nextTable",  24,  0,  6);
+?>
+                <table id="statsTable">
+                    <tr><th colspan=2>SCORE</th></tr>
+                    <tr><td id="score" colspan=2>0</td></tr>
+                    <tr><th colspan=2>RECORD</th></tr>
+                    <tr><td id="highScore" colspan=2>0</td></tr>
+                    <tr><th colspan=2>TEMPS</th></tr>
+                    <tr><td id="time" colspan=2>00:00</td></tr>
+                    <tr><td colspan=2><br/></td></tr>
+                    <tr><th>NIVEAU</th><td id="level">0</td></tr>
+                    <tr><th>OBJECTIF</th><td id="goal">0</td></tr>
+                    <tr><th>LIGNES</th><td id="clearedLines">0</td></tr>
+                </table>
+                <span id="messageSpan"></span>
+            </div>
+        </section>
+        <section id="startSection">
+            <fieldset>
+                <legend>Nouvelle partie</legend>
+                <div>
+                    <label for="startLevel">Niveau</label>
+                    <input type="number" id="startLevelInput" min="1" max="15" step="1" value="1">
+                    <div></div>
+                    <button id="startButton" type="button" onclick="newGame(Number(startLevelInput.value))">JOUER</button>
+                </div>
+            </fieldset>
+        </section>
+        <footer id="footer">
             <div>
                 <a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
             </div>
+            <div id="credits">
+                Sources d'inspiration des thèmes :
+                <a href="https://github.com/kubowania/Tetris">Ania Kubow</a>
+                <a href="https://www.tetriseffect.game/">Tetris Effect</a>
+            </div>
         </footer>
     </body>
 </html>

leaderboard.js

@@ -0,0 +1,16 @@
+const DEFAULT_THEME = "default"
+
+function applyTheme() {
+    var link  = document.createElement('link')
+    link.id   = "theme";
+    link.rel  = 'stylesheet'
+    link.type = 'text/css'
+    link.href = `themes/'${themeName}/style.css`
+    link.media = 'all'
+    document.head.appendChild(link);
+}
+
+window.onload = function() {
+    themeName = localStorage.getItem("themeName") || DEFAULT_THEME
+    loadTheme()
+}

leaderboard.php

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>Meilleurs scores - Webtris</title>
         <link rel="icon" type="image/png" href="favicon.png">
-        <link rel="stylesheet" type="text/css" href="style.css" />
+        <script type="text/javascript" src="leaderboard.js"></script>
     </head>
     <body>
         <header>
@@ -28,8 +28,8 @@
     $db = null;
 ?>
         </table>
-        <div class="flex-container">
+        <footer>
             <button onclick="window.close()">Fermer</button>
-        </div>
+        </footer>
     </body>
 </html>

manifest.json

@@ -0,0 +1,32 @@
+{
+  "short_name": "Webtris",
+  "name": "Webtris",
+  "description": "Falling blocks",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "type": "image/png",
+      "sizes": "16x16"
+    }
+  ],
+  "start_url": "index.php",
+  "background_color": "#222",
+  "display": "standalone",
+  "scope": ".",
+  "theme_color": "#222",
+  "shortcuts": [
+    {
+      "name": "Webtris",
+      "short_name": "Webtris",
+      "description": "Falling blocks",
+      "url": "index.php",
+      "icons": [
+        {
+            "src": "favicon.png",
+            "type": "image/png",
+            "sizes": "16x16"
+        }
+      ]
+    }
+  ]
+}

themes/Effect/style.css

@@ -0,0 +1,231 @@
+@font-face {
+    font-family: 'Share Tech';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Share Tech Regular'), local('ShareTech-Regular'), url(fonts/ShareTech.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Share Tech Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+body {
+    font-family: 'Share Tech';
+    font-size: 1em;
+    text-align: center;
+    color: white;
+    background-color: #0D111D;
+    background-image: url("images/bg.jpg");
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+h1 {
+  text-align: center;
+}
+
+section {
+    margin: 1em;
+}
+
+div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#settingsSection {
+    width: auto;
+}
+
+fieldset {
+    border: 1px white solid;
+    border-radius: 4px;
+    align-items: center;
+    margin: 1vmin auto;
+    width: 80%;
+}
+
+legend, label {
+    color: white;
+}
+
+fieldset > div {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: 2em;
+    grid-row-gap: 1em;
+    justify-items: right;
+    align-items: center;
+}
+
+fieldset > div > * {
+    width: 100%;
+}
+
+label {
+    text-align: right;
+}
+
+#themePreviewTable {
+    grid-column: 1 / 5;
+    width: auto;
+    margin: auto;
+}
+
+#gameSection div {
+    display: grid;
+    grid-gap: 3vmin;
+    margin: -6vmin 0 auto 0;
+}
+
+#holdTable {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: end;
+}
+
+#matrixTable {
+    grid-column: 2;
+    grid-row: 1 / 4;
+}
+
+#messageSpan {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 4vmin;
+    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
+    text-align: center;
+    font-weight: bold;
+}
+
+#nextTable {
+    grid-column: 3;
+    grid-row: 1 / 4;
+}
+
+
+.minoes-table {
+    table-layout: fixed;
+    border-spacing: 0;
+    margin: -6vmin 0 auto 0;
+}
+
+th, td {
+    font-weight: normal;
+    padding: 0;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    height: 3vmin;
+    width: 3vmin;
+}
+
+th {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+td {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    background: rgba(127, 229, 255, 0.3);
+    border: 1px solid rgba(127, 229, 255, 0.7);
+    border-radius: 0.3vmin;
+}
+
+.locked-mino {
+    background: rgba(242, 255, 255, 0.5);
+    border-color: rgba(242, 255, 255, 0.7);
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.3vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0.3vmin;
+}
+
+#statsTable {
+    grid-column: 1;
+    grid-row: 3;
+    height: 0;
+    justify-self: end;
+    margin: 0 auto;
+}
+
+#statsTable td {
+    text-align: center;
+    font-weight: bold;
+    border: 0;
+}
+
+footer > * {
+    margin: 1em auto;
+    width: 100%;
+}
+
+a {
+    text-decoration: none;
+    font-size: 1em;
+    color: white;
+}
+
+a:hover {
+    color: lightcyan;
+}
+
+#credits {
+    width: 100%;
+    font-size: 0.8em;
+    gap: 0.8em;
+}
+
+
+
+#leaderboard {
+    min-width: 25%;
+    margin: auto;
+    text-align: center;
+    border-top: 1px solid white;
+    caption-side: top;
+    border-spacing: 1em 0.2em;
+}
+
+#leaderboard caption {
+    color: white;
+}
+
+#leaderboard tr,
+#leaderboard td {
+    border: 0 !important;
+    margin: auto 10em;
+}
+
+#leaderboard td:first-child {
+    text-align: left;
+}
+
+#leaderboard td:last-child {
+    text-align: right;
+}

themes/Kubow/style.css

@@ -46,7 +46,7 @@ div {
     width: auto;
 }
 
-fieldset, #statsTable {
+fieldset, #statsTable, #leaderboard {
     margin-top: 1rem;
     background: #f0f0f0;
     background-image: linear-gradient(#d0d0d0, #f0f0f0);
@@ -56,7 +56,7 @@ fieldset, #statsTable {
     color: #85796b;
 }
 
-legend {
+legend, #leaderboard caption {
     font-size: 0.9em;
     color: #d8edea;
     transform: translate(0, -0.6em);
@@ -64,7 +64,7 @@ legend {
 
 fieldset > div {
     display: grid;
-    grid-template-columns: 3fr 2fr 3fr 2fr;
+    grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 1em;
     grid-row-gap: 1em;
     justify-items: right;
@@ -143,18 +143,8 @@ select:hover {
 }
 
 #themePreviewTable {
-    grid-column: 3 / 5;
-    width: auto;
-}
-
-fieldset input[type="checkbox"] {
-    width: auto;
-}
-
-#showGhostDiv {
-    grid-row: 2;
     grid-column: 1 / 5;
-    width: 100%;
+    width: auto;
 }
 
 #gameSection div {
@@ -276,6 +266,7 @@ footer {
     left: 50%;
     bottom: 1em;
     transform: translateX(-50%);
+    display: none;
 }
 
 a {
@@ -287,3 +278,23 @@ a {
     font-size: 0.8em;
     gap: 0.8em;
 }
+
+
+
+#leaderboard {
+    margin: auto;
+}
+
+#leaderboard td {
+    margin: auto;
+    padding-left: 1rem;
+    text-align: center;
+}
+
+#leaderboard td:first-child{
+    text-align: left;
+}
+
+#leaderboard td:last-child {
+    text-align: right;
+}

themes/Manjaro/style.css

@@ -1,216 +0,0 @@
-body {
-    margin: 0;
-    font-family: open sans,sans-serif;
-    font-size: 14px;
-    letter-spacing: .01em;
-    color: white;
-    background: #222;
-    width: 100%;
-    height: 100%;
-}
-
-h1 {
-  text-align: center;
-}
-
-section {
-    margin: 1em;
-}
-
-div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-#settingsSection {
-    width: auto;
-}
-
-fieldset {
-    border: 0;
-    font-size: 14px;
-}
-
-legend {
-    font-size: 0.9em;
-    color: #AAA;
-}
-
-fieldset > div {
-    display: grid;
-    grid-template-columns: 3fr 2fr 3fr 2fr;
-    grid-column-gap: 2em;
-    grid-row-gap: 1em;
-    justify-items: right;
-    align-items: center;
-}
-
-fieldset > div > * {
-    width: 100%;
-}
-
-label {
-    text-align: right;
-}
-
-#themePreviewTable {
-    grid-column: 3 / 5;
-    width: auto;
-}
-
-fieldset input[type="checkbox"] {
-    width: auto;
-}
-
-#showGhostDiv {
-    grid-row: 2;
-    grid-column: 1/5;
-    width: 100%;
-}
-
-#gameSection div {
-    display: grid;
-    grid-gap: 3vmin;
-    margin: -3vmin 0 auto 0;
-}
-
-#holdTable {
-    grid-column: 1;
-    grid-row: 1;
-    justify-self: end;
-}
-
-#matrixTable {
-    grid-column: 2;
-    grid-row: 1 / 4;
-}
-
-#messageSpan {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 4vmin;
-    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
-    text-align: center;
-    font-weight: bold;
-}
-
-#nextTable {
-    grid-column: 3;
-    grid-row: 1 / 4;
-}
-
-
-.minoes-table {
-    table-layout: fixed;
-    border-spacing: 0;
-    margin: auto;
-}
-
-th, td {
-    font-weight: normal;
-    padding: 0;
-    height: 3vmin;
-    width: 3vmin;
-}
-
-th {
-    border: 1px solid transparent;
-}
-
-td {
-    border: 1px solid #444;
-}
-
-.mino {
-    border: 1px solid;
-    border-radius: 1px;
-}
-
-.I { /* cyan */
-    background: #99d9ea;
-    border-color: #d1edf5;
-}
-
-.J { /* blue */
-    background: #7f92ff;
-    border-color: #c2cbff;
-}
-
-.L { /* orange */
-    background: #ffb27f;
-    border-color: #ffe1cd;
-}
-
-.O { /* yellow */
-    background: #ffe97f;
-    border-color: #fff5ca;
-}
-
-.S { /* green */
-    background: #7fff8e;
-    border-color: #ccffd2;
-}
-
-.T { /* magenta */
-    background: #d67fff;
-    border-color: #edc9ff;
-}
-
-.Z { /* red */
-    background: #ff7f7f;
-    border-color: #ffdada;
-}
-
-.locked-mino, .cleared-line {
-    background: #AAA;
-    border: 1px solid #CCC;
-    border-radius: 1px;
-}
-
-.trail {
-    background: #333;
-    border: 1px solid #444;
-    border-radius: 1px;
-}
-
-.ghost {
-    background: #555;
-    border: 1px solid #666;
-    border-radius: 1px;
-}
-
-
-#statsTable {
-    grid-column: 1;
-    grid-row: 3;
-    height: 0;
-    justify-self: end;
-    margin: 0 auto;
-}
-
-#statsTable td {
-    text-align: center;
-    font-weight: bold;
-    border: 0;
-}
-
-footer {
-    position: absolute;
-    left: 50%;
-    bottom: 1em;
-    transform: translateX(-50%);
-}
-
-a {
-    text-decoration: none;
-    color: lightblue;
-}
-
-#credits {
-    font-size: 0.8em;
-    gap: 0.8em;
-}

themes/default/style.css

@@ -1,10 +1,9 @@
 body {
-    margin: 0;
+    margin: auto;
     font-family: sans-serif;
     color: white;
     background: #222;
-    width: 100%;
+    width: max-content;
-    height: 100%;
 }
 
 h1 {
@@ -12,7 +11,7 @@ h1 {
 }
 
 section {
-    margin: 1em;
+    margin: 1em auto;
 }
 
 div {
@@ -21,12 +20,9 @@ div {
     align-items: center;
 }
 
-#settingsSection {
-    width: auto;
-}
-
 fieldset {
     border: 1px solid #444;
+    margin: 0.5em;
 }
 
 legend {
@@ -36,7 +32,7 @@ legend {
 
 fieldset > div {
     display: grid;
-    grid-template-columns: 3fr 2fr 3fr 2fr;
+    grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 2em;
     grid-row-gap: 1em;
     justify-items: right;
@@ -52,18 +48,9 @@ label {
 }
 
 #themePreviewTable {
-    grid-column: 3 / 5;
-    width: auto;
-}
-
-fieldset input[type="checkbox"] {
-    width: auto;
-}
-
-#showGhostDiv {
-    grid-row: 2;
     grid-column: 1 / 5;
-    width: 100%;
+    width: auto;
+    margin: auto;
 }
 
 #gameSection div {
@@ -94,6 +81,13 @@ fieldset input[type="checkbox"] {
     text-align: center;
     font-weight: bold;
 }
+@keyframes message-fade-out {
+    from {opacity: 1;}
+    to {opacity: 0;}
+}
+.messageSpan-fade-out {
+    animation: message-fade-out 500ms 500ms;
+}
 
 #nextTable {
     grid-column: 3;
@@ -104,7 +98,7 @@ fieldset input[type="checkbox"] {
 .minoes-table {
     table-layout: fixed;
     border-spacing: 0;
-    margin: auto;
+    margin: -6vmin 0 auto 0;
 }
 
 th, td {
@@ -162,16 +156,27 @@ td {
     border-color: #ffdada;
 }
 
-.locked-mino, .cleared-line {
+.locked-mino {
     background: #AAA;
     border: 1px solid #CCC;
     border-radius: 1px;
 }
 
-.trail {
+@keyframes mino-fade-out {
-    background: #333;
+    from {
+        background: rgba(170, 170, 170, 1);
+        border: 1px solid #CCC;
+    }
+    to {
+        background: rgba(170, 170, 170, 0);
+        border: 1px solid #444;
+    }
+}
+.cleared-line,
+.trail {
+    animation: mino-fade-out 200ms;
+    background: transparent;
     border: 1px solid #444;
-    border-radius: 1px;
 }
 
 .ghost {
@@ -195,19 +200,47 @@ td {
     border: 0;
 }
 
-footer {
-    position: absolute;
-    left: 50%;
-    bottom: 1em;
-    transform: translateX(-50%);
-}
-
 a {
     text-decoration: none;
     color: lightblue;
 }
 
+footer > * {
+    margin: 1em auto;
+    width: 100%;
+}
+
 #credits {
+    width: 100%;
     font-size: 0.8em;
     gap: 0.8em;
 }
+
+
+
+#leaderboard {
+    min-width: 25%;
+    margin: auto;
+    text-align: center;
+    border-top: 1px solid white;
+    caption-side: top;
+    border-spacing: 1em 0.2em;
+}
+
+#leaderboard caption {
+    color: white;
+}
+
+#leaderboard tr,
+#leaderboard td {
+    border: 0 !important;
+    margin: auto 10em;
+}
+
+#leaderboard td:first-child {
+    text-align: left;
+}
+
+#leaderboard td:last-child {
+    text-align: right;
+}