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>
19 .btn-perso { width: 200px;}
27 <!-- En-tête de la page web-->
29 <div
class=
"row justify-content-between bg-dark">
31 <div
class=
"col-sm-1 p-3"></div>
33 <!-- Colonne centrale contenant titre et barre de progression -->
34 <div
class=
"col-md-8 text-center p-3 text-white">
35 <h1
class=
"text-warning">Studio TBD Games</h1>
37 <div
class=
"progress" style=
"height:22px">
38 <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>
44 <!-- Colonne contenant les boutons d
'accès :
45 - au Wiki du jeu sur le git
46 - à la page d'accueil du site -->
47 <div
class=
"col-md-1 pt-3">
51 <div
class=
"col-md-auto pr-1">
54 onclick=
"window.open('https://git.unistra.fr/adefinir/t432_liy20_t3_h/-/wikis/','_blank')"
55 class=
"btn btn-primary-outline">
56 <em
class=
"fas fa-info-circle fa-lg" style=
"color:white"></em>
60 <div
class=
"col-md-auto pl-1">
62 onclick=
"window.location='{{ route("welcome
") }}'"
63 class=
"btn btn-primary-outline">
64 <em
class=
"fas fa-sign-out-alt fa-lg" style=
"color:red"></em>
82 <!-- Corps de la page web -->
83 <body style=
"background-color:#2C2C39">
85 <!-- Gestion des employés & affichage granularité-->
86 <div
class=
"container-fluid mt-5">
87 <div
class=
"row justify-content-between">
91 <!-- Affichage de la granularité -->
92 <div
class=
"col-lg-1 pt-3 bg-dark text-center">
93 <h5 style=
"color:white"> Journées <br> restantes :</h5>
94 <h5
id=
"days" style=
"color:white">-</h5>
99 <!-- Première colonne -->
100 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
104 <div
class=
"col text-left">
105 <h5> Développeur </h5>
108 <div
class=
"col-md-1">
109 <button value=
"Developpeur"
110 onclick=
"eventFire($(this).val())"
111 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
114 <div
class=
"col-md-1">
118 <div
class=
"col-md-1 mr-3">
119 <button value=
"Developpeur"
120 onclick=
"eventHire($(this).val())"
121 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
126 <!-- Game Designer -->
128 <div
class=
"col text-left">
129 <h5> Game Designer </h5>
132 <div
class=
"col-md-1">
133 <button value=
"GameDesigner"
134 onclick=
"eventFire($(this).val())"
135 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
138 <div
class=
"col-md-1">
142 <div
class=
"col-md-1 mr-3">
143 <button value=
"GameDesigner"
144 onclick=
"eventHire($(this).val())"
145 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
153 <!-- Deuxième colonne -->
154 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
156 <!-- Directeur Marketing -->
158 <div
class=
"col text-left">
159 <h5> Directeur Marketing </h5>
162 <div
class=
"col-md-1">
163 <button value=
"DirecteurMarketing"
164 onclick=
"eventFire($(this).val())"
165 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
168 <div
class=
"col-md-1">
172 <div
class=
"col-md-1 mr-3">
173 <button value=
"DirecteurMarketing"
174 onclick=
"eventHire($(this).val())"
175 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
180 <!-- Sound Designer -->
182 <div
class=
"col text-left">
183 <h5> Sound Designer </h5>
186 <div
class=
"col-md-1">
187 <button value=
"SoundDesigner"
188 onclick=
"eventFire($(this).val())"
189 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
192 <div
class=
"col-md-1">
196 <div
class=
"col-md-1 mr-3">
197 <button value=
"SoundDesigner"
198 onclick=
"eventHire($(this).val())"
199 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
207 <!-- Troisième colonne -->
208 <div
class=
"col-lg-3 pt-3 bg-warning text-center">
212 <div
class=
"col text-left">
213 <h5> Psychologue </h5>
216 <div
class=
"col-md-1">
217 <button value=
"Psychologue"
218 onclick=
"eventFire($(this).val())"
219 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
222 <div
class=
"col-md-1">
226 <div
class=
"col-md-1 mr-3">
227 <button value=
"Psychologue"
228 onclick=
"eventHire($(this).val())"
229 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
236 <div
class=
"col text-left">
237 <h5> Spécialiste </h5>
240 <div
class=
"col-md-1">
241 <button value=
"Specialiste"
242 onclick=
"eventFire($(this).val())"
243 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-minus-circle" style=
"color:black"></em></button>
246 <div
class=
"col-md-1">
250 <div
class=
"col-md-1 mr-3">
251 <button value=
"Specialiste"
252 onclick=
"eventHire($(this).val())"
253 type=
"button" class=
"btn btn-primary-outline p-0"><em
class=
"fas fa-plus-circle" style=
"color:black"></em></button>
259 <div
class=
"col-md-1 pt-3"></div>
262 </div> <!-- Fin du conteneur -->
274 <!-- Choix des actions -->
275 <div
class=
"container-fluid mt-5">
276 <div
class=
"row justify-content-around">
278 <!-- Première colonne -->
279 <div
class=
"col col-md-3 p-3 bg-dark text-left" style=
"color:white">
282 <div
class=
"row pb-3">
283 <div
class=
"col text-left">
284 <h4> Développeur : </h4>
289 <div
class=
"col text-left">
290 <h6
class=
"ml-5"> Travailler sur l
'intéractivité </h6>
292 <div class ="col-md-auto">
295 onclick="eventAction(this)"
296 type="button" class="btn btn-primary-outline p-0 pb-1"
298 <em class="fas fa-clipboard-check fa-1x"></em>
304 <div class="col text-left">
305 <h6 class="ml-5"> Travailler sur la jouabilité </h6>
307 <div class ="col-md-auto">
310 onclick="eventAction(this)"
311 type="button" class="btn btn-primary-outline p-0 pb-1"
313 <em class="fas fa-clipboard-check fa-1x"></em>
319 <div class="col text-left">
320 <h6 class="ml-5"> Rechercher et corriger les bugs </h6>
322 <div class ="col-md-auto">
325 onclick="eventAction(this)"
326 type="button" class="btn btn-primary-outline p-0 pb-1"
328 <em class="fas fa-clipboard-check fa-1x"></em>
333 <!-- Game Designer -->
334 <div class="row pb-3 pt-5">
335 <div class="col text-left">
336 <h4> Game Designer : </h4>
341 <div class="col text-left">
342 <h6 class="ml-5"> Travailler sur la difficulté </h6>
344 <div class ="col-md-auto">
347 onclick="eventAction(this)"
348 type="button" class="btn btn-primary-outline p-0 pb-1"
350 <em class="fas fa-clipboard-check fa-1x"></em>
356 <div class="col text-left">
357 <h6 class="ml-5"> Travailler l'esthétique </h6>
359 <div
class ="col-md-auto">
362 onclick=
"eventAction(this)"
363 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
365 <em
class=
"fas fa-clipboard-check fa-1x"></em>
371 <div
class=
"col text-left">
372 <h6
class=
"ml-5"> Travailler sur le scénario </h6>
374 <div
class ="col-md-auto">
377 onclick=
"eventAction(this)"
378 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
380 <em
class=
"fas fa-clipboard-check fa-1x"></em>
389 <!-- Deuxième colonne -->
390 <div
class=
"col col-md-3 p-3 bg-dark text-left" style=
"color:white">
392 <!-- Directeur Marketing -->
393 <div
class=
"row pb-3">
394 <div
class=
"col text-left">
395 <h4> Directeur Marketing : </h4>
400 <div
class=
"col text-left">
401 <h6
class=
"ml-5"> Réaliser une étude du marché </h6>
403 <div
class ="col-md-auto">
405 value=
"DirecteurMarketing"
406 onclick=
"eventAction(this)"
407 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
409 <em
class=
"fas fa-clipboard-check fa-1x"></em>
414 <!-- Sound Designer -->
415 <div
class=
"row pb-3 pt-5">
416 <div
class=
"col text-left">
417 <h4> Sound Designer : </h4>
422 <div
class=
"col text-left">
423 <h6
class=
"ml-5"> Travailler sur l
'ambiance sonore </h6>
425 <div class ="col-md-auto">
427 value="SoundDesigner"
428 onclick="eventAction(this)"
429 type="button" class="btn btn-primary-outline p-0 pb-1"
431 <em class="fas fa-clipboard-check fa-1x"></em>
437 <div class="col text-left">
438 <h6 class="ml-5"> Acheter une licence sonore </h6>
440 <div class ="col-md-auto">
442 value="SoundDesigner"
443 onclick="eventAction(this)"
444 type="button" class="btn btn-primary-outline p-0 pb-1"
446 <em class="fas fa-clipboard-check fa-1x"></em>
455 <!-- Troisième colonne -->
456 <div class="col col-md-3 p-3 bg-dark text-left" style="color:white">
459 <div class="row pb-3">
460 <div class="col text-left">
461 <h4> Psychologue : </h4>
466 <div class="col text-left">
467 <h6 class="ml-5"> Travailler sur la concentration </h6>
469 <div class ="col-md-auto">
472 onclick="eventAction(this)"
473 type="button" class="btn btn-primary-outline p-0 pb-1"
475 <em class="fas fa-clipboard-check fa-1x"></em>
481 <div class="col text-left">
482 <h6 class="ml-5"> Travailler sur l'affordance </h6>
484 <div
class=
"col-md-auto">
487 onclick=
"eventAction(this)"
488 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
490 <em
class=
"fas fa-clipboard-check fa-1x"></em>
496 <div
class=
"row pb-3 pt-5">
497 <div
class=
"col text-left">
498 <h4> Spécialiste : </h4>
503 <div
class=
"col text-left">
504 <h6
class=
"ml-5"> Travailler sur le contenu pédagogique </h6>
506 <div
class ="col-md-auto">
509 onclick=
"eventAction(this)"
510 type=
"button" class=
"btn btn-primary-outline p-0 pb-1"
512 <em
class=
"fas fa-clipboard-check fa-1x"></em>
523 <!-- Fin de la section de choix des actions -->
526 <!-- Section d
'affichage du bouton de confirmation des choix -->
527 <div class="container mt-5">
528 <div class="row p-0">
530 <div class="col-auto mr-auto">
533 <script type="text/jscript">
534 // Fonction permettant de blocker le clic-droit sur l'iFrame
535 function blockRightClick(){
536 var frame = $(
'iframe');
537 var contents = frame.contents();
538 var body = contents.find(
'body').attr(
"oncontextmenu",
"return false");
542 <iframe
id=
"chart" src=
"" width=
"750px" height=
"500px" frameBorder=
"0" onload=
"blockRightClick()"></iframe>
546 <div
class=
"col-auto">
547 <!-- Bouton
"Tester mon jeu" -->
548 <div
class=
"row mb-2">
549 <button onclick=
"testGame()" src=
"" type=
"button" class=
"btn btn-warning btn-perso text-center"> <p
class=
"text-dark font-weight-bold mb-1">Tester mon jeu</p> </button>
552 <!-- Bouton
"Confirmer mes choix" -->
554 <button onclick=
"confirmChoice()" type=
"button" class=
"btn btn-warning btn-perso text-center"> <p
class=
"text-dark font-weight-bold mb-1">Confirmer mes choix</p> </button>
566 <!-- Pied de page -->
567 <footer
id=
"footer" class=
"container-fluid text-center p-3 bg-dark text-warning">
568 <p> Email : tbdgames@finck.me Téléphone: 3630 (Allô Père-Noël) <small
id=
"pswwarning" class=
"form-text text-muted">Attention ceci est un numéro surtaxé</a>.</small></p>
584 <!-- Script JavaScript lorsque le joueur clique sur un bouton -->
591 var actions_job_name = [];
594 var id_name_job = {
"#e1":
"Developpeur",
"#e2":
"GameDesigner",
"#e3":
"DirecteurMarketing",
"#e4":
"SoundDesigner",
"#e5":
"Psychologue",
"#e6":
"Specialiste" };
598 "Developpeur": [
"a1",
"a2",
"a3"],
599 "GameDesigner": [
"a4",
"a5",
"a6"],
600 "DirecteurMarketing": [
"a7"],
601 "SoundDesigner": [
"a8",
"a9"],
602 "Psychologue": [
"a10",
"a11"],
603 "Specialiste": [
"a12"]
608 $(document).ready(
function() {
624 var session = <?php echo json_encode($_SESSION); ?>;
626 for( var key in id_name_job ) {
627 var value = id_name_job[key];
629 if (typeof session[value] !=
"undefined" && session[value] !=
null)
630 $(key).html( String(session[value]) );
635 if (session[
"nbDaysLeft"] !=
null)
636 $(
"#days").html( String(session[
"nbDaysLeft"]) );
638 $(
"#days").html(
"ERREUR" );
652 function updateNbEmployees( jobName, nbEmployees ) {
653 var
id = Object.keys(id_name_job).find(key => id_name_job[key] === jobName);
654 $(id).html( String(nbEmployees) );
666 function updateNbDaysLeft(nbDaysLeft) {
667 $(
"#days").html( String(nbDaysLeft) );
668 if ( nbDaysLeft >= 0 ) {
669 prct = 100 - ( ( nbDaysLeft / 6 ) * 100 );
670 $(
"#bar").css(
"width",String(prct)+
"%");
688 function eventAction(ref) {
695 var value = String($(ref).val());
696 var index = actions_id.indexOf(
id);
703 actions_job_name.splice( actions_job_name.indexOf(value), 1 );
705 actions_id.splice(index, 1);
707 $(ref).css(
"color",
"white");
709 else if ( actions_job_name.indexOf(value) == -1 ) {
713 for ( var e_id in id_name_job ) {
714 if ( id_name_job[e_id] == value ) {
715 if ( parseInt( document.getElementById( e_id.substring(1) ).innerHTML ) == 0 ) {
716 alert(
"Tu dois avoir un " + value +
"\npour pouvoir effectuer cette action !");
723 actions_job_name.push(value);
727 $(ref).css(
"color",
"green");
733 for ( var name_job in name_job_ids ) {
734 if ( name_job == value ) {
737 var ids = name_job_ids[name_job];
740 var index = actions_id.indexOf(ids[key]);
744 actions_id.splice(index, 1);
746 $(
"#"+ids[key]).css(
"color",
"white");
755 $(ref).css(
"color",
"green");
771 function eventFire(value) {
773 headers: {
'X-CSRF-TOKEN': $(
'meta[name="csrf-token"]').attr(
'content')}
777 url:
"ajax_requests",
779 data: {
function:
"fire", jobName: String(value)},
780 success:
function(data) {
782 alert(
"Impossible de licencier des employés immaginaires !");
784 updateNbEmployees( String(value), data );
789 for ( var name_job in name_job_ids ) {
790 if ( name_job == String(value) ) {
793 var ids = name_job_ids[name_job];
796 var index = actions_id.indexOf(ids[key]);
800 actions_job_name.splice( actions_job_name.indexOf(String(value)) );
802 actions_id.splice(index, 1);
804 $(
"#"+ids[key]).css(
"color",
"white");
829 function eventHire(value) {
831 headers: {
'X-CSRF-TOKEN': $(
'meta[name="csrf-token"]').attr(
'content')}
835 url:
"ajax_requests",
837 data: {
function:
"hire", jobName: String(value)},
838 success:
function(data) {
840 alert(
"Limite d'employés atteinte !");
842 updateNbEmployees( String(value), data );
857 function confirmChoice() {
858 if ( actions_id.length <= 0 )
862 headers: {
'X-CSRF-TOKEN': $(
'meta[name="csrf-token"]').attr(
'content')}
866 url:
"ajax_requests",
868 data: {
function:
"action", actions: JSON.stringify(actions_id) },
869 success:
function(data) {
872 updateNbDaysLeft(data);
879 success:
function(data) {
880 $(
"html").html(data);
888 for ( key in actions_id ) {
889 $(
"#"+actions_id[key]).css(
"color",
"white");
894 actions_job_name = [];
897 document.getElementById(
"chart").style.display =
"none";
901 function testGame() {
902 if ( confirm(
"Voulez vous consacrer une journée au test de votre jeu ?") ) {
906 var elt = document.getElementById(
"chart");
908 elt.style.display =
"block";
911 headers: {
'X-CSRF-TOKEN': $(
'meta[name="csrf-token"]').attr(
'content')}
915 url:
"ajax_requests",
917 data: {
function:
"testGame"},
918 success:
function(data) {
919 updateNbDaysLeft(data);
924 success:
function(data) {
925 $(
"html").html(data);
926 document.main.style.backgroundColor =
"#2C2C39";