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;
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 {

16
code/index.php
Unescape View File

@ -106,14 +106,14 @@
</div>
<div id="gems_picker">
<div class="texte">Gemmes à afficher<br/></div>
<img id="gem1" draggable="true" ondragstart="drag(event)"/>
<img id="gem2" draggable="true" ondragstart="drag(event)"/>
<img id="gem3" draggable="true" ondragstart="drag(event)"/>
<img id="gem4" draggable="true" ondragstart="drag(event)"/>
<img id="gem5" draggable="true" ondragstart="drag(event)"/>
<img id="gem6" draggable="true" ondragstart="drag(event)"/>
<img id="gem7" draggable="true" ondragstart="drag(event)"/>
<img id="gem8" draggable="true" ondragstart="drag(event)"/>
<img id="gem1" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem2" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem3" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem4" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem5" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem6" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem7" class="gem" draggable="true" ondragstart="drag(event)"/>
<img id="gem8" class="gem" draggable="true" ondragstart="drag(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>

236
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
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 <span> (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]));
}
}
Write Preview
Loading…
Cancel
Save