Final push

emrebilge · Sep 21, 2023 · 7d930e4 · 7d930e4
1 parent 294934d
commit 7d930e4
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 deletions.
diff --git a/frontend/word-guessing-game/public/logo1.jpg b/frontend/word-guessing-game/public/logo1.jpg
diff --git 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
@@ -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 (
 <div className="game-container">
   <Rules showRules={showRules} toggleRules={toggleRules} />
@@ -77,13 +93,13 @@ function GamePage() {
             value={guess}
             onChange={(e) => setGuess(e.target.value)}
           />
-          <button className="submit-button" onClick={handleSubmitGuess}>
+          <button className="button" onClick={handleSubmitGuess}>
             Submit Guess
           </button>
         </div>
         <div className="accuracy-card">
           <h2 className="accuracy-title">Accuracy:</h2>
-          <p className="accuracy">{accuracy.toFixed(2)}%</p>
+          <p className="accuracy">{accuracy}%</p>
        </div>
         <div className="score-card">
           <h2 className="score-title">Score:</h2>
@@ -93,6 +109,9 @@ function GamePage() {
       <p className="feedback-message" style={{ color: feedbackClass }}>
         {feedback}
       </p>
+      <button className="button" onClick={handleSkip}>
+         Skip Word
+      </button>
     </div>
   );  
 }

diff --git 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;