wip player app

resources/js/bootstrap.js

@@ -1,4 +1,5 @@
-import axios from 'axios';
+import axios from "axios";
+
 window.axios = axios;
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

resources/js/dragndrop.js

@@ -0,0 +1,52 @@
+interact(".piece").draggable({
+    modifiers: [
+        interact.modifiers.snap({
+            targets: [
+                // 1. Match the grid to your square sizes (50px x 50px)
+                interact.snappers.grid({ x: 104, y: 104 }),
+            ],
+            range: Infinity,
+            // 2. Snap by the top-left corner (0,0) of the piece to align with square borders
+            relativePoints: [{ x: 0, y: 0 }],
+            // 3. Keep the element constrained within the 400x400 board boundaries
+            offset: "parent",
+        }),
+        interact.modifiers.restrictRect({
+            restriction: "parent",
+            endOnly: false,
+        }),
+    ],
+
+    listeners: {
+        move(event) {
+            const target = event.target;
+            const x =
+                (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
+            const y =
+                (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+
+            console.log("console", x, y);
+
+            target.style.transform = `translate(${x}px, ${y}px)`;
+
+            target.setAttribute("data-x", x);
+            target.setAttribute("data-y", y);
+        },
+        end(event) {
+            // Optional: Calculate and log the final algebraic notation (e.g., e4, a1)
+            const target = event.target;
+            const currentX =
+                (parseFloat(target.getAttribute("data-x")) || 0) + 200; // Adding initial left offset
+            const currentY =
+                (parseFloat(target.getAttribute("data-y")) || 0) + 200; // Adding initial top offset
+
+            const files = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "k"];
+            const fileIndex = Math.floor(currentX / 50);
+            const rankIndex = 8 - Math.floor(currentY / 50);
+
+            if (files[fileIndex] && rankIndex >= 1 && rankIndex <= 8) {
+                console.log(`Piece landed on: ${files[fileIndex]}${rankIndex}`);
+            }
+        },
+    },
+});