correction de l'affichage du mode "both" dans les options

master
adplantade 5 years ago
parent 2383483c05
commit 7dd7fbbd9a

@ -8,6 +8,8 @@ var modeSelected;
var diffSelected;
var pauseSelected;
var selectedTheme="selectedDay";
var btn_options=document.getElementById("btn_options");
btn_options.width=size/2;
@ -23,9 +25,9 @@ modes.forEach(element => {
{
disp(e);
modes.forEach(element => {
document.getElementById("img_"+element).classList.remove("selected");
document.getElementById("img_"+element).classList.remove(selectedTheme);
})
document.getElementById(e.currentTarget.id).classList.add("selected");
document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
});
var tab=document.getElementById(element).children;
@ -39,12 +41,12 @@ modes.forEach(element => {
var tabChilds=document.getElementById(tab.item(cpt).id).children;
for(var cptChild=1;cptChild<tabChilds.length;cptChild+=2)
{
tabChilds.item(cptChild).children[0].classList.remove("selected");
tabChilds.item(cptChild).children[0].classList.remove(selectedTheme);
}
}
modeSelected= e.currentTarget.id.substring(4,e.currentTarget.id.length);
document.getElementById(e.currentTarget.id).classList.add("selected");
document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
{
document.getElementById(modeSelected).checked=true;
@ -64,9 +66,9 @@ diffs.forEach(element => {
var tab=document.getElementById("diff").children;
for(var cpt=1;cpt<tab.length;cpt+=2)
{
tab.item(cpt).children[0].classList.remove("selected");
tab.item(cpt).children[0].classList.remove(selectedTheme);
}
document.getElementById(e.currentTarget.id).classList.add("selected");
document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
{
document.getElementById(diffSelected).checked=true;
@ -84,9 +86,9 @@ pauses.forEach(element => {
var tab=document.getElementById("diff").children;
for(var cpt=1;cpt<tab.length;cpt+=2)
{
tab.item(cpt).children[0].classList.remove("selected");
tab.item(cpt).children[0].classList.remove(selectedTheme);
}
document.getElementById(e.currentTarget.id).classList.add("selected");
document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
{
console.log("pause "+pauseSelected);
@ -151,6 +153,7 @@ function hideAll()
function play()
{
var pseudo = (getCookie("pseudo")=="" ? prompt("Saisissez votre pseudo", '') : getCookie("pseudo"));
setCookie("pause",(document.getElementById("pause_1").checked ? "1" : "0"),30);
if(pseudo!="")
{
setCookie("pseudo",pseudo,30);
@ -168,10 +171,10 @@ if(document.getElementById("diffSel")!=null)
gameSelected = (modeSelected.includes("s") ? "survie" : (modeSelected.includes("p") ? "points" : "temps"));
disp(gameSelected, true);
document.getElementById("img_"+diffSelected).classList.add("selected");
document.getElementById("img_"+gameSelected).classList.add("selected");
document.getElementById("img_"+modeSelected).classList.add("selected");
document.getElementById("img_pause_"+pauseSelected).classList.add("selected");
document.getElementById("img_"+diffSelected).classList.add(selectedTheme);
document.getElementById("img_"+gameSelected).classList.add(selectedTheme);
document.getElementById("img_"+modeSelected).classList.add(selectedTheme);
document.getElementById("img_pause_"+pauseSelected).classList.add(selectedTheme);
document.getElementById(diffSelected).checked=true;
document.getElementById(modeSelected).checked=true;
@ -188,10 +191,10 @@ else
document.getElementById(diffSelected).checked=true;
document.getElementById(modeSelected).checked=true;
document.getElementById("pause_"+pauseSelected).checked=true;
document.getElementById("img_points").classList.add("selected");
document.getElementById("img_5p").classList.add("selected");
document.getElementById("img_easy").classList.add("selected");
document.getElementById("img_pause_1").classList.add("selected");
document.getElementById("img_points").classList.add(selectedTheme);
document.getElementById("img_5p").classList.add(selectedTheme);
document.getElementById("img_easy").classList.add(selectedTheme);
document.getElementById("img_pause_1").classList.add(selectedTheme);
}
for(var cpt=1;cpt<9;cpt++)
@ -205,7 +208,6 @@ for(var cpt=1;cpt<9;cpt++)
function dispDots()
{
var amountI = parseInt(amount);
console.log(displ);
if(displ=="points")
{
for(var cpt=1;cpt<9;cpt++)

@ -40,11 +40,17 @@
padding: 2px;
}
.selected {
.selectedDay {
-webkit-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;
}
.selectedNight {
-webkit-box-shadow:inset 0px 0px 0px 5px #eee;
-moz-box-shadow:inset 0px 0px 0px 5px #eee;
box-shadow:inset 0px 0px 0px 5px #eee;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */

@ -199,7 +199,6 @@ if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]
</div>
</div>
<div id="gems_picker">
<div class="texte">Gemmes à afficher</div>
<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)"/>
@ -209,14 +208,15 @@ if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]
<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>
<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>
<p class="texte">Gemmes à afficher</p>
<span id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot3" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot4" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot5" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot6" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot7" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<span id="slot8" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
<img id="resetGems2" onClick="resetGems()" src="ress/reset"/>
</div>
</div>

@ -114,13 +114,29 @@ for(var cpt=1;cpt<9;cpt++)
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);
colorBake();
pickr`+cpt+`.hide();
dispDots();
});`);
}
function colorBake()
{
for(var cpt=1;cpt<9;cpt++)
{
setCookie("color_"+cpt,eval("pickr"+cpt+".getColor().toHEXA().toString()"),30);
}
}
function gemBake()
{
for(var cpt=1;cpt<9;cpt++)
{
setCookie("gem"+cpt,eval("gem"+cpt).src.substring(document.getElementById("gem"+cpt).src.search("/ress")+6),30);
}
}
function allowDrop(ev) {
ev.preventDefault();
}
@ -141,10 +157,25 @@ function drop(ev) {
[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);
if(displ=="both")
{/*
var target = document.getElementById("slot"+dragFrom.id.substring(4));
target.style.backgroundColor=target.children[0].src.substring(target.children[0].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);
target = document.getElementById("slot"+ev.currentTarget.id.substring(4));
target.style.backgroundColor=target.children[0].src.substring(target.children[0].src.search("/ress")+6);*/
applyBackgrounds();
}
gemBake();
}
}
function applyBackgrounds()
{
for(var cpt=1;cpt<9;cpt++)
{
var target = document.getElementById("slot"+cpt);
target.style.backgroundColor=target.children[0].src.substring(target.children[0].src.search("/ress")+6);
}
}
@ -179,4 +210,8 @@ function resetGems()
setCookie("gem"+cpt,"",30);
document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
}
if(displ=="both")
{
applyBackgrounds();
}
}

@ -20,6 +20,8 @@ if(document.getElementById("canvasR")!=null)
document.getElementById("canvasR").style.display="none";
document.getElementById("reserveText").style.display="none";
}
if(document.getElementById("canvasTotal")!=null)
{
if (get['mode'].includes('p'))
{
objPts=get['mode'].substring(0,get['mode'].length-1);
@ -37,6 +39,8 @@ else if(get['mode'].includes('s'))
tpsRem=[0,1,0];
document.getElementById("chronotime").style.display="none";
}
}
difficulty=get["diff"];
console.log("difficulté = "+difficulty+" mode:"+get['mode']);

@ -1,4 +1,5 @@
var light= (getCookie("light")=="" ? true : getCookie("light"));
selectedTheme = "selected"+(light=="true" ? "Day" : "Night");
document.getElementById("light").width=size/4;
@ -34,6 +35,17 @@ function applyLight(li) {
document.getElementsByTagName("body")[0].classList.add((li=="true" ? "day" : "night"));
document.getElementsByTagName("body")[0].classList.remove((li=="true" ? "night" : "day"));
var all = document.getElementsByClassName('selected'+(li!="true" ? "Day" : "Night"));
console.log('selected'+(li=="true" ? "Day" : "Night"));
selectedTheme = "selected"+(li=="true" ? "Day" : "Night");
for (var cpt = 0; cpt < all.length; cpt++) {
var el=all[cpt];
el.classList.remove('selected'+(li!="true" ? "Day" : "Night"));
el.classList.add('selected'+(li=="true" ? "Day" : "Night"));
console.log(el.id+ " : " + el.classList);
}
}
applyLight(light);
Loading…
Cancel
Save