69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
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;
|
|
}
|
|
});
|
|
}); |