stats

This reverts commit 994a7a7f04.

css/binaural.css

@@ -1,276 +0,0 @@
-body {
-    background-image: url(binaural/bg.jpg),
-        radial-gradient(
-            circle at center,
-            #39444f 0%,
-            #2c323b 25%,
-            #293036 28%,
-            #252b32 34%,
-            #242930 38%,
-            #1a1d22 52%,
-            #191c22 53%,
-            #151519 63%,
-            #141418 65%,
-            #0f0f12 74%,
-            #0a0c0d 100%
-        );
-    background-repeat: round;
-}
-
-#sceneDiv {
-    perspective: 500px;
-}
-
-#sceneDiv * {
-    transform-style: preserve-3d;
-}
-
-#screenRow {
-    display: block;
-    transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
-    cursor: grab;
-}
-
-#screenRow:active {
-    cursor: grabbing;
-}
-
-#screenRow * {
-    display: block;
-}
-
-#screenRow .col {
-    display: inline-block !important;
-    width: max-content;
-    height: 100%;
-    vertical-align: top;
-}
-
-.card {
-    background: #36394180;
-}
-
-#matrixCard {
-    background-image: none;
-}
-
-#screenRow .card > * {
-    transform: translateZ(var(--cell-side));
-}
-
-#screenRow .card-header {
-    background-color: transparent;
-    border: none;
-}
-
-.minoes-table th,
-.minoes-table td {
-    display: inline-block !important;
-    width: max-content;
-}
-
-.minoes-table tr {
-    width: max-content;
-    height: var(--cell-side);
-}
-
-#statsTable tr {
-    display: table;
-    width: 100%;
-}
-
-#statsTable th,
-#statsTable td {
-    display: table-cell;
-    border: 0;
-}
-
-tr.matrix td:not(.mino) {
-    border: 0;
-    will-change: transform;
-    transform: translateZ(0);
-}
-
-.minoes-table td {
-    width: var(--cell-side) !important;
-    height: var(--cell-side);
-}
-
-.minoes-table .mino {
-    background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
-    overflow: visible;
-}
-
-.mino::before,
-.mino::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    width: inherit;
-    height: inherit;
-}
-
-.mino::before {
-    background: var(--light-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
-    transform-origin: left;
-}
-
-.right .mino::before {
-    background: var(--dark-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
-    transform-origin: right;
-}
-
-.mino::after {
-    background: var(--light-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
-    transform-origin: top;
-}
-
-.bottom .mino::after {
-    background: var(--dark-color);
-    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
-    transform-origin: bottom;
-}
-
-.I.mino {
-    --background-color: #42afe1b0;
-    --light-color: #6ceaff80;
-    --dark-color: #00a4b0b0;
-}
-
-.J.mino {
-    --background-color: #1165b5b0;
-    --light-color: #339bff80;
-    --dark-color: #00009db0;
-}
-
-.L.mino {
-    --background-color: #f38927b0;
-    --light-color: #ffba5980;
-    --dark-color: #c54800b0;
-}
-
-.O.mino {
-    --background-color: #f6d03cb0;
-    --light-color: #ffff7f80;
-    --dark-color: #ca9501b0;
-}
-
-.S.mino {
-    --background-color: #51b84db0;
-    --light-color: #84f88080;
-    --dark-color: #1cbc02b0;
-}
-
-.T.mino {
-    --background-color: #9739a2b0;
-    --light-color: #d958e980;
-    --dark-color: #6e019ab0;
-}
-
-.Z.mino {
-    --background-color: #eb4f65b0;
-    --light-color: #ff7f7980;
-    --dark-color: #ad1936b0;
-}
-
-.ghost.mino {
-    --background-color: #8886;
-    --light-color: #ccc6;
-    --dark-color: #3336;
-}
-
-.locking.mino {
-    --background-color: #eeeb;
-    --light-color: #fffb;
-    --dark-color: #dddb;
-}
-
-.disabled.mino {
-    --background-color: #888b;
-    --light-color: #cccb;
-    --dark-color: #333b;
-}
-
-@keyframes cleared-line-animation {
-    from {
-        background-color: #ceffff66;
-        box-shadow: -200px 0 5px white, 200px 0 5px white;
-    }
-    to {
-        background-color: transparent;
-    }
-}
-
-@keyframes show-level-animation {
-    from {
-        opacity: 1;
-        transform: translateY(200%);
-    }
-    50% {
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(-100%) scaleY(0);
-        line-height: 0;
-    }
-}
-
-@keyframes zoom-in-animation {
-    from {
-        opacity: 1;
-        transform: scale3d(0.3, 0.3, 0.3);
-        line-height: var(--bs-body-line-height);
-    }
-    30% {
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
-}
-
-@keyframes rotate-in-animation {
-    0% {
-        opacity: 1;
-        transform: rotate(200deg);
-        line-height: var(--bs-body-line-height);
-    }
-    30% {
-        transform: translateZ(0);
-        transform: scale3d(1, 1, 1);
-    }
-    80% {
-        transform: scale3d(1, 1, 1);
-        line-height: var(--bs-body-line-height);
-    }
-    to {
-        opacity: 1;
-        transform: scale3d(1.5, 0, 1);
-        line-height: 0;
-    }
-}
-
-@keyframes game-over-animation {
-    from {
-        opacity: 1;
-        transform: translateY(200%);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scaleY(1);
-        line-height: var(--bs-body-line-height);
-    }
-}

css/classic.css

@@ -84,8 +84,8 @@
 
 .ghost.mino {
     margin: 1px;
-    opacity: 20%;
+    opacity: 30%;
-    filter: brightness(180%) saturate(60%) blur(1px);
+    filter: brightness(300%) saturate(10%) blur(1px);
 }
 
 .moving.mino {

css/common.css

@@ -1,8 +1,8 @@
 :root {
     --cell-side: 24px;
-    --rX: -15deg;
+    --rX: -15;
     --rY: 0;
-    --tZ: 0;
+    --tZ: 25px;
 }
 
 body {
@@ -10,13 +10,19 @@ body {
 }
 
 @supports (backdrop-filter: blur()) {
-    .modal {
+    .modal::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         backdrop-filter: blur(2px);
     }
 
     .modal-content {
-        background-color: #2125294d;
+        background-color: #212529b3;
-        backdrop-filter: blur(15px);
+        backdrop-filter: blur(10px);
     }
 }
 
@@ -34,6 +40,7 @@ body {
 
 .modal-title {
     text-shadow: 0 0 8px var(--bs-light);
+    font-weight: 600;
 }
 
 #statsTable td,
@@ -41,6 +48,10 @@ body {
     text-align: right;
 }
 
+td#timeCell {
+  min-width: 10ch;
+}
+
 .minoes-table {
     --piece-column: 0;
     --piece-row   : 0;
@@ -237,3 +248,28 @@ tr.cleared-line-animation {
     animation-timing-function: (0.4, 0, 0.6, 1);
     animation-duration: 2s;
 }
+
+#statsModal table {
+    border-collapse: collapse;
+}
+
+#statsModal th {
+    padding-left: 0;
+    padding-right: 0.5rem;
+    padding-bottom: 0.2rem;
+    border-left: 0.5rem solid transparent;
+    border-right: 0;
+}
+
+#statsModal td {
+    padding-left: 0.5rem;
+    padding-right: 0;
+    padding-bottom: 0.2rem;
+    border-left: 0;
+    border-right: 0.5rem solid transparent;
+}
+
+#statsModal tr:last-child th,
+#statsModal tr:last-child td {
+    border-bottom: none;
+}

css/minimal.css

@@ -76,8 +76,9 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost.mino {
-    opacity: 50%;
+    opacity: 5%;
     box-shadow: none;
+    transform: translateY(-6px);
 }
 
 .moving.mino {

css/new-wave.css

@@ -1,70 +0,0 @@
-body {
-    background-image: url("new-wave/bg.png");
-    background-size: cover;
-}
-
-body[data-bs-theme="dark"] {
-    --bs-body-bg: #2125296b;
-}
-
-.btn-dark {
-    --bs-btn-bg: #2125296b;
-}
-
-.card {
-  background: #25292d66;
-}
-
-#matrixCard {
-  background-image: radial-gradient(#2226, #25292d66);
-}
-
-.minoes-table {
-  background: transparent;
-}
-
-.mino {
-  background: var(--color);
-  border: 3px solid var(--border);
-  box-shadow: 0 0 8px var(--border);
-}
-
-.I {
-  --color: #00eaf888;
-  --border: #00eaf5;
-}
-
-.J {
-  --color: #00a9f788;
-  --border: #00a9f7;
-}
-
-.L {
-  --color: #f9b60088;
-  --border: #f9b600;
-}
-
-.O {
-  --color: #e3e04988;
-  --border: #e3e049;
-}
-
-.S {
-  --color: #7bd59e88;
-  --border: #7bd59e;
-}
-
-.T {
-  --color: #d136e288;
-  --border: #d136e2;
-}
-
-.Z {
-  --color: #E67D8688;
-  --border: #E67D86;
-}
-
-.ghost {
-  --color: #fff4;
-  --border: #fff5;
-}

css/opera.css

@@ -75,6 +75,10 @@ body {
     color: white;
 }
 
+td#timeCell {
+  text-align: center;
+}
+
 #matrixCard {
     background: transparent;
     border-top: none;

css/retro.css

@@ -7,9 +7,6 @@
     src: url("retro/Early GameBoy.ttf");
 }
 
-body {
-}
-
 #screenRow {
     background-image: url("retro/bg.png");
     background-size: 10px;
@@ -120,7 +117,7 @@ td {
 }
 
 @keyframes blinker {
-    50% {
+    35% {
         opacity: 0;
     }
 }

css/stereo.css

@@ -0,0 +1,320 @@
+body {
+  background-image: url(stereo/bg.jpg),
+    radial-gradient(circle at center,
+      #39444f 0%,
+      #2c323b 25%,
+      #293036 28%,
+      #252b32 34%,
+      #242930 38%,
+      #1a1d22 52%,
+      #191c22 53%,
+      #151519 63%,
+      #141418 65%,
+      #0f0f12 74%,
+      #0a0c0d 100%);
+  background-repeat: round;
+}
+
+#sceneDiv {
+  perspective: 500px;
+  cursor: grab;
+}
+
+#sceneDiv:active {
+  cursor: grabbing;
+}
+
+#sceneDiv * {
+  transform-style: preserve-3d;
+}
+
+#screenRow {
+  display: block;
+  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
+}
+
+#screenRow * {
+  display: block;
+}
+
+#screenRow .col {
+  display: inline-block !important;
+  width: max-content;
+  height: 100%;
+  vertical-align: top;
+}
+
+.card {
+  background: #36394180;
+}
+
+#matrixCard {
+  background-image: none;
+}
+
+#screenRow .card>* {
+  transform: translateZ(var(--cell-side));
+}
+
+#screenRow .card-header {
+  background-color: transparent;
+  border: none;
+}
+
+#holdTable .mino {
+  --row: 10;
+  --column: -5;
+}
+
+#nextTable .mino {
+  --row: 15;
+  --column: 20;
+}
+
+.minoes-table th,
+.minoes-table td {
+  display: inline-block !important;
+  width: max-content;
+}
+
+.minoes-table tr {
+  width: max-content;
+  height: var(--cell-side);
+}
+
+#statsTable tr {
+  display: table;
+  width: 100%;
+}
+
+#statsTable th,
+#statsTable td {
+  display: table-cell;
+  border: 0;
+}
+
+tr.matrix td:not(.mino) {
+  border: 0;
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.minoes-table td {
+  width: var(--cell-side) !important;
+  height: var(--cell-side);
+  overflow: visible;
+}
+
+.minoes-table .mino,
+.minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after {
+  --highlight: hsla(60deg, 100%, 95%, 0.3);
+  --shadow:    hsla(0deg, 0%, 0%, 0.15);
+  --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
+  --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
+  --light-z: 1;
+  --center-x:  calc(35% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light)), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a));
+  background: radial-gradient(
+    circle at var(--center-x) var(--center-y),
+    var(--center-color) 0%,
+    var(--edge-color) 100%
+  );
+  border-radius: 2px;
+}
+
+.minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.minoes-table .mino::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--cell-side);
+  height: var(--cell-side);
+}
+
+/* Front face */
+.minoes-table .mino {
+  --light: calc(
+    1
+    + (var(--light-y) * 0.3)
+    + (var(--light-x) * 0.2)
+  );
+}
+
+/* Left face */
+.minoes-table .mino::before,
+.left .minoes-table .mino + .mino::before {
+  --light: calc(
+    1.1
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * 0.15)
+  );
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+/* Right face */
+.right .minoes-table .mino::before,
+.minoes-table .mino + :not(.mino)::before,
+.right .minoes-table .mino:last-child::before {
+  --light: calc(
+    0.85
+    + (var(--light-x) * -0.2)
+    + (var(--light-y) * -0.15)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+.right .minoes-table .mino:last-child::before {
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+  transform-origin: right !important;
+}
+
+/* Top face */
+.minoes-table .mino::after {
+  --light: calc(
+    1.1
+    + (var(--light-y) * -0.3)
+  );
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
+  transform-origin: top;
+}
+
+/* Bottom face */
+.bottom .minoes-table .mino::after {
+  --light: calc(
+    1.1
+    + (var(--light-y) * -0.3)
+  );
+  --center-x:  calc(65% + var(--light-x) * 10%);
+  --center-y:  calc(65% + var(--light-y) * 10%);
+  filter: saturate(0.95);
+  transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
+  transform-origin: bottom;
+}
+
+.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.85; }
+.L.mino, .L.mino + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.85; }
+.O.mino, .O.mino + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.85; }
+.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.85; }
+.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.85; }
+.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.85; }
+.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.85; }
+
+.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
+.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
+.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
+
+
+
+#holdTable .J + :not(.mino),
+#holdTable .L + :not(.mino),
+#holdTable .S + :not(.mino),
+#holdTable .T + :not(.mino),
+#holdTable .Z + :not(.mino),
+#nextTable .J + :not(.mino),
+#nextTable .L + :not(.mino),
+#nextTable .S + :not(.mino),
+#nextTable .T + :not(.mino),
+#nextTable .Z + :not(.mino) {
+  transform: translateX(50%);
+}
+
+@keyframes cleared-line-animation {
+  from {
+    background-color: #ceffff66;
+    box-shadow: -200px 0 5px white, 200px 0 5px white;
+  }
+
+  to {
+    background-color: transparent;
+  }
+}
+
+@keyframes show-level-animation {
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
+
+  50% {
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-100%) scaleY(0);
+    line-height: 0;
+  }
+}
+
+@keyframes zoom-in-animation {
+  from {
+    opacity: 1;
+    transform: scale3d(0.3, 0.3, 0.3);
+    line-height: var(--bs-body-line-height);
+  }
+
+  30% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
+}
+
+@keyframes rotate-in-animation {
+  0% {
+    opacity: 1;
+    transform: rotate(200deg);
+    line-height: var(--bs-body-line-height);
+  }
+
+  30% {
+    transform: translateZ(0);
+    transform: scale3d(1, 1, 1);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+    line-height: var(--bs-body-line-height);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1.5, 0, 1);
+    line-height: 0;
+  }
+}
+
+@keyframes game-over-animation {
+  from {
+    opacity: 1;
+    transform: translateY(200%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    line-height: var(--bs-body-line-height);
+  }
+}

css/synthwave.css

@@ -1,5 +1,5 @@
 body {
-    background-image: url("new-wave/bg.png");
+    background-image: url(synthwave/bg.png);
     background-size: cover;
 }
 
@@ -11,113 +11,66 @@ body[data-bs-theme="dark"] {
     --bs-btn-bg: #2125296b;
 }
 
+.card {
+  background: #25292d66;
+}
+
+#matrixCard {
+  background-image: radial-gradient(#2226, #25292d66);
+}
+
 .card,
 #matrixCard {
     background: repeating-linear-gradient(transparent, #111 1px);
     backdrop-filter: blur(3px);
 }
 
-.card-header {
+.minoes-table {
-    background-color: rgba(37, 41, 45, 50%);
+  background: transparent;
-}
-
-#matrixTable {
-    border-spacing: 1px;
-}
-
-tr.matrix td:not(.mino) {
-    border: 1px solid #111;
 }
 
 .mino {
-    background: radial-gradient(#fff3 0%, var(--color) 170%);
+  background: var(--color);
-    border: 2px solid var(--color);
+  border: 3px solid var(--border);
-    border-radius: 0;
+  box-shadow: 0 0 8px var(--border);
-    outline: 1px solid #0006;
-    opacity: 100%;
-    box-shadow: 0 0 12px var(--color);
 }
 
-.I.mino {
+.I {
-    --color: #00eaf5;
+  --color: #00eaf888;
+  --border: #00eaf5;
 }
 
-.J.mino {
+.J {
-    --color: #00a9f7;
+  --color: #00a9f788;
+  --border: #00a9f7;
 }
 
-.L.mino {
+.L {
-    --color: #f9b600;
+  --color: #f9b60088;
+  --border: #f9b600;
 }
 
-.O.mino {
+.O {
-    --color: #f7f200;;
+  --color: #e3e04988;
+  --border: #e3e049;
 }
 
-.T.mino {
+.S {
-    --color: #d136e2;;
+  --color: #7bd59e88;
+  --border: #7bd59e;
 }
 
-.S.mino {
+.T {
-    --color: #35da3f;
+  --color: #d136e288;
+  --border: #d136e2;
 }
 
-.Z.mino {
+.Z {
-    --color: #ee3b3a;
+  --color: #E67D8688;
+  --border: #E67D86;
 }
 
-.ghost.mino {
+.ghost {
-    background: transparent;
+  --color: #fff4;
-    opacity: 50%;
+  --border: #fff5;
-}
-
-.moving.mino {
-    filter: brightness(120%);
-}
-
-.locking.mino {
-    --color: white;
-    box-shadow: 0 0 10px var(--color);
-}
-
-@keyframes locked-animation {
-    from {
-        background: white;
-        --color: white;
-    }
-}
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}
-
-.disabled.mino {
-    outline: 0px;
-    box-shadow: none;
-    filter: contrast(40%) brightness(50%);
-}
-
-tr.cleared-line-animation {
-    animation: none;
-}
-
-tr.cleared-line-animation::after {
-    content: "";
-    width: 100%;
-    height: var(--cell-side);
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    display: block;
-    background: repeating-linear-gradient(transparent, #fffb 1px);
-    opacity: 0;
-    animation: cleared-line-animation ease-out .3s;
-}
-
-@keyframes cleared-line-animation {
-    25% {
-        width: 200%;
-        opacity: 100%;
-    }
 }

index.html

@@ -10,14 +10,13 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/classic.css" title="Thème sélectionné" id="selectedStyleSheet">
-    <link rel="alternate stylesheet" href="css/classic.css" title="Classique">
+    <link rel="alternate stylesheet" href="css/classic.css"   title="Classique">
-    <link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
+    <link rel="alternate stylesheet" href="css/minimal.css"   title="Minimal">
-    <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
+    <link rel="alternate stylesheet" href="css/electro.css"   title="Électro">
-    <link rel="alternate stylesheet" href="css/new-wave.css" title="New Wave">
+    <link rel="alternate stylesheet" href="css/synthwave.css" title="Synthwave">
-    <link rel="alternate stylesheet" href="css/synthwave.css"     title="Synthwave">
+    <link rel="alternate stylesheet" href="css/retro.css"     title="Rétro">
-    <link rel="alternate stylesheet" href="css/retro.css"   title="Rétro">
+    <link rel="alternate stylesheet" href="css/opera.css"     title="Opéra">
-    <link rel="alternate stylesheet" href="css/opera.css"   title="Opéra">
+    <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo">
-    <link rel="alternate stylesheet" href="css/binaural.css"   title="Binaural">
     <link rel="apple-touch-icon"      sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32"   href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16"   href="favicons/favicon-16x16.png">
@@ -72,12 +71,11 @@
                 <div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="selectedStyleSheet.href = this.value">
                   <option value="css/classic.css" selected>Classique</option>
                   <option value="css/minimal.css">Minimal</option>
-                  <option value="css/new-wave.css">New Wave</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>
                   <option value="css/retro.css">Rétro</option>
                   <option value="css/opera.css">Opéra</option>
-                  <option value="css/binaural.css">Binaural</option>
+                  <option value="css/stereo.css">Stéréo</option>
                 </select></div>
                 <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
                 <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
@@ -119,7 +117,7 @@
               <tr><th>Meilleur<br/>score</th><td id="highScoreCell"><script>document.write(Number(localStorage["highScore"]) || 0)</script></td></tr>
               <tr><th>Niveau</th>                           <td id="levelCell">0</td>                                                                          </tr>
               <tr><th>But</th>                              <td id="goalCell">0</td>                                                                           </tr>
-              <tr><th>Temps</th>                            <td id="timeCell">00:00</td>                                                                       </tr>
+              <tr><th>Temps</th>                            <td id="timeCell">00:00:00</td>                                                                       </tr>
             </table>
           </div>
         </div>
@@ -198,11 +196,11 @@
             </div>
             <div class="modal-body p-0">
               <table class="table mb-0">
-                <tr><th>Score</th>         <td id="statsModalScoreCell"></td>        <th>Niveau</th>                <td id="statsModalLevelCell"></td>          </tr>
+                <tr><th>Score</th>         <td id="statsModalScoreCell"></td>        <th>Quatuors</th>             <td id="statsModalNbQuatuors"></td>         </tr>
-                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Temps</th>                 <td id="statsModalTimeCell"></td>           </tr>
+                <tr><th>Meilleur score</th><td id="statsModalHighScoreCell"></td>    <th>Pirouettes</th>           <td id="statsModalNbTSpin"></td></td>       </tr>
-                <tr><th>Lignes</th>        <td id="statsModaltotalClearedLines"></td><th>Lignes par minute</th>     <td id="statsModaltotalClearedLinesPM"></td></tr>
+                <tr><th>Temps</th>         <td id="statsModalTimeCell"></td>         <th>Lignes par minute</th>    <td id="statsModaltotalClearedLinesPM"></td></tr>
-                <tr><th>Quatuors</th>      <td id="statsModalNbQuatuors"></td>       <th>Plus long combo</th>       <td id="statsModalMaxCombo"></td>           </tr>
+                <tr><th>Niveau</th>        <td id="statsModalLevelCell"></td>        <th>Plus long combo</th>      <td id="statsModalMaxCombo"></td>           </tr>
-                <tr><th>Pirouettes</th>    <td id="statsModalNbTSpin"></td>          <th>Plus long bout en bout</th><td id="statsModalMaxB2B"></td>             </tr>
+                <tr><th>Lignes</th>        <td id="statsModaltotalClearedLines"></td><th>Plus long bout à bout</th><td id="statsModalMaxB2B"></td>             </tr>
               </table>
             </div>
             <div class="modal-footer">

js/app.js

@@ -263,7 +263,7 @@ window.onbeforeunload = function(event) {
 
 // Play with 3D
 let mousedown = false
-let rX0 = 0
+let rX0 = -15
 let rY0 = 0
 let clientX0 = 0
 let clientY0 = 0
@@ -280,18 +280,18 @@ sceneDiv.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
         event.stopPropagation()
-        rX = (rX0 - event.clientY + clientY0 + 360) % 360
+        rX = (rX0 - event.clientY + clientY0) % 360
-        screenRow.style.setProperty("--rX", rX + "deg")
+        screenRow.style.setProperty("--rX", rX)
-        if (rX <= 180) {
+        if (rX >= 0) {
             screenRow.classList.remove("top")
             screenRow.classList.add("bottom")
         } else {
             screenRow.classList.add("top")
             screenRow.classList.remove("bottom")
         }
-        rY = (rY0 + event.clientX - clientX0 + 360) % 360
+        rY = (rY0 + event.clientX - clientX0) % 360
-        screenRow.style.setProperty("--rY", rY + "deg")
+        screenRow.style.setProperty("--rY", rY)
-        if (rY >= 180) {
+        if (rY <= 0) {
             screenRow.classList.remove("left")
             screenRow.classList.add("right")
         } else {

js/game_logic.js

@@ -328,7 +328,7 @@ class Tetromino {
         let success = this.canMove(translation, rotation)
         if (success) {
             scheduler.clearTimeout(lockDown)
-            matrix.drawPiece(this, hardDropped? "trail-animation" : "")
+            matrix.drawPiece(this, translation == TRANSLATION.DOWN? "trail-animation" : "")
             this.center = success.center
             if (rotation) this.facing = success.facing
             this.lastRotation = rotation

js/interface.js

@@ -268,13 +268,13 @@ class Stats {
                     messagesSpan.addNewChild("div", {
                         className: "zoom-in-animation",
                         style: "animation-delay: .4s",
-                        innerHTML: `BOUT EN BOUT<br/>${b2bScore}`
+                        innerHTML: `BOUT À BOUT<br/>${b2bScore}`
                     })
                 } else {
                     messagesSpan.addNewChild("div", {
                         className: "zoom-in-animation",
                         style: "animation-delay: .4s",
-                        innerHTML: `BOUT EN BOUT x${this.b2b}<br/>${b2bScore}`
+                        innerHTML: `BOUT À BOUT x${this.b2b}<br/>${b2bScore}`
                     })
                 }
                 this.score += b2bScore
@@ -284,7 +284,7 @@ class Stats {
                 messagesSpan.addNewChild("div", {
                     className: "zoom-in-animation",
                     style: "animation-delay: .4s",
-                    innerHTML: `FIN DU BOUT EN BOUT`
+                    innerHTML: `FIN DU BOUT À BOUT`
                 })
             }
             this.b2b = -1