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 (
@@ -77,13 +93,13 @@ function GamePage() { value={guess} onChange={(e) => setGuess(e.target.value)} /> -

Accuracy:

-

{accuracy.toFixed(2)}%

+

{accuracy}%

Score:

@@ -93,6 +109,9 @@ function GamePage() {

{feedback}

+
); } diff --git a/frontend/word-guessing-game/src/GamePage/Rules.css b/frontend/word-guessing-game/src/GamePage/Rules.css index bad6c25..6d396ac 100644 --- a/frontend/word-guessing-game/src/GamePage/Rules.css +++ b/frontend/word-guessing-game/src/GamePage/Rules.css @@ -1,30 +1,22 @@ -/* Rules.css */ -/* CSS for the Show Rules button */ -.rules1 { - background-color: #007bff; /* Button background color */ - color: #fff; /* Button text color */ - border: none; /* Remove button border */ - padding: 10px 20px; /* Add padding for better spacing */ - font-size: 16px; /* Font size */ +.rules1{ + background-color: #007bff; /* Blue background color */ + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; cursor: pointer; /* Show pointer cursor on hover */ - transition: background-color 0.3s ease; /* Smooth transition for background color */ - border-radius: 15px; + 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 */ } -.rules1:hover { - background-color: #0056b3; /* Darker background color on hover */ - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow on hover */ -} +.rules1:hover{ + background-color: #0056b3; /* Darker blue on hover */ + box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */} -/* Style for the Hide Rules button (when rules are shown) */ -.rules1.hide { - background-color: rgb(110, 174, 252); /* Red background color */ -} - -/* Style for the Show Rules button (when rules are hidden) */ -.rules1.show { - background-color: rgb(41, 112, 255); /* Blue background color */ -} +.rules1.hide{ + background-color: rgb(110, 174, 252); /* Red background color */ + } .rules-container { background-color: #ffffff;