158 lines
6.1 KiB
Vue
158 lines
6.1 KiB
Vue
<template>
|
|
<div class="p-2 game-container">
|
|
<h1 class="text-center">Pendu</h1>
|
|
<p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
|
|
<div class="flex">
|
|
<div class="game-container-box">
|
|
<svg height="250" width="200" class="figure-container">
|
|
<!-- Potence -->
|
|
<line x1="60" y1="20" x2="140" y2="20" />
|
|
<line x1="140" y1="20" x2="140" y2="50" />
|
|
<line x1="60" y1="20" x2="60" y2="230" />
|
|
<line x1="20" y1="230" x2="100" y2="230" />
|
|
|
|
<!-- Tête -->
|
|
<circle cx="140" cy="70" r="20" class="figure-part"/>
|
|
<!-- Corps -->
|
|
<line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
|
|
<line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
|
|
<line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
|
|
<line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
|
|
<line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
|
|
</svg>
|
|
</div>
|
|
<div class="game-container-box">
|
|
<div class="wrong-letters-container">
|
|
<div v-html="wrongLettersEl" class="wrong-letters"></div>
|
|
<div class="word" v-html="wordEl"></div>
|
|
</div>
|
|
|
|
<div v-if="notification" class="notification-container" id="notification-container">
|
|
<p>Vous avez déjà saisie cette lettre.</p>
|
|
</div>
|
|
<div v-if="popup" class="popup-container" id="popup-container">
|
|
<div class="popup">
|
|
<h2>{{ finalMessage }}</h2>
|
|
<button id="play-button" @click="playAgain">Rejouer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="game-input">
|
|
<label for="saisie" class="pb-1">Saisir vos lettres ici</label>
|
|
<input v-model="letterBox" id="saisie" type="text" @keyup="keyMessage">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Hangman",
|
|
data: function () {
|
|
return {
|
|
words: ['pimprenelle', 'culcul', 'milo', 'Prout'],
|
|
letterBox: '',
|
|
figureParts: [],
|
|
correctLetters: [],
|
|
wrongLetters: [],
|
|
wrongLettersEl: '',
|
|
selectedWord: '',
|
|
wordEl: '',
|
|
finalMessage: '',
|
|
popup: false,
|
|
notification: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase()
|
|
this.figureParts = this.$el.querySelectorAll('.figure-part')
|
|
this.displayWord()
|
|
},
|
|
methods: {
|
|
keyMessage(e) {
|
|
console.log(event.key, event.keyCode)
|
|
if(e.keyCode >= 65 && e.keyCode <= 90) {
|
|
const letter = e.key
|
|
|
|
if(this.selectedWord.includes(letter)) {
|
|
if(!this.correctLetters.includes(letter)) {
|
|
this.correctLetters.push(letter)
|
|
|
|
this.displayWord()
|
|
} else {
|
|
this.showNotification()
|
|
}
|
|
} else {
|
|
if(!this.wrongLetters.includes(letter)) {
|
|
this.wrongLetters.push(letter);
|
|
|
|
this.updateWrongLettersEl()
|
|
} else {
|
|
this.showNotification()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
displayWord() {
|
|
this.wordEl =
|
|
this.selectedWord
|
|
.split('')
|
|
.map(
|
|
letter => {
|
|
let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
|
|
return '<span class="letter">' + toggleLetter +"</span>"
|
|
}
|
|
).join('');
|
|
|
|
const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
|
|
|
|
console.log('win', innerWord, this.selectedWord)
|
|
if(innerWord === this.selectedWord) {
|
|
this.finalMessage = 'Gagné! 😃';
|
|
this.popup = true
|
|
}
|
|
},
|
|
updateWrongLettersEl() {
|
|
console.log('wrong', this.wrongLettersEl)
|
|
this.wrongLettersEl =
|
|
!this.wrongLetters ? '<p>Wrong</p>' : ''
|
|
+
|
|
this.wrongLetters.map(letter => `<span>${letter}</span>`);
|
|
|
|
// Display parts
|
|
this.figureParts.forEach((part, index) => {
|
|
const errors = this.wrongLetters.length;
|
|
|
|
if(index < errors) {
|
|
part.style.display = 'block'
|
|
} else {
|
|
part.style.display = 'none'
|
|
}
|
|
});
|
|
|
|
// Check if lost
|
|
if(this.wrongLetters.length === this.figureParts.length) {
|
|
this.finalMessage = 'Perdu. 😕';
|
|
this.popup = true
|
|
}
|
|
},
|
|
playAgain: function () {
|
|
this.correctLetters.splice(0);
|
|
this.wrongLetters.splice(0);
|
|
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase();
|
|
this.displayWord();
|
|
this.updateWrongLettersEl();
|
|
this.popup = false
|
|
this.letterBox = ''
|
|
},
|
|
showNotification(){
|
|
this.notification = true
|
|
|
|
setTimeout(() => {
|
|
this.notification = false
|
|
}, 2000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|