116 lines
4.1 KiB
Vue
116 lines
4.1 KiB
Vue
<template>
|
|
<div class="p-2">
|
|
<h1>Pendu</h1>
|
|
<p>Trouve le mot du pendu - Saisi les lettres</p>
|
|
<div class="game-container">
|
|
<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 class="wrong-letters-container">
|
|
<div v-html="wrongLetters"></div>
|
|
</div>
|
|
|
|
<div class="word" v-html="wordEl"></div>
|
|
</div>
|
|
|
|
<div class="popup-container" id="popup-container">
|
|
<div class="popup">
|
|
<h2 id="final-message"></h2>
|
|
<button id="play-button" @click="playAgain">Play Again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification-container" id="notification-container">
|
|
<p>You have already entered this letter</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Hangman",
|
|
data: function () {
|
|
return {
|
|
words: ['pimprenelle', 'culcul', 'milo'],
|
|
correctLetters: [],
|
|
wrongLetters: [],
|
|
selectedWord: '',
|
|
wordEl: '',
|
|
popup: false,
|
|
finalMessage: '',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
|
|
console.log(this.selectedWord)
|
|
this.displayWord()
|
|
},
|
|
methods: {
|
|
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(/\n/g, '')
|
|
|
|
if(innerWord === this.selectedWord) {
|
|
this.finalMessage = 'Congratulations! You won! 😃';
|
|
this.popup.style.display = 'flex';
|
|
}
|
|
},
|
|
updateWrongLettersEl() {
|
|
let wrongLettersEl =
|
|
this.wrongLetters.length > 0 ? '<p>Wrong</p>' : ''
|
|
+
|
|
this.wrongLetters.map(letter => `<span>${letter}</span>`)
|
|
|
|
// Display parts
|
|
figureParts.forEach((part, index) => {
|
|
const errors = wrongLetters.length
|
|
|
|
if(index < errors) {
|
|
part.style.display = 'block'
|
|
} else {
|
|
part.style.display = 'none'
|
|
}
|
|
})
|
|
|
|
// Check if lost
|
|
if(wrongLetters.length === figureParts.length) {
|
|
finalMessage.innerText = 'Unfortunately you lost. 😕';
|
|
popup.style.display = 'flex';
|
|
}
|
|
},
|
|
playAgain: function () {
|
|
this.correctLetters.splice(0)
|
|
this.wrongLetters.splice(0)
|
|
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
|
|
this.displayWord()
|
|
this.updateWrongLettersEl()
|
|
this.popup = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|