5 <title>Game - Adefinir</title>
8 <meta name=
"viewport" content=
"width=device-width, initial-scale=1">
9 <meta name=
"csrf-token" content=
"{{ csrf_token() }}">
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">
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>
23 <!-- En-tête de la page web-->
25 <div
class=
"row justify-content-between bg-dark">
27 <div
class=
"col-sm-1 p-3"></div>
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>
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>
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">
47 <div
class=
"col-md-auto pr-1">
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>
56 <div
class=
"col-md-auto pl-1">
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>
78 <!-- Corps de la page web -->
79 <body style=
"background-color:#2C2C39">
81 <!-- Gestion des employés & affichage granularité-->
82 <div
class=
"container-fluid mt-5">
83 <div
class=
"row justify-content-between">
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>
95 <!-- Première colonne -->
96 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
100 <div
class=
"col text-left">
101 <h5> Développeur </h5>
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>
110 <div
class=
"col-md-1">
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>
122 <!-- Game Designer -->
124 <div
class=
"col text-left">
125 <h5> Game Designer </h5>
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>
134 <div
class=
"col-md-1">
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>
149 <!-- Deuxième colonne -->
150 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
152 <!-- Directeur Marketing -->
154 <div
class=
"col text-left">
155 <h5> Directeur Marketing </h5>
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>
164 <div
class=
"col-md-1">
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>
176 <!-- Sound Designer -->
178 <div
class=
"col text-left">
179 <h5> Sound Designer </h5>
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>
188 <div
class=
"col-md-1">
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>
203 <!-- Troisième colonne -->
204 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
208 <div
class=
"col text-left">
209 <h5> Psychologue </h5>
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>
218 <div
class=
"col-md-1">
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>
232 <div
class=
"col text-left">
233 <h5> Spécialiste </h5>
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>
242 <div
class=
"col-md-1">
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>
255 <div
class=
"col-md-1 pt-3"></div>
258 </div> <!-- Fin du conteneur -->
270 <!-- Choix des actions -->
271 <div
class=
"container-fluid mt-5">
272 <div
class=
"row justify-content-around">
274 <!-- Première colonne -->
275 <div
class=
"col col-md-3 p-3 bg-dark text-left" style=
"color:white">
278 <div
class=
"row pb-3">
279 <div
class=
"col text-left">
280 <h4> Développeur : </h4>
285 <div
class=
"col text-left">
286 <h6
class=
"ml-5"> Travailler sur l
'intéractivité </h6>
288 <div class ="col-md-auto">
290 value="Travailler sur l'intéractivité
"
291 onclick="eventAction(
this)
"
292 type="button
" class="btn btn-primary-outline p-0 pb-1
"
294 <em class="fas fa-clipboard-check fa-1x
"></em>
300 <div class="col text-left
">
301 <h6 class="ml-5
"> Travailler sur la jouabilité </h6>
303 <div class ="col-md-
auto">
305 value="Travailler sur la jouabilité
"
306 onclick="eventAction(
this)
"
307 type="button
" class="btn btn-primary-outline p-0 pb-1
"
309 <em class="fas fa-clipboard-check fa-1x
"></em>
315 <div class="col text-left
">
316 <h6 class="ml-5
"> Rechercher et corriger les bugs </h6>
318 <div class ="col-md-
auto">
320 value="Rechercher et corriger les bugs
"
321 onclick="eventAction(
this)
"
322 type="button
" class="btn btn-primary-outline p-0 pb-1
"
324 <em class="fas fa-clipboard-check fa-1x
"></em>
329 <!-- Game Designer -->
330 <div class="row pb-3 pt-5
">
331 <div class="col text-left
">
332 <h4> Game Designer : </h4>
337 <div class="col text-left
">
338 <h6 class="ml-5
"> Travailler sur la difficulté </h6>
340 <div class ="col-md-
auto">
342 value="Travailler sur la difficulté
"
343 onclick="eventAction(
this)
"
344 type="button
" class="btn btn-primary-outline p-0 pb-1
"
346 <em class="fas fa-clipboard-check fa-1x
"></em>
352 <div class="col text-left
">
353 <h6 class="ml-5
"> Travailler l'esthétique </h6>
355 <div class ="col-md-
auto">
357 value="Travailler l
'esthétique"
358 onclick="eventAction(this)"
359 type="button" class="btn btn-primary-outline p-0 pb-1"
361 <em class="fas fa-clipboard-check fa-1x"></em>
367 <div class="col text-left">
368 <h6 class="ml-5"> Travailler sur le scénario </h6>
370 <div class ="col-md-auto">
372 value="Travailler sur le scénario"
373 onclick="eventAction(this)"
374 type="button" class="btn btn-primary-outline p-0 pb-1"
376 <em class="fas fa-clipboard-check fa-1x"></em>
385 <!-- Deuxième colonne -->
386 <div class="col col-md-3 p-3 bg-dark text-left" style="color:white">
388 <!-- Directeur Marketing -->
389 <div class="row pb-3">
390 <div class="col text-left">
391 <h4> Directeur Marketing : </h4>
396 <div class="col text-left">
397 <h6 class="ml-5"> Réaliser une étude du marché </h6>
399 <div class ="col-md-auto">
401 value="Réaliser une étude du marché"
402 onclick="eventAction(this)"
403 type="button" class="btn btn-primary-outline p-0 pb-1"
405 <em class="fas fa-clipboard-check fa-1x"></em>
410 <!-- Sound Designer -->
411 <div class="row pb-3 pt-5">
412 <div class="col text-left">
413 <h4> Sound Designer : </h4>
418 <div class="col text-left">
419 <h6 class="ml-5"> Travailler sur l'ambiance sonore </h6>
421 <div
class ="col-md-auto">
423 value=
"Travailler sur l'ambiance sonore"
424 onclick=
"eventAction(this)"
425 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
427 <em
class=
"fas fa-clipboard-check fa-1x"></em>
433 <div
class=
"col text-left">
434 <h6
class=
"ml-5"> Acheter une licence sonore </h6>
436 <div
class ="col-md-auto">
438 value=
"Acheter une licence sonore"
439 onclick=
"eventAction(this)"
440 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
442 <em
class=
"fas fa-clipboard-check fa-1x"></em>
451 <!-- Troisième colonne -->
452 <div
class=
"col col-md-3 p-3 bg-dark text-left" style=
"color:white">
455 <div
class=
"row pb-3">
456 <div
class=
"col text-left">
457 <h4> Psychologue : </h4>
462 <div
class=
"col text-left">
463 <h6
class=
"ml-5"> Travailler sur la concentration </h6>
465 <div
class ="col-md-auto">
467 value=
"Travailler sur la concentration"
468 onclick=
"eventAction(this)"
469 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
471 <em
class=
"fas fa-clipboard-check fa-1x"></em>
477 <div
class=
"col text-left">
478 <h6
class=
"ml-5"> Travailler sur l
'affordance </h6>
480 <div class ="col-md-auto">
482 value="Travailler sur l'affordance
"
483 onclick="eventAction(
this)
"
484 type="button
" class="btn btn-primary-outline p-0 pb-1
"
486 <em class="fas fa-clipboard-check fa-1x
"></em>
492 <div class="row pb-3 pt-5
">
493 <div class="col text-left
">
494 <h4> Spécialiste : </h4>
499 <div class="col text-left
">
500 <h6 class="ml-5
"> Travailler sur le contenu pédagogique </h6>
502 <div class ="col-md-
auto">
504 value="Travailler sur le contenu pédagogique
"
505 onclick="eventAction(
this)
"
506 type="button
" class="btn btn-primary-outline p-0 pb-1
"
508 <em class="fas fa-clipboard-check fa-1x
"></em>
519 <!-- Fin de la section de choix des actions -->
522 <!-- Section d'affichage du bouton de confirmation des choix -->
523 <div class="container mt-5
">
524 <div class="row p-0
">
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>
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>
546 <!-- Pied de la page web -->
564 <!-- Script JavaScript lorsque le joueur clique sur un bouton -->
569 // Variable globale stockant les identifiants des choix éfféctués par le joueur jusqu'à confirmation
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
" };
577 // Est lancé losque la page est prête
578 $(document).ready(function() {
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.
591 @author Kellian Goffic
595 var session = <?php echo json_encode($_SESSION); ?>;
597 console.log(session);
599 for( var key in idJobs ) {
600 var value = idJobs[key];
602 if (typeof session[value] != "undefined
" && session[value] != null)
603 $(key).html( String(session[value]) );
608 if (session["nbDaysLeft
"] != null)
609 $("#days
").html( String(session["nbDaysLeft
"]) );
611 $("#days
").html( "ERREUR
" );
616 function updateNbEmployees( jobName, nbEmployees ) {
617 var id = Object.keys(idJobs).find(key => idJobs[key] === jobName);
618 $(id).html( String(nbEmployees) );
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)+"%
");
633 Evenement lorsqu'un bouton associé au choix
634 d'une action est cliqué par le joueur.
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.
640 @author Kellian Goffic
641 @param id Id du bouton.
642 @param value Valeur du bouton, nom de l'action.
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é.
649 var value = $(ref).val();
650 var index = actions_id.indexOf(id);
652 // Si l'id est déjà présent, on la retire (principe de bascule)
654 actions_id.splice(index, 1);
655 $(ref).css("color
","blue
");
657 else { // Sinon on l'ajoute
659 $(ref).css("color
","green
");
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é.
672 @author Kellian Goffic
673 @param value Valeur du bouton contenant le nom du métier.
675 function eventFire(value) {
677 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token
"]').attr('content')}
681 url: "ajax_requests
",
683 data: {function: "fire
", jobName: String(value)},
684 success: function(data) {
685 console.log("Fire:
" + String(value) + ":
" + data);
687 alert("Impossible de licencier des employés immaginaires !
");
689 updateNbEmployees( String(value), data );
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é.
703 @author Kellian Goffic
704 @param value Valeur du bouton contenant le nom du métier.
706 function eventHire(value) {
708 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token
"]').attr('content')}
712 url: "ajax_requests
",
714 data: {function: "hire
", jobName: String(value)},
715 success: function(data) {
716 console.log("Hire:
" + String(value) + ":
" + data);
718 alert("Limite d
'employés atteinte !");
720 updateNbEmployees( String(value), data );
729 function confirmChoice() {
731 headers: {'X-CSRF-TOKEN
': $('meta[name=
"csrf-token"]
').attr('content
')}
735 url: "ajax_requests",
737 data: {function: "action", actions: JSON.stringify(actions_id) },
738 success: function(data) {
739 console.log("confirmChoice:" + data);
740 updateNbDaysLeft(data);
742 //switch page resultats
743 alert("Le temps est épuisé !");
747 function testGame() {