ajout de début de sélecteur de gemmes

code/index.css

@@ -138,4 +138,9 @@
   .lightButton {
     position: absolute;
     right: 0px;
+  }
+
+  .slot {
+    display: inline-block;
+    border: 1px solid white;
   }

code/index.php

@@ -98,6 +98,26 @@
                 <span id="col8" class="dot col8 pickr"></span>
             </div>
         </div>
+        <div id="gems_picker">
+            <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)"/>
+            <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="slot3" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            <div id="slot4" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            <div id="slot5" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            <div id="slot6" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            <div id="slot7" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            <div id="slot8" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+            </div>
+        </div>
         <div>
             <img src="ress/OK.png" id="btn_confirm" onClick="saveOptions()"/>
         </div>

code/options.js

@@ -122,4 +122,34 @@ for(var cpt=1;cpt<9;cpt++)
     pickr`+cpt+`.hide();
 });`);
 
+}
+
+function allowDrop(ev) {
+  ev.preventDefault();
+}
+
+function drag(ev) {
+  ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop(ev) {
+  ev.preventDefault();
+  var data = ev.dataTransfer.getData("text");
+  if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV")
+  {
+    ev.target.appendChild(document.getElementById(data));
+  }
+}
+
+var gemsAvailable=["red","yellow","green","purple","black","brown","cyan","orange"];
+
+for(var cpt=1;cpt<9;cpt++)
+{
+  eval("var gemIcon"+cpt+"=document.getElementById('gem"+cpt+"')");
+  eval('gemIcon'+cpt+'.src="ress/'+gemsAvailable[cpt-1]+'"');
+  eval('gemIcon'+cpt+'.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");
 }