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 diffs=["easy","med","hard"];
var div=document.getElementById('buttons');
size=screen.height/6;
hideAll();
var modeSelected;
var diffSelected;
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()");
/*
console.log(name+".src='./ress/button_mode_"+element+".png'");
eval(name+".src='./ress/button_mode_"+element+".png'");
*/
console.log("<img src='"+"./ress/button_mode_"+element+".png'"+"/>");
diffs.forEach(element => {
eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
console.log("btn_"+element+".width=size");
eval("btn_"+element+".width=size");
eval("btn_"+element).addEventListener("mousedown",function(e){diffSelected=e.currentTarget.id;});
})
div.innerHTML+="<img id="+name+" src='./ress/button_mode_"+element+".png'/>";
/*
eval(name).onload = function(){
div.innerHTML+="<img src='./ress/button_mode_"+element+".png'/>";
}*/
function disp(what)
{
what=what.currentTarget.id.substring(4);
modes.forEach(element => {
document.getElementById(element).style.display=what==element ? "flex":"none";
})
}
//eval(name).src="./ress/button_mode_"+element+".png";
eval(name).addEventListener("mousedown",function(e){console.log("yo");});
});
function hideAll()
{
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>
<head>
On the Dot
<title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<form action="./game.html" method="GET">
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>
<!--
<input type="radio" id="5pts" name="mode" value="5p" checked="checked">
<label for="5pts">5 points</label><br>
<input type="radio" id="10pts" name="mode" value="10p">
<label for="5pts">10 points</label><br>
<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>
<ul id="survie" class="all-container">
<img id="survie" src="./ress/button_sur.png"/>
</ul> -->
<form action="./game.html" method="GET">
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
<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();
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']);
}
else if(get['mode']=="surv")

Loading…
Cancel
Save