skipbo/src/static/js/events.js

import * as render from "./render.js";
let debug = true;
let activeElement, droptimer;
let dropto = null;
let log = document.querySelector("#log");

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, ptype, , ppileid] = activeElement.parentNode.id.split("_");
    const [mstack, , , mpileid] = dropto.id.split("_");
    const pile = render.stackables.getID(parseInt(pstack.slice(-1)))[ptype][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)
      render.mainstack[mpileid].length = 0; // clear stack

    log.innerHTML += `from: ${pstack}_${ptype}_${ppileid} (${from.val}) to: ${mstack}_slot_${mpileid} (${last.val})\n`;
    log.scrollTop = log.scrollHeight;
    
    render.render(render.stackables.getName(parseInt(pstack.slice(-1))));
    render.renderMain();
  }
  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();
  document.querySelectorAll("div[dropable='true']").forEach(slot => slot.classList.remove("over"));
  droptimer = setTimeout(() => dropto = null, 100);
};

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);
    });
  }
});