solved lab

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

javascript/canvas.js

@@ -1,34 +1,75 @@
 class HangmanCanvas {
   constructor(secretWord) {
     this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
+    this.secretWord = secretWord;
+    this.lettersGuessed = [];
+    this.errorsLeft = 10;
+    this.canvasWidth = 1200;
+    this.canvasHeight = 800;
+    this.hangmanParts = [
+      { x: 400, y: 500, width: 100, height: 10 }, // Base
+      { x: 400, y: 150, width: 100, height: 10 }, // Top bar
+      { x: 450, y: 150, width: 10, height: 250 }, // Vertical post
+      { x: 450, y: 200, width: 10, height: 100 }, // Head
+      { x: 450, y: 250, width: 10, height: 100 }, // Body
+      { x: 430, y: 300, width: 40, height: 10 }, // Left arm
+      { x: 470, y: 300, width: 40, height: 10 }, // Right arm
+      { x: 430, y: 350, width: 40, height: 10 }, // Left leg
+      { x: 470, y: 350, width: 40, height: 10 } // Right leg
+    ];
   }
 
   createBoard() {
-    // ... your code goes here
+    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.drawLines();
   }
 
   drawLines() {
-    // ... your code goes here
+    this.context.lineWidth = 5;
+    this.context.strokeStyle = 'black';
+    this.context.beginPath();
+    this.context.moveTo(400, 500);
+    this.context.lineTo(400, 150);
+    this.context.stroke();
+    this.context.moveTo(450, 150);
+    this.context.lineTo(450, 200);
+    this.context.stroke();
   }
 
   writeCorrectLetter(index) {
-    // ... your code goes here
+    this.context.font = '40px Arial';
+    this.context.textAlign = 'center';
+    this.context.textBaseline = 'middle';
+    this.context.fillStyle = 'green';
+    this.context.fillText(this.secretWord[index], 400 + 50 * (index + 1), 550);
   }
 
-  writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
+  writeWrongLetter(letter) {
+    this.context.font = '30px Arial';
+    this.context.textAlign = 'left';
+    this.context.textBaseline = 'top';
+    this.context.fillStyle = 'red';
+    this.context.fillText(letter, 100, 100 + 30 * this.lettersGuessed.length);
   }
 
-  drawHangman(errorsLeft) {
-    // ... your code goes here
+  drawHangman() {
+    this.context.fillStyle = 'black';
+    this.context.fillRect(this.hangmanParts[this.errorsLeft - 1].x, this.hangmanParts[this.errorsLeft - 1].y, this.hangmanParts[this.errorsLeft - 1].width, this.hangmanParts[this.errorsLeft - 1].height);
   }
 
   gameOver() {
-    // ... your code goes here
+    this.context.font = '60px Arial';
+    this.context.textAlign = 'center';
+    this.context.textBaseline = 'middle';
+    this.context.fillStyle = 'red';
+    this.context.fillText('Game Over!', this.canvasWidth / 2, this.canvasHeight / 2);
   }
 
   winner() {
-    // ... your code goes here
+    this.context.font = '60px Arial';
+    this.context.textAlign = 'center';
+    this.context.textBaseline = 'middle';
+    this.context.fillStyle = 'green';
+    this.context.fillText('You Win!', this.canvasWidth / 2, this.canvasHeight / 2);
   }
-}
+}

javascript/hangman.js

@@ -1,55 +1,49 @@
 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
+    // Select a random word from the `words` array
+    const randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
   }
 
   checkIfLetter(keyCode) {
-    // ... your code goes here
+    // Check if the keyCode corresponds to a letter (a-z)
+    return keyCode >= 65 && keyCode <= 90;
   }
 
   checkClickedLetters(letter) {
-    // ... your code goes here
+    // Check if the letter has already been clicked
+    return !this.letters.includes(letter);
   }
 
   addCorrectLetter(letter) {
-    // ... your code goes here
+    // Add the letter to `guessedLetters` and check for win
+    this.guessedLetters += letter;
+    this.checkWinner();
   }
 
   addWrongLetter(letter) {
-    // ... your code goes here
+    // Decrement errorsLeft and update letters if not already clicked
+    this.errorsLeft--;
+    if (this.checkClickedLetters(letter)) {
+      this.letters.push(letter);
+    }
   }
 
   checkGameOver() {
-    // ... your code goes here
+    // Check if errorsLeft is 0 (game over)
+    return this.errorsLeft === 0;
   }
 
   checkWinner() {
-    // ... your code goes here
+    // Check if all letters in the secretWord are guessed
+    return this.secretWord.split('').every(letter => this.guessedLetters.includes(letter));
   }
-}
-
-let hangman;
-
-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
-  });
-}
-
-document.addEventListener('keydown', event => {
-  // React to user pressing a key
-  // ... your code goes here
-});
+}