hard drop rotation

css/stereo.css

@@ -70,6 +70,7 @@ body {
 
 #matrixCard {
     background-image: none;
+    transform-origin: bottom;
 }
 
 #screenRow .card > * {
@@ -326,6 +327,12 @@ td.trail-animation::after {
     animation: trail-animation ease-out 0.3s;
 }
 
+@keyframes hard-dropped-table-animation {
+    50% {
+        transform: translateY(10px) rotateX(-3deg);
+    }
+}
+
 @keyframes locked-animation {
     from {
       --h: 0deg;

js/app.js

@@ -370,7 +370,7 @@ stylesheetSelect.oninput = function (event) {
                 .then((json) => {
                     json = json.filter((item) => (item.type == "skin" && item.format == "tetrioraster" && /\.(?:png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(item.path)))
                     const groups = Map.groupBy(json, (skin) => skin.author)
-                    const data = groups.entries().map(([author, skins]) => {
+                    var data = groups.entries().map(([author, skins]) => {
                         return {
                             text: author,
                             children: skins.map((skin) => {
@@ -388,6 +388,7 @@ stylesheetSelect.oninput = function (event) {
                             text: "A forest"
                         }]
                     })
+                    data.sort((group1, group2) => group1.text > group2.text) 
                     $('#skinURLSelect').select2({data: data});
                 })
             break;