ajouter debut de pendu

science-quest/src/components/Titre.vue

@@ -40,10 +40,10 @@ export default{
             Jeux
           </a>
           <ul class="dropdown-menu">
-            <li><router-link class="dropdown-item" to="/qui_est_ce">Qui-est-ce</router-link></li>
+            <li><router-link class="dropdown-item" to="/pendu">Pendu</router-link></li>
             <li><router-link class="dropdown-item" to="/kahoot">Kahoot</router-link></li>
             <li><hr class="dropdown-divider"></li>
-            <li><router-link class="dropdown-item disabled" to="/pendu">autre jeu</router-link></li>
+            <li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li>
           </ul>
         </li>
       </ul>

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

@@ -0,0 +1,71 @@
+<script>
+export default{
+    data(){
+        return{
+            nbLettresADeviner:0,
+            progression:"",
+            viesRestantes:0, //0 == pendu; partie terminée
+            partieTerminee:false, //plus de lettres a deviner
+            premierePartie:true, //ne pas afficher "Perdu" pour ceux qui viennent de rejoindre
+
+            //local uniquement, le client ne saura pas le mot 
+            debug_motADeviner:"einstein",
+            debug_nbLettresADeviner:8,
+            debug_lettresDejaDevine:"", //tout en minuscule*
+            //bloquer l'input si l'utilisateur met une lettre deja devinée
+            
+        }
+    },
+    methods:{
+        creerPartie: function(){
+            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
+            this.viesRestantes=10 // TODO utiliser l'api
+
+            this.progression="_".repeat(this.nbLettresADeviner);
+
+            this.debug_lettresDejaDevine=""
+        },
+        deviner: function(event){
+            //prendre la lettre depuis l'event
+            const lettreDevinee=event.data
+            //vider l'input
+            event.target.value="";
+
+            //envoyer lettreDevinee a l'api
+            this.progression=this.debug_letreDevinee(lettreDevinee)
+            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){
+            let progression=""
+            this.debug_lettresDejaDevine+=lettre
+            this.debug_motADeviner.split("").forEach(w=>this.debug_lettresDejaDevine.includes(w) ? progression+=w : progression+="_")
+            return progression
+        }
+    }
+}
+
+</script>
+
+<template>
+    <div style="display:flex">
+        <button v-on:click="creerPartie">aéaezaeaeazeaz</button>
+        <!-- TODO : dessiner le pendu -->
+        <div>
+            <span>mot a deviner : </span>
+            <h2 style="font-family: monospace">{{ progression }}</h2>
+        </div>
+        <input type="text" minlength="1" maxlength="1" @input="deviner" v-if="viesRestantes && !partieTerminee">
+    </div>
+</template>
+
+
+<style>
+
+
+</style>

science-quest/src/main.js

@@ -14,6 +14,7 @@ import NotFound from "./components/erreurs/NotFound.vue"
 import TestParametreURL from "./components/TestParametreURL.vue"
 import Login from "./components/Login.vue"
 import KahootVue from './components/jeux/kahoot/Kahoot.vue'
+import Pendu from './components/jeux/pendu/Pendu.vue'
 import AdminAjoutScientifique from "./components/admin/AjoutScientifique.vue"
 import VoirScientifiques from "./components/admin/VoirScientifiques.vue"
 
@@ -21,6 +22,7 @@ const routes = [
     { path: '/', component: PagePrincipale },
     { path: '/login', component: Login },
     { path: '/kahoot', component: KahootVue}, //TODO: changer la route pour qu'elle soit trouvée automatiquement par le serveur (ce que demande l'utilisateur)
+    { path: '/pendu', component: Pendu },
     { path: '/exemple/:id', component: TestParametreURL },
     { path: '/admin/ajout_scientifique', component: AdminAjoutScientifique },
     { path: '/admin/liste_scientifiques', component: VoirScientifiques },