89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import * as render from "./render.js";
|
|
let debug = true;
|
|
let activeElement, droptimer;
|
|
let dropto = null;
|
|
|
|
const allowDrop = e => {
|
|
if(debug) console.log("dropover");
|
|
e.preventDefault();
|
|
};
|
|
|
|
const dragstart = e => {
|
|
if(debug) console.log("dragstart");
|
|
e.dataTransfer.setData("text", e.target.id);
|
|
activeElement = e.target;
|
|
setTimeout(() => {
|
|
activeElement.style.display = "none";
|
|
}, 100);
|
|
};
|
|
|
|
const dragEnd = e => {
|
|
if(debug) console.log("dragend");
|
|
e.preventDefault();
|
|
if(dropto !== null) {
|
|
const [pstack, , , ppileid] = activeElement.parentNode.id.split("_");
|
|
const [mstack, , , mpileid] = dropto.id.split("_");
|
|
const pile = render.stackables.getID(parseInt(pstack.slice(-1))).pile[ppileid];
|
|
let from = pile.splice(-1)[0];
|
|
let to = render.mainstack[mpileid];
|
|
let last = to[to.length - 1] || { val: 0 };
|
|
|
|
if(from.type === "joker")
|
|
from.val = last.val + 1;
|
|
|
|
(last.val + 1 === from.val ? to : pile).push(from);
|
|
|
|
if(last.val + 1 === 12) {
|
|
console.log(from.val);
|
|
render.mainstack[mpileid] = [];
|
|
console.log(render.mainstack);
|
|
}
|
|
|
|
render.renderAll();
|
|
|
|
//dropto.insertAdjacentHTML("beforeend", `<div class="card_outer" data-val="${activeElement.dataset.val}">${activeElement.innerHTML}</div>`);
|
|
//activeElement.parentNode.removeChild(activeElement);
|
|
}
|
|
activeElement.style.display = "block";
|
|
activeElement = null;
|
|
dragleave(e);
|
|
};
|
|
|
|
const dragenter = e => {
|
|
if(debug) console.log("dragenter");
|
|
e.preventDefault();
|
|
clearTimeout(droptimer);
|
|
e.target.classList.add("over");
|
|
dropto = e.target;
|
|
};
|
|
|
|
const dragleave = e => {
|
|
if(debug) console.log("dragleave");
|
|
e.preventDefault();
|
|
removeOver();
|
|
droptimer = setTimeout(() => {
|
|
dropto = null;
|
|
}, 100);
|
|
};
|
|
|
|
const removeOver = () => {
|
|
document.querySelectorAll("div[dropable='true']").forEach(slot => {
|
|
slot.classList.remove("over");
|
|
});
|
|
};
|
|
|
|
document.querySelectorAll("div[dropable='true']").forEach(slot => {
|
|
slot.addEventListener("dragover", allowDrop);
|
|
slot.addEventListener("dragenter", dragenter);
|
|
slot.addEventListener("dragleave", dragleave);
|
|
});
|
|
|
|
export default ({
|
|
createCardEvents: () => {
|
|
document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
|
|
card.addEventListener("dragstart", dragstart);
|
|
card.addEventListener("dragend", dragEnd);
|
|
});
|
|
}
|
|
});
|