new theme

css/classic.css

@@ -109,15 +109,24 @@
 @keyframes locked-animation {
     from {
         filter: saturate(50%) brightness(400%);
+    box-shadow:
+        -1px -1px 4px #FFF2,
+        -1px  1px 4px #FFF2,
+         1px -1px 4px #FFF2,
+         1px  1px 4px #FFF2;
+    }
+    50% {
         box-shadow:
-            -1px -1px 4px #FFF2,
-            -1px  1px 4px #FFF2,
-             1px -1px 4px #FFF2,
-             1px  1px 4px #FFF2;
+            -1px -1px 6px #FFF4,
+            -1px  1px 6px #FFF4,
+             1px -1px 6px #FFF4,
+             1px  1px 6px #FFF4;
+    }
+    to {
+        box-shadow:
+            -1px -1px 0 #FFF2,
+            -1px  1px 0 #FFF2,
+             1px -1px 0 #FFF2,
+             1px  1px 0 #FFF2;
     }
 }
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}

css/common.css

@@ -89,6 +89,7 @@ td {
     overflow: hidden;
     width: var(--cell-side);
     height: var(--cell-side);
+    box-sizing: border-box;
 }
 
 @keyframes trail-animation {
@@ -101,6 +102,17 @@ td {
     }
 }
 
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(400%);
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
 td.trail-animation {
     animation: trail-animation ease-out .3s;
 }

css/electro.css

@@ -92,8 +92,3 @@ tr.matrix td:not(.mino) {
         border-color: white;
     }
 }
-
-.locked.mino {
-    animation: locked-animation;
-    animation-duration: 0.2s;
-}

css/opera.css

@@ -146,14 +146,3 @@ td#timeCell {
     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

@@ -0,0 +1,64 @@
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 140% 150% at 50% 140%,
+    var(--light),
+    var(--color) 70%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 130% 150% at 50% 150%,
+    var(--light),
+    var(--color) 75%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+
+.I {
+  --color: #009fcf;
+  --light: #cfeaf1;
+}
+
+.J {
+  --color: #0048a8;
+  --light: #cfdcf0;
+}
+
+.L {
+  --color: #f96700;
+  --light: #f8d3b8;
+}
+
+.O {
+  --color: #fdba00;
+  --light: #f6e0b8;
+}
+
+.S {
+  --color: #59b616;
+  --light: #dceecf;
+}
+
+.T {
+  --color: #852687;
+  --light: #e3c7e3;
+}
+
+.Z {
+  --color: #a90f16;
+  --light: #ebc6c8;
+}
+
+.ghost {
+  opacity: 35%;
+  filter: saturate(30%) brightness(150%);
+}

css/retro.css

@@ -79,7 +79,7 @@
     text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
 }
 
-td {
+.minoes-table td {
     border: 0 !important;
 }
 
@@ -118,7 +118,7 @@ td {
 
 @keyframes blinker {
     35% {
-        opacity: 0;
+        opacity: 50%;
     }
 }
 

css/stereo.css

@@ -61,14 +61,20 @@ body {
   border: none;
 }
 
+.card,
+.card-header {
+  text-shadow:
+    calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
+}
+
 #holdTable .mino {
-  --row: 10;
+  --row: 7;
   --column: -5;
 }
 
 #nextTable .mino {
   --row: 15;
-  --column: 20;
+  --column: 15;
 }
 
 .minoes-table th,
@@ -95,13 +101,11 @@ body {
 
 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);
+  height: var(--cell-side) !important;
   overflow: visible;
 }
 
@@ -109,26 +113,22 @@ tr.matrix td:not(.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%
-  );
+  --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
+  --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
+  background: var(--center-color);
   border-radius: 2px;
+  border: 2px outset var(--center-color);
 }
 
 .minoes-table .mino::before,
 .minoes-table .mino + :not(.mino)::before,
-.minoes-table .mino::after {
+.minoes-table .mino::after,
+td.trail-animation::before,
+td.trail-animation::after,
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
   content: '';
   position: absolute;
   top: 0;
@@ -139,30 +139,42 @@ tr.matrix td:not(.mino) {
 }
 
 /* Front face */
-.minoes-table .mino {
+.minoes-table .mino,
+td.trail-animation {
   --light: calc(
     1
     + (var(--light-y) * 0.3)
     + (var(--light-x) * 0.2)
   );
+  --center-x:  calc(35% + var(--light-x) * 10%);
+  --center-y:  calc(35% + var(--light-y) * 10%);
+  background: radial-gradient(
+    circle at var(--center-x) var(--center-y),
+    var(--center-color) 15%,
+    var(--edge-color) 100%
+  );
+  box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
 }
 
 /* Left face */
 .minoes-table .mino::before,
+td.trail-animation::before,
+tr.cleared-line-animation td::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: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg);
   transform-origin: left;
 }
 
 /* Right face */
-.right .minoes-table .mino::before,
+.right .minoes-table .mino + .mino::before,
 .minoes-table .mino + :not(.mino)::before,
-.right .minoes-table .mino:last-child::before {
+.right td.trail-animation::before,
+.right tr.cleared-line-animation td::before {
   --light: calc(
     0.85
     + (var(--light-x) * -0.2)
@@ -171,27 +183,31 @@ tr.matrix td:not(.mino) {
   --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: translate3d(0, 0, 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: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
   transform-origin: right !important;
 }
 
 /* Top face */
-.minoes-table .mino::after {
+.minoes-table .mino::after,
+td.trail-animation::after,
+tr.cleared-line-animation td::after {
   --light: calc(
     1.5
     + (var(--light-y) * 0.2)
   );
-  transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
+  transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg);
   transform-origin: top;
 }
 
 /* Bottom face */
-.bottom .minoes-table .mino::after {
+.bottom .minoes-table .mino::after,
+.bottom td.trail-animation::after,
+.bottom tr.cleared-line-animation td::after {
   --light: calc(
     1.1
     + (var(--light-y) * -0.3)
@@ -199,24 +215,22 @@ tr.matrix td:not(.mino) {
   --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: translate3d(-1.5px, -1.5px, 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; }
+.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
+.L.mino, .L.mino + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
+.O.mino, .O.mino + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
+.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
+.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
+.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
+.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
 
 .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),
@@ -230,17 +244,51 @@ tr.matrix td:not(.mino) {
   transform: translateX(50%);
 }
 
+@keyframes trail-animation {
+    from {
+        background-color: hsla(180, 100%, 100%, 0.1);
+        border-color:  hsla(180, 100%, 100%, 0.1);
+    }
+    to {
+        background-color: transparent;
+        border-color: transparent;
+    }
+}
+
+td.trail-animation::before,
+td.trail-animation::after {
+    animation: trail-animation ease-out .3s;
+}
+
+@keyframes locked-animation {
+    from {
+        --h: 0deg; --s: 0%; --l: 100%; --a: 1;
+        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+    }
+}
+
+.locked.mino::before,
+.locked.mino::after {
+    animation: locked-animation;
+    animation-duration: .2s;
+}
+
 @keyframes cleared-line-animation {
   from {
-    background-color: #ceffff66;
-    box-shadow: -200px 0 5px white, 200px 0 5px white;
+    background-color: white !important;
+    box-shadow: 0 0 0 white;
   }
-
   to {
-    background-color: transparent;
+    background-color: #fff0;
+    box-shadow: 0 0 100px transparent;
   }
 }
 
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  animation: cleared-line-animation ease-out .3s;
+}
+
 @keyframes show-level-animation {
   from {
     opacity: 1;

css/synthwave.css

@@ -36,37 +36,37 @@ body[data-bs-theme="dark"] {
 }
 
 .I {
-  --color: #00eaf888;
+  --color: #00eaf866;
   --border: #00eaf5;
 }
 
 .J {
-  --color: #00a9f788;
+  --color: #00a9f766;
   --border: #00a9f7;
 }
 
 .L {
-  --color: #f9b60088;
+  --color: #f9b60066;
   --border: #f9b600;
 }
 
 .O {
-  --color: #e3e04988;
+  --color: #e3e04966;
   --border: #e3e049;
 }
 
 .S {
-  --color: #7bd59e88;
+  --color: #7bd59e66;
   --border: #7bd59e;
 }
 
 .T {
-  --color: #d136e288;
+  --color: #d136e266;
   --border: #d136e2;
 }
 
 .Z {
-  --color: #E67D8688;
+  --color: #E67D8666;
   --border: #E67D86;
 }
 

index.html

@@ -11,6 +11,7 @@
     <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/pop.css"   title="Pop">
     <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/synthwave.css" title="Synthwave">
@@ -70,6 +71,7 @@
                 <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="selectedStyleSheet.href = this.value">
                   <option value="css/classic.css" selected>Classique</option>
+                  <option value="css/pop.css">Pop</option>
                   <option value="css/minimal.css">Minimal</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>
@@ -79,6 +81,11 @@
                 </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>
+                <div class="col-2"></div>
+                <div class="col-4 form-check form-switch text-start">
+                  <input id="fullscreenCheckbox" type="checkbox" role="switch" class="form-check-input" tabindex="0">
+                  <label for="fullscreenCheckbox" class="form-check-label">Plein écran</label>
+                </div>
               </fieldset>
               <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>
@@ -186,13 +193,13 @@
 
     </div>
 
-    <div class="modal fade" id="statsModal" tabindex="-1">
+    <div class="modal fade" id="statsModal" data-bs-backdrop="static" tabindex="-1">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <h2 class="modal-title w-100 text-center">Fin</h2>
-              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+              <!-- <button type="button" class="btn-close" data-bs-dismiss="modal"></button> -->
             </div>
             <div class="modal-body p-0">
               <table class="table mb-0">

js/app.js

@@ -13,9 +13,28 @@ window.onload = function(event) {
     selectedStyleSheet.href = stylesheetSelect.value
     favicon = document.querySelector("link[rel~='icon']")
 
+    fullscreenCheckbox.onchange = function() {
+        if (this.checked) {
+            document.documentElement.requestFullscreen()
+        } else {
+            document.exitFullscreen()
+        }
+    }
+
     restart()
 }
 
+document.onfullscreenchange = function() {
+    if (document.fullscreenElement) {
+        fullscreenCheckbox.checked = true
+    } else {
+        fullscreenCheckbox.checked = false
+    }
+}
+document.onfullscreenerror = function() {
+    fullscreenCheckbox.checked = false
+}
+
 function restart() {
     stats.modal.hide()
     holdQueue.init()
@@ -123,7 +142,9 @@ let playerActions = {
         scheduler.clearTimeout(lockDown)
         playSound(hardDropSound)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, true)) stats.score += 2
-        matrixCard.classList.add("hard-dropped-table-animation")
+        matrixCard.classList.remove("hard-dropped-table-animation")
+        matrixCard.offsetHeight;
+        matrixCard.classList.add("hard-dropped-table-animation") // restart animation
         lockDown()
         return true
     },
@@ -280,7 +301,7 @@ sceneDiv.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
         event.stopPropagation()
-        rX = (rX0 - event.clientY + clientY0) % 360
+        rX = (rX0 - 0.5 * (event.clientY - clientY0)) % 360
         screenRow.style.setProperty("--rX", rX)
         if (rX >= 0) {
             screenRow.classList.remove("top")
@@ -289,7 +310,7 @@ sceneDiv.onmousemove = function(event) {
             screenRow.classList.add("top")
             screenRow.classList.remove("bottom")
         }
-        rY = (rY0 + event.clientX - clientX0) % 360
+        rY = (rY0 + 0.5 * (event.clientX - clientX0)) % 360
         screenRow.style.setProperty("--rY", rY)
         if (rY <= 0) {
             screenRow.classList.remove("left")
@@ -309,6 +330,6 @@ sceneDiv.onwheel = function(event) {
     event.preventDefault()
     event.stopPropagation()
     let tZ = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
-    tZ += event.deltaY
+    tZ -= event.deltaY
     screenRow.style.setProperty("--tZ", tZ + "px")
 }

js/game_logic.js

@@ -255,6 +255,10 @@ class Matrix extends MinoesTable {
         matrix.table.style.setProperty('--piece-row',    this.piece.center.y)
     }
 
+    clearPiece(piece=this.piece, className="") {
+        super.drawPiece(piece, className)
+    }
+
     redraw() {
         for (let y=0; y<this.rows; y++) {
             for (let x=0; x<this.columns; x++) {
@@ -328,7 +332,7 @@ class Tetromino {
         let success = this.canMove(translation, rotation)
         if (success) {
             scheduler.clearTimeout(lockDown)
-            matrix.drawPiece(this, translation == TRANSLATION.DOWN? "trail-animation" : "")
+            matrix.clearPiece(this, hardDropped? "trail-animation" : "")
             this.center = success.center
             if (rotation) this.facing = success.facing
             this.lastRotation = rotation

js/interface.js

@@ -21,6 +21,7 @@ const KEY_NAMES = new Proxy({
     }
 })
 
+
 class Settings {
     constructor() {
         this.form = settingsForm