wip

resources/js/dragndrop-store.js

@@ -0,0 +1,44 @@
+document.addEventListener("alpine:init", () => {
+    Alpine.store("main", {
+        attack: true,
+        midfield: true,
+        defence: true,
+        goalkeeper: true,
+        players: [],
+        groups: [],
+        toggleAttack() {
+            this.attack = !this.attack;
+            // Loop through them and add Tailwind's invisible class
+            elements.forEach((el) => el.classList.add("invisible"));
+        },
+        console(index) {
+            console.log(this.players[index].player_id);
+            var p = this.players[index].player_id;
+        },
+        loadPlayer(data) {
+            this.players = data;
+        },
+        setPosGroup(group) {
+            this.groups = group;
+            console.log(this.groups, group);
+        },
+        hasVisible(type) {
+            console.log(type);
+            return true;
+        },
+        toggleType(toggleStates) {
+            var toggleState = toggleStates;
+            // var toggleState = JSON.parse(mode);
+            // this.visa = toggleState[0].data.status;
+            // console.log(this.visabilities);
+        },
+        findByPlayerId(player_id) {
+            const index = this.items.findIndex(
+                (item) => item.player_id === player_id,
+            );
+            if (index > -1) {
+                return item;
+            }
+        },
+    });
+});

resources/js/dragndrop.js

@@ -1,69 +0,0 @@
-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}`);
-            }
-        },
-    },
-});
-
-function toggle_type(mode) {
-    console.log(mode);
-}
-
-
-document.addEventListener("alpine:init", () => {
-    Alpine.store("main", {
-        players: [],
-        console(index) {
-            console.log(this.players[index]);
-        },
-        loadPlayer(data) {
-            this.players = data;
-        }
-    });
-});

resources/js/filament-dragula.js

@@ -0,0 +1,6 @@
+import dragula from "dragula";
+import "dragula/dist/dragula.css";
+
+document.addEventListener("alpine:init", () => {
+    window.dragula = dragula;
+});