Adefinir  1
game.blade.php
Go to the documentation of this file.
1 <!DOCTYPE html>
2 <html lang="fr">
3 
4 <head>
5  <title>Game - Adefinir</title>
6 
7  <meta charset="utf-8">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <meta name="csrf-token" content="{{ csrf_token() }}">
10 
11  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
12  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
13 
14  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
16  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
17 </head>
18 
19 
20 
21 <body>
22 
23  <!-- En-tête de la page web-->
24  <header>
25  <div class="row justify-content-between bg-dark">
26 
27  <div class="col-sm-1 p-3"></div>
28 
29  <!-- Colonne centrale contenant titre et barre de progression -->
30  <div class="col-md-8 text-center p-3 text-white">
31  <h1 class="text-warning">Studio TBD Games</h1>
32 
33  <div class="progress" style="height:22px">
34  <div id="bar" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
35  </div>
36  </div>
37 
38 
39 
40  <!-- Colonne contenant les boutons d'accès :
41  - au Wiki du jeu sur le git
42  - à la page d'accueil du site -->
43  <div class="col-md-1 pt-3">
44  <div class="row">
45 
46  <!-- Bouton infos -->
47  <div class="col-md-auto pr-1">
48 
49  <button type="button"
50  onclick="window.open('https://git.unistra.fr/adefinir/t432_liy20_t3_h/-/wikis/','_blank')"
51  class="btn btn-primary-outline">
52  <em class="fas fa-info-circle fa-lg" style="color:white"></em>
53  </button>
54  </div>
55  <!-- Bouton exit -->
56  <div class="col-md-auto pl-1">
57  <button type="button"
58  onclick="window.location='{{ route("welcome") }}'"
59  class="btn btn-primary-outline">
60  <em class="fas fa-sign-out-alt fa-lg" style="color:red"></em>
61  </button>
62  </div>
63 
64  </div>
65  </div>
66  </div>
67  </header>
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78  <!-- Corps de la page web -->
79  <body style="background-color:#2C2C39">
80 
81  <!-- Gestion des employés & affichage granularité-->
82  <div class="container-fluid mt-5">
83  <div class="row justify-content-between">
84 
85 
86 
87  <!-- Affichage de la granularité -->
88  <div class="col-lg-1 pt-3 bg-dark text-center">
89  <h5 style="color:white"> Journées <br> restantes :</h5>
90  <h5 id="days" style="color:white">-</h5>
91  </div>
92 
93 
94 
95  <!-- Première colonne -->
96  <div class="col-lg-3 pt-3 bg-warning text-center">
97 
98  <!-- Développeur -->
99  <div class="row">
100  <div class="col text-left">
101  <h5> Développeur </h5>
102  </div>
103 
104  <div class="col-md-1">
105  <button value="Developpeur"
106  onclick="eventFire($(this).val())"
107  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
108  </div>
109 
110  <div class="col-md-1">
111  <p id="e1">-</p>
112  </div>
113 
114  <div class="col-md-1 mr-3">
115  <button value="Developpeur"
116  onclick="eventHire($(this).val())"
117  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
118  </div>
119 
120  </div>
121 
122  <!-- Game Designer -->
123  <div class="row">
124  <div class="col text-left">
125  <h5> Game Designer </h5>
126  </div>
127 
128  <div class="col-md-1">
129  <button value="GameDesigner"
130  onclick="eventFire($(this).val())"
131  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
132  </div>
133 
134  <div class="col-md-1">
135  <p id="e2">-</p>
136  </div>
137 
138  <div class="col-md-1 mr-3">
139  <button value="GameDesigner"
140  onclick="eventHire($(this).val())"
141  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
142  </div>
143 
144  </div>
145  </div>
146 
147 
148 
149  <!-- Deuxième colonne -->
150  <div class="col-lg-3 pt-3 bg-warning text-center">
151 
152  <!-- Directeur Marketing -->
153  <div class="row">
154  <div class="col text-left">
155  <h5> Directeur Marketing </h5>
156  </div>
157 
158  <div class="col-md-1">
159  <button value="DirecteurMarketing"
160  onclick="eventFire($(this).val())"
161  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
162  </div>
163 
164  <div class="col-md-1">
165  <p id="e3">-</p>
166  </div>
167 
168  <div class="col-md-1 mr-3">
169  <button value="DirecteurMarketing"
170  onclick="eventHire($(this).val())"
171  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
172  </div>
173 
174  </div>
175 
176  <!-- Sound Designer -->
177  <div class="row">
178  <div class="col text-left">
179  <h5> Sound Designer </h5>
180  </div>
181 
182  <div class="col-md-1">
183  <button value="SoundDesigner"
184  onclick="eventFire($(this).val())"
185  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
186  </div>
187 
188  <div class="col-md-1">
189  <p id="e4">-</p>
190  </div>
191 
192  <div class="col-md-1 mr-3">
193  <button value="SoundDesigner"
194  onclick="eventHire($(this).val())"
195  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
196  </div>
197 
198  </div>
199  </div>
200 
201 
202 
203  <!-- Troisième colonne -->
204  <div class="col-lg-3 pt-3 bg-warning text-center">
205 
206  <!-- Psychologue -->
207  <div class="row">
208  <div class="col text-left">
209  <h5> Psychologue </h5>
210  </div>
211 
212  <div class="col-md-1">
213  <button value="Psychologue"
214  onclick="eventFire($(this).val())"
215  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
216  </div>
217 
218  <div class="col-md-1">
219  <p id="e5">-</p>
220  </div>
221 
222  <div class="col-md-1 mr-3">
223  <button value="Psychologue"
224  onclick="eventHire($(this).val())"
225  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
226  </div>
227 
228  </div>
229 
230  <!-- Spécialiste -->
231  <div class="row">
232  <div class="col text-left">
233  <h5> Spécialiste </h5>
234  </div>
235 
236  <div class="col-md-1">
237  <button value="Specialiste"
238  onclick="eventFire($(this).val())"
239  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-minus-circle" style="color:black"></em></button>
240  </div>
241 
242  <div class="col-md-1">
243  <p id="e6">-</p>
244  </div>
245 
246  <div class="col-md-1 mr-3">
247  <button value="Specialiste"
248  onclick="eventHire($(this).val())"
249  type="button" class="btn btn-primary-outline p-0"><em class="fas fa-plus-circle" style="color:black"></em></button>
250  </div>
251 
252  </div>
253  </div>
254 
255  <div class="col-md-1 pt-3"></div>
256 
257  </div>
258  </div> <!-- Fin du conteneur -->
259 
260 
261 
262 
263 
264 
265 
266 
267 
268 
269 
270  <!-- Choix des actions -->
271  <div class="container-fluid mt-5">
272  <div class="row justify-content-around">
273 
274  <!-- Première colonne -->
275  <div class="col col-md-3 p-3 bg-dark text-left" style="color:white">
276 
277  <!-- Développeur -->
278  <div class="row pb-3">
279  <div class="col text-left">
280  <h4> Développeur : </h4>
281  </div>
282  </div>
283 
284  <div class="row">
285  <div class="col text-left">
286  <h6 class="ml-5"> Travailler sur l'intéractivité </h6>
287  </div>
288  <div class ="col-md-auto">
289  <button id="a1"
290  value="Travailler sur l'intéractivité"
291  onclick="eventAction(this)"
292  type="button" class="btn btn-primary-outline p-0 pb-1"
293  style="color:blue">
294  <em class="fas fa-clipboard-check fa-1x"></em>
295  </button>
296  </div>
297  </div>
298 
299  <div class="row">
300  <div class="col text-left">
301  <h6 class="ml-5"> Travailler sur la jouabilité </h6>
302  </div>
303  <div class ="col-md-auto">
304  <button id="a2"
305  value="Travailler sur la jouabilité"
306  onclick="eventAction(this)"
307  type="button" class="btn btn-primary-outline p-0 pb-1"
308  style="color:blue">
309  <em class="fas fa-clipboard-check fa-1x"></em>
310  </button>
311  </div>
312  </div>
313 
314  <div class="row">
315  <div class="col text-left">
316  <h6 class="ml-5"> Rechercher et corriger les bugs </h6>
317  </div>
318  <div class ="col-md-auto">
319  <button id="a3"
320  value="Rechercher et corriger les bugs"
321  onclick="eventAction(this)"
322  type="button" class="btn btn-primary-outline p-0 pb-1"
323  style="color:blue">
324  <em class="fas fa-clipboard-check fa-1x"></em>
325  </button>
326  </div>
327  </div>
328 
329  <!-- Game Designer -->
330  <div class="row pb-3 pt-5">
331  <div class="col text-left">
332  <h4> Game Designer : </h4>
333  </div>
334  </div>
335 
336  <div class="row">
337  <div class="col text-left">
338  <h6 class="ml-5"> Travailler sur la difficulté </h6>
339  </div>
340  <div class ="col-md-auto">
341  <button id="a4"
342  value="Travailler sur la difficulté"
343  onclick="eventAction(this)"
344  type="button" class="btn btn-primary-outline p-0 pb-1"
345  style="color:blue">
346  <em class="fas fa-clipboard-check fa-1x"></em>
347  </button>
348  </div>
349  </div>
350 
351  <div class="row">
352  <div class="col text-left">
353  <h6 class="ml-5"> Travailler l'esthétique </h6>
354  </div>
355  <div class ="col-md-auto">
356  <button id="a5"
357  value="Travailler l'esthétique"
358  onclick="eventAction(this)"
359  type="button" class="btn btn-primary-outline p-0 pb-1"
360  style="color:blue">
361  <em class="fas fa-clipboard-check fa-1x"></em>
362  </button>
363  </div>
364  </div>
365 
366  <div class="row">
367  <div class="col text-left">
368  <h6 class="ml-5"> Travailler sur le scénario </h6>
369  </div>
370  <div class ="col-md-auto">
371  <button id="a6"
372  value="Travailler sur le scénario"
373  onclick="eventAction(this)"
374  type="button" class="btn btn-primary-outline p-0 pb-1"
375  style="color:blue">
376  <em class="fas fa-clipboard-check fa-1x"></em>
377  </button>
378  </div>
379  </div>
380 
381  </div>
382 
383 
384 
385  <!-- Deuxième colonne -->
386  <div class="col col-md-3 p-3 bg-dark text-left" style="color:white">
387 
388  <!-- Directeur Marketing -->
389  <div class="row pb-3">
390  <div class="col text-left">
391  <h4> Directeur Marketing : </h4>
392  </div>
393  </div>
394 
395  <div class="row">
396  <div class="col text-left">
397  <h6 class="ml-5"> Réaliser une étude du marché </h6>
398  </div>
399  <div class ="col-md-auto">
400  <button id="a7"
401  value="Réaliser une étude du marché"
402  onclick="eventAction(this)"
403  type="button" class="btn btn-primary-outline p-0 pb-1"
404  style="color:blue">
405  <em class="fas fa-clipboard-check fa-1x"></em>
406  </button>
407  </div>
408  </div>
409 
410  <!-- Sound Designer -->
411  <div class="row pb-3 pt-5">
412  <div class="col text-left">
413  <h4> Sound Designer : </h4>
414  </div>
415  </div>
416 
417  <div class="row">
418  <div class="col text-left">
419  <h6 class="ml-5"> Travailler sur l'ambiance sonore </h6>
420  </div>
421  <div class ="col-md-auto">
422  <button id="a8"
423  value="Travailler sur l'ambiance sonore"
424  onclick="eventAction(this)"
425  type="button" class="btn btn-primary-outline p-0 pb-1"
426  style="color:blue">
427  <em class="fas fa-clipboard-check fa-1x"></em>
428  </button>
429  </div>
430  </div>
431 
432  <div class="row">
433  <div class="col text-left">
434  <h6 class="ml-5"> Acheter une licence sonore </h6>
435  </div>
436  <div class ="col-md-auto">
437  <button id="a9"
438  value="Acheter une licence sonore"
439  onclick="eventAction(this)"
440  type="button" class="btn btn-primary-outline p-0 pb-1"
441  style="color:blue">
442  <em class="fas fa-clipboard-check fa-1x"></em>
443  </button>
444  </div>
445  </div>
446 
447  </div>
448 
449 
450 
451  <!-- Troisième colonne -->
452  <div class="col col-md-3 p-3 bg-dark text-left" style="color:white">
453 
454  <!-- Psychologue -->
455  <div class="row pb-3">
456  <div class="col text-left">
457  <h4> Psychologue : </h4>
458  </div>
459  </div>
460 
461  <div class="row">
462  <div class="col text-left">
463  <h6 class="ml-5"> Travailler sur la concentration </h6>
464  </div>
465  <div class ="col-md-auto">
466  <button id="a10"
467  value="Travailler sur la concentration"
468  onclick="eventAction(this)"
469  type="button" class="btn btn-primary-outline p-0 pb-1"
470  style="color:blue">
471  <em class="fas fa-clipboard-check fa-1x"></em>
472  </button>
473  </div>
474  </div>
475 
476  <div class="row">
477  <div class="col text-left">
478  <h6 class="ml-5"> Travailler sur l'affordance </h6>
479  </div>
480  <div class ="col-md-auto">
481  <button id="a11"
482  value="Travailler sur l'affordance"
483  onclick="eventAction(this)"
484  type="button" class="btn btn-primary-outline p-0 pb-1"
485  style="color:blue">
486  <em class="fas fa-clipboard-check fa-1x"></em>
487  </button>
488  </div>
489  </div>
490 
491  <!-- Spécialiste -->
492  <div class="row pb-3 pt-5">
493  <div class="col text-left">
494  <h4> Spécialiste : </h4>
495  </div>
496  </div>
497 
498  <div class="row">
499  <div class="col text-left">
500  <h6 class="ml-5"> Travailler sur le contenu pédagogique </h6>
501  </div>
502  <div class ="col-md-auto">
503  <button id="a12"
504  value="Travailler sur le contenu pédagogique"
505  onclick="eventAction(this)"
506  type="button" class="btn btn-primary-outline p-0 pb-1"
507  style="color:blue">
508  <em class="fas fa-clipboard-check fa-1x"></em>
509  </button>
510  </div>
511  </div>
512 
513  </div>
514 
515 
516 
517  </div>
518  </div>
519  <!-- Fin de la section de choix des actions -->
520 
521 
522  <!-- Section d'affichage du bouton de confirmation des choix -->
523  <div class="container mt-5">
524  <div class="row p-0">
525 
526  <div class="col-auto mr-auto"><iframe src="/logs"></iframe></div>
527  <div class="col-auto mr-auto"><iframe src="/chart"></iframe></div>
528  <div class="col-auto">
529  <button onclick="confirmChoice()" type="button" class="btn btn-warning pb-0 text-center"> <p class="text-dark font-weight-bold mb-2">Confirmer mes choix</p> </button>
530  </div>
531  <div class="col-auto">
532  <button onclick="testGame()" type="button" class="btn btn-warning pb-0 text-center"> <p class="text-dark font-weight-bold mb-2">Tester mon jeu</p> </button>
533  </div>
534 
535  </div>
536  </div>
537 
538  </body>
539 
540 
541 
542 
543 
544 
545 
546  <!-- Pied de la page web -->
547  <footer>
548 
549  </footer>
550 
551 
552 
553 </body>
554 
555 
556 
557 
558 
559 
560 
561 
562 
563 
564 <!-- Script JavaScript lorsque le joueur clique sur un bouton -->
565 <script>
566 
567 
568 
569 // Variable globale stockant les identifiants des choix éfféctués par le joueur jusqu'à confirmation
570 var actions_id = []
571 
572 // Dictionnaire permettant de lier les ids des zones de texte à modifier concernant le nombre d'employés embauchés, et le nom du métier.
573 var idJobs = { "#e1": "Developpeur", "#e2":"GameDesigner", "#e3":"DirecteurMarketing", "#e4":"SoundDesigner", "#e5":"Psychologue", "#e6":"Specialiste" };
574 
575 
576 
577 // Est lancé losque la page est prête
578 $(document).ready(function() {
579 
580  update();
581 
582 });
583 
584 
585 /*
586  update
587  Récupère la variable de session php '$_SESSION' et son contenu,
588  Met à jour l'affichage du nombre de jours restants ainsi que
589  le nombre d'employés actuellement embauchés.
590 
591  @author Kellian Goffic
592 */
593 function update() {
594 
595  var session = <?php echo json_encode($_SESSION); ?>;
596 
597  console.log(session);
598 
599  for( var key in idJobs ) {
600  var value = idJobs[key];
601 
602  if (typeof session[value] != "undefined" && session[value] != null)
603  $(key).html( String(session[value]) );
604  else
605  $(key).html("0");
606  }
607 
608  if (session["nbDaysLeft"] != null)
609  $("#days").html( String(session["nbDaysLeft"]) );
610  else
611  $("#days").html( "ERREUR" );
612 
613 }
614 
615 
616 function updateNbEmployees( jobName, nbEmployees ) {
617  var id = Object.keys(idJobs).find(key => idJobs[key] === jobName);
618  $(id).html( String(nbEmployees) );
619 }
620 
621 function updateNbDaysLeft(nbDaysLeft) {
622  $("#days").html( String(nbDaysLeft) );
623  if ( nbDaysLeft >= 0 ) {
624  prct = 100 - ( ( nbDaysLeft / 6 ) * 100 );
625  $("#bar").css("width",String(prct)+"%");
626  }
627 
628 }
629 
630 
631 /*
632  eventAction
633  Evenement lorsqu'un bouton associé au choix
634  d'une action est cliqué par le joueur.
635 
636  On vérifie si l'id du bouton est déjà présent dans 'actions_id',
637  si oui on le retire et on passe la couleur du bouton au bleu,
638  sinon on l'ajoute et on passe la couleur au vert.
639 
640  @author Kellian Goffic
641  @param id Id du bouton.
642  @param value Valeur du bouton, nom de l'action.
643 */
644 function eventAction(ref) {
645  /* On enregistre dans index, la position de l'id dans la liste,
646  si il n'est pas présent, -1 est enregistré.
647  */
648  var id = ref.id;
649  var value = $(ref).val();
650  var index = actions_id.indexOf(id);
651 
652  // Si l'id est déjà présent, on la retire (principe de bascule)
653  if (index > -1) {
654  actions_id.splice(index, 1);
655  $(ref).css("color","blue");
656  }
657  else { // Sinon on l'ajoute
658  actions_id.push(id);
659  $(ref).css("color","green");
660  }
661 }
662 
663 
664 /*
665  eventFire
666  Evenement lorsqu'un bouton associé au choix
667  de licenciement d'un employé est cliqué par le joueur.
668  On appelle alors le fichier ajax_requests.php avec en POST les données
669  correspondantes à la fonction appelée (ici 'fire') et au nom du job du quel
670  le joueur veut licencier un employé.
671 
672  @author Kellian Goffic
673  @param value Valeur du bouton contenant le nom du métier.
674 */
675 function eventFire(value) {
676  $.ajaxSetup({
677  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
678  });
679 
680  $.ajax( {
681  url: "ajax_requests",
682  type: "POST",
683  data: {function: "fire", jobName: String(value)},
684  success: function(data) {
685  console.log("Fire:" + String(value) + ":" + data);
686  if (data < 0)
687  alert("Impossible de licencier des employés immaginaires !");
688  else
689  updateNbEmployees( String(value), data );
690  }
691  });
692 }
693 
694 
695 /*
696  eventHire
697  Evenement lorsqu'un bouton associé au choix
698  de recrutement d'un employé est cliqué par le joueur.
699  On appelle alors le fichier ajax_requests.php avec en POST les données
700  correspondantes à la fonction appelée (ici 'hire') et au nom du job du quel
701  le joueur veut recruter un employé.
702 
703  @author Kellian Goffic
704  @param value Valeur du bouton contenant le nom du métier.
705 */
706 function eventHire(value) {
707  $.ajaxSetup({
708  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
709  });
710 
711  $.ajax( {
712  url: "ajax_requests",
713  type: "POST",
714  data: {function: "hire", jobName: String(value)},
715  success: function(data) {
716  console.log("Hire:" + String(value) + ":" + data);
717  if (data < 0)
718  alert("Limite d'employés atteinte !");
719  else
720  updateNbEmployees( String(value), data );
721  }
722  });
723 }
724 
725 
726 /*
727  confirmChoice
728 */
729 function confirmChoice() {
730  $.ajaxSetup({
731  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
732  });
733 
734  $.ajax( {
735  url: "ajax_requests",
736  type: "POST",
737  data: {function: "action", actions: JSON.stringify(actions_id) },
738  success: function(data) {
739  console.log("confirmChoice:" + data);
740  updateNbDaysLeft(data);
741  if (data <= 0) {
742  //switch page resultats
743  alert("Le temps est épuisé !");
744  }
745  }
746  });
747 function testGame() {
748 
749 }
750 }
751 
752 </script>
753 
754 
755 
756 </html>