done

javascript/canvas.js

@@ -1,34 +1,151 @@
 class HangmanCanvas {
   constructor(secretWord) {
-    this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+    this.context = document.getElementById("hangman").getContext("2d");
+    this.secretWord = secretWord;
+    this.width = this.context.canvas.width;
+    this.height = this.context.canvas.height;
+    this.correctLetters = [];
+    this.wrongLetters = [];
+    this.createBoard();
   }
 
   createBoard() {
-    // ... your code goes here
+    this.context.clearRect(0, 0, this.width, this.height);
+    this.drawLines();
   }
 
   drawLines() {
-    // ... your code goes here
+    const lineSpacing = 20;
+    const startX = 50;
+    const startY = this.height - 50;
+
+    this.context.beginPath();
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = "white";
+
+    for (let i = 0; i < this.secretWord.length; i++) {
+      this.context.moveTo(startX + i * lineSpacing, startY);
+      this.context.lineTo(startX + i * lineSpacing + 15, startY);
+    }
+
+    this.context.stroke();
+    this.context.closePath();
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    const lineSpacing = 20;
+    const startX = 50;
+    const startY = this.height - 50;
+    this.context.font = "bold 20px Arial";
+    this.context.fillStyle = "white";
+
+    this.context.fillText(
+      this.secretWord[index],
+      startX + index * lineSpacing,
+      startY - 10
+    );
   }
 
   writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+    const startX = 50;
+    const startY = 30;
+
+    if (!this.wrongLetters.includes(letter)) {
+      this.wrongLetters.push(letter);
+      this.context.font = "bold 20px Arial";
+      this.context.fillStyle = "red";
+      this.context.fillText(
+        letter,
+        startX + (this.wrongLetters.length - 1) * 30,
+        startY
+      );
+    }
+
+    this.drawHangman(errorsLeft);
   }
 
   drawHangman(errorsLeft) {
-    // ... your code goes here
+    this.context.beginPath();
+    this.context.lineWidth = 2;
+    this.context.strokeStyle = "white";
+
+    this.context.moveTo(100, this.height - 100);
+    this.context.lineTo(150, this.height - 100);
+    this.context.lineTo(150, this.height - 150);
+    this.context.lineTo(200, this.height - 150);
+    this.context.stroke();
+
+    if (errorsLeft <= 9) {
+      this.context.beginPath();
+      this.context.arc(175, this.height - 130, 15, 0, Math.PI * 2, true);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 8) {
+      this.context.beginPath();
+      this.context.moveTo(175, this.height - 115);
+      this.context.lineTo(175, this.height - 70);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 7) {
+      this.context.beginPath();
+      this.context.moveTo(175, this.height - 105);
+      this.context.lineTo(150, this.height - 90);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 6) {
+      this.context.beginPath();
+      this.context.moveTo(175, this.height - 105);
+      this.context.lineTo(200, this.height - 90);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 5) {
+      this.context.beginPath();
+      this.context.moveTo(175, this.height - 70);
+      this.context.lineTo(150, this.height - 40);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 4) {
+      this.context.beginPath();
+      this.context.moveTo(175, this.height - 70);
+      this.context.lineTo(200, this.height - 40);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 3) {
+      this.context.beginPath();
+      this.context.moveTo(150, this.height - 40);
+      this.context.lineTo(145, this.height - 35);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 2) {
+      this.context.beginPath();
+      this.context.moveTo(200, this.height - 40);
+      this.context.lineTo(205, this.height - 35);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 1) {
+      this.context.beginPath();
+      this.context.moveTo(150, this.height - 90);
+      this.context.lineTo(145, this.height - 85);
+      this.context.stroke();
+    }
+    if (errorsLeft <= 0) {
+      this.context.beginPath();
+      this.context.moveTo(200, this.height - 90);
+      this.context.lineTo(205, this.height - 85);
+      this.context.stroke();
+    }
+    this.context.closePath();
   }
 
   gameOver() {
-    // ... your code goes here
+    this.context.font = "bold 30px Arial";
+    this.context.fillStyle = "red";
+    this.context.fillText("Game Over", this.width / 2 - 80, this.height / 2);
   }
 
   winner() {
-    // ... your code goes here
+    this.context.font = "bold 30px Arial";
+    this.context.fillStyle = "green";
+    this.context.fillText("You Win!", this.width / 2 - 80, this.height / 2);
   }
 }

javascript/hangman.js

@@ -1,55 +1,91 @@
 class Hangman {
   constructor(words) {
     this.words = words;
-    // ... your code goes here
+    this.secretWord = this.pickWord();
+    this.letters = [];
+    this.guessedLetters = "";
+    this.errorsLeft = 10;
   }
 
   pickWord() {
-    // ... your code goes here
+    const randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    return keyCode >= 65 && keyCode <= 90;
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    return this.letters.includes(letter);
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    this.guessedLetters += letter;
+
+    if (this.checkWinner()) {
+      console.log("Congratulations! You've won!");
+    }
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    if (!this.checkClickedLetters(letter)) {
+      this.letters.push(letter);
+      this.errorsLeft--;
+
+      if (this.checkGameOver()) {
+        console.log("Game Over! You've lost.");
+      }
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    return this.errorsLeft <= 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    const secretWordSet = new Set(this.secretWord);
+
+    for (const char of secretWordSet) {
+      if (!this.guessedLetters.includes(char)) {
+        return false;
+      }
+    }
+    return true;
   }
 }
 
 let hangman;
 
-const startGameButton = document.getElementById('start-game-button');
+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
+  startGameButton.addEventListener("click", (event) => {
+    hangman = new Hangman([
+      "node",
+      "javascript",
+      "react",
+      "miami",
+      "paris",
+      "amsterdam",
+      "lisboa",
+    ]);
+    hangman.secretWord = hangman.pickWord();
+    console.log(`Secret Word: ${hangman.secretWord}`);
   });
 }
 
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
+document.addEventListener("keydown", (event) => {
+  const letter = event.key.toLowerCase();
+  const keyCode = event.keyCode;
+
+  if (hangman.checkIfLetter(keyCode)) {
+    if (!hangman.checkClickedLetters(letter)) {
+      if (hangman.secretWord.includes(letter)) {
+        hangman.addCorrectLetter(letter);
+      } else {
+        hangman.addWrongLetter(letter);
+      }
+    }
+  }
 });