Add README

README.md

@@ -0,0 +1,5 @@
+# Quatuor
+
+Falling blocks
+
+![screenshot](https://git.malingrey.fr/adrien/quatuor/raw/branch/master/thumbnail.png)

css/binaural.css

@@ -0,0 +1,276 @@
+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

@@ -9,15 +9,16 @@
     padding: 0;
     opacity: 100%;
     border-radius: 1px;
+    box-shadow: 2px 2px 4px #000a;
 }
 
 .I.mino {
-    --background-color: #009FdA;
+    --background-color : #00d6fb;
     --frontier-color   : #43e7fd;
     --light-color      : #afeff9;
     border-top-color   : #7cf2fd;
     border-left-color  : #2ed5e5;
-    border-right-color: #00b8ca;
+    border-right-color : #01b8ca;
     border-bottom-color: #00a4b0;
 }
 
@@ -82,12 +83,16 @@
 }
 
 .ghost.mino {
-    background: rgba(0, 0, 0, 10%) !important;
-    border: 3px solid rgba(128, 128, 128, 25%) !important;
-    box-shadow: -2px -2px 6px rgba(128, 128, 128, 25%),
-        -2px 2px 6px rgba(128, 128, 128, 25%),
-        2px -2px 6px rgba(128, 128, 128, 25%),
-        2px 2px 6px rgba(128, 128, 128, 25%);
+    margin: 1px;
+    background: transparent !important;
+    border: 2px solid var(--light-color) !important;
+    box-shadow:
+        -2px -2px 6px #FFF8,
+        -2px  2px 6px #FFF8,
+         2px -2px 6px #FFF8,
+         2px  2px 6px #FFF8;
+    opacity: 65%;
+    
 }
 
 .moving.mino {
@@ -96,19 +101,26 @@
 
 .locking.mino {
     filter: saturate(50%) brightness(200%);
-    box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
-        -1px 1px 4px rgba(128, 128, 128, 25%),
-        1px -1px 4px rgba(128, 128, 128, 25%),
-        1px 1px 4px rgba(128, 128, 128, 25%);
+    box-shadow:
+        -1px -1px 4px #FFF2,
+        -1px  1px 4px #FFF2,
+         1px -1px 4px #FFF2,
+         1px  1px 4px #FFF2;
+}
+
+.disabled.mino {
+    filter: brightness(50%) contrast(80%);
+    opacity: 70%;
 }
 
 @keyframes locked-animation {
     from {
         filter: saturate(50%) brightness(400%);
-        box-shadow: -1px -1px 4px rgba(255, 255, 255, 25%),
-            -1px 1px 4px rgba(255, 255, 255, 25%),
-            1px -1px 4px rgba(255, 255, 255, 25%),
-            1px 1px 4px rgba(255, 255, 255, 25%);
+        box-shadow:
+            -1px -1px 4px #FFF2,
+            -1px  1px 4px #FFF2,
+             1px -1px 4px #FFF2,
+             1px  1px 4px #FFF2;
     }
 }
 

css/common.css

@@ -1,6 +1,8 @@
-
 :root {
     --cell-side: 24px;
+    --rX: -15deg;
+    --rY: 0;
+    --tZ: 0;
 }
 
 body {
@@ -8,20 +10,37 @@ body {
 }
 
 @supports (backdrop-filter: blur()) {
+    .modal {
+        backdrop-filter: blur(2px);
+    }
+
     .modal-content {
-        background-color: rgba(33, 37, 41, 30%);
+        background-color: #2125294d;
         backdrop-filter: blur(15px);
     }
 }
 
 .card {
-    background-color: rgb(37, 41, 45);
+    background-color: #25292d;
+}
+
+#matrixCard {
+    background-image: radial-gradient(#222, #25292d)
+}
+
+.card-header {
+    text-shadow: 0 0 2px black;
 }
 
 .modal-title {
     text-shadow: 0 0 8px var(--bs-light);
 }
 
+#statsTable td,
+#statsModal td {
+    text-align: right;
+}
+
 .minoes-table {
     --piece-column: 0;
     --piece-row   : 0;
@@ -35,19 +54,12 @@ body {
     margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
 }
 
-
 @keyframes hard-dropped-table-animation {
-    from {
-        transform: translateY(0);
-    }
     25% {
         transform: translateY(2px);
     }
-    to {
-        transform: translateY(0);
 }
-}
-#matrixTable.hard-dropped-table-animation {
+.hard-dropped-table-animation {
     animation: hard-dropped-table-animation .2s;
 }
 
@@ -70,7 +82,7 @@ td {
 
 @keyframes trail-animation {
     from {
-        background-color: rgb(206, 255, 255, 25%);
+        background-color: #ceffff40;
         filter: saturate(50%) brightness(300%);
     }
     to {
@@ -84,7 +96,7 @@ td.trail-animation {
 
 @keyframes cleared-line-animation {
     from {
-        background-color: rgb(206, 255, 255, 40%);
+        background-color: #ceffff66;
         filter: saturate(50%) brightness(300%);
         box-shadow: -200px 0 5px white, 200px 0 5px white;
     }
@@ -97,13 +109,26 @@ tr.cleared-line-animation {
     animation: cleared-line-animation ease-out .3s;
 }
 
+#holdTable .J,
+#holdTable .L,
+#holdTable .S,
+#holdTable .T,
+#holdTable .Z, 
+#nextTable .J,
+#nextTable .L,
+#nextTable .S,
+#nextTable .T,
+#nextTable .Z {
+    transform: translateX(50%);
+}
+
 #messagesSpan {
     position: absolute;
     top: 5%;
     left: 50%;
     transform: translate(-50%, 0);
-    color: rgba(255, 255, 255, 0.8);
-    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
+    color: #fffc;
+    text-shadow: 1px 1px #000c;
     font-size: 3vmin;
     text-align: center;
 }

css/electro.css

@@ -3,19 +3,30 @@ body {
     background-size: cover;
 }
 
-.card {
-    background-color: rgba(37, 41, 45, 30%);
+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
 }
 
-.mino:not(.ghost):not(.locking) {
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
+.card {
+    background-color: rgba(37, 41, 45, 40%);
+}
+
+tr.matrix td:not(.mino) {
+    border-left  : none;
+    border-bottom: none;
+}
+
+.mino:not(.ghost):not(.locking):not(.disabled) {
     padding: 1px;
     position: relative;
     z-index: 0;
-    box-shadow:
-        -1px -1px 4px rgba(128, 128, 128, 25%),
-        -1px  1px 4px rgba(128, 128, 128, 25%),
-         1px -1px 4px rgba(128, 128, 128, 25%),
-         1px  1px 4px rgba(128, 128, 128, 25%);
+    border-radius: 4px;
+    background-color: rgba(128, 128, 128, 25%);
+    box-shadow: 0px 0px 8px rgba(128, 128, 128, 75%);
 }
 
 .mino:not(.ghost):not(.locking):before {
@@ -23,7 +34,7 @@ body {
     position: absolute;
     z-index: -1;
     inset: 0;
-    margin: 1px;
+    margin: 1px 1px 0px 0px;
     padding: 2px;
     border-radius: 4px;
     --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
@@ -40,20 +51,21 @@ body {
 }
 
 .ghost.mino {
-    background: transparent;
+    background: rgba(242, 255, 255, 10%);
     border : 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 3px;
-    box-shadow:
-        -1px -1px 8px rgba(242, 255, 255, 32%),
-        -1px  1px 8px rgba(242, 255, 255, 32%),
-         1px -1px 8px rgba(242, 255, 255, 32%),
-         1px  1px 8px rgba(242, 255, 255, 32%);
+    box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
 }
 
 .moving.mino {
-    border-width: 1px;
+    box-shadow: 0px 0px 5px rgba(128, 128, 128, 75%);
+}
+
+.moving.mino:not(.locking) {
+    padding: 2px;
     background: rgba(186, 211, 255, 30%);
-    border-color: rgba(242, 255, 255, 0.7);
+    border: none;
+    border-radius: 4px;
 }
 
 .locking.mino {
@@ -61,11 +73,16 @@ body {
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
     border-radius: 4px;
-    box-shadow:
-        -1px -1px 8px rgba(186, 211, 255, 27%),
-        -1px  1px 8px rgba(186, 211, 255, 27%),
-         1px -1px 8px rgba(186, 211, 255, 27%),
-         1px  1px 8px rgba(186, 211, 255, 27%);
+    box-shadow: 0px 0px 10px rgba(242, 255, 255, 100%);
+}
+
+.disabled.mino {
+    opacity: 60%;
+}
+
+.disabled.mino:before {
+    opacity: 50%;
+    box-shadow: none;
 }
 
 @keyframes locked-animation {

css/minimal.css

@@ -32,42 +32,42 @@ tr.matrix td:not(.mino) {
     width: inherit;
     height: inherit;
     display: block;
-    box-shadow: 0 -6px 0 var(--light-color);
+    box-shadow: 0 -6px 0 var(--box-shadow-color);
 }
 
 .I.mino {
     --background-color: #42AFE1;
-    --light-color: #6CEAFF;
+    --box-shadow-color: #6CEAFF;
 }
 
 .J.mino {
     --background-color: #1165B5;
-    --light-color: #339BFF;
+    --box-shadow-color: #339BFF;
 }
 
 .L.mino {
     --background-color: #F38927;
-    --light-color: #FFBA59;
+    --box-shadow-color: #FFBA59;
 }
 
 .O.mino {
     --background-color: #F6D03C;
-    --light-color: #FFFF7F;
+    --box-shadow-color: #FFFF7F;
 }
 
 .S.mino {
     --background-color: #51B84D;
-    --light-color: #84F880;
+    --box-shadow-color: #84F880;
 }
 
 .T.mino {
     --background-color: #9739A2;
-    --light-color: #D958E9;
+    --box-shadow-color: #D958E9;
 }
 
 .Z.mino {
     --background-color: #EB4F65;
-    --light-color: #FF7F79;
+    --box-shadow-color: #FF7F79;
 }
 
 .ghost.mino {
@@ -88,6 +88,10 @@ tr.matrix td:not(.mino) {
     animation-duration: 0.2s;
 }
 
+.disabled.mino {
+    filter: brightness(50%) contrast(50%);
+}
+
 @keyframes locked-animation {
     from {
         filter: saturate(50%) brightness(300%);

css/opera.css

@@ -0,0 +1,155 @@
+body {
+    --bs-gutter-x: 0;
+    background: black !important;
+}
+
+#screenRow {
+    gap: 0 !important;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+}
+
+#screenRow {
+    --bs-gutter-x: 0;
+}
+
+.card {
+    background: black;
+    border: none;
+    border-radius: 0;
+    margin-bottom: 0.5em !important;
+}
+
+.card-header,
+.card-header th{
+    background: transparent;
+    font-weight: 400 !important;
+    font-size: 1.3em;
+    border: none;
+}
+
+#screenRow .table {
+    --bs-border-width: 0;
+}
+
+#holdTable {
+    margin: 0 0 0 auto !important;
+}
+
+#holdTable,
+#nextTable {
+    border-bottom: 2px solid white;
+}
+
+#statsTable {
+    margin-right: 1.5em;
+}
+
+#statsTable tr {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
+
+#statsTable td,
+#statsTable th {
+    margin: 0;
+    padding: 0 !important;
+    width: auto;
+    height: auto;
+    text-transform: uppercase;
+}
+
+#statsTable th {
+    display: inline;
+    flex-flow: row;
+    font-size: 0.8em;
+    text-align: center;
+    width: 200%;
+}
+
+#statsTable td {
+    font-size: 1.3em;
+    font-weight: 600;
+    color: white;
+}
+
+#matrixCard {
+    background: transparent;
+    border-top: none;
+    border-left: 4px solid white;
+    border-right: 4px solid white;
+    border-bottom: 4px solid white;
+}
+
+.mino {
+    padding: 0;
+    opacity: 100%;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.I.mino {
+    background-color: #42AFE1;
+    border-color: #6CEAFF;
+}
+
+.J.mino {
+    background-color: #1165B5;
+    border-color: #339BFF;
+}
+
+.L.mino {
+    background-color: #F38927;
+    border-color: #FFBA59;
+}
+
+.O.mino {
+    background-color: #F6D03C;
+    border-color: #FFFF7F;
+}
+
+.S.mino {
+    background-color: #32ee3e;
+    border-color: #84F880;
+}
+
+.T.mino {
+    background-color: #9739A2;
+    border-color: #D958E9;
+}
+
+.Z.mino {
+    background-color: #EB4F65;
+    border-color: #FF7F79;
+}
+
+.ghost.mino {
+    background-color: #fff4;
+    border-color: #fff8;
+}
+
+.moving.mino {
+    filter: saturate(80%) brightness(150%);
+}
+
+.locking.mino {
+    filter: saturate(50%) brightness(200%);
+}
+
+.disabled.mino {
+    filter: brightness(50%) contrast(80%);
+    opacity: 70%;
+}
+
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(400%);
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}

css/pop.css

@@ -3,64 +3,71 @@ body {
     background-size: cover;
 }
 
-.card {
+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
+}
+
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
+.card,
+#matrixCard {
+    background: repeating-linear-gradient(transparent, #111 1px);
+    backdrop-filter: blur(3px);
+}
+
+.card-header {
     background-color: rgba(37, 41, 45, 50%);
 }
 
-@supports (backdrop-filter: blur()) {
-    .card {
-        background-color: rgba(33, 37, 41, 20%);
-        backdrop-filter: blur(3px);
-    }
+#matrixTable {
+    border-spacing: 1px;
 }
 
 tr.matrix td:not(.mino) {
-    border-left  : 1px solid #222;
-    border-right : 1px solid #222;
-    border-top   : 1px solid #111;
-    border-bottom: 1px solid #111;
+    border: 1px solid #111;
 }
 
 .mino {
-    background: rgba(255, 255, 255, 33%);
-    border: 6px solid var(--color);
-    padding: 0;
+    background: radial-gradient(#fff3 0%, var(--color) 170%);
+    border: 2px solid var(--color);
+    border-radius: 0;
+    outline: 1px solid #0006;
     opacity: 100%;
-    border-radius: 4px;
-    filter: blur(1px);
-    box-shadow: 0 0 10px var(--color);
+    box-shadow: 0 0 12px var(--color);
 }
 
 .I.mino {
-    --color: #9bf6ff;
+    --color: #00eaf5;
 }
 
 .J.mino {
-    --color: #a0c4ff;
+    --color: #00a9f7;
 }
 
 .L.mino {
-    --color: #ffd6a5;
+    --color: #f9b600;
 }
 
 .O.mino {
-    --color: #fdffb6;
+    --color: #f7f200;;
 }
 
 .T.mino {
-    --color: #bdb2ff;
+    --color: #d136e2;;
 }
 
 .S.mino {
-    --color: #caffbf;
+    --color: #35da3f;
 }
 
 .Z.mino {
-    --color: #ffadad;
+    --color: #ee3b3a;
 }
 
 .ghost.mino {
-    filter: brightness(150%) blur(2px);
+    background: transparent;
     opacity: 50%;
 }
 
@@ -70,7 +77,7 @@ tr.matrix td:not(.mino) {
 
 .locking.mino {
     --color: white;
-    filter: blur(2px);
+    box-shadow: 0 0 10px var(--color);
 }
 
 @keyframes locked-animation {
@@ -85,13 +92,32 @@ tr.matrix td:not(.mino) {
     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 {
-    from {
-        background-color: rgb(206, 255, 255, 40%);
-        filter: saturate(50%) brightness(300%);
-        box-shadow: -200px 0 10px white, 200px 0 10px white;
-    }
-    to {
-        box-shadow: -200px 0 50px transparent, 200px 0 50px transparent;
+    25% {
+        width: 200%;
+        opacity: 100%;
     }
 }

css/retro.css

@@ -7,6 +7,9 @@
     src: url("retro/Early GameBoy.ttf");
 }
 
+body {
+}
+
 #screenRow {
     background-image: url("retro/bg.png");
     background-size: 10px;
@@ -45,8 +48,11 @@
 
 #statsTable,
 .card,
+.card-header,
 #messagesSpan {
     font-family: "Early GameBoy", monospace;
+    font-smooth: never;
+    -webkit-font-smoothing: none;
     color: #254806;
     text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%);
 }
@@ -120,10 +126,11 @@ td {
 }
 
 .locking.mino {
-    animation: blinker 0.04s step-start infinite;
+    animation: blinker 0.08s step-start infinite;
 }
 
-.ghost.mino {
+.ghost.mino,
+.disabled.mino {
     opacity: 50%;
 }
 
@@ -131,11 +138,15 @@ td {
     animation: none;
 }
 
+.hard-dropped-table-animation {
+    animation: hard-dropped-table-animation steps(1) .2s;
+}
+
 @keyframes cleared-line-animation {
-    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
+    10%, 30%, 50%, 70%, 90% {
         opacity: 0;
     }
-    10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+    20%, 40%, 60%, 80% {
         opacity: 100%;
     }
 }

index.html

@@ -9,15 +9,27 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
     <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="Classique">
+    <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/minimal.css" title="Minimal">
     <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
     <link rel="alternate stylesheet" href="css/pop.css"     title="Pop">
     <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/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">
     <link rel="manifest" href="manifest.json">
+    <meta property="og:title" content="Quatuor"/>
+    <meta property="og:type" content="game"/>
+    <meta property="og:url" content="https://adrien.malingrey.fr/jeux/quatuor/"/>
+    <meta property="og:image" content="https://adrien.malingrey.fr/jeux/quatuor/thumbnail.png"/>
+    <meta property="og:image:width" content="288"/>
+    <meta property="og:image:height" content="288"/>
+    <meta property="og:description" content="Un jeu avec un quatuor de blocs qui tombent."/>
+    <meta property="og:locale" content="fr_FR"/>
+    <meta property="og:site_name" content="adrien.malingrey.fr"/>
   </head>
 
   <body data-bs-theme="dark">
@@ -30,47 +42,45 @@
           </div>
           <div class="modal-body">
             <form name="settingsForm" class="needs-validation" novalidate>
-              <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center">
-                <legend class="text-start">Commandes</legend>
+              <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Commandes</legend>
                 <label for="moveLeftInput" title="Gauche" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left"></i></label>
-                <div class="col-4"><input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center btn btn-dark" value="←" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
-                <div class="col-4"><input name="moveRight" id="moveRightInput" type="text" class="form-control text-center btn btn-dark" value="→" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center" value="←" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="moveRight" id="moveRightInput" type="text" class="form-control text-center" value="→" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
                 <label for="moveRightInput" title="Droite" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-right"></i></label>
                 <label for="rotateCounterclockwiseInput" title="Rotation anti-horaire" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-counterclockwise"></i></label>
-                <div class="col-4"><input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="text" class="form-control text-center btn btn-dark" value="w" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
-                <div class="col-4"><input name="rotateClockwise" id="rotateClockwiseInput" type="text" class="form-control text-center btn btn-dark" value="↑" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="text" class="form-control text-center" value="w" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="rotateClockwise" id="rotateClockwiseInput" type="text" class="form-control text-center" value="↑" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
                 <label for="rotateClockwiseInput" title="Rotation horaire" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-clockwise"></i></label>
                 <label for="softDropInput" title="Chute lente" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-down-short"></i></label>
-                <div class="col-4"><input name="softDrop" id="softDropInput" type="text" class="form-control text-center btn btn-dark" value="↓" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
-                <div class="col-4"><input name="hardDrop" id="hardDropInput" type="text" class="form-control text-center btn btn-dark" value="Espace" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="softDrop" id="softDropInput" type="text" class="form-control text-center" value="↓" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="hardDrop" id="hardDropInput" type="text" class="form-control text-center" value="Espace" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
                 <label for="hardDropInput" title="Chute rapide" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-download"></i></label>
                 <label for="holdInput" title="Échanger la pièce" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left-right"></i></label>
-                <div class="col-4"><input name="hold" id="holdInput" type="text" class="form-control text-center btn btn-dark" value="c" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
-                <div class="col-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center btn btn-dark" value="Échap." onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="hold" id="holdInput" type="text" class="form-control text-center" value="c" onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
+                <div class="col-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center" value="Échap." onfocus="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
                 <label for="pauseInput" title="Pause" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-pause"></i></label>
               </fieldset>
-              <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center">
-                <legend class="text-start">Répétition automatique</legend>
+              <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Répétition automatique</legend>
                 <label for="arrInput" class="col-2 col-form-label"><abbr title="Automatic Repeat Rate : période de répétition de l'action">ARR</abbr></label>
                 <div class="col-4"><div class="input-group"><input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"><div class="input-group-text">ms</div></div></div>
                 <div class="col-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div>
                 <label for="dasInput" class="col-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label>
               </fieldset>
-              <fieldset class="row g-2 mb-3 align-items-center text-center">
-                <legend class="text-start">Interface</legend>
+              <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Interface</legend>
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
-                <div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
-                  <option selected>Classique</option>
-                  <option>Minimal</option>
-                  <option>Pop</option>
-                  <option>Électro</option>
-                  <option>Rétro</option>
+                <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/pop.css">Pop</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>
                 </select></div>
-                <div class="col-4 d-flex align-items-baseline"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></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>
               </fieldset>
-              <fieldset class="row g-2 mb-3 align-items-center text-center">
-                <legend class="text-start">Partie</legend>
+              <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
                 <label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>
                 <div class="col-4">
                   <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15">
@@ -85,14 +95,14 @@
       </div>
     </div>
 
-    <div class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
+    <div id="sceneDiv" class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
 
       <div id="screenRow" class="row row-cols-auto align-items-start gap-2">
         <div class="col d-flex flex-column align-items-end">
-          <div class="card mb-4">
-            <div class="card-header text-center"><strong>HOLD</strong></div>
+          <div class="card shadow mb-4 w-100">
+            <div class="card-header fw-bold text-uppercase text-center">Hold</div>
             <div class="card-body p-0">
-              <table id="holdTable" class="minoes-table">
+              <table id="holdTable" class="minoes-table m-auto">
                 <tr class="buffer-zone"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                 <tr class="buffer-zone"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                 <tr class="buffer-zone"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
@@ -103,7 +113,7 @@
         </div>
           <div class="card shadow">
             <table id="statsTable" class="table mb-0">
-              <tr><th>Score</th> <td id="scoreCell">0</td>    </tr>
+              <tr class="card-header fw-bold text-uppercase"><th>Score</th><td id="scoreCell">0</td>                                                                          </tr>
               <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>
@@ -149,7 +159,7 @@
 
         <div class="col">
           <div class="card shadow">
-            <div class="card-header text-center"><strong>NEXT</strong></div>
+            <div class="card-header fw-bold text-uppercase text-center">Next</div>
             <div class="card-body p-0">
               <table id="nextTable" class="minoes-table caption-top">
                 <tr class="buffer-zone"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
@@ -221,8 +231,6 @@
     <script src="js/game_logic.js" language="Javascript" type="text/javascript"></script>
     <script src="js/interface.js"  language="Javascript" type="text/javascript"></script>
     <script src="js/app.js"        language="Javascript" type="text/javascript"></script>
-    <script>
-      
-    </script>
+    <script>navigator?.serviceWorker.register('js/service-worker.js')</script>
   </body>
 </html>

js/app.js

@@ -1,15 +1,16 @@
 let scheduler          = new Scheduler()
 let settings           = new Settings()
 let stats              = new Stats()
-let holdQueue          = new MinoesTable("holdTable")
+let holdQueue          = new HoldQueue()
 let matrix             = new Matrix()
 let nextQueue          = new NextQueue()
 let playing            = false
-let lastActionSucceded = true
+//let lastActionSucceded = true
 let favicon
 
 window.onload = function(event) {
-    document.selectedStyleSheetSet = stylesheetSelect.value
+    document.selectedStyleSheetSet = selectedStyleSheet.title
+    selectedStyleSheet.href = stylesheetSelect.value
     favicon = document.querySelector("link[rel~='icon']")
 
     restart()
@@ -18,6 +19,7 @@ window.onload = function(event) {
 function restart() {
     stats.modal.hide()
     holdQueue.init()
+    holdQueue.redraw()
     stats.init()
     matrix.init()
     nextQueue.init()
@@ -95,7 +97,8 @@ function ticktack() {
 
 function generate(piece) {
     matrix.piece = piece || nextQueue.shift()
-    lastActionSucceded = true
+    if (!piece && holdQueue.piece) holdQueue.drawPiece()
+    //lastActionSucceded = true
     favicon.href = matrix.piece.favicon_href
 
     if (matrix.piece.canMove(TRANSLATION.NONE)) {
@@ -120,7 +123,7 @@ let playerActions = {
         scheduler.clearTimeout(lockDown)
         playSound(hardDropSound)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2
-        matrix.table.classList.add("hard-dropped-table-animation")
+        matrixCard.classList.add("hard-dropped-table-animation")
         lockDown()
         return true
     },
@@ -130,13 +133,12 @@ let playerActions = {
             scheduler.clearInterval(fall)
             scheduler.clearTimeout(lockDown)
 
-            let heldPiece = holdQueue.piece
-            matrix.piece.facing = FACING.NORTH
-            matrix.piece.locked = false
-            holdQueue.piece = matrix.piece
-            holdQueue.piece.holdEnabled = false
-            holdQueue.piece.locked = false
-            generate(heldPiece)
+            let piece = matrix.piece
+            piece.facing = FACING.NORTH
+            piece.locked = false
+            generate(holdQueue.piece)
+            matrix.piece.holdEnabled = false
+            holdQueue.piece = piece
         }
     },
     
@@ -158,12 +160,13 @@ function onkeydown(event) {
         if (!pressedKeys.has(event.key)) {
             pressedKeys.add(event.key)
             action = settings.keyBind[event.key]
-            if (action()) {
+            /*if (action()) {
                 lastActionSucceded = true
             } else if (lastActionSucceded || !(action in REPEATABLE_ACTIONS)) {
-                wallSound.play()
+                playSound(wallSound)
                 lastActionSucceded = false
-            }
+            }*/
+            action()
             if (REPEATABLE_ACTIONS.includes(action)) {
                 actionsQueue.unshift(action)
                 scheduler.clearTimeout(repeat)
@@ -185,12 +188,13 @@ function repeat() {
 
 function autorepeat() {
     if (actionsQueue.length) {
-        if (actionsQueue[0]()) {
+        /*if (actionsQueue[0]()) {
             lastActionSucceded = true
         } else if (lastActionSucceded) {
             wallSound.play()
             lastActionSucceded = false
-        }
+        }*/
+        actionsQueue[0]()
     }
     else scheduler.clearInterval(autorepeat)
 }
@@ -202,9 +206,12 @@ function onkeyup(event) {
         action = settings.keyBind[event.key]
         if (actionsQueue.includes(action)) {
             actionsQueue.splice(actionsQueue.indexOf(action), 1)
-            if (!actionsQueue.length) {
             scheduler.clearTimeout(repeat)
             scheduler.clearInterval(autorepeat)
+            if (actionsQueue.length) {
+                if (actionsQueue[0] == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod/20)
+                else scheduler.setTimeout(repeat, settings.das)
+            } else {
                 matrix.drawPiece()
             }
         }
@@ -218,12 +225,9 @@ function fall() {
 function lockDown() {
     scheduler.clearTimeout(lockDown)
     scheduler.clearInterval(fall)
-    if (lastActionSucceded) wallSound.play()
 
     if (matrix.lock()) {
-        let tSpin = matrix.piece.tSpin
-        let nbClearedLines = matrix.clearLines()
-        stats.lockDown(nbClearedLines, tSpin)
+        stats.lockDown(matrix.piece.tSpin, matrix.clearLines())
         
         generate()
     } else {
@@ -240,7 +244,7 @@ messagesSpan.onanimationend = function(event) {
 }
 
 function gameOver() {
-    matrix.piece.locked = false
+    matrix.piece.locked = true
     matrix.drawPiece()
 
     document.onkeydown = null
@@ -257,7 +261,54 @@ window.onbeforeunload = function(event) {
     if (playing) return false;
 }
 
+// Play with 3D
+let mousedown = false
+let rX0 = 0
+let rY0 = 0
+let clientX0 = 0
+let clientY0 = 0
 
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('service-worker.js');
+sceneDiv.onmousedown = function(event) {
+    mousedown = true
+    rX0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rX"))
+    dy0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rY"))
+    clientX0 = event.clientX
+    clientY0 = event.clientY
+}
+
+sceneDiv.onmousemove = function(event) {
+	if (mousedown) {
+        event.preventDefault()
+        event.stopPropagation()
+        rX = (rX0 - event.clientY + clientY0 + 360) % 360
+        screenRow.style.setProperty("--rX", rX + "deg")
+        if (rX <= 180) {
+            screenRow.classList.remove("top")
+            screenRow.classList.add("bottom")
+        } else {
+            screenRow.classList.add("top")
+            screenRow.classList.remove("bottom")
+        }
+        rY = (rY0 + event.clientX - clientX0 + 360) % 360
+        screenRow.style.setProperty("--rY", rY + "deg")
+        if (rY >= 180) {
+            screenRow.classList.remove("left")
+            screenRow.classList.add("right")
+        } else {
+            screenRow.classList.add("left")
+            screenRow.classList.remove("right")
+        }
+    }
+}
+
+sceneDiv.onmouseup = document.onmouseleave = function(event) {
+    mousedown = false
+}
+
+sceneDiv.onwheel = function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    let tZ = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
+    tZ += event.deltaY
+    screenRow.style.setProperty("--tZ", tZ + "px")
 }

js/game_logic.js

@@ -44,29 +44,6 @@ const FACING = {
     WEST:  3,
 }
 
-const KEY_NAMES = new Proxy({
-    ["ArrowLeft"]   : "←",
-    ["←"]           : "ArrowLeft",
-    ["ArrowRight"]  : "→",
-    ["→"]           : "ArrowRight",
-    ["ArrowUp"]     : "↑",
-    ["↑"]           : "ArrowUp",
-    ["ArrowDown"]   : "↓",
-    ["↓"]           : "ArrowDown",
-    [" "]           : "Espace",
-    ["Espace"]      : " ",
-    ["Escape"]      : "Échap.",
-    ["Échap."]      : "Escape",
-    ["Backspace"]   : "Ret. arrière",
-    ["Ret. arrière"]: "Backspace",
-    ["Enter"]       : "Entrée",
-    ["Entrée"]      : "Enter",
-}, {
-    get(obj, keyName) {
-        return keyName in obj? obj[keyName] : keyName
-    }
-})
-
 /* Customize Array to be use as position */
 Object.defineProperties(Array.prototype, {
     "x": {
@@ -194,6 +171,20 @@ class MinoesTable {
 MinoesTable.prototype.init_center = [2, 2]
 
 
+class HoldQueue extends MinoesTable {
+    constructor() {
+        super("holdTable")
+    }
+
+    drawPiece(piece=this.piece, className=piece.className) {
+        if (!matrix.piece.holdEnabled) {
+            className += " disabled"
+        }
+        super.drawPiece(piece, className)
+    }
+}
+
+
 class NextQueue extends MinoesTable {
     constructor() {
         super("nextTable")
@@ -349,15 +340,13 @@ class Tetromino {
             }
             matrix.drawPiece()
             return true
-        } else if (!hardDropped) {
-            if (translation == TRANSLATION.DOWN) {
+        } else if (!hardDropped && translation == TRANSLATION.DOWN) {
             this.locked = true
             if (!scheduler.timeoutTasks.has(lockDown))
                 scheduler.setTimeout(lockDown, stats.lockDelay)
             matrix.drawPiece()
         }
     }
-    }
     
     rotate(rotation) {
         return this.srs[this.facing][rotation].some((translation, rotationPoint) => {

js/interface.js

@@ -1,3 +1,26 @@
+const KEY_NAMES = new Proxy({
+    ["ArrowLeft"]   : "←",
+    ["←"]           : "ArrowLeft",
+    ["ArrowRight"]  : "→",
+    ["→"]           : "ArrowRight",
+    ["ArrowUp"]     : "↑",
+    ["↑"]           : "ArrowUp",
+    ["ArrowDown"]   : "↓",
+    ["↓"]           : "ArrowDown",
+    [" "]           : "Espace",
+    ["Espace"]      : " ",
+    ["Escape"]      : "Échap.",
+    ["Échap."]      : "Escape",
+    ["Backspace"]   : "Ret. arrière",
+    ["Ret. arrière"]: "Backspace",
+    ["Enter"]       : "Entrée",
+    ["Entrée"]      : "Enter",
+}, {
+    get(target, key) {
+        return key in target? target[key] : key
+    }
+})
+
 class Settings {
     constructor() {
         this.form = settingsForm
@@ -7,20 +30,15 @@ class Settings {
     }
 
     load() {
-        for (let element of settingsForm.elements) {
-            if (element.name) {
-                if (localStorage[element.name]) element.value = localStorage[element.name]
-            }
-        }
+        this.form.querySelectorAll("[name]").forEach(element => {
+            if (element.name in localStorage)
+                element.value = localStorage[element.name]
+        })
         window.document.selectedStyleSheetSet = stylesheetSelect.value
     }
 
     save() {
-        for (let element of settingsForm.elements) {
-            if (element.name) {
-                localStorage[element.name] = element.value
-            }
-        }
+        this.form.querySelectorAll("[name]").forEach(element => localStorage[element.name] = element.value)
     }
 
     init() {
@@ -49,7 +67,12 @@ class Settings {
             this[input.name] = input.checked == true
         }
     
-        this.keyBind = {}
+        this.keyBind = new Proxy({}, {
+            get: (target, key) => target[key.toLowerCase()],
+            set: (target, key, value) => target[key.toLowerCase()] = value,
+            has: (target, key) => key.toLowerCase() in target
+            
+        })
         for (let actionName in playerActions) {
             this.keyBind[settings[actionName]] = playerActions[actionName]
         }
@@ -59,13 +82,29 @@ class Settings {
 function changeKey(input) {
     prevValue = input.value
     input.value = ""
+    keyInputs = Array.from(input.form.querySelectorAll("input[type='text']"))
     input.onkeydown = function (event) {
         event.preventDefault()
         input.value = KEY_NAMES[event.key]
+        keyInputs.forEach(input => {
+            input.setCustomValidity("")
+            input.classList.remove("is-invalid")
+        })
+        keyInputs.sort((input1, input2) => {
+            if(input1.value == input2.value) {
+                input1.setCustomValidity("Touche déjà utilisée")
+                input1.classList.add("is-invalid")
+                input2.setCustomValidity("Touche déjà utilisée")
+                input2.classList.add("is-invalid")
+            }
+            return input1.value > input2.value
+        })
+        if (input.checkValidity()) {
             input.blur()
         }
+    }
     input.onblur = function (event) {
-        if (input.value == "") input.value = prevValue
+        if (!input.value) input.value = prevValue
         input.onkeydown = null
         input.onblur = null
     }
@@ -171,7 +210,7 @@ class Stats {
         return new Date() - this.startTime
     }
 
-    lockDown(nbClearedLines, tSpin) {
+    lockDown(tSpin, nbClearedLines) {
         this.totalClearedLines += nbClearedLines
         if (nbClearedLines == 4) this.nbQuatuors++
         if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++

js/service-worker.js

@@ -16,7 +16,7 @@ Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
 const OFFLINE_VERSION = 1;
 const CACHE_NAME = "offline";
 // Customize this with a different URL if needed.
-const OFFLINE_URL = "index.html";
+const OFFLINE_URL = "../index.html";
 
 self.addEventListener("install", (event) => {
   event.waitUntil(