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