drag center fix

Kacperacy · Sep 16, 2023 · 175c273 · 175c273
1 parent aca7c46
commit 175c273
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/board/Pieces.vue b/src/components/board/Pieces.vue
@@ -56,17 +56,18 @@ function move(e: MouseEvent) {
   if (props.board == null) return;
   if (draggedElement.value == null) return;
 
-  var board = props.board.getBoundingClientRect();
+  let board = props.board.getBoundingClientRect();
 
   if (
     e.clientX > board.left &&
     e.clientX < board.right &&
     e.clientY > board.top &&
     e.clientY < board.bottom
   ) {
+    let pieceSize = draggedElement.value.getBoundingClientRect().width / 2;
     draggedElement.value.style.transform = `translate(${
-      e.clientX - board.left - 75 + window.scrollX + "px" // 50 is half of the piece size (100px)
-    }, ${e.clientY - board.top - 75 + window.scrollY + "px"})`;
+      e.clientX - board.left - pieceSize + window.scrollX + "px"
+    }, ${e.clientY - board.top - pieceSize + window.scrollY + "px"})`;
   }
 }
 

diff --git a/src/views/Game.vue b/src/views/Game.vue
@@ -74,13 +74,13 @@ function tryMove(e: MouseEvent) {
     <a
       href="https://github.com/Kacperacy/Chess"
       target="_blank"
-      class="text-3xl mb-5 mt-2 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 hover:text-[color:#333]"
+      class="text-3xl mt-2 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 hover:text-[color:#333]"
       ><font-awesome-icon :icon="['fab', 'github']" class="mr-2" />REPO</a
     >
     <a
       href="https://github.com/Kacperacy/Chess/issues/new?assignees=&labels=&projects=&template=bug_report.md&title="
       target="_blank"
-      class="text-2xl mb-5 mt-2 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 hover:text-[color:#333]"
+      class="text-2xl mt-2 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 hover:text-[color:#333]"
       ><font-awesome-icon :icon="['fas', 'bug']" class="text-3xl mr-2" />Report
       bug</a
     >