diff --git a/frontend/word-guessing-game/public/logo1.jpg b/frontend/word-guessing-game/public/logo1.jpg index bf7264e..fa40a71 100644 Binary files a/frontend/word-guessing-game/public/logo1.jpg and b/frontend/word-guessing-game/public/logo1.jpg differ diff --git a/frontend/word-guessing-game/src/GamePage/GamePage.css b/frontend/word-guessing-game/src/GamePage/GamePage.css index 3eca08b..d29d0ed 100644 --- a/frontend/word-guessing-game/src/GamePage/GamePage.css +++ b/frontend/word-guessing-game/src/GamePage/GamePage.css @@ -1,4 +1,22 @@ -/* GamePage.css */ +.button{ + background-color: #007bff; /* Blue background color */ + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; /* Show pointer cursor on hover */ + font-size: 16px; /* Font size */ + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow */ + transition: box-shadow 0.3s ease; /* Add a transition for smoother hover effect */} + +.button:hover{ + background-color: #0056b3; /* Darker blue on hover */ + box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */ +} + +.button.hide{ + background-color: rgb(110, 174, 252); /* Red background color */ +} .green { @@ -72,22 +90,6 @@ font-size: 16px; } -/* Submit button styles */ -.submit-button { - background-color: #3498db; /* Blue button background */ - color: #fff; /* White button text */ - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; - transition: background-color 0.3s ease; -} - -.submit-button:hover { - background-color: #2980b9; /* Darker blue on hover */ -} - /* Score card styles */ .score-card { background-color: #fff; /* White background */ diff --git a/frontend/word-guessing-game/src/GamePage/GamePage.js b/frontend/word-guessing-game/src/GamePage/GamePage.js index 8c95ac4..e24e4d9 100644 --- a/frontend/word-guessing-game/src/GamePage/GamePage.js +++ b/frontend/word-guessing-game/src/GamePage/GamePage.js @@ -23,14 +23,15 @@ function GamePage() { // Assuming the backend responds with the updated score and accuracy setScore(response.data.score); - setAccuracy(response.data.accuracy); + setAccuracy(response.data.accuracy); + if (response.data.message === 'Correct guess') { setFeedback('Correct! Well done.'); // Wait for 3 seconds, then fetch a new word setTimeout(() => { fetchRandomWord(); setFeedback(''); // Clear the feedback - }, 2500); + }, 2000); } else { setFeedback('Incorrect. Try again.'); } @@ -44,6 +45,8 @@ function GamePage() { const fetchRandomWord = async () => { try { + // setFeedback(''); // Clear feedback + const response = await axios.get('http://localhost:5551/get_word'); const randomWord = response.data.scrambledWord; setWord(randomWord); // Set the retrieved word in the state @@ -60,6 +63,19 @@ function GamePage() { setShowRules(!showRules); }; + const handleSkip = async () => { + try { + const response = await axios.post('http://localhost:5551/skip_word'); + + setWord(response.data.scrambledWord); + setAccuracy(response.data.accuracy); + } catch (error) { + console.error('Error skipping word:', error); + } + }; + + + return (
{accuracy.toFixed(2)}%
+{accuracy}%
{feedback}
+