countdown

css/_common.css

@@ -155,9 +155,12 @@ tr.cleared-line-animation {
 
 #messagesSpan {
     position: absolute;
-    top: 5%;
+    top: 0;
     left: 50%;
     transform: translate(-50%, 0);
+    padding-top: 5%;
+    width: 100%;
+    height: 100%;
     color: #fffc;
     text-shadow: 1px 1px #000c;
     font-size: 3vmin;
@@ -170,6 +173,31 @@ tr.cleared-line-animation {
     overflow: hidden;
 }
 
+@keyframes countdown-animation {
+    from {
+        opacity: 0;
+    }
+    50% {
+        opacity: 100%;
+    }
+    to {
+        opacity: 0;
+        font-size: 20vmin;
+    }
+}
+
+#messagesSpan div.countdown-animation {
+    animation: countdown-animation;
+    animation-timing-function: ease-in-out;
+    animation-duration: .5s;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: -5%;
+    align-content: center;
+}
+
 @keyframes show-level-animation {
     from {
         opacity: 0;
@@ -182,7 +210,7 @@ tr.cleared-line-animation {
     }
     to {
         opacity: 0;
-        transform: translateY(-100%) scaleY(0);
+        transform: translateY(-50%) scaleY(0);
         line-height: 0;
     }
 }

css/jazz.css

@@ -40,8 +40,7 @@ body {
 .minoes-table {
     display: flex;
     flex-direction: column;
-    filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
+    filter: drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
-        drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
 }
 
 .minoes-table tr {
@@ -100,16 +99,13 @@ td#timeCell {
     border-bottom: 3px solid white;
 }
 
-tr.matrix td:not(.mino) {
-    border: 0;
-}
-
 .minoes-table td {
     display: inline-block;
     width: var(--cell-size);
     height: var(--cell-size);
     padding: 0 !important;
     z-index: calc(200 - var(--row));
+    border: none !important;
 }
 
 .mino {
@@ -118,59 +114,47 @@ tr.matrix td:not(.mino) {
     display: block;
     padding: 0;
     opacity: 100%;
-    border-width: 1px;
-    border-style: solid;
     box-shadow: 0 -6px 0 var(--box-shadow-color);
 }
 
 .I.mino {
     background-color: #42afe1;
-    border-color: #6ceaff;
   --box-shadow-color: #6ceaff;
 }
 
 .J.mino {
     background-color: #1165b5;
-    border-color: #339bff;
   --box-shadow-color: #339bff;
 }
 
 .L.mino {
     background-color: #f38927;
-    border-color: #ffba59;
   --box-shadow-color: #ffba59;
 }
 
 .O.mino {
     background-color: #f6d03c;
-    border-color: #ffff7f;
   --box-shadow-color: #ffff7f;
 }
 
 .S.mino {
     background-color: #32ee3e;
-    border-color: #84f880;
   --box-shadow-color: #84f880;
 }
 
 .T.mino {
     background-color: #9739a2;
-    border-color: #d958e9;
   --box-shadow-color: #d958e9;
 }
 
 .Z.mino {
     background-color: #eb4f65;
-    border-color: #ff7f79;
   --box-shadow-color: #ff7f79;
 }
 
 .ghost.mino {
     background-color: #fff4;
-    border: none;
-    opacity: 5%;
     box-shadow: none;
-    transform: translateY(-3px);
 }
 
 .moving.mino {
@@ -188,7 +172,6 @@ tr.matrix td:not(.mino) {
 
 .disabled.mino {
     filter: brightness(50%) contrast(65%);
-    opacity: 70%;
 }
 
 @keyframes locked-animation {
@@ -196,22 +179,3 @@ tr.matrix td:not(.mino) {
         filter: saturate(50%) brightness(300%);
     }
 }
-
-@keyframes cleared-line-animation {
-    from {
-        background-color: #eeeeee;
-    }
-    to {
-        background-color: transparent;
-    }
-}
-
-@keyframes trail-animation {
-    from {
-        background-color: #ceffff05;
-        filter: saturate(50%) brightness(110%);
-    }
-    to {
-        background-color: transparent;
-    }
-}

js/app.js

@@ -72,9 +72,31 @@ function resume(event) {
         for (const sound of document.getElementsByTagName('audio'))
             sound.volume = sfxVolumeRange.value;
 
+        playSound(menuconfirm)
         settings.modal.hide();
         settings.getInputs();
 
+        messagesSpan.addNewChild('div', {
+            className: 'countdown-animation',
+            innerHTML: "3",
+        })
+
+        setTimeout(() => messagesSpan.addNewChild('div', {
+            className: 'countdown-animation',
+            innerHTML: "2",
+        }), 1000);
+
+        setTimeout(() => messagesSpan.addNewChild('div', {
+            className: 'countdown-animation',
+            innerHTML: "1",
+        }), 2000);
+
+        setTimeout(() => {
+            messagesSpan.addNewChild('div', {
+                className: 'countdown-animation',
+                innerHTML: "GO",
+            })
+            
             document.onkeydown = onkeydown;
             document.onkeyup = onkeyup;
 
@@ -83,8 +105,7 @@ function resume(event) {
 
             if (matrix.piece) scheduler.setInterval(fall, stats.fallPeriod);
             else generate();
-
+        }, 3000);
-        playSound(menuconfirm)
     }
 }
 
@@ -398,8 +419,8 @@ stylesheetSelect.oninput = function (event) {
                             var option = new Option('Sample sauvegardé', skinURL);
                             $('#skinURLSelect').append(option).trigger('change');
                         }
-                        skinURLSelect.oninput();
                     }
+                    skinURLSelect.oninput();
                 })
             break;
 
@@ -431,8 +452,8 @@ stylesheetSelect.oninput = function (event) {
                             var option = new Option('Sample sauvegardé', skinURL);
                             $('#skinURLSelect').append(option).trigger('change');
                         }
-                        skinURLSelect.oninput();
                     }
+                    skinURLSelect.oninput();
                 });
             break;