@ -1,49 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>On The Dot</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="index.css"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
Jouer la partie en : </br>
|
|
||||||
<div id="modeSelection">
|
|
||||||
<ul id="modes" class="all-container">
|
|
||||||
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
|
|
||||||
<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
|
|
||||||
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
|
|
||||||
</ul>
|
|
||||||
<ul id="points" class="all-container">
|
|
||||||
<img id="5p" class="button" src="./ress/button_points_5.png"/>
|
|
||||||
<img id="10p" class="button" src="./ress/button_points_10.png"/>
|
|
||||||
<img id="15p" class="button" src="./ress/button_points_15.png"/>
|
|
||||||
<img id="20p" class="button" src="./ress/button_points_20.png"/>
|
|
||||||
</ul>
|
|
||||||
<ul id="temps" class="all-container">
|
|
||||||
<img id="5m" class="button" src="./ress/button_temps_5.png"/>
|
|
||||||
<img id="10m" class="button" src="./ress/button_temps_10.png"/>
|
|
||||||
</ul>
|
|
||||||
<ul id="survie" class="all-container">
|
|
||||||
<img id="surv" class="button" src="./ress/button_mode_survie.png"/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<ul id="diff" class="all-container">
|
|
||||||
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
|
|
||||||
<img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
|
|
||||||
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
Entrez votre pseudo (optionnel, mais nécessaire si vous voulez sauvegarder votre score):
|
|
||||||
<input type="text" id="field_pseudo" />
|
|
||||||
|
|
||||||
<button id="btn_play" onClick="play()" disabled>Jouer ?</button>
|
|
||||||
|
|
||||||
<script src="button_displayer.js"></script>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
|
|
||||||
Partie en temps : la partie finit quand le temps imparti est écoulé. Obtenez le plus de points possible ! </br>
|
|
||||||
Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -0,0 +1,75 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>On The Dot</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="index.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php
|
||||||
|
$database = new SQLite3("data.db");
|
||||||
|
function displayHighscore() {
|
||||||
|
//d
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
Jouer la partie en : </br>
|
||||||
|
<div id="modeSelection">
|
||||||
|
<ul id="modes" class="all-container">
|
||||||
|
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
|
||||||
|
<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
|
||||||
|
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
|
||||||
|
</ul>
|
||||||
|
<ul id="points" class="all-container">
|
||||||
|
<img id="5p" class="button" src="./ress/button_points_5.png"/>
|
||||||
|
<img id="10p" class="button" src="./ress/button_points_10.png"/>
|
||||||
|
<img id="15p" class="button" src="./ress/button_points_15.png"/>
|
||||||
|
<img id="20p" class="button" src="./ress/button_points_20.png"/>
|
||||||
|
</ul>
|
||||||
|
<ul id="temps" class="all-container">
|
||||||
|
<img id="5m" class="button" src="./ress/button_temps_5.png"/>
|
||||||
|
<img id="10m" class="button" src="./ress/button_temps_10.png"/>
|
||||||
|
</ul>
|
||||||
|
<ul id="survie" class="all-container">
|
||||||
|
<img id="surv" class="button" src="./ress/button_mode_survie.png"/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ul id="diff" class="all-container">
|
||||||
|
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
|
||||||
|
<img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
|
||||||
|
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Entrez votre pseudo (optionnel, mais nécessaire si vous voulez sauvegarder votre score):
|
||||||
|
<input type="text" id="field_pseudo" />
|
||||||
|
|
||||||
|
<button id="btn_play" onClick="play()" disabled>Jouer ?</button>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
|
||||||
|
Partie en temps : la partie finit quand le temps imparti est écoulé. Obtenez le plus de points possible ! </br>
|
||||||
|
Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img id="btn_options" src="./ress/gear.png"/>
|
||||||
|
|
||||||
|
<!-- The Modal -->
|
||||||
|
<div id="optionsModal" class="modal">
|
||||||
|
|
||||||
|
<!-- Modal content -->
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<p>Options :</p>
|
||||||
|
<div class="slidecontainer">
|
||||||
|
<input type="range" min="2" max="8" value="4" class="slider" id="range_dots">
|
||||||
|
<p>Nombre de points : <span id="dotsNumber"></span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="button_displayer.js"></script>
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,33 @@
|
|||||||
|
// Get the modal
|
||||||
|
var modal = document.getElementById("optionsModal");
|
||||||
|
|
||||||
|
// Get the button that opens the modal
|
||||||
|
var btn = document.getElementById("btn_options");
|
||||||
|
|
||||||
|
// Get the <span> element that closes the modal
|
||||||
|
var span = document.getElementsByClassName("close")[0];
|
||||||
|
|
||||||
|
// When the user clicks the button, open the modal
|
||||||
|
btn.onclick = function() {
|
||||||
|
modal.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks on <span> (x), close the modal
|
||||||
|
span.onclick = function() {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks anywhere outside of the modal, close it
|
||||||
|
window.onclick = function(event) {
|
||||||
|
if (event.target == modal) {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var slider = document.getElementById("range_dots");
|
||||||
|
var output = document.getElementById("dotsNumber");
|
||||||
|
output.innerHTML = slider.value;
|
||||||
|
|
||||||
|
slider.oninput = function() {
|
||||||
|
output.innerHTML = this.value;
|
||||||
|
}
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 236 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |