From 40576ad1a05f02f43e927b49d2f0c7fd73a99b53 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 24 Apr 2023 02:24:30 +0200
Subject: [PATCH] buffer zone

---
 css/common.css |  6 ++--
 index.html     | 94 +++++++++++++++++++++++++-------------------------
 2 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/css/common.css b/css/common.css
index 8c6ffcc..cd15b6b 100644
--- a/css/common.css
+++ b/css/common.css
@@ -24,7 +24,7 @@ body {
 }
 
 #matrixTable {
-    margin-top: calc(-1 * var(--no-bordered-rows) * var(--cell-side));
+    margin-top: calc(-1 * var(--buffer-zoneed-rows) * var(--cell-side));
 }
 
 @keyframes hard-dropped-table-animation {
@@ -43,12 +43,12 @@ body {
     animation: hard-dropped-table-animation .2s;
 }
 
-tr.no-border td:not(.mino) {
+tr.buffer-zone td:not(.mino) {
     border-width: 0;
     padding: 4px;
 }
 
-tr.border td:not(.mino) {
+tr.matrix td:not(.mino) {
     border: 1px solid #333;
     padding: 3px;
 }
diff --git a/index.html b/index.html
index c5153a8..ffe3e15 100644
--- a/index.html
+++ b/index.html
@@ -113,11 +113,11 @@
             <div class="card-header text-center"><strong>HOLD</strong></div>
             <div class="card-body p-0">
               <table id="holdTable" class="minoes-table">
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><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>
+                <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>
               </table>
           </div>
         </div>
@@ -133,32 +133,32 @@
         </div>
         <div class="col">
           <div class="card">
-            <table id="matrixTable" class="minoes-table" style="--no-bordered-rows: 6">
-              <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-              <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <table id="matrixTable" class="minoes-table" style="--buffer-zoneed-rows: 6">
+              <tr class="buffer-zone"><td></td><td></td><td></td><td></td><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><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><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><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><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+              <tr class="matrix"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
             </table>
           </div>
           <span id="messagesSpan"></span>
@@ -168,22 +168,22 @@
             <div class="card-header text-center"><strong>NEXT</strong></div>
             <div class="card-body p-0">
               <table id="nextTable" class="minoes-table caption-top">
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-                <tr class="no-border"><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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
               </table>
             </div>
         </div>