phase 3 updates for assignment

assignments/phase3/Website with integrated JS Hangan/css/stylesheet.css → assignments/phase3/docs/css/stylesheet.css

@@ -17,6 +17,7 @@
 6. Responsive Design Adjustments
 7. Footer Styles
 8. Hangman Game Styles
+9. Minesweeper Game Styles
 */
 /* ------------------------------------------------------------------- */
 
@@ -331,7 +332,7 @@ button, .start-game {
 }
 
 /* ------------------------------------------------------------------- */
-/* ----------------- 8. Hamg,am---------------------- ---------------- */
+/* ----------------- 8. Hangman---------------------- ---------------- */
 /* ------------------------------------------------------------------- */
 
 /* General Styles for Hangman Game Container */
@@ -431,3 +432,19 @@ button, .start-game {
     cursor: default;
     opacity: 0.5;
 }
+
+/* ------------------------------------------------------------------- */
+/* ----------------- 8. Minesweeper ---------------------------------- */
+/* ------------------------------------------------------------------- */
+
+#minesweeper{padding:2rem}
+
+#minesweeper #game.hidden,#minesweeper #main-menu.hidden,.hidden{display:none}
+
+#minesweeper h1{font-size:3rem;margin-bottom:2rem}
+
+#minesweeper button{padding:.8rem 1.5rem;font-family:JetBrains Mono}
+
+#minesweeper .return{text-decoration:underline;font-weight:700;border:none;background-color:#fff}
+
+#minesweeper #main-menu{display:grid;grid-template-columns:1fr 1fr;gap:2rem}#main-menu>div{display:flex;flex-direction:column;align-items:center;gap:1rem}#minesweeper h2{margin-top:2rem;font-weight:700;font-size:2.4rem}#main-menu p,#minesweeper h2{text-align:center}#main-menu form{display:flex;flex-direction:column;gap:1rem}#main-menu form>div{display:flex;justify-content:space-evenly;gap:1rem}#main-menu input{border:none;border-bottom:.1rem solid;font-family:JetBrains Mono}#main-menu button{margin-top:1rem}#instructions h2,#instructions p{margin-bottom:1.5rem}#instructions h3{font-size:2.2rem}#instructions ul{padding:0 2rem}#instructions li{font-size:1.8rem;margin-bottom:1rem}#instructions a{font-size:1.8rem}#instructions button{padding:1rem 1.8rem;margin:2rem auto}#board-background{width:100%;background-color:#ededed;padding:2rem 0}#board{max-width:fit-content;margin:0 auto}#board .row{display:flex}#board button{border-radius:0;padding:.8rem;width:3rem;height:3rem;border-color:#d3d3d3}button[data-status=checked]{color:#000;font-weight:700;background-color:#fff7e4}button[data-num-adj-mines="1"]{background-color:#ffe6c6}button[data-num-adj-mines="2"]{background-color:#ffc384}button[data-num-adj-mines="3"]{background-color:#dea38b}button[data-num-adj-mines="4"]{background-color:#e9f59d}button[data-num-adj-mines="5"]{background-color:#b0eb93}button[data-num-adj-mines="6"]{background-color:#accce4}button[data-num-adj-mines="7"]{background-color:#b0a9e4}button[data-num-adj-mines="8"]{background-color:#feaae4}button[data-status=flag]{background:url(../images/minesweeper/flag.svg) no-repeat 50%;background-size:1.5rem 1.5rem}button[data-status=question]{background:url(../images/minesweeper/question.svg) no-repeat 50%;background-size:1.5rem 1.5rem}button[data-status=bomb-reveal]{background:url(../images/minesweeper/bomb.svg) no-repeat 50%;background-size:1.5rem 1.5rem}#flagged-mines-container,#info,#settings{display:flex;justify-content:center;align-items:center;gap:4rem}#info{margin-bottom:.5rem}#flagged-mines-container{gap:.2rem}#mine-svg-container{margin-bottom:.3rem}#emoji,#mine-svg-container,img[src="bomb.svg"]{width:2.5rem;height:2.5rem}#emoji{border:none;background:url(../images/minesweeper/alive.svg) no-repeat 50%;background-size:2.5rem 2.5rem}#emoji.dead{background:url(../images/minesweeper/dead.svg) no-repeat 50%;background-size:2.5rem 2.5rem}#timer span{font-size:1.8rem}#settings{flex-direction:column;gap:.5rem;margin-top:.5rem}#settings .return{background-color:#ededed;font-size:1.8rem;font-weight:400}dialog{border-color:grey;border-radius:1rem;margin:auto;padding:2rem}dialog div{display:flex;flex-direction:column;align-items:center;gap:1rem}dialog p{text-align:center}dialog button{margin:0 auto}

assignments/phase3/docs/game.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <title>Games</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/stylesheet.css">
+</head>
+
+<body>
+    <!-- nav bar -->
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="game.html">Games</a></li>
+            <li><a href="team.html">Team</a></li>
+            <li><a href="documents.html">Documents</a></li>
+        </ul>
+    </nav>
+
+    <header>
+        <p>UMGC CMSC 495 Capstone Project</p>
+    </header>
+
+    <main>
+        <h1>Games</h1>
+        <a href="hangman.html">Hangman</a>
+        <a href="minesweeper.html">Minesweeper</a>
+    </main>
+
+<script src="js/hangman.js"></script>
+
+</body>
+
+
+<!-- Footer -->
+<footer>
+    <div class="footer-container">
+
+        <section class="footer-links">
+            <p><a href="index.html">Home</a> | <a href="documents.html">Documentation</a> | <a href="team.html">Team</a> </p>
+            <br>
+        </section>
+
+        <section class="footer-legal">
+            <p><b>Legal:This project is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.</b> <a href="http://creativecommons.org/licenses/by-nc/4.0/">View License</a></p>
+            <br>
+        </section>
+
+        <section class="footer-university">
+            <p><b>© 2024 by Web Game Devs. All rights reserved.</b></p>
+        </section>
+    </div>
+</footer>
+
+</html>

assignments/phase3/Website with integrated JS Hangan/game.html → assignments/phase3/docs/hangman.html

@@ -33,8 +33,6 @@
 
     <!-- Games section -->
     <main class="game-container">
-        <h1>Our Games</h1>
-
         <!-- Game sel -->
         <div class="game-list">
 
@@ -62,20 +60,14 @@ <h2>Hangman</h2>
                     </div>
                 </div>
             </section>
-
-            <!-- Game 2: additional games can go here like this minesweeper?-->
-            <!-- <section class="game">
-                <h2>game</h2>
-                <p>blah blah blah</p>
-                <iframe src="https://itch.io/embed/gameidlinkthinggy" width="800" height="600" allowfullscreen></iframe>
-            </section> -->
 
         </div>
     </main>
 
+<script src="js/hangman.js"></script>
+
 </body>
 
-<script src="js/hangman.js"></script>
 
 <!-- Footer -->
 <footer>

assignments/phase3/Website with integrated JS Hangan/js/hangman.js → assignments/phase3/docs/js/hangman.js

@@ -89,26 +89,43 @@ const hangmanImages = [
     'images/hangman/HangmanPoleWithHangMan.png'
 ];
 
+
+// added to handle wrong guesses and initialize and now claling correct html for funcitonality
+function updateWrongGuesses() {
+    const wrongGuessesElement = document.getElementById('wrongGuesses');
+    console.log(wrongGuessesElement);
+    if (wrongGuessesElement !== null) {
+        wrongGuessesElement.textContent = 'Wrong guesses: ' + wrongGuesses.join(', ');
+    } else {
+        console.error('Wrong guesses display element not found!');
+    }
+}
+
+
 // init game once the HTML document has fully loaded.
 document.addEventListener('DOMContentLoaded', initializeGame);
 
 // init game by setting game state and updating UI components.
 function initializeGame() {
-    // select random word from list.
-    const randomIndex = Math.floor(Math.random() * words.length);
-    selectedWord = words[randomIndex];
-    selectedDefinition = wordDefinitions[selectedWord];
-
-    // reset game state.
-    guessedLetters = [];
-    wrongGuesses = [];
-    attempts = 0;
-
-    // init UI components.
-    createLetterButtons();
-    updateWordDisplay();
-    updateHangmanImage();
-    updateWrongGuesses();
+    try{
+        // select random word from list.
+        const randomIndex = Math.floor(Math.random() * words.length);
+        selectedWord = words[randomIndex];
+        selectedDefinition = wordDefinitions[selectedWord];
+
+        // reset game state.
+        guessedLetters = [];
+        wrongGuesses = [];
+        attempts = 0;
+
+        // init UI components.
+        createLetterButtons();
+        updateWordDisplay();
+        updateHangmanImage();
+        updateWrongGuesses();
+    } catch (error) {
+            console.error('Error Initializing game:', error);
+    }
 }
 
 // creates/displays letter buttons for user interaction.
@@ -128,30 +145,38 @@ function createLetterButtons() {
     });
 }
 
-// handles logic whenletter guessed.
-function handleGuess(letter) {
-    const button = document.getElementById('letter-' + letter);
-    button.disabled = true; // disable button after click.
+// hanles guessess, added console logging and try/catch for troubleshooting....
 
-    if (selectedWord.toUpperCase().includes(letter)) {
-        // if letter in word, update display.
-        guessedLetters.push(letter);
-        button.style.backgroundColor = '#D3D3D3';
-        updateWordDisplay();
-    } else {
-        // if letter not in word, handle incorrect guess.
-        if (!wrongGuesses.includes(letter)) {
-            wrongGuesses.push(letter);
-            attempts++;
-            button.style.backgroundColor = 'red';
-            updateHangmanImage();
-            updateWrongGuesses();
+function handleGuess(letter) {
+    try {
+        console.log('Guessed letter:', letter);
+        console.log('Current state:', { guessedLetters, wrongGuesses, attempts });
+
+        const button = document.getElementById('letter-' + letter);
+        button.disabled = true;
+
+        if (selectedWord.toUpperCase().includes(letter)) {
+            if (!guessedLetters.includes(letter)) {
+                guessedLetters.push(letter);
+            }
+            button.style.backgroundColor = '#D3D3D3';
+            updateWordDisplay();
+        } else {
+            if (!wrongGuesses.includes(letter)) {
+                wrongGuesses.push(letter);
+                attempts++;
+                button.style.backgroundColor = 'red';
+                updateHangmanImage();
+                updateWrongGuesses();
+            }
         }
+        checkGameOver();
+    } catch (error) {
+        console.error('Error handling guess:', error, { guessedLetters, wrongGuesses, attempts });
     }
-    // check if game is over after each guess.
-    checkGameOver();
 }
 
+
 // updates display of word with correctly guessed letters.
 function updateWordDisplay() {
     const wordDisplay = document.getElementById('wordDisplay');
@@ -164,16 +189,22 @@ function updateWordDisplay() {
 function checkGameOver() {
     const wordDisplay = document.getElementById('wordDisplay').innerText.replace(/\s+/g, '');
     if (!wordDisplay.includes('_')) {
-        // if no blanks, player wins.
+        // If no blanks, player wins.
         alert(`Congratulations! You won! The word was "${selectedWord}". Definition: ${selectedDefinition}`);
         initializeGame();
-    } else if (attempts > maxAttempts) {
-        // If max number of attempts is exceeded, player loses.
-        alert(`Game Over! The correct word was "${selectedWord}". Definition: ${selectedDefinition}`);
-        initializeGame();
+    } else if (attempts >= maxAttempts) {
+        // If max number of attempts is reached, update image before showing the game over alert.
+        updateHangmanImage();
+
+        // Delay the game over alert to allow the image to update on the screen.
+        setTimeout(() => {
+            alert(`Game Over! The correct word was "${selectedWord}". Definition: ${selectedDefinition}`);
+            initializeGame();
+        }, 500); // Delay of 500 milliseconds (0.5 seconds)
     }
 }
 
+
 // updates hangman image to reflect current number of incorrect guesses.
 function updateHangmanImage() {
     const hangmanImage = document.querySelector('.hangman-images');