From 9fbe9069ece7e51d008d55325aedf9a42bfac4af Mon Sep 17 00:00:00 2001 From: adplantade Date: Mon, 10 Aug 2020 15:55:15 +0200 Subject: [PATCH] en mode "both", le choix des gemmes a un fond comme en jeu --- code/index.css | 40 ++------ code/index.php | 16 ++-- code/options.js | 236 ++++++++++++++++++++++++++---------------------- 3 files changed, 144 insertions(+), 148 deletions(-) diff --git a/code/index.css b/code/index.css index 3dd693f..77ed732 100644 --- a/code/index.css +++ b/code/index.css @@ -45,38 +45,6 @@ -moz-box-shadow:inset 0px 0px 0px 5px black; box-shadow:inset 0px 0px 0px 5px black; } - -.slider { - -webkit-appearance: none; - width: 100%; - height: 15px; - border-radius: 5px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - } - - .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - border-radius: 50%; - background: #4CAF50; - cursor: pointer; - } - - .slider::-moz-range-thumb { - width: 25px; - height: 25px; - border-radius: 50%; - background: #4CAF50; - cursor: pointer; - } - - /* The Modal (background) */ .modal { display: none; /* Hidden by default */ @@ -149,6 +117,14 @@ .slot { display: inline-block; + position: relative; + } + + .gem { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .texte { diff --git a/code/index.php b/code/index.php index c6755b9..41c5769 100644 --- a/code/index.php +++ b/code/index.php @@ -106,14 +106,14 @@
Gemmes à afficher
- - - - - - - - + + + + + + + +
diff --git a/code/options.js b/code/options.js index 73ae3af..68d8db8 100644 --- a/code/options.js +++ b/code/options.js @@ -9,22 +9,22 @@ 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"); + 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 (x), close the modal span.onclick = function() { - modal.style.display = "none"; + 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"; - } + if (event.target == modal) { + modal.style.display = "none"; + } } @@ -37,25 +37,25 @@ document.getElementById("-").width=size/4; function less() { - if(amount > 2) - { - amount--; - } - output.innerHTML = amount; + if(amount > 2) + { + amount--; + } + output.innerHTML = amount; } function more() { - if(amount<8) - { - amount++; - } - output.innerHTML = amount; + 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"); + document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline"); + document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline"); }) function saveOptions() { @@ -75,22 +75,42 @@ 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; +document.getElementById("no_pause").checked=true; else - document.getElementById("yes_pause").checked=true; +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"); + displ=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"); + backgroundBoth(); +} + +function backgroundBoth() +{ + + for(var cpt=1;cpt<9;cpt++) + { + eval("slot"+cpt+".classList."+(displ=="both" ? "add" : "remove")+"('dot')"); + if(displ=="both") + { + eval("slot"+cpt+".style.backgroundColor='"+gemsSelected[cpt-1]+"'"); + eval("gem"+cpt+".width=size/8"); + } + else + { + eval("slot"+cpt+".style.backgroundColor=''"); + eval("gem"+cpt+".width=size/6"); + } + + } } var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"]; @@ -98,81 +118,81 @@ var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8 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+` = 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(); -});`); - + });`); + + 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(); + 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); + 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)); - } + 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=["green","yellow","cyan","red","purple","orange","brown","black"]; @@ -180,20 +200,20 @@ var gemsSelected=[]; for(var cpt=0;cpt<8;cpt++) { - gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1))); + gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1))); } for(var cpt=1;cpt<9;cpt++) { - 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)); + 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; @@ -201,9 +221,9 @@ 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])); - } + for(var cpt=1;cpt<9;cpt++) + { + setCookie("gem"+cpt,"",30); + document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1])); + } } \ No newline at end of file