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

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 {

code/index.php

@@ -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="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 id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
             <div id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

code/options.js

@@ -84,13 +84,33 @@ 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");
+    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"];