@@ -4,6 +4,9 @@ Le projet est une petit jeu de géographie dans lequel on doit reconnaitre la vi
...
@@ -4,6 +4,9 @@ Le projet est une petit jeu de géographie dans lequel on doit reconnaitre la vi
Ce projet exploite REST API pour assurer une communication client - serveur.
Ce projet exploite REST API pour assurer une communication client - serveur.
Le serveur java gère les utilisateurs et les quiz.
Le serveur java gère les utilisateurs et les quiz.
Nous avons réalisé le projet à deux : Romain AUCHET et Louis BRICHE. Romain apparait avec deux comptes lors des commits dû à un bug avec la configuration gitlab.
Pour tester le projet il faut se connecter à l'adresse : http://localhost/frontend/home.html
## Fonctionnement:
## Fonctionnement:
### Démarrage
### Démarrage
...
@@ -46,10 +49,17 @@ Pour éviter de se faire bloquer quand on fait une requète, on a une classe `CO
...
@@ -46,10 +49,17 @@ Pour éviter de se faire bloquer quand on fait une requète, on a une classe `CO
### affichage
### affichage
Du côté du frontend l'affichage de la première page contient un formulaire contenu dans un rectangle dont on a arrondi les bords avec les fonctionnalités css. On a également un défilement automatique d'images sur le bas de la page.
La page home du projet contient peu d'éléments : le titre, un formulaire avec une question et un bouton de submit et un défilement d'images en bas de page.
Après avoir valider notre nom, il est envoyé au serveur par la méthode Post après le submit du formulaire. On sauvegarde la réponse du serveur localement pour la récupérer dans la prochain page html.
Du côté du frontend le fichier html de la première page contient des éléments de style pour permettre de rendre la page plus esthétique : bouton hover, position... le reste des paramètres graphique se situe dans le fichier css dans lequel nous avons pu mettre un fondu en jaune pour le fond et quelques lignes permettant de faire le défilement d'images.
On fait ensuite une redirection vers la page Front qui contient l'essentiel du jeu. On modifie simplement dynamiquement les div contenant les réponses à chaque reception du nouveau quizz après avoir fetch.
Cliquer sur un des rectangle contenant la réponse appel une fonction qui va envoyer les informations aux serveurs et récupérer le prochain quizz.
On a un formulaire dont on a arrondi les bord ainsi qu'un bouton submit. Une fois que l'utilisation submit on récupère cette information grâce au script de la page (adventlistener) qui lance la fonction transmission.
La fonction transmission réalise un fetch avec le serveur api pour lui envoyer l'username puis récupère les informations tel que l'uuid et les questions. Il stocke tout cela localement dans un "localstorage" avant de faire une redirection.
On arrive sur la page Front qui contient l'essentiel du jeu. Conernant le contenu de la page on a maintenant une image affiché en haut de page avec une bordure arrondi blanche. On a 4 rectangles contenants les réponses aux questions. Une fois que l'utilisateur à répondu en cliquant sur un rectangle comme auparavant avec le adventlistener on lance une fonction qui permet de communiquer avec le serveur pour deux informations : vérifier si notre réponse est juste à l'adresse http://localhost:8080/projet_prog_reseau_war_exploded/api/quiz/answer et ensuite afficher le résultat dans un espace dédié, ensuite on récupère la suite des questions et réponses à l'adresse : http://localhost:8080/projet_prog_reseau_war_exploded/api/quiz
On modifie simplement dynamiquement les div contenant les rectangles à chaque reception du nouveau quizz pour que l'utilisateur puisse continuer à jouer sans redirection.
Si le prochain quizz ne contient pas de question alors on fait une redirection en sauvegardant localement la donnée score vers la page final où on affiche le résultat.
Si le prochain quizz ne contient pas de question alors on fait une redirection en sauvegardant localement la donnée score vers la page final où on affiche le résultat.
