ajout de boutons de modes fonctionnels

upgrade-menu
non 5 years ago
parent ebab13a8a0
commit 93e9a17073

@ -1,21 +1,44 @@
var modes=["points","temps","survie"]; var modes=["points","temps","survie"];
var diffs=["easy","med","hard"];
var div=document.getElementById('buttons'); var div=document.getElementById('buttons');
size=screen.height/6;
hideAll();
var modeSelected;
var diffSelected;
modes.forEach(element => { modes.forEach(element => {
var name=element+"Button"; eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
eval("btn_"+element+".width=size");
eval("btn_"+element).addEventListener("mousedown",function(e){disp(e);});
var tab=document.getElementById(element).children;
for(var i=0;i<tab.length;i++){
tab.item(i).width=size;
tab.item(i).addEventListener("mousedown",function(e){modeSelected= e.currentTarget.id;});
}
});
eval("var "+name+"= new Image()"); diffs.forEach(element => {
/* eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
console.log(name+".src='./ress/button_mode_"+element+".png'"); console.log("btn_"+element+".width=size");
eval(name+".src='./ress/button_mode_"+element+".png'"); eval("btn_"+element+".width=size");
*/ eval("btn_"+element).addEventListener("mousedown",function(e){diffSelected=e.currentTarget.id;});
console.log("<img src='"+"./ress/button_mode_"+element+".png'"+"/>"); })
div.innerHTML+="<img id="+name+" src='./ress/button_mode_"+element+".png'/>"; function disp(what)
/* {
eval(name).onload = function(){ what=what.currentTarget.id.substring(4);
div.innerHTML+="<img src='./ress/button_mode_"+element+".png'/>"; modes.forEach(element => {
}*/ document.getElementById(element).style.display=what==element ? "flex":"none";
})
}
//eval(name).src="./ress/button_mode_"+element+".png"; function hideAll()
eval(name).addEventListener("mousedown",function(e){console.log("yo");}); {
}); document.getElementById("temps").style.display="none";
document.getElementById("points").style.display="none";
}
function play()
{
window.location.replace("./game.html?mode="+modeSelected+"&diff=easy");
}

@ -0,0 +1,10 @@
.all-container {
display : flex;
align-items: baseline;
width : min-content;
/*
margin: 20px;
*/
}

@ -1,36 +1,40 @@
<html> <html>
<head> <head>
On the Dot <title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head> </head>
<body> <body>
<form action="./game.html" method="GET">
Jouer la partie en : </br> Jouer la partie en : </br>
<div id="buttons"></div> <ul id="modes" class="all-container">
<img id="btn_points" src="./ress/button_mode_points.png"/>
<img id="btn_temps" src="./ress/button_mode_temps.png"/>
<img id="btn_survie" src="./ress/button_mode_survie.png"/>
</ul>
<ul id="points" class="all-container">
<img id="5p" src="./ress/button_points_5.png"/>
<img id="10p" src="./ress/button_points_10.png"/>
<img id="15p" src="./ress/button_points_15.png"/>
<img id="20p" src="./ress/button_points_20.png"/>
</ul>
<ul id="temps" class="all-container">
<img id="5m" src="./ress/button_temps_5.png"/>
<img id="10m" src="./ress/button_temps_10.png"/>
</ul>
<ul id="diff" class="all-container">
<img id="btn_easy" src="./ress/button_diff_easy.png"/>
<img id="btn_med" src="./ress/button_diff_normal.png"/>
<img id="btn_hard" src="./ress/button_diff_hard.png"/>
</ul>
<button onClick="play()">Jouer ?</button>
<script src="button_displayer.js"></script> <script src="button_displayer.js"></script>
<!-- <!--
<input type="radio" id="5pts" name="mode" value="5p" checked="checked"> <ul id="survie" class="all-container">
<label for="5pts">5 points</label><br> <img id="survie" src="./ress/button_sur.png"/>
<input type="radio" id="10pts" name="mode" value="10p"> </ul> -->
<label for="5pts">10 points</label><br> <form action="./game.html" method="GET">
<input type="radio" id="15pts" name="mode" value="15p">
<label for="5pts">15 points</label><br>
<input type="radio" id="20pts" name="mode" value="20p">
<label for="5pts">20 points</label><br>
<input type="radio" id="5min" name="mode" value="5m">
<label for="5pts">5 minutes</label><br>
<input type="radio" id="10min" name="mode" value="10m">
<label for="5pts">10 minutes</label><br>
<input type="radio" id="survie" name="mode" value="surv">
<label for="5pts">survie</label><br> -->
Choisissez la difficult&eacute; </br>
<input type="radio" id="easy" name="diff" value="easy" checked="checked">
<label for="5pts">facile</label><br>
<input type="radio" id="med" name="diff" value="med">
<label for="5pts">moyen</label><br>
<input type="radio" id="hard" name="diff" value="hard">
<label for="5pts">difficile</label><br>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score): Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
<input type="text" name="pseudo" /> <input type="text" name="pseudo" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

@ -458,7 +458,7 @@ var canvasT = document.getElementById('canvasTotal');
{ {
chronoStop(); chronoStop();
var pts = diff.getSeconds()+ (diff.getMinutes()*60) + ((diff.getHours()-1)*3600); var pts = diff.getSeconds()+ (diff.getMinutes()*60) + ((diff.getHours()-1)*3600);
console.log("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']); //console.log("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
window.location.replace("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']); window.location.replace("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
} }
else if(get['mode']=="surv") else if(get['mode']=="surv")

Loading…
Cancel
Save