Update game UI and logic

Co-Authored-By: Naik Mubashir <[email protected]>
naikmubashir · Nov 10, 2023 · 377761b · 377761b
1 parent 35a385a
commit 377761b
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 44 deletions.
diff --git a/wordle.css b/wordle.css
@@ -1,20 +1,33 @@
-.row > div {
-    border: 1px solid black;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
+
+* {
+    font-family: 'Montserrat', sans-serif;
+    letter-spacing: 2px;
+    margin: 0px;
+    box-sizing: border-box;
+}
+
+.row>div {
+    border: 1px solid #00000033;
+    border-radius: 0.5rem;
+    margin: 5px;
 }
 
-.row > div {
+.row>div {
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
-    font-size: 2rem;
+    font-size: 1.5rem;
 }
 
 .row {
     display: flex;
     width: fit-content;
+    margin: 5px;
+    background-color: aliceblue;
 }
 
 main {
@@ -23,8 +36,35 @@ main {
     align-items: center;
     justify-content: center;
     min-height: 100vh;
+    background-color: #A0E9FF;
+}
+
+#main {
+    background-color: aliceblue;
+    padding: 15px;
+    border-radius: 25px;
 }
-#enterBtn{
+
+#enterBtn {
     margin-top: 30px;
+    padding: 10px 20px;
+    border: none;
+    font-size: 1.2rem;
+    border-radius: 10px;
+    background-color: azure;
+    cursor: pointer;
+}
+
+#enterBtn:hover,
+.glow {
+    border-color: #ffc600;
+    box-shadow: 0 0 1rem #ffc600;
+    transform: scale(1.05);
+}
 
+#heading {
+    margin: 30px 0px;
+    font-size: 2.5rem;
+    text-transform: uppercase;
+    text-align: center;
 }
diff --git a/wordle.js b/wordle.js
@@ -1,60 +1,85 @@
+/**
+ * Wordle game implementation in JavaScript.
+ */
+
 // Initialize current row and column
 let curRow = 0;
 let curCol = 0;
 
 // Select the main element
 const main = document.querySelector('#main');
+startGame()
 
-// Create rows and columns
-for (let i = 0; i < 6; i++) {
-    const row = document.createElement('div');
-    row.classList.add('row', `r${i}`);
-    for (let j = 0; j < 5; j++) {
-        const col = document.createElement('div');
-        col.id = `r${i}c${j}`;
-        row.appendChild(col);
+/**
+ * Function to draw the game grid.
+ */
+function drawGrid() {
+    // Create rows and columns
+    for (let i = 0; i < 6; i++) {
+        const row = document.createElement('div');
+        row.classList.add('row', `r${i}`);
+        for (let j = 0; j < 5; j++) {
+            const col = document.createElement('div');
+            col.id = `r${i}c${j}`;
+            row.appendChild(col);
+        }
+        main.appendChild(row);
     }
-    main.appendChild(row);
 }
 
-// Function to fetch a random word
+/**
+ * Function to fetch a random word from an API.
+ * @returns {Promise<string>} A promise that resolves to a random word.
+ */
 async function getRandomWord() {
     const response = await fetch("https://random-word-api.herokuapp.com/word?length=5");
     const data = await response.json();
     return data;
 }
 
-// Fetch a random word and attach event listeners
-getRandomWord().then(randomWord => {
-    const word = randomWord.toString()
-    console.log(word);
-    attachListener(curRow, curCol);
-    document.querySelector('#enterBtn').addEventListener('click', () => {
-        if (curCol > 4) {
-            const userWord = getWord(curRow);
-            if (checkWord(word.toLowerCase(), userWord.toLowerCase(), curRow)) {
-                document.querySelector('#heading').textContent = "You Won!"
-                return;
+/**
+ * Function to handle the game logic.
+ */
+function handleGame() {
+    // Fetch a random word and attach event listeners
+    getRandomWord().then(randomWord => {
+        const word = randomWord.toString()
+        console.log(word);
+        attachListener(curRow, curCol);
+        document.querySelector('#enterBtn').addEventListener('click', () => {
+            if (curCol > 4) {
+                const userWord = getWord(curRow);
+                if (checkWord(word.toLowerCase(), userWord.toLowerCase(), curRow)) {
+                    document.querySelector('#heading').textContent = "You Won!"
+                    return;
+                }
+                if (curRow >= 5) {
+                    document.querySelector('#heading').innerHTML = `You Lose!<br>The word was ${word}`;
+                    return;
+                }
+                curRow++;
+                curCol = 0;
+                attachListener(curRow, curCol);
+            } else {
+                alert("Please fill the whole row!");
             }
-            if (curRow >= 5) {
-                document.querySelector('#heading').textContent = "You Lose!"
-                return;
-            }
-            curRow++;
-            curCol = 0;
-            attachListener(curRow, curCol);
-        } else {
-            alert("Please fill the whole row!");
-        }
+        });
+    }).catch(error => {
+        console.log(`ERROR: ${error}`);
     });
-}).catch(error => {
-    console.log(`ERROR: ${error}`);
-});
+}
 
-// Function to attach keypress event listener
+/**
+ * Function to attach keypress event listener.
+ * @param {number} row - The row number.
+ * @param {number} col - The column number.
+ */
 function attachListener(row, col) {
     const handler = (event) => {
-        document.querySelector(`#r${row}c${col}`).textContent = event.key.toUpperCase();
+        const box = document.querySelector(`#r${row}c${col}`);
+        box.textContent = event.key.toUpperCase();
+        box.classList.add('glow');
+        setTimeout(() => { box.classList.remove('glow') }, 200);
         curCol++;
         if (curCol > 4) {
             document.removeEventListener('keypress', handler);
@@ -68,7 +93,11 @@ function attachListener(row, col) {
     document.addEventListener('keypress', handler);
 }
 
-// Function to get the word from the row
+/**
+ * Function to get the word from the row.
+ * @param {number} row - The row number.
+ * @returns {string} The word from the row.
+ */
 function getWord(row) {
     let word = "";
     document.querySelectorAll(`.r${row} > div`).forEach(box => {
@@ -77,7 +106,13 @@ function getWord(row) {
     return word;
 }
 
-// Function to check the user's word against the actual word
+/**
+ * Function to check the user's word against the actual word.
+ * @param {string} actualWord - The actual word.
+ * @param {string} word - The user's word.
+ * @param {number} row - The row number.
+ * @returns {boolean} True if the user's word matches the actual word, false otherwise.
+ */
 function checkWord(actualWord, word, row) {
     const actualWordArr = actualWord.split('');
     const wordArr = word.split('');
@@ -88,8 +123,17 @@ function checkWord(actualWord, word, row) {
         } else if (actualWordArr.indexOf(wordArr[i]) != -1) {
             box.style.background = 'yellow';
         } else {
-            box.style.background = '#999';
+            box.style.background = '#B4B4B3';
         }
     }
     return actualWord === word;
+}
+
+/**
+ * Function to start the game.
+ */
+function startGame() {
+    main.innerHTML = '';
+    drawGrid();
+    handleGame();
 }