pascal.lafourcade
/
onthedots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

en mode "both", le choix des gemmes a un fond comme en jeu

Browse Source
master
adplantade 5 years ago
parent 2bbad3c589
commit 9fbe9069ec
3 changed files with 144 additions and 148 deletions
Show Stats Download Patch File Download Diff File

40
code/index.css
Unescape View File

@ -45,38 +45,6 @@
-moz-box-shadow:inset 0px 0px 0px 5px black; -moz-box-shadow:inset 0px 0px 0px 5px black;
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) */ /* The Modal (background) */
.modal { .modal {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
@ -149,6 +117,14 @@
.slot { .slot {
display: inline-block; display: inline-block;
position: relative;
}
.gem {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.texte { .texte {

16
code/index.php
Unescape View File

@ -106,14 +106,14 @@
</div> </div>
<div id="gems_picker"> <div id="gems_picker">
<div class="texte">Gemmes à afficher<br/></div> <div class="texte">Gemmes à afficher<br/></div>
<img id="gem1" draggable="true" ondragstart="drag(event)"/> <img id="gem1" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem2" draggable="true" ondragstart="drag(event)"/> <img id="gem2" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem3" draggable="true" ondragstart="drag(event)"/> <img id="gem3" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem4" draggable="true" ondragstart="drag(event)"/> <img id="gem4" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem5" draggable="true" ondragstart="drag(event)"/> <img id="gem5" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem6" draggable="true" ondragstart="drag(event)"/> <img id="gem6" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem7" draggable="true" ondragstart="drag(event)"/> <img id="gem7" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem8" draggable="true" ondragstart="drag(event)"/> <img id="gem8" class="gem" draggable="true" ondragstart="drag(event)"/>
<div> <div>
<div id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

228
code/options.js
Unescape View File

@ -9,22 +9,22 @@ var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal // When the user clicks the button, open the modal
btn.onclick = function() { btn.onclick = function() {
modal.style.display = "block"; modal.style.display = "block";
document.getElementById("color_pickers").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"); document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
document.getElementById(getCookie("displayMode")+"_di").classList.add("selected"); document.getElementById(getCookie("displayMode")+"_di").classList.add("selected");
} }
// When the user clicks on <span> (x), close the modal // When the user clicks on <span> (x), close the modal
span.onclick = function() { span.onclick = function() {
modal.style.display = "none"; modal.style.display = "none";
} }
// When the user clicks anywhere outside of the modal, close it // When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) { window.onclick = function(event) {
if (event.target == modal) { if (event.target == modal) {
modal.style.display = "none"; modal.style.display = "none";
} }
} }
@ -37,25 +37,25 @@ document.getElementById("-").width=size/4;
function less() function less()
{ {
if(amount > 2) if(amount > 2)
{ {
amount--; amount--;
} }
output.innerHTML = amount; output.innerHTML = amount;
} }
function more() function more()
{ {
if(amount<8) if(amount<8)
{ {
amount++; amount++;
} }
output.innerHTML = amount; output.innerHTML = amount;
} }
document.getElementById("displays").addEventListener("click", function(){ document.getElementById("displays").addEventListener("click", function(){
document.getElementById("color_pickers").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"); document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
}) })
function saveOptions() { function saveOptions() {
@ -75,22 +75,42 @@ document.getElementById("both_di").style.backgroundSize=size/8+"px";
document.getElementById("btn_confirm").width=size/4; document.getElementById("btn_confirm").width=size/4;
if(getCookie("pause")!=1) if(getCookie("pause")!=1)
document.getElementById("no_pause").checked=true; document.getElementById("no_pause").checked=true;
else else
document.getElementById("yes_pause").checked=true; document.getElementById("yes_pause").checked=true;
var displ=getCookie("displayMode"); var displ=getCookie("displayMode");
function selectDisplay(e) function selectDisplay(e)
{ {
displ=e; displ=e;
console.log(e); setCookie("displayMode",e,30);
setCookie("displayMode",e,30); console.log("cookie "+getCookie("displayMode"));
console.log("cookie "+getCookie("displayMode")); document.getElementById("points_di").classList.remove("selected");
document.getElementById("points_di").classList.remove("selected"); document.getElementById("gems_di").classList.remove("selected");
document.getElementById("gems_di").classList.remove("selected"); document.getElementById("both_di").classList.remove("selected");
document.getElementById("both_di").classList.remove("selected"); document.getElementById(e+"_di").classList.add("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"]; 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++) for(var cpt=1;cpt<9;cpt++)
{ {
eval('pickr'+cpt+` = Pickr.create({ eval('pickr'+cpt+` = Pickr.create({
el: '.col`+cpt+`', el: '.col`+cpt+`',
theme: 'monolith', theme: 'monolith',
default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")), default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
useAsButton: true, useAsButton: true,
swatches:["red","yellow","green","purple","black","brown","cyan","orange"], swatches:["red","yellow","green","purple","black","brown","cyan","orange"],
components: { components: {
// Main components // Main components
preview: true, preview: true,
hue: true, hue: true,
// Input / output Options // Input / output Options
interaction: { interaction: {
hex: true, hex: true,
input: true, input: true,
clear: true, clear: true,
save: true save: true
}
} }
} });`);
});`);
eval("pickr"+cpt+`.on('init', function() { eval("pickr"+cpt+`.on('init', function() {
document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString(); document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
}).on('save', function () { }).on('save', function () {
document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString(); document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30); setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
pickr`+cpt+`.hide(); pickr`+cpt+`.hide();
});`); });`);
} }
function allowDrop(ev) { function allowDrop(ev) {
ev.preventDefault(); ev.preventDefault();
} }
function drag(ev) { function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.setData("text", ev.target.id);
dragFrom=ev.currentTarget.parentElement; dragFrom=ev.currentTarget.parentElement;
//console.log("je prends de "+ev.dataTransfer.getData("text") + " et "+ ev.currentTarget.parentElement.id); //console.log("je prends de "+ev.dataTransfer.getData("text") + " et "+ ev.currentTarget.parentElement.id);
} }
var dragFrom; var dragFrom;
function drop(ev) { function drop(ev) {
ev.preventDefault(); ev.preventDefault();
var data = ev.dataTransfer.getData("text"); var data = ev.dataTransfer.getData("text");
var color; var color;
//console.log("je lâche sur "+ev.target.id + " et "+dragFrom.hasChildNodes() + "|"+ev.currentTarget.id); //console.log("je lâche sur "+ev.target.id + " et "+dragFrom.hasChildNodes() + "|"+ev.currentTarget.id);
/* /*
if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV") if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV")
{ {
ev.target.appendChild(document.getElementById(data)); ev.target.appendChild(document.getElementById(data));
//gemsSelected[ev.target.id.substring(4)-1]=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)); //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); color=document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6);
gemsSelected[ev.target.id.substring(4)-1]=color; gemsSelected[ev.target.id.substring(4)-1]=color;
console.log(gemsSelected); console.log(gemsSelected);
} }
else */ else */
if(dragFrom.hasChildNodes() && ev.currentTarget.hasChildNodes() && dragFrom!=ev.currentTarget) 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]]; [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); dragFrom.appendChild(ev.currentTarget.firstChild);
ev.currentTarget.appendChild(dragFrom.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)); //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"+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); 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)); //console.log(dragFrom.id.substring(4)+"/"+ev.currentTarget.id.substring(4));
} }
} }
var gemsAvailable=["green","yellow","cyan","red","purple","orange","brown","black"]; var gemsAvailable=["green","yellow","cyan","red","purple","orange","brown","black"];
@ -180,20 +200,20 @@ var gemsSelected=[];
for(var cpt=0;cpt<8;cpt++) 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++) for(var cpt=1;cpt<9;cpt++)
{ {
eval("var gemIcon_"+gemsSelected[cpt-1]+"=document.getElementById('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]+'.src="ress/'+gemsSelected[cpt-1]+'"');
eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6'); eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6');
eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')"); eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')");
eval("slot"+cpt+".style.width=size/6"); eval("slot"+cpt+".style.width=size/6");
eval("slot"+cpt+".style.height=size/6"); eval("slot"+cpt+".style.height=size/6");
document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt)); document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt));
} }
//document.getElementById("resetGems").width=size/2; //document.getElementById("resetGems").width=size/2;
@ -201,9 +221,9 @@ document.getElementById("resetGems2").width=size/4;
function resetGems() function resetGems()
{ {
for(var cpt=1;cpt<9;cpt++) for(var cpt=1;cpt<9;cpt++)
{ {
setCookie("gem"+cpt,"",30); setCookie("gem"+cpt,"",30);
document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1])); document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
} }
} }
Write Preview
Loading…
Cancel
Save