From 377761b6664281005c5ba925bc912e50fb267e35 Mon Sep 17 00:00:00 2001 From: Aqib Javid Bhat Date: Fri, 10 Nov 2023 16:08:17 +0530 Subject: [PATCH] Update game UI and logic Co-Authored-By: Naik Mubashir <124430100+naikmubashir@users.noreply.github.com> --- wordle.css | 50 +++++++++++++++++++--- wordle.js | 122 ++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 128 insertions(+), 44 deletions(-) diff --git a/wordle.css b/wordle.css index 9ebc6fa..8a415ac 100644 --- 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; } \ No newline at end of file diff --git a/wordle.js b/wordle.js index 0ee756e..07be5a8 100644 --- 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} 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!
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(); } \ No newline at end of file