onthedots/code/options.js

// Get the modal
var modal = document.getElementById("optionsModal");

// Get the button that opens the modal
var btn = document.getElementById("btn_options");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
  document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
  document.getElementById(getCookie("displayMode")+"_di").classList.add("selected");
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


var output = document.getElementById("dotsNumber");
var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
output.innerHTML = amount;

document.getElementById("+").width=size/4;
document.getElementById("-").width=size/4;

function less()
{
  if(amount > 2)
  {
    amount--;
  }
  output.innerHTML = amount;
}

function more()
{
  if(amount<8)
  {
    amount++;
  }
  output.innerHTML = amount;
}

document.getElementById("displays").addEventListener("click", function(){
  document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
  document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
})

function saveOptions() {
    setCookie("dotsAmount",amount,30);
    setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
    modal.style.display = "none";
}

//initialisation des valeurs des préférences

document.getElementById("gems_di").width=size/6;
document.getElementById("points_di").style.height=size/6;
document.getElementById("points_di").style.width=size/6;
document.getElementById("both_di").style.height=size/6;
document.getElementById("both_di").style.width=size/6;
document.getElementById("both_di").style.backgroundSize=size/8+"px";
document.getElementById("btn_confirm").width=size/4;

if(getCookie("pause")!=1)
  document.getElementById("no_pause").checked=true;
else
  document.getElementById("yes_pause").checked=true;

var displ=getCookie("displayMode");

function selectDisplay(e)
{
  displ=e;
  console.log(e);
  setCookie("displayMode",e,30);
  console.log("cookie "+getCookie("displayMode"));
  document.getElementById("points_di").classList.remove("selected");
  document.getElementById("gems_di").classList.remove("selected");
  document.getElementById("both_di").classList.remove("selected");
  document.getElementById(e+"_di").classList.add("selected");
}

var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];


for(var cpt=1;cpt<9;cpt++)
{
  eval('pickr'+cpt+` = Pickr.create({
    el: '.col`+cpt+`',
    theme: 'monolith',
    default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
    useAsButton: true,

    swatches:["red","yellow","green","purple","black","brown","cyan","orange"],
  
    components: {
  
        // Main components
        preview: true,
        hue: true,
  
        // Input / output Options
        interaction: {
            hex: true,
            input: true,
            clear: true,
            save: true
        }
    }
  });`);
  
  eval("pickr"+cpt+`.on('init', function() {
    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
  }).on('save', function () {
    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
    setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
    pickr`+cpt+`.hide();
});`);

}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  dragFrom=ev.currentTarget.parentElement;
  //console.log("je prends de "+ev.dataTransfer.getData("text") + " et "+ ev.currentTarget.parentElement.id);
}

var dragFrom;

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var color;
  //console.log("je lâche sur "+ev.target.id + " et "+dragFrom.hasChildNodes() + "|"+ev.currentTarget.id);
  /*
  if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV")
  {
    ev.target.appendChild(document.getElementById(data));
    //gemsSelected[ev.target.id.substring(4)-1]=document.getElementById(data)
    
    //console.log(data + " | " + ev.target.id + " | " + document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6));

    color=document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6);
    gemsSelected[ev.target.id.substring(4)-1]=color;
    console.log(gemsSelected);
  }
  else */
  if(dragFrom.hasChildNodes() && ev.currentTarget.hasChildNodes() && dragFrom!=ev.currentTarget)
  {
    [gemsSelected[dragFrom.id.substring(4)-1],gemsSelected[ev.currentTarget.id.substring(4)-1]]=[gemsSelected[ev.currentTarget.id.substring(4)-1],gemsSelected[dragFrom.id.substring(4)-1]];
    dragFrom.appendChild(ev.currentTarget.firstChild);
    ev.currentTarget.appendChild(dragFrom.firstChild);
    //console.log(ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6) + "|"+dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6));

    setCookie("gem"+ev.currentTarget.id.substring(4),ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
    setCookie("gem"+dragFrom.id.substring(4),dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
    //console.log(dragFrom.id.substring(4)+"/"+ev.currentTarget.id.substring(4));
  }
}

var gemsAvailable=["red","yellow","green","purple","black","brown","cyan","orange"];
var gemsSelected=[];

for(var cpt=0;cpt<8;cpt++)
{
  gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1)));
  console.log(gemsSelected[cpt]);
}

for(var cpt=1;cpt<9;cpt++)
{
  console.log("disp : "+gemsSelected[cpt-1]);
  eval("var gemIcon_"+gemsSelected[cpt-1]+"=document.getElementById('gem"+cpt+"')");
  eval('gemIcon_'+gemsSelected[cpt-1]+'.src="ress/'+gemsSelected[cpt-1]+'"');
  eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6');

  eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')");
  eval("slot"+cpt+".style.width=size/6");
  eval("slot"+cpt+".style.height=size/6");

  document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt));
}

//document.getElementById("resetGems").width=size/2;
document.getElementById("resetGems2").width=size/4;

function resetGems()
{
  for(var cpt=1;cpt<9;cpt++)
  {
    setCookie("gem"+cpt,"",30);
    document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
  }
}