science-quest/src/components/jeux/pendu/Pendu.vue

@@ -27,6 +27,8 @@ export default{
     methods: {
         creerPartie: function () {
             this.lettresDejaDevine = "";
+            this.lettresANePasFaireDevinerAuJoueur="";
+
             //appeler l'API
             fetch(`${REST_API}/scientifiques?page=`+this.intAleatoire(this.api_pagesMaximum)).then(response=>{
                 response.json().then(json=>{
@@ -35,21 +37,22 @@ export default{
                     const scientifiqueADeviner=arrayScientifique[this.intAleatoire(arrayScientifique.length)]
                     //prendre le mot a deviner a partir du nom du scientifique
                     this.motADeviner = scientifiqueADeviner.nom.toLowerCase() + " " + scientifiqueADeviner.prenom.toLowerCase()
-                    this.nbLettresADeviner = this.motADeviner.length
                     this.description = scientifiqueADeviner.descriptif
 
-                    this.viesRestantes = 10; // TODO utiliser l'api
+                    //mettre a jour le nombre de pages maximum de l'api scientifiques
+                    this.api_pagesMaximum=json.page.totalPages
 
                     //verifier que le mot a deviner ne contient pas des lettres exemptées
-                    this.lettresDejaDevine = "";
-                    this.lettresANePasFaireDevinerAuJoueur="";
                     this.motADeviner.split("").forEach(lettre=>
                         this.regexExceptions.forEach(regex=>regex.test(lettre) ? this.lettresANePasFaireDevinerAuJoueur+=lettre /* faire jouer la lettre a la place de l'utilisateur */ : null)
                     )
 
                     //rafraichir la progression pour enlever les lettres a ne pas faire deviner
                     this.progression = this.afficherProgression()
+                    //compter le nombre de trous (enlever tout ce qui est pas underscore et compter)
+                    this.nbLettresADeviner = this.progression.replace(/[^_]/g, "").length
 
+                    this.viesRestantes=10;
                     //demarrer le jeu
                     this.afficherLeJeu()
                 })
@@ -60,14 +63,23 @@ export default{
             this.premierePartie = false;
         },
         deviner: function (event) {
-            //TODO revoir ce truc
             //prendre la lettre depuis l'event
             const lettreDevinee = event.data.toLowerCase();
             //vider l'input
             event.target.value = "";
+            //voir si la lettre devinée est valide
+            let lettreValide=true
+            this.regexExceptions.forEach(regex=>lettreValide ? lettreValide=!regex.test(lettreDevinee) : null)
+            if(!lettreValide){
+                //ne pas faire deviner une lettre invalide
+                return
+            }
             //ajouter la lettre dans la liste des lettres devinées
             if (!this.lettresDejaDevine.includes(lettreDevinee)) {
                 this.lettresDejaDevine += lettreDevinee;
+            } else {
+                //ne pas faire deviner une lettre qui a deja été devinée
+                return
             }
 
             //comparer la progression
@@ -96,8 +108,8 @@ export default{
             this.motADeviner.split("").forEach(w =>lettresAAfficher.includes(w) ? progression += w : progression += "_");
             return progression;
         },
-        intAleatoire: function(nbPages){
-            return Math.floor(Math.random() * nbPages)
+        intAleatoire: function(nb){
+            return Math.floor(Math.random() * nb)
         }
     },
     components: { PenduDessin }
@@ -126,7 +138,7 @@ export default{
         </div>
 
         <div v-if="!partieTerminee" class="divjeu">
-            <!--PenduDessin></PenduDessin-->
+            <!--PenduDessin :viesRestantes="viesRestantes"></PenduDessin-->
         </div>
         
         <div v-if="!partieTerminee" class="divjeu">

science-quest/src/components/jeux/pendu/PenduDessin.vue

@@ -1,6 +1,6 @@
 <script>
 export default{
-    props:["vieRestantes"], //maximum 10, 10 par defaut
+    props:["viesRestantes"], //maximum 10, 10 par defaut
     data(){
         return {
             ordreDessin:[
@@ -23,14 +23,14 @@ export default{
         this.$refs.pendu.width=200
         this.$refs.pendu.height=200
         this.ctx = this.$refs.pendu.getContext("2d");
-        this.viesEpuisees=this.ordreDessin.length-(this.vieRestantes??this.ordreDessin.length)
+        this.viesEpuisees=this.ordreDessin.length-(this.viesRestantes??this.ordreDessin.length)
     },
     watch:{
-        vieRestantes: function(newVal, oldVal){
+        viesRestantes: function(newVal, oldVal){
             const viesAEpuiser=this.ordreDessin.length-(newVal??this.ordreDessin.length)
             this.viesEpuisees=0;
             //nettoyer le canvas
-            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
+            this.ctx.clearRect(0, 0, this.$refs.width, this.$refs.height);
             
             for(let i=0; i<viesAEpuiser; i++){
                 this.dessiner()