on ne perd pas de vie quand on a la bonne lettre

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

@@ -4,7 +4,7 @@ export default{
         return{
             nbLettresADeviner:0,
             progression:"",
-            viesRestantes:0, //0 == pendu; partie terminée
+            viesRestantes:0, //0 == pendu; partie terminée, 
             partieTerminee:true, //plus de lettres a deviner
             premierePartie:true, //ne pas afficher "Perdu" pour ceux qui viennent de rejoindre
 
@@ -18,6 +18,7 @@ export default{
     },
     methods:{
         creerPartie: function(){
+            this.premierePartie=false
             this.partieTerminee=false
             //l'api (PATCH demarrerPartie) retournera le nombre de lettres a deviner ainsi que le nombre de vies
             this.nbLettresADeviner=this.debug_nbLettresADeviner; //TODO utiliser l'api
@@ -34,14 +35,25 @@ export default{
             event.target.value="";
 
             //envoyer lettreDevinee a l'api
+            const oldprogression=this.progression;
             this.progression=this.debug_letreDevinee(lettreDevinee)
+
+            // /!\ local uniquement : normalement c'est l'api qui gere les vies
+            if(oldprogression==this.progression){
+                //si la lettre est incorrecte
+                this.viesRestantes-- //l'api devrait aussi retourner le nombre de vies restantes
+            }
+    
+
             if(!this.progression.includes("_")){
                 //plus de lettres a deviner
                 this.partieTerminee=true
             }
-            this.viesRestantes-- //l'api pourrait nous donner le nombre de vies restantes
         },
         debug_letreDevinee: function(lettre){
+            if(this.viesRestantes<=0){
+                return this.debug_motADeviner
+            }
             let progression=""
             this.debug_lettresDejaDevine+=lettre
             this.debug_motADeviner.split("").forEach(w=>this.debug_lettresDejaDevine.includes(w) ? progression+=w : progression+="_")
@@ -55,11 +67,24 @@ export default{
 <template>
     <div style="display:flex">
         <div v-if="partieTerminee">
+            <!-- hors partie -->
             <button v-on:click="creerPartie">Créer une partie</button>
+            <div v-if="!premierePartie">
+                <div v-if="viesRestantes">
+                    Gagné
+                </div>
+                <div v-if="viesRestantes<=0">
+                    Perdu!
+                </div>
+                <p>Le mot était : </p>
+                <!-- l'api devrait retourner le mot entier quand la vie est a 0 -->
+                <h2 style="font-family: monospace">{{ progression }}</h2>
+            </div>
         </div>
-        <!-- TODO : dessiner le pendu -->
+        <div v-if="!partieTerminee">
-        <div v-if="viesRestantes && !partieTerminee">
+            <!-- dans une partie -->
-            <span>mot a deviner : </span>
+            <!-- TODO : dessiner le pendu -->
+            <p>mot a deviner : </p>
             <h2 style="font-family: monospace">{{ progression }}</h2>
             <input type="text" minlength="1" maxlength="1" @input="deviner">
         </div>