Les couleurs en jeu sont aléatoires

5 years ago · 282db1b4a1
parent 1c806ffa0c
commit 282db1b4a1
14 changed files with 715 additions and 569 deletions
--- a/code/button_displayer.js
+++ b/code/button_displayer.js
@ -6,6 +6,9 @@ hideAll();
 var modeSelected=null;
 var diffSelected=null;

+var btn_options=document.getElementById("btn_options");
+btn_options.width=size;
+
 modes.forEach(element => {
    eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
    eval("btn_"+element+".width=size");
@ -71,5 +74,5 @@ function hideAll()

 function play()
 {
-    //window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo"));
+    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo"));
 }
--- a/code/game.css
+++ b/code/game.css
@ -92,6 +92,7 @@
    -webkit-box-shadow:inset 0px 0px 0px 5px blue;
    -moz-box-shadow:inset 0px 0px 0px 5px blue;
    box-shadow:inset 0px 0px 0px 5px blue;
+    
  }

  .stats {
--- a/code/index.css
+++ b/code/index.css
@ -18,3 +18,73 @@
    -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 */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content */
+  .modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+  }
+  
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
--- a/code/index.html
+++ b/code/index.html
@ -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&eacute;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 &eacute;coul&eacute;. 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>
--- a/code/index.php
+++ b/code/index.php
@ -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&eacute;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 &eacute;coul&eacute;. 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">&times;</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>
--- a/code/options.js
+++ b/code/options.js
@ -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;
+}
--- a/code/ress/material_10.png
+++ b/code/ress/material_10.png
--- a/code/ress/brown.png
+++ b/code/ress/brown.png
--- a/code/ress/cyan.png
+++ b/code/ress/cyan.png
--- a/code/ress/gear.png
+++ b/code/ress/gear.png
--- a/code/ress/lightblue.png
+++ b/code/ress/lightblue.png
--- a/code/ress/material_11.png
+++ b/code/ress/material_11.png
--- a/code/ress/orange.png
+++ b/code/ress/orange.png
--- a/code/vitraux.js
+++ b/code/vitraux.js