Clever Niwagaba - Internship

javascript/canvas.js

@@ -1,34 +1,89 @@
-class HangmanCanvas {
-  constructor(secretWord) {
-    this.context = document.getElementById('hangman').getContext('2d');
-    // ... your code goes here
-  }
-
-  createBoard() {
-    // ... your code goes here
-  }
-
-  drawLines() {
-    // ... your code goes here
-  }
-
-  writeCorrectLetter(index) {
-    // ... your code goes here
-  }
-
-  writeWrongLetter(letter, errorsLeft) {
-    // ... your code goes here
-  }
-
-  drawHangman(errorsLeft) {
-    // ... your code goes here
-  }
-
-  gameOver() {
-    // ... your code goes here
-  }
-
-  winner() {
-    // ... your code goes here
-  }
-}
+class HangmanCanvas {
+  constructor(secretWord) {
+    this.context = document.getElementById('hangman').getContext('2d');
+    // ... your code goes here
+    this.secretWord = secretWord;
+
+  }
+
+  createBoard() {
+    // ... your code goes here
+    this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
+  this.drawLines();
+  }
+
+  drawLines() {
+    // ... your code goes here
+    const numberOfLetters = this.secretWord.length;
+  const startX = 300;
+  const startY = 700;
+  const lineWidth = 50;
+  const lineSpacing = 10;
+
+  for (let i = 0; i < numberOfLetters; i++) {
+    this.context.beginPath();
+    this.context.moveTo(startX + i * (lineWidth + lineSpacing), startY);
+    this.context.lineTo(startX + i * (lineWidth + lineSpacing) + lineWidth, startY);
+    this.context.stroke();
+  }
+  }
+
+  writeCorrectLetter(index) {
+    // ... your code goes here
+    const letter = this.secretWord[index].toUpperCase();
+  const startX = 305 + index * 60; // Adjusted positions
+  const startY = 690;
+
+  this.context.font = '48px Arial';
+  this.context.fillText(letter, startX, startY);
+  }
+
+  writeWrongLetter(letter, errorsLeft) {
+    const startX = 600;
+  const startY = 200;
+  const spacing = 50;
+
+  this.context.font = '48px Arial';
+  this.context.fillText(letter.toUpperCase(), startX + (10 - errorsLeft) * spacing, startY);
+    // ... your code goes here  
+  }
+
+  drawHangman(errorsLeft) {
+    // ... your code goes here
+    const ctx = this.context;
+
+  switch (errorsLeft) {
+    case 9:
+      // Draw the base
+      ctx.beginPath();
+      ctx.moveTo(100, 700);
+      ctx.lineTo(200, 700);
+      ctx.lineTo(150, 650);
+      ctx.closePath();
+      ctx.stroke();
+      break;
+    // Continue adding cases for each errorLeft value
+    // ...
+    default:
+      break;
+  }
+  }
+
+  gameOver() {
+    // ... your code goes here
+    const img = new Image();
+  img.src = './images/gameover.png';
+  img.onload = () => {
+    this.context.drawImage(img, 200, 100, 400, 400);
+  };
+  }
+
+  winner() {
+    // ... your code goes here
+    const img = new Image();
+    img.src = './images/awesome.png';
+    img.onload = () => {
+      this.context.drawImage(img, 200, 100, 400, 400);
+    };
+  }
+}

javascript/hangman.js

@@ -1,55 +1,105 @@
-class Hangman {
-  constructor(words) {
-    this.words = words;
-    // ... your code goes here
-  }
-
-  pickWord() {
-    // ... your code goes here
-  }
-
-  checkIfLetter(keyCode) {
-    // ... your code goes here
-  }
-
-  checkClickedLetters(letter) {
-    // ... your code goes here
-  }
-
-  addCorrectLetter(letter) {
-    // ... your code goes here
-  }
-
-  addWrongLetter(letter) {
-    // ... your code goes here
-  }
-
-  checkGameOver() {
-    // ... your code goes here
-  }
-
-  checkWinner() {
-    // ... your code goes here
-  }
-}
-
-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
-});
+class Hangman {
+  constructor(words) {
+    this.words = words;
+    this.secretWord = this.pickWord(); // The secret word for the current game
+    this.letters = []; // Letters that have been guessed
+    this.guessedLetters = ''; // Correct letters guessed
+    this.errorsLeft = 10;
+  }
+
+  pickWord() {
+    const randomIndex = Math.floor(Math.random() * this.words.length);
+    return this.words[randomIndex];
+  }
+
+  checkIfLetter(keyCode) {
+    return (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122);
+  }
+
+  checkClickedLetters(letter) {
+    return !this.letters.includes(letter);
+  }
+
+  addCorrectLetter(letter) {
+    this.guessedLetters += letter;
+  }
+
+  addWrongLetter(letter) {
+    if (!this.letters.includes(letter)) {
+      this.errorsLeft--;
+      this.letters.push(letter);
+    }
+  }
+
+  checkGameOver() {
+    return this.errorsLeft <= 0;
+  }
+
+  checkWinner() {
+    const uniqueLettersInSecretWord = [...new Set(this.secretWord)];
+    const guessedLettersArray = this.guessedLetters.split('');
+
+    return uniqueLettersInSecretWord.every(letter =>
+      guessedLettersArray.includes(letter)
+    );
+  }
+}
+
+let hangman;
+let hangmanCanvas; // Global variable for canvas
+const startGameButton = document.getElementById('start-game-button');
+
+if (startGameButton) {
+  startGameButton.onclick=() => {
+    hangman = new Hangman(['node', 'javascript', 'react', 'miami', 'paris', 'amsterdam', 'lisboa']);
+
+    hangman.secretWord = hangman.pickWord();
+    hangmanCanvas = new HangmanCanvas(hangman.secretWord); // Initialize canvas instance
+
+    hangman.errorsLeft = 5;
+    hangman.letters = [];
+    hangman.guessedLetters = '';
+
+    hangmanCanvas.createBoard(); // Initialize canvas
+  };
+
+}
+
+document.addEventListener('keydown', event => {
+  const keyCode = event.keyCode;
+  const letter = event.key.toLowerCase();
+
+  if (hangman.checkIfLetter(keyCode)) {
+    if (hangman.checkClickedLetters(letter)) {
+      hangman.letters.push(letter);
+
+      if (hangman.secretWord.includes(letter)) {
+        hangman.addCorrectLetter(letter);
+
+        for (let i = 0; i < hangman.secretWord.length; i++) {
+          if (hangman.secretWord[i] === letter) {
+            hangmanCanvas.writeCorrectLetter(i); // Update canvas with correct letter
+          }
+        }
+
+        if (hangman.checkWinner()) {
+          console.log('You win!');
+          hangmanCanvas.winner();
+        }
+      } else {
+        hangman.addWrongLetter(letter);
+        hangmanCanvas.writeWrongLetter(letter, hangman.errorsLeft);
+        hangmanCanvas.drawHangman(hangman.errorsLeft);
+
+        if (hangman.checkGameOver()) {
+          console.log('Game over!');
+          hangmanCanvas.gameOver();
+        }
+      }
+    } else {
+      console.log('Letter already guessed.');
+    }
+  } else {
+    console.log('Not a valid letter.');
+  }
+});