back to back bonus

app.js

@@ -29,12 +29,12 @@ 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"
 }
 const DELAY = {
     LOCK: 500,
@@ -95,7 +95,9 @@ const actionsDefaultKeys = {
     pause: "Escape",
 }
 const RETRIES = 3
-const DEFAULT_THEME = "light-relief"
+const DEFAULT_THEME = "default"
+
+var theme = null
 
 
 // Classes
@@ -246,7 +248,7 @@ class HoldQueue extends MinoesTable {
 
     draw() {
         this.clearTable()
-        if (this.piece && state != STATE.PAUSED)
+        if (this.piece)
             this.drawPiece(this.piece)
     }
 }
@@ -277,9 +279,6 @@ 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))
@@ -291,23 +290,21 @@ class Matrix extends MinoesTable {
         }
         
         // 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++)
+                for (var y = pos.y; y < pos.y + this.trail.height - 1; y++)
-                        if (this.table.rows[y].cells[pos.x].className == CLASSNAME.EMPTY_CELL)
                     this.drawMino(pos.x, y, CLASSNAME.TRAIL)
             })
         }
-        }
+
+        this.drawPiece(this.piece)
     }
 }
 
@@ -323,19 +320,9 @@ class NextQueue extends MinoesTable {
 
     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 {
@@ -361,6 +348,7 @@ class Stats {
         this.combo = -1
         this.lockDelay = DELAY.LOCK
         this.fallPeriod = DELAY.FALL
+        this.b2bSequence = false
     }
 
     get score() {
@@ -392,7 +380,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,18 +399,30 @@ 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
     }
 }
 
@@ -440,7 +441,6 @@ function newGame(startLevel) {
     startSection.style.display = "none"
     gameSection.style.display = "block"
     settingsSection.style.display = "none"
-    leaderboardLinkSection.style.display = "none"
 
     state = STATE.PLAYING
     pressedKeys = new Set()
@@ -611,8 +611,7 @@ function gameOver() {
                 }
                 request.open('POST', 'publish.php')
                 request.send(fd)
-            }
+            } else
-        } else {
             alert(info)
         }
     }
@@ -632,7 +631,6 @@ function gameOver() {
     startSection.style.display = "block"
     gameSection.style.display = "block"
     settingsSection.style.display = "none"
-    leaderboardLinkSection.style.display = "block"
 }
 
 function autorepeat() {
@@ -848,29 +846,8 @@ function loadSettings() {
     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) {
@@ -907,14 +884,13 @@ function themeChanged() {
 }
 
 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'
+    if (theme) document.head.removeChild(theme)
     document.head.appendChild(link);
 }
 
@@ -945,7 +921,6 @@ window.onload = function() {
     stats = new Stats()
     matrix = new Matrix()
     nextQueue = new NextQueue()
-    themePreview = new ThemePreview()
     
     applySettings()
     loadSettings()

index.php

@@ -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,44 +35,12 @@
         <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>
-        <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 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">
+            <h1>WEBTRIS</h1>
             <fieldset>
                 <legend>Clavier</legend>
                 <div>
@@ -107,20 +75,98 @@
     }
 ?>
                     </select>
-<?php
+                    <table id="themePreviewTable" class=minoes-table>
-    echoTable("themePreviewTable",   2,  0,  3);
+                        <tr>
-?>
+                            <th class="mino I"></th>
-                    <div>
+                            <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>
+                    </table>
+                    <div id="showGhostDiv">
                         <input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
                         <label for="showGhostCheckbox">Afficher le fantôme</label>
                     </div>
                 </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))" disabled>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://manjaro.org/">Manjaro</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 loadTheme() {
+    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,243 @@
+@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: 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: -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: auto;
+}
+
+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 {
+    position: absolute;
+    left: 50%;
+    bottom: 1em;
+    transform: translateX(-50%);
+}
+
+a {
+    text-decoration: none;
+    font-size: 1em;
+    color: white;
+}
+
+a:hover {
+    color: lightcyan;
+}
+
+#credits {
+    font-size: 0.8em;
+    gap: 0.8em;
+}
+
+
+
+#leaderboard {
+    min-width: 25%;
+    margin: auto;
+    text-align: center;
+    border-top: 1px solid white;
+    caption-side: top;
+}
+
+#leaderboard caption {
+    color: white;
+}
+
+#leaderboard td {
+    font-family: 'Share Tech';
+    text-align: center;
+    font-size: 2.5vmin;
+    color: white;
+    border: 0;
+}
+
+#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);
@@ -287,3 +287,21 @@ 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

@@ -3,8 +3,6 @@ body {
     font-family: sans-serif;
     color: white;
     background: #222;
-    width: 100%;
-    height: 100%;
 }
 
 h1 {
@@ -208,6 +206,34 @@ a {
 }
 
 #credits {
+    width: max-content;
     font-size: 0.8em;
     gap: 0.8em;
 }
+
+#leaderboard {
+    min-width: 25%;
+    margin: auto;
+    text-align: center;
+    border-top: 1px solid white;
+    caption-side: top;
+}
+
+#leaderboard caption {
+    color: white;
+}
+
+#leaderboard td {
+    border: 0 !important;
+}
+
+
+#leaderboard td:first-child {
+    text-align: left;
+}
+
+#leaderboard td:last-child {
+    text-align: right;
+}
+
+