Hangman game

App.vue

<template>
  <div id="app">
    <div v-if="!gagne && !perdu">
      <h1>Le pendu avec les animaux</h1>
      <pre class="mot">{{motADeviner}}</pre>
      <div>
        <button v-for="l in lettres"
                @click="testeLettre(l)"
                :disabled="testees.indexOf(l) > -1"
                class="btn-lettre"
                :class="succes.indexOf(l) > -1 && 'success'">{{ l }}
        </button>
      </div>
    </div>
    <div v-else-if="perdu" class="perdu">
      <div>
        Perdu ! Le mot à deviner était "{{mot}}"
        <button @click="reset">Recommencer</button>
      </div>
    </div>
    <div v-else class="gagne">
      <div>Gagné</div>
      <button @click="reset">Recommencer</button>
    </div>
  </div>
</template>

<script>
  // Liste de mots
  const mots = ['chat', 'chien', 'rat', 'oiseau'];

  export default {
    name: 'app',
    data(){
      return {
        // Alphabet (on le met là pour y accéder dans la vue)
        lettres: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
        // Liste des lettres valides
        succes: [],
        // Liste des lettres ratées
        rates: [],
        // Mot à deviner:
        mot: mots[parseInt(Math.floor(Math.random() * mots.length), 10)],
        // Lettres testées (pour l'affichage)
        testees: [],
      };
    },
    computed: {
      motADeviner(){
        let out = [];
        for (const l of this.mot) {
          out.push(this.succes.indexOf(l) === -1 ? '_' : l);
        }
        return out.join(' ');
      },
      gagne(){
        return this.succes.length === this.mot.length
      },
      perdu(){
        return this.rates.length > 6
      },
    },
    methods: {
      testeLettre(lettre){
        this.testees.push(lettre)
        if (this.mot.indexOf(lettre) > -1) {
          this.succes.push(lettre);
        } else {
          this.rates.push(lettre);
        }
      },
      reset(){
        this.succes = [];
        this.rates = [];
        this.mot = mots[parseInt(Math.floor(Math.random() * mots.length), 10)];
        this.testees = [];
      }
    }
  };
</script>

<style>
  body {
    background-color: #EEE;
    font-family: sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
  }

  .btn-lettre {
    /*padding:15px;*/
    font-size: 2em;
    border: 1px solid #333;
    background-color: #FFF;
    width: 2em;
    height: 2em;
    margin: 3px;
  }

  [disabled] {
    opacity: .5;
  }

  .success,
  [disabled].success {
    color: green;
    background-color: lightgreen;
  }

  /* Pas encore au point sur les flex... */
  .gagne,
  .perdu {
    text-align: center;
    font-size: 2em;
    height: 100vh;
    padding: 2em;
  }

  .gagne {
    color: green;
    background-color: lightgreen;
  }

  .perdu {
    color: darkred;
    background-color: red;
  }

  .mot{
    font-size:3em;
    text-align: center;
  }

</style>