fix hard drop animation

add transparency
format
2023-12-07 21:44:30 +01:00 · 2023-12-07 21:44:21 +01:00 · 2023-12-07 21:44:03 +01:00 · 2023-12-07 21:43:50 +01:00
5 changed files with 41 additions and 33 deletions
--- a/css/common.css
+++ b/css/common.css
@ -41,7 +41,7 @@ body {
        transform: translateY(2px);
    }
 }
-#matrixTable.hard-dropped-table-animation {
+.hard-dropped-table-animation {
    animation: hard-dropped-table-animation .2s;
 }

--- a/css/pop.css
+++ b/css/pop.css
@ -3,6 +3,14 @@ body {
    background-size: cover;
 }

+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
+}
+
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
 .card {
    background-color: rgba(37, 41, 45, 50%);
 }
--- a/index.html
+++ b/index.html
@ -4,20 +4,20 @@
  <head>
    <meta charset="utf-8" />
    <title>Quatuor</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport"     content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="dark">
    <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" id="selectedStyleSheet">
-    <link rel="alternate stylesheet" href="css/classic.css" title="Classique" id="">
+    <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="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="alternate stylesheet" href="css/pop.css"     title="Pop">
+    <link rel="alternate stylesheet" href="css/retro.css"   title="Rétro">
+    <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">
  </head>

@ -63,8 +63,8 @@
                <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/electro.css">Pop</option>
-                  <option value="css/pop.css">Électro</option>
+                  <option value="css/pop.css">Pop</option>
+                  <option value="css/electro.css">Électro</option>
                  <option value="css/retro.css">Rétro</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>
--- a/js/game_logic.js
+++ b/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": {
--- a/js/interface.js
+++ b/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(obj, keyName) {
+        return keyName in obj? obj[keyName] : keyName
+    }
+})
+
 class Settings {
    constructor() {
        this.form = settingsForm
Author	SHA1	Message	Date
adrien	7996e4a7ae	fix hard drop animation	2023-12-07 21:44:30 +01:00
adrien	a0af16d0dd	add transparency	2023-12-07 21:44:21 +01:00
adrien	9547e585ca	format	2023-12-07 21:44:03 +01:00
adrien	4d0d51e20d	move KEY_NAMES to interface.js	2023-12-07 21:43:50 +01:00