Merge remote-tracking branch 'origin/master'

.gitignore

 # VIM temp files
 .*.swp
+
+test*

web/api/model/class.categorie.php

 
 	public static function randSelect() {
 		$bdd = new Connector();
-		$arrayCat = $bdd->Select("*", "categorie");
+		$options = array(
+			"order by" => array("rand()"),
+		);
+		$arrayCat = $bdd->Select("*", "categorie", $options);
 		$return = array();
 		$catIndex = -1;
 		$previousIndex = -1;
-		for($i = 0; $i < 2; $i++) {
-			do {
-				$filled = true;
-				$previousIndex = $catIndex;
-				$catIndex = rand(0, sizeof($arrayCat)-1);
-				$category = new Categorie($arrayCat[$catIndex]['nom_cat']);
-				if(sizeof($category->getArray()['themes']) >=2) {
-					foreach($category->getArray()['themes'] as $theme) {
-						if(sizeof($theme['questions']) < 3) {
-							$filled = false;
-						}
+		for($i = 0; $i < sizeof($arrayCat); $i++) {
+			$category = new Categorie($arrayCat[$i]['nom_cat']);
+			if(sizeof($category->getArray()['themes']) >=2) {
+				foreach($category->getArray()['themes'] as $theme) {
+					if(sizeof($theme['questions']) < 3) {
+						array_splice($arrayCat, $i, 1);
 					}
-				} else {
-					$filled = false;
 				}
-			} while(($catIndex == $previousIndex) || !$filled);
-			array_push($return, new Categorie($arrayCat[$catIndex]['nom_cat']));
+			} else {
+				array_splice($arrayCat, $i, 1);
+			}
 		}
+		for($i = 0; $i < 2; $i++) {
+			array_push($return, new Categorie($arrayCat[$i]['nom_cat']));
+		}
+
 		return $return;
 	}
 

web/css/game.css

+section#navbar li.current:last-child #score {
+  display:inline;
+  padding-top:17px;
+  padding-left:30px;
+  padding-right:30px;
+  padding-bottom:18px;
+  background: #ffab19;
+}
+
+section#game input[type="submit"]#play {
+  border:none;
+  background-color:#09b22b;
+  color:white;
+  padding:20px;
+  font-size:170%;
+  cursor:pointer;
+}
+
+section#game {
+  text-align:center;
+}
+
+div#category {
+  font-size:170%;
+  font-family:'Lato';
+  font-weight:300;
+  margin-top:20px;
+}
+
+p#question {
+  font-size:120%;
+}
+
+ul#answers {
+  padding-left:0px;
+}
+
+ul#answers li {
+  display:inline-block;
+  background: #b087ff;
+  width:16%;
+  padding:20px;
+  padding-top:38px;
+  height:42px;
+  font-size:110%;
+  color:white;
+  font-weight:bold;
+  margin-right:20px;
+  line-height: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+ul#answers li.good-answer {
+  background: #57cc6b;
+}
+
+ul#answers li.wrong-answer {
+  background: #cc5757;
+}
+
+h2#score {
+  margin-top: 100px;
+  font-size:220%;
+  margin-bottom:10px;
+}
+
+p#registerScore, p#conDenied {
+  width: 40%;
+  margin: auto;
+}
+
+p.success {
+  padding-top: 30px;
+  background:#57cc6b;
+  padding-bottom: 30px;
+}
+
+p.error {
+  padding-top: 30px;
+  background:#cc5757;
+  padding-bottom: 30px;
+  color:white;
+}
+
+p#conDenied {
+  margin-top:70px;
+}
+
+@media all and (max-width: 799px) {
+  ul#answers li {
+    display:block;
+    margin:auto;
+    margin-bottom:10px;
+    width:80%;
+    padding-top:15px;
+    height: 20px;
+  }
+}
+
+@media all and (min-width: 800px) {
+  ul#answers li:last-child {
+    margin-right:0px;
+  }
+}

web/css/main.css

   background: #fffdc6;
 }
 
+p a, #game a, p a:visited, p a:visited {
+  text-decoration: underline;
+  color:black;
+}
+
 a, a:visited {
   color: white;
   text-decoration: none;
 }
 
+a:active{
+  background:transparent
+}
+
 section#navbar a:hover {
   text-decoration:none;
 }
   padding-bottom: 10px;
 }
 
-section#responsive-navbar img {
-  margin-right:10px;
-  margin-top:8px;
-  float:right;
-  height: 1.3em;
-}
-
 section#responsive-navbar {
   display: none;
   margin-top:0px;
   margin-top:0px;
   list-style-type:none;
   padding-left:0px;
+  width:100%;
+  margin-bottom:0px;
 }
 
 section#responsive-navbar ul li {
 }
 
 section#responsive-navbar ul li a {
+  display:block;
   width:100%;
 }
 
-section#responsive-navbar ul li.play {
+section#responsive-navbar ul li:last-child {
   background: #ff9619;
 }
 
-section#responsive-navbar ul li.play:hover {
+section#responsive-navbar ul li:last-child.current {
+  background: #ffab19;
+}
+
+section#responsive-navbar ul li:last-child:hover {
   background: #ffab19;
 }
 
   background: #9556f9;
 }
 
-section#responsive-navbar ul li:first-child, section#responsive-navbar ul li:first-child:hover {
+section#responsive-navbar ul li:first-child, section#responsive-navbar ul li:first-child:hover, section#responsive-navbar ul li:first-child:active {
   background-color: #7e19ff;
   background-image: url('../assets/burger-menu.png');
   background-size: 25px;
   background: #ff9619;
 }
 
-section#navbar li:last-child:hover a {
+section#navbar li:last-child:hover a, section#navbar li.current:last-child a {
   background: #ffab19;
 }
 
   margin: auto;
 }
 
-section#page h2 {
+h1 {
+  text-align: center;
+  font-size: 400%;
+}
+
+h2 {
   text-align: center;
   font-size: 200%;
 }
   margin:auto;
 }
 
+section#page ol {
+  text-align:center;
+  font-size: 120%;
+}
+
 @media all and (max-width: 799px) {
+  header {
+    background-size: 68%;
+  }
   section#responsive-navbar {
     display: block;
   }

web/index.htm

     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
     <section id="navbar">
       <ul>
-        <li class="current"><a href="#">Accueil</a></li>
-        <li><a href="#">Règles</a></li>
-        <li><a href="#">Meilleurs scores</a></li>
-        <li><a href="#">Jouer</a></li>
+        <li class="current"><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
       </ul>
     </section>
     <section id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
-        <li class="current"><a href="#">Accueil</a></li>
-        <li><a href="#">Règles</a></li>
-        <li><a href="#">Meilleurs scores</a></li>
-        <li class="play"><a href="#">Jouer</a></li>
+        <li class="current"><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
       </ul>
     </section>
     <section id="page">
       <article>
         <h2>Accueil</h2>
-        <p>Skevent dleout danvez biz-yod rumm goz gar tabut bazh mil skrijañ, Menez Du dec'h ehan kreisteiz neud tad eil huanadiñ bed lizherenn. Lies gwinegr c'hoar-gaer. Houlenn Menez Mikael anv koumoul, broust brumenn daoust ha. Ret ki lazhañ dianav gwenn hor beg-douar arabat skubañ ken truez tre kar hon leue droug-mor, chom hennezh hag Bro-saoz. Ma fazi geot kein gwechall, rak mil c'hwezhañ e fri hor kae diwar-benn mousc'hoarzhin mat bloaz plijadur hol kant eost noz dre mae nerzh kaeraat, kenwerzh nec'h hir diriaou c'hoar-gaer, a-benn diwar ar maez derc'hel digor pesketaer dir pri start karrezek. Pegement kontañ giz kluchañ n'eus forzh.</p>
+        <p>Créé dans le cadre du projet de fin d'année de la promo 2018 de CIR2 de l'ISEN Brest/Rennes, le Burger Quizz est une adaptation numérique du jeu télévisé éponyme, plus précisément d'une épreuve spécifique de ce jeu : le "Sel ou Poivre".</p>
+        <p>Dans cette épreuve de rapidité, les joueurs sont confrontés à des jeux de questions correspondant à plusieurs thèmes sur différentes catégories. Pour plus d'informations, consulter la rubrique <a href="rules.htm">"Règles"</a> du site.</p>
       </article>
       <article id="jouer">
         <h2>Jouer</h2>
         <div class="button">
-          <a href="play.htm">
+          <a href="solo.htm">
             <div class="firstword">
               Solo
             </div>
             2 joueurs
           </a>
         </div>
+      </article>
     </section>
   </body>
 </html>

web/js/game.js

 var json, category, theme;
 // Timer
 var timing = 5, secRestantes, timer;
+var questions = 0, currentQuestion = 1;
 var baseWidth;
 
 var score = 0;
 var canClick = true;
 
 function play() {
-  $("#play").remove();
-  $("#multi").remove();
   apiReq();
+  $("#play").remove();
   if(json.status != 1) {
     var message;
     switch(json.source) {
     dataType: 'json',
     success: function(data) {
       json = data;
+      json.cat1.themes.forEach(function(theme) {
+        questions += theme.questions.length;
+      });
+      json.cat2.themes.forEach(function(theme) {
+        questions += theme.questions.length;
+      });
     }
   });
 }
   if(id === 0) category = json.cat1;
   if(id === 1) category = json.cat2;
   console.log(category);
-  $("#game").html("<p id=\"category\">Catégorie : "+category.nom_cat+"</p>");
+  $("#game").html("<div id=\"timer\" style=\"width:100%;height:20px;background:green\"></div>");
+  $("#game").append("<div id=\"category\">Catégorie : "+category.nom_cat+"</div>");
   $("#game").append("<div id=\"theme\"></div>");
-  $("#game").append("<div id=\"timer\" style=\"width:100%;height:20px;background:green\"></div>");
-  $("#game").append("<div id=\"score\">Score : "+score+"</div>");
+  $(".current").html("<div id=\"score\">Score : "+score+" miam</div>");
   loadTheme(id_theme);
 }
 
   theme = category.themes[id];
   $("#theme").html("<p id=\"question\"></p>");
   $("#theme").append("<ul id=\"answers\"><li id=\"rep1\">"+theme.reponse1+"</li>"
-    +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>");
+    +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>"
+    +"<p id=\"question-count\">Question 0/0</p>");
   quest(id_quest);
 }
 
   $("#question").html(theme.questions[id].intitule);
   startTimer();
   bonneReponse = parseInt(theme.questions[id].bonneReponse);
-  console.info('Question ' + (id_quest + 1) + '/' + theme.questions.length + ' : '
+  console.info('Question ' + currentQuestion + '/' + theme.questions.length + ' : '
     +theme.questions[id].intitule);
+  $("#question-count").html("Question "+currentQuestion+"/"+questions);
   if(canClick) {
     $("#rep1").off('click');
     $("#rep1").one("click", function() { reponseUser = 1; checkAnswer(); });
   if(reponseUser == bonneReponse) {
     score += secRestantes+1;
   }
-  $("#score").html("Score : "+score);
+  if(score > 1) {
+    $("#score").html("Score : "+score+" miams");
+  } else {
+    $("#score").html("Score : "+score+" miam");
+  }
   switch(bonneReponse) {
     case 0:   $("#rep1").addClass("wrong-answer");
               $("#rep2").addClass("wrong-answer");
   $("#rep2").removeClass();
   $("#both").removeClass();
   canClick = true;
+  currentQuestion++;
   // Dernière question du thème en cours
   if((id_quest+1) == theme.questions.length)  {
     // Dernier thème de la catégorie en cours
 }
 
 function scoreConfirm() {
-  console.log("qsfd");
-  addScore($("#login").val(), score);
-  var message = json.message;
   $("#registerScore").fadeOut();
-  console.log(message);
-  if(message == "score_add_success") {
-    window.setTimeout(function() {
-      $("#registerScore").addClass("success");
-      $("#registerScore").html("Votre score a bien été enregistré<br />"+
-      "<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
-    }, 400);
-  } else {
-    if(message === "higher_score_present") {
+  if($("#login").val() != "") {
+    addScore($("#login").val(), score);
+    var message = json.message;
+    if(message == "score_add_success") {
       window.setTimeout(function() {
-        $("#registerScore").addClass("error");
-        $("#registerScore").html("Un score supérieur ou égal existe déjà avec ce pseudonyme<br />"
-        +"Essayez avec un autre pseudonyme : <input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
-        +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
-        +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
-        $("#sendScore").on('click', scoreConfirm);
-        $("#login").on('keypress', function(event) {
-          if(event.which == 13) {
-            scoreConfirm();
-          }
-        });
-      }, 400);
-    } else {
-      window.setTimeout(function() {
-        $("#registerScore").addClass("error");
-        $("#registerScore").html("Une erreur est survenue ("+status.message+")<br />"+
+        $("#registerScore").removeClass();
+        $("#registerScore").addClass("success");
+        $("#registerScore").html("Votre score a bien été enregistré.<br />"+
         "<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
       }, 400);
+    } else {
+      if(message === "higher_score_present") {
+        window.setTimeout(function() {
+          $("#registerScore").removeClass();
+          $("#registerScore").addClass("error");
+          $("#registerScore").html("Un score supérieur ou égal existe déjà avec ce pseudonyme.<br />"
+          +"Essayez avec un autre pseudonyme :<br />"
+          +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
+          +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
+          +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
+          $("#sendScore").on('click', scoreConfirm);
+          $("#login").on('keypress', function(event) {
+            if(event.which == 13) {
+              scoreConfirm();
+            }
+          });
+        }, 400);
+      } else {
+        window.setTimeout(function() {
+          $("#registerScore").removeClass();
+          $("#registerScore").addClass("error");
+          $("#registerScore").html("Une erreur est survenue ("+status.message+")<br /> Réessayer :"
+          +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
+          +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
+          +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
+        }, 400);
+      }
     }
+  } else {
+    window.setTimeout(function() {
+      $("#registerScore").removeClass();
+      $("#registerScore").addClass("error");
+      $("#registerScore").html("Merci de renseigner un pseudonyme : <br />"
+      +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
+      +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
+      +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
+      $("#sendScore").on('click', scoreConfirm);
+      $("#login").on('keypress', function(event) {
+        if(event.which == 13) {
+          scoreConfirm();
+        }
+      });
+    }, 400);
   }
   $("#registerScore").fadeIn();
 }

web/js/multi.js

 
 function init() {
 
-    var hostname = $('script')[1]['src'].match(/http:\/\/(.+)\:/)[1];
+    var hostname = $('script')[$('script').length-3]['src'].match(/http:\/\/(.+)\:/)[1];
 
     // Connexion à socket.io
     socket = io.connect('http://'+hostname+':8000');
     // Gestion des evenements
     setEventHandlers();
 
+    window.clearTimeout(refresh);
+
     // On demande le pseudo a l'utilisateur, on l'envoie au serveur et on l'affiche dans le titre
-    $("#game").html("<input type=\"text\" id=\"pseudo\" placeholder=\"Nom ou pseudonyme\" /><input type=\"submit\" id=\"start\" value=\"Valider\" />");
+    $("#game").html("<h2>Jeu multijoueur</h2>"
+    +"<p>Merci de rentrer un nom ou pseudonyme :</p>"
+    +"<input type=\"text\" id=\"pseudo\" placeholder=\"Nom ou pseudonyme\" /><input type=\"submit\" id=\"start\" value=\"Valider\" />");
     $("#start").on("click", function() {
       pseudo = $("#pseudo").val();
       socket.emit('nouveau', pseudo);
 var json, category, theme;
 // Timer
 var timing = 5, secRestantes, timer;
+var nbQuestions = 0, currentQuestion = 1;
 var baseWidth;
 
 var score = 0;
 var canClick = true;
 
-function apiReq() {
-  $.ajax({
-    async: false,
-    url: "../../api/",
-    dataType: 'json',
-    success: function(data) {
-      json = data;
-    }
-  });
-}
-
 function loadCat(id) {
   if(id === 0) category = json.cat1;
   if(id === 1) category = json.cat2;
   console.log(category);
-  $("#game").html("<p id=\"category\">Catégorie : "+category.nom_cat+"</p>");
+  $("#game").html("<div id=\"timer\" style=\"width:100%;height:20px;background:green\"></div>");
+  $("#game").append("<div id=\"category\">Catégorie : "+category.nom_cat+"</div>");
   $("#game").append("<div id=\"theme\"></div>");
-  $("#game").append("<div id=\"timer\" style=\"width:100%;height:20px;background:green\"></div>");
-  $("#game").append("<div id=\"score\"></div>");
+  $(".current").html("<div id=\"score\">Score : "+score+" miam</div>");
   loadTheme(id_theme);
 }
 
   theme = category.themes[id];
   $("#theme").html("<p id=\"question\"></p>");
   $("#theme").append("<ul id=\"answers\"><li id=\"rep1\">"+theme.reponse1+"</li>"
-    +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>");
+    +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>"
+    +"<p id=\"question-count\">Question 0/0</p>");
   quest(id_quest);
 }
 
   $("#question").html(theme.questions[id].intitule);
   startTimer();
   bonneReponse = parseInt(theme.questions[id].bonneReponse);
-  console.info('Question ' + (id_quest + 1) + '/' + theme.questions.length + ' : '
+  console.info('Question ' + currentQuestion + '/' + theme.questions.length + ' : '
     +theme.questions[id].intitule);
+  $("#question-count").html("Question "+currentQuestion+"/"+nbQuestions);
   if(canClick) {
     $("#rep1").off('click');
     $("#rep1").one("click", function() { reponseUser = 1; checkAnswer(); socket.emit('nextQuestion'); });
   if(reponseUser == bonneReponse) {
     score += secRestantes+1;
   }
-  $("#score").html("Score : "+score);
+  if(score > 1) {
+    $("#score").html("Score : "+score+" miams");
+  } else {
+    $("#score").html("Score : "+score+" miam");
+  }
   switch(bonneReponse) {
     case 0:   $("#rep1").addClass("wrong-answer");
               $("#rep2").addClass("wrong-answer");
   $("#rep2").removeClass();
   $("#both").removeClass();
   canClick = true;
+  currentQuestion++;
   // Dernière question du thème en cours
   if((id_quest+1) == theme.questions.length)  {
     // Dernier thème de la catégorie en cours
 
 function play(questions) {
   json = questions;
+
+  json.cat1.themes.forEach(function(theme) {
+    nbQuestions += theme.questions.length;
+  });
+  json.cat2.themes.forEach(function(theme) {
+    nbQuestions += theme.questions.length;
+  });
+
   loadCat(id_cat);
 }
 
 
 function endGame() {
   stopTimer();
-  $("#game").html("<h2 id=\"score\">Vous avez marqué "+score+" miams</h2>"
-  +"<p id=\"registerScore\">");
+  var str = "<h2 id=\"score\">Vous avez marqué "+score+" miams</h2>"
+    +"<p id=\"registerScore\">";
   if(disconnect) {
-    $("#game").append(gameInfos[0]+" s'est déconnecté.");
+    str += gameInfos[0]+" s'est déconnecté.";
+    stopTimer();
   } else {
-    $("#game").append("Votre adversaire a marqué "+scoreAdversaire+" miams.<br />Le gagnant est... ");
+    str += "Votre adversaire a marqué "+scoreAdversaire+" miams.<br />Le gagnant est... ";
     if(score > scoreAdversaire) {
-      $("#game").append(pseudo+" (vous).");
+      str += pseudo+" (vous).";
     } else if(score < scoreAdversaire) {
-      $("#game").append(gameInfos[0]+".");
+      str += gameInfos[0]+".";
     } else {
-      $("#game").append("personne (égalité).");
+      str += "personne (égalité).";
     }
   }
-  $("#game").append("</p>");
+  $("#game").html(str+"</p>");
 }
 
 function addScore(userLogin, userScore) {

web/multi.php

-<!DOCTYPE html>
+<!doctype html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>Burger</title>
-        <style type="text/css">
-          .good-answer {
-            color:green;
-          }
-          .wrong-answer {
-            color:red;
-          }
-        </style>
-    </head>
-    <body>
-        <div id="game">
-          Connexion au serveur...
-        </div>
-        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
-        <?php
-          $params = file_get_contents("./params.cfg");
-    		  preg_match_all('/node_host\: (.+)/', $params, $matches);
-          echo '<script src="http://'.$matches[1][0].':8000/socket.io/socket.io.js"></script>';
-         ?>
-         <script src="js/multi.js"></script>
-         <script>
-          init();
-          </script>
-    </body>
+  <head>
+    <meta charset="utf-8">
+    <title>Burger Quizz - Jeu solo</title>
+    <link rel="stylesheet" href="css/game.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Lato:100,400,300,700' rel='stylesheet' type='text/css'>
+    <script src="js/jquery-2.1.4.min.js"></script>
+    <script src="js/responsive.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <script>
+      var refresh;
+    </script>
+  </head>
+  <body>
+    <header>
+    </header>
+    <section id="navbar">
+      <ul>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="responsive-navbar">
+      <ul>
+        <li class="name"><a href="#">Menu</a></li>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="game">
+      <p id="conDenied" class="error">
+        Erreur :<br />
+        Connexion au serveur multijoueur impossible
+        <script>
+          refresh = window.setTimeout(function() {
+            window.location = "";
+          }, 5000);
+        </script>
+      </p>
+    </section>
+    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+      <?php
+        $params = file_get_contents("./params.cfg");
+    	   preg_match_all('/node_host\: (.+)/', $params, $matches);
+         echo '<script src="http://'.$matches[1][0].':8000/socket.io/socket.io.js"></script>';
+      ?>
+    <script src="js/multi.js"></script>
+    <script>
+      init();
+    </script>
+  </body>
 </html>

web/palmares.htm

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Burger Quizz - Palmares</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <script src="js/jquery-2.1.4.min.js"></script>
+    <script src="js/responsive.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
+  </head>
+  <body>
+    <header>
+    </header>
+    <section id="navbar">
+      <ul>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li class="current"><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="responsive-navbar">
+      <ul>
+        <li class="name"><a href="#">Menu</a></li>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li class="current"><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="page">
+      <article>
+        <h2>Meilleurs scores</h2>
+        <ol></ol>
+      </article>
+    </section>
+
+    <script type="text/javascript">
+      $.get("./api/?page=palmares", function(data) {
+        for(var i = 0; i < 10; i++) {
+          $("ol").append("<li>"+data[i].login+" - "+data[i].score+"</li>");
+        }
+      });
+    </script>
+  </body>
+</html>

web/play.htm

 <!doctype html>
 <html>
   <head>
-    <title>Burger Quizz - Jouer</title>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <title>Burger Quizz - Accueil</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <script src="js/jquery-2.1.4.min.js"></script>
-    <script src="js/game.js"></script>
-    <style type="text/css">
-      .good-answer {
-        color:green;
-      }
-      .wrong-answer {
-        color:red;
-      }
-    </style>
+    <script src="js/responsive.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
   </head>
   <body>
-    <div id="game"></div>
-    <input type="submit" id="play" value="Solo (un joueur)" /><br />
-    <form action="multi.php"><input type="submit" id="multi" value="Multi (deux joueurs)" /></form>
-    <script type="text/javascript">
-      $("#play").click(function() {
-        play();
-      });
-    </script>
+    <header>
+    </header>
+    <section id="navbar">
+      <ul>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="responsive-navbar">
+      <ul>
+        <li class="name"><a href="#">Menu</a></li>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="page">
+      <article id="jouer">
+        <h1>Jouer</h1>
+        <div class="button">
+          <a href="solo.htm">
+            <div class="firstword">
+              Solo
+            </div>
+            1 joueur
+          </a>
+        </div>
+        <div class="button">
+          <a href="multi.php">
+            <div class="firstword">
+              Multi
+            </div>
+            2 joueurs
+          </a>
+        </div>
+      </article>
+    </section>
   </body>
 </html>

web/rules.htm

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Burger Quizz - Règles</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <script src="js/jquery-2.1.4.min.js"></script>
+    <script src="js/responsive.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
+  </head>
+  <body>
+    <header>
+    </header>
+    <section id="navbar">
+      <ul>
+        <li><a href="index.htm">Accueil</a></li>
+        <li class="current"><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="responsive-navbar">
+      <ul>
+        <li class="name"><a href="#">Menu</a></li>
+        <li><a href="index.htm">Accueil</a></li>
+        <li class="current"><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="page">
+      <article>
+        <h2>Règles</h2>
+        <p>Skevent dleout danvez biz-yod rumm goz gar tabut bazh mil skrijañ, Menez Du dec'h ehan kreisteiz neud tad eil huanadiñ bed lizherenn. Lies gwinegr c'hoar-gaer. Houlenn Menez Mikael anv koumoul, broust brumenn daoust ha. Ret ki lazhañ dianav gwenn hor beg-douar arabat skubañ ken truez tre kar hon leue droug-mor, chom hennezh hag Bro-saoz. Ma fazi geot kein gwechall, rak mil c'hwezhañ e fri hor kae diwar-benn mousc'hoarzhin mat bloaz plijadur hol kant eost noz dre mae nerzh kaeraat, kenwerzh nec'h hir diriaou c'hoar-gaer, a-benn diwar ar maez derc'hel digor pesketaer dir pri start karrezek. Pegement kontañ giz kluchañ n'eus forzh.</p>
+        <p>Hep patatez nav kroc'hen. Hon tre karrez talvoudus. Ruz aozañ e-lec'h mel va Doue mat mall kelenner. Mat eil doñjer chaseour rak koumanant a-hed kloued rev pignat yod bras gwrierez tal prizius, e-mesk kemener c'hoarvezout. Gwerenn saout pleg-mor aet poan dor merc'hed giz sukr mat he gervel poultrenn kontadenn, chaseal ti-hent-houarn aer soudard kêr giz gwelloc'h dreist-holl kig tremen gouelañ rev huchal nemet war aes re tro-c'houzoug he goulenn jod beuziñ siminal. Aotrou ar muiañ spi gourc'hemenn, beuziñ fiziañs rev tamm-ha-tamm, mignonez ni distreiñ, kasoni adaozañ degouezhout. Stlakañ loa anzav da gentañ, per kegin kontadenn gwiskamant me ki a-us da noz e-lec'h mat a-hed seizhvet spi kerkoulz ha ker kann distreiñ eus distreiñ te enebour kein gouelañ, a-wechoù c'hoar-gaer eñ huanadiñ aes gwerenn liv gwer. Merc'hed pevar-ugent niz kempenn aon sell kluchañ kemener he prizius moereb abardaez, ober goap eured Krouer respont skouer Sun tre du laezh merc'her kêr goz regiñ kae neuze, da ken na penn-araok kalonek bod dienn Mor Breizh den ar re gouel.</p>
+        <p>Leziregezh diskar park dra Krouer, tal pomper miz bale, kibell ler kennebeut mab kaout tog digor tud plijout Baz taol. Kotoñs mab-bihan ober war-dro. Fuzuilh koulz-amzer ki beajour pe ali reiñ kreskiñ eil kardeur ti fresk, logod kav kar leskiñ keniterv. Gwazh hi gar poull patatez. Giz sachañ tachenn-c'hoari, pegen kêr Nedeleg den dale, anv treuziñ ober e venoz kêr echuiñ klevout enebour. Met doñv gavr ruz ober goap. Eus ezhomm sevel eor butuniñ sul hep dre kelc'h talvoudus. Chase mor gwelloc'h e kezeg, pevarzek bleud homañ kempenn azezañ.</p>
+      </article>
+    </section>
+  </body>
+</html>

web/solo.htm

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Burger Quizz - Jeu solo</title>
+    <link rel="stylesheet" href="css/game.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Lato:100,400,300,700' rel='stylesheet' type='text/css'>
+    <script src="js/jquery-2.1.4.min.js"></script>
+    <script src="js/responsive.js"></script>
+    <script src="js/game.js"></script>
+    <meta name=viewport content="width=device-width, initial-scale=1"/>
+  </head>
+  <body>
+    <header>
+    </header>
+    <section id="navbar">
+      <ul>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="responsive-navbar">
+      <ul>
+        <li class="name"><a href="#">Menu</a></li>
+        <li><a href="index.htm">Accueil</a></li>
+        <li><a href="rules.htm">Règles</a></li>
+        <li><a href="palmares.htm">Meilleurs scores</a></li>
+        <li class="current"><a href="play.htm">Jouer</a></li>
+      </ul>
+    </section>
+    <section id="game">
+      <h2>Jeu solo</h2>
+      <input type="submit" id="play" value="Lancer la partie !" />
+    </section>
+
+    <script type="text/javascript">
+      $("#play").on("click", play);
+    </script>
+  </body>
+</html>

web/test.php

-<?php
-header("Content-Type:application/json");
-
-$array = array(
-  "numéro" => 2,
-  "lettre" => "a",
-  "string" => "qqfssdfq"
-);
-
-echo json_encode($array);