Lingutla Prem Kumar Internship

javascript/canvas.js

@@ -1,34 +1,60 @@
 class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
+    this.secretWord = secretWord;
+    this.createBoard();
     // ... your code goes here
   }
 
   createBoard() {
+    this.context.clearRect(0, 0, canvas.width, canvas.height);
+    this.drawLines();
     // ... your code goes here
   }
 
   drawLines() {
+    const xStart = 50;
+    const yStart = canvas.height - 50;
+    const lineLength = 40;
+
+    for (let i = 0; i < this.secretWord.length; i++) {
+      this.context.beginPath();
+      this.context.moveTo(xStart + i * lineLength, yStart);
+      this.context.lineTo(xStart + i * lineLength + lineLength, yStart);
+      this.context.stroke();
+      this.context.closePath();
     // ... your code goes here
   }
+}
 
   writeCorrectLetter(index) {
+    const xStart = 50;
+    const yStart = canvas.height - 50;
+
+    this.context.fillText(this.secretWord[index], xStart + index * 40, yStart - 10);
     // ... your code goes here
   }
 
   writeWrongLetter(letter, errorsLeft) {
+    const xStart = canvas.width - 150;
+    const yStart = canvas.height - (errorsLeft * 20);
+
+    this.context.fillText(letter, xStart, yStart);
     // ... your code goes here
   }
 
   drawHangman(errorsLeft) {
+    console.log(`Drawing hangman with ${errorsLeft} errors left.`);
     // ... your code goes here
   }
 
   gameOver() {
+    console.log("Game Over");
     // ... your code goes here
   }
 
   winner() {
+    console.log("You've won!");
     // ... your code goes here
   }
 }

javascript/hangman.js

@@ -1,34 +1,59 @@
 class Hangman {
   constructor(words) {
     this.words = words;
+    this.secretWord = this.pickWord();
+    this.letters = [];
+    this.guessedLetters = '';
+    this.errorsLeft = 10;
     // ... your code goes here
   }
 
   pickWord() {
+    const randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
     // ... your code goes here
   }
 
   checkIfLetter(keyCode) {
+    return keyCode >= 65 && keyCode <= 90;
     // ... your code goes here
   }
 
   checkClickedLetters(letter) {
+    return this.letters.includes(letter);
     // ... your code goes here
   }
 
   addCorrectLetter(letter) {
+    if (!this.guessedLetters.includes(letter)) {
+      this.guessedLetters += letter;
+      // Check if user has won
+      if (this.checkWinner()) {
+        console.log("You've won!");
+      }
+    }
     // ... your code goes here
   }
 
   addWrongLetter(letter) {
+    if (!this.letters.includes(letter)) {
+      this.letters.push(letter);
+      this.errorsLeft--;
+      // Check if game is over
+      if (this.checkGameOver()) {
+        console.log("Game Over!");
+      }
+    }
     // ... your code goes here
   }
 
   checkGameOver() {
+    return this.errorsLeft <= 0;
     // ... your code goes here
   }
 
   checkWinner() {
+    return [...new Set(this.secretWord)].every(letter => this.guessedLetters.includes(letter));
     // ... your code goes here
   }
 }
@@ -40,16 +65,26 @@ const startGameButton = document.getElementById('start-game-button');
 if (startGameButton) {
   startGameButton.addEventListener('click', event => {
     hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
-
-    // HINT (uncomment when start working on the canvas portion of the lab)
-    // hangman.secretWord = hangman.pickWord();
-    // hangmanCanvas = new HangmanCanvas(hangman.secretWord);
-
-    // ... your code goes here
+
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord);
+
+    document.addEventListener('keydown', event => {
+      if (hangman.checkIfLetter(event.keyCode)) {
+        const letter = event.key.toLowerCase();
+        if (!hangman.checkClickedLetters(letter)) {
+          hangman.addCorrectLetter(letter); // or hangman.addWrongLetter(letter)
+          hangmanCanvas.writeCorrectLetter(hangman.secretWord.indexOf(letter));
+        }
+      }
+      hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+      if (hangman.checkGameOver()) {
+        hangmanCanvas.gameOver();
+      } else if (hangman.checkWinner()) {
+        hangmanCanvas.winner();
+      }
+    });
+
+    console.log(`Secret word is: ${hangman.secretWord}`);
   });
-}
-
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
-});
+}