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".

game.js 9.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. // IDs
  2. var id_cat = 0, id_theme = 0, id_quest = 0;
  3. // Shortcuts
  4. var json, category, theme;
  5. // Timer
  6. var timing = 5, secRestantes, timer;
  7. var questions = 0, currentQuestion = 1;
  8. var baseWidth;
  9. var score = 0;
  10. var reponseUser = -1, bonneReponse;
  11. var canClick = true;
  12. function play() {
  13. apiReq();
  14. console.log(json);
  15. $("#play").remove();
  16. if(json.status != 1) {
  17. var message;
  18. switch(json.source) {
  19. case 'PDO':
  20. message = "Erreur lors de la connexion à la base de donnée : "+json.message;
  21. break;
  22. case 'Connector':
  23. message = "Erreur de requête SQL : "
  24. switch(json.message) {
  25. case 'wrong_arg_nmbr_where':
  26. message += "Mauvais nombre d'arguments dans la clause WHERE.";
  27. break;
  28. case 'wrong_arg_nmbr_order_by':
  29. message += "Mauvais nombre d'arguments dans la clause ORDER BY.";
  30. break;
  31. case 'wrong_arg_numbr_limit':
  32. message += "Mauvais nombre d'arguments dans la clause LIMIT.";
  33. break;
  34. case 'unknown_arg':
  35. message += "Argument inconnu détecté.";
  36. break;
  37. }
  38. break;
  39. case 'Questset':
  40. message = "Erreur dans le chargement du jeu de questions : "
  41. if(json.message == 'expected_questset_array') {
  42. message += "Un tableau de réponses est attendu."
  43. }
  44. break;
  45. case 'Categorie':
  46. if(json.message == 'cant_find_cat') {
  47. message = "Erreur dans le chargement de la catégorie : Impossible de trouver la catégorie.";
  48. }
  49. break;
  50. }
  51. $("#game").addClass("error");
  52. $("#game").html(message);
  53. } else {
  54. $("#navbar .current").html("<div id=\"score\">Score : "+score+" miam</div>");
  55. $("#responsive-navbar .name a").css("display", "inline");
  56. $(".name").append("<div id=\"score-responsive\">"+score+" miam</div>");
  57. loadCat(id_cat);
  58. }
  59. }
  60. function apiReq() {
  61. $.ajax({
  62. async: false,
  63. url: "./api/",
  64. dataType: 'json',
  65. success: function(data) {
  66. json = data;
  67. json.cat1.themes.forEach(function(theme) {
  68. questions += theme.questions.length;
  69. });
  70. json.cat2.themes.forEach(function(theme) {
  71. questions += theme.questions.length;
  72. });
  73. }
  74. });
  75. }
  76. function loadCat(id) {
  77. if(id === 0) category = json.cat1;
  78. if(id === 1) category = json.cat2;
  79. console.log(category);
  80. $("#game").html("<div id=\"timer\"></div>");
  81. $("#game").append("<div id=\"category\">Catégorie : "+category.nom_cat+"</div>");
  82. $("#game").append("<div id=\"theme\"></div>");
  83. loadTheme(id_theme);
  84. }
  85. function loadTheme(id) {
  86. theme = category.themes[id];
  87. $("#theme").html("<p id=\"question\"></p>");
  88. $("#theme").append("<ul id=\"answers\"><li id=\"rep1\">"+theme.reponse1+"</li>"
  89. +"<li id=\"rep2\">"+theme.reponse2+"</li><li id=\"both\">Les deux</li></ul>"
  90. +"<p id=\"question-count\">Question 0/0</p>");
  91. quest(id_quest);
  92. }
  93. function quest(id) {
  94. $("#question").html(theme.questions[id].intitule);
  95. startTimer();
  96. bonneReponse = parseInt(theme.questions[id].bonneReponse);
  97. console.info('Question ' + currentQuestion + '/' + theme.questions.length + ' : '
  98. +theme.questions[id].intitule);
  99. $("#question-count").html("Question "+currentQuestion+"/"+questions);
  100. if(canClick) {
  101. $("#rep1").off('click');
  102. $("#rep1").one("click", function() { reponseUser = 1; checkAnswer(); });
  103. $("#rep2").off('click');
  104. $("#rep2").one("click", function() { reponseUser = 2; checkAnswer(); });
  105. $("#both").off('click');
  106. $("#both").one("click", function() { reponseUser = 0; checkAnswer(); });
  107. }
  108. }
  109. function checkAnswer() {
  110. canClick = false;
  111. $("#rep1").off('click');
  112. $("#rep2").off('click');
  113. $("#both").off('click');
  114. stopTimer();
  115. console.log(reponseUser == bonneReponse);
  116. if(reponseUser == bonneReponse) {
  117. score += secRestantes+1;
  118. }
  119. console.log(score);
  120. if(score > 1) {
  121. $("#score").html("Score : "+score+" miams");
  122. $("#score-responsive").html(score+" miams");
  123. } else {
  124. $("#score").html("Score : "+score+" miam");
  125. $("#score-responsive").html(score+" miam");
  126. }
  127. switch(bonneReponse) {
  128. case 0: $("#rep1").addClass("wrong-answer");
  129. $("#rep2").addClass("wrong-answer");
  130. $("#both").addClass("good-answer");
  131. break;
  132. case 1: $("#rep1").addClass("good-answer");
  133. $("#rep2").addClass("wrong-answer");
  134. $("#both").addClass("wrong-answer");
  135. break;
  136. case 2: $("#rep1").addClass("wrong-answer");
  137. $("#rep2").addClass("good-answer");
  138. $("#both").addClass("wrong-answer");
  139. break;
  140. }
  141. window.setTimeout(nextQuestion, 2000);
  142. }
  143. function nextQuestion() {
  144. $("#rep1").removeClass();
  145. $("#rep2").removeClass();
  146. $("#both").removeClass();
  147. canClick = true;
  148. currentQuestion++;
  149. // Dernière question du thème en cours
  150. if((id_quest+1) == theme.questions.length) {
  151. // Dernier thème de la catégorie en cours
  152. if((id_theme+1) == category.themes.length) {
  153. // Dernière catégorie
  154. if((id_cat+1) == 2) {
  155. endGame();
  156. } else {
  157. id_quest = 0;
  158. id_theme = 0;
  159. id_cat++;
  160. loadCat(id_cat);
  161. }
  162. } else {
  163. id_quest = 0;
  164. id_theme++;
  165. loadTheme(id_theme);
  166. }
  167. } else {
  168. id_quest++;
  169. quest(id_quest);
  170. }
  171. }
  172. function startTimer() {
  173. baseWidth = $("#timer").width();
  174. $("#timer").removeClass();
  175. var elm = document.getElementById("timer"),
  176. newone = elm.cloneNode(true);
  177. elm.parentNode.replaceChild(newone, elm);
  178. $("#timer").addClass("timer");
  179. timer = window.setTimeout(checkAnswer, timing*1000);
  180. }
  181. function stopTimer() {
  182. window.clearTimeout(timer);
  183. $("#timer").addClass("pause");
  184. secRestantes = Math.round($("#timer").width()/baseWidth*timing);
  185. console.log(secRestantes);
  186. }
  187. function endGame() {
  188. $("#game").html("<h2 id=\"score\">Vous avez marqué "+score+" miams</h2>"
  189. +"<p id=\"registerScore\">Enregistrez votre score : <input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
  190. +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /></p>");
  191. $("#sendScore").on('click', scoreConfirm);
  192. $("#login").on('keypress', function(event) {
  193. if(event.which == 13) {
  194. scoreConfirm();
  195. }
  196. });
  197. }
  198. function scoreConfirm() {
  199. $("#registerScore").fadeOut();
  200. if($("#login").val() != "") {
  201. addScore($("#login").val(), score);
  202. var message = json.message;
  203. if(message == "score_add_success") {
  204. window.setTimeout(function() {
  205. $("#registerScore").removeClass();
  206. $("#registerScore").addClass("success");
  207. $("#registerScore").html("Votre score a bien été enregistré.<br />"+
  208. "<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
  209. }, 400);
  210. } else {
  211. if(message === "higher_score_present") {
  212. window.setTimeout(function() {
  213. $("#registerScore").removeClass();
  214. $("#registerScore").addClass("error");
  215. $("#registerScore").html("Un score supérieur ou égal existe déjà avec ce pseudonyme.<br />"
  216. +"Essayez avec un autre pseudonyme :<br />"
  217. +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
  218. +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
  219. +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
  220. $("#sendScore").on('click', scoreConfirm);
  221. $("#login").on('keypress', function(event) {
  222. if(event.which == 13) {
  223. scoreConfirm();
  224. }
  225. });
  226. }, 400);
  227. } else {
  228. window.setTimeout(function() {
  229. $("#registerScore").removeClass();
  230. $("#registerScore").addClass("error");
  231. $("#registerScore").html("Une erreur est survenue ("+status.message+")<br /> Réessayer :"
  232. +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
  233. +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
  234. +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
  235. }, 400);
  236. }
  237. }
  238. } else {
  239. window.setTimeout(function() {
  240. $("#registerScore").removeClass();
  241. $("#registerScore").addClass("error");
  242. $("#registerScore").html("Merci de renseigner un pseudonyme : <br />"
  243. +"<input type=\"text\" id=\"login\" placeholder=\"Nom ou pseudonyme\" />"
  244. +"<input type=\"submit\" id=\"sendScore\" value=\"Valider\" /><br />"
  245. +"<a href=\"palmares.htm\">Voir les meilleurs scores</a>");
  246. $("#sendScore").on('click', scoreConfirm);
  247. $("#login").on('keypress', function(event) {
  248. if(event.which == 13) {
  249. scoreConfirm();
  250. }
  251. });
  252. }, 400);
  253. }
  254. $("#registerScore").fadeIn();
  255. }
  256. function addScore(userLogin, userScore) {
  257. $.ajax({
  258. async: false,
  259. url: "./api/?page=palmares",
  260. type: "POST",
  261. dataType: 'json',
  262. data: {login: userLogin, score: userScore},
  263. success: function(data) {
  264. json = data;
  265. }
  266. });
  267. }
  268. function displayScores() {
  269. $.get("./api/?page=palmares", function(data) {
  270. var list = "<ol>";
  271. for(var i = 0; i < 10; i++) {
  272. list += "<li>"+data[i].login+" - "+data[i].score+"</li>";
  273. }
  274. list += "</ol>";
  275. $("#palmares").html(list);
  276. });
  277. }