Final push

emrebilge · Sep 21, 2023 · 69c9680 · 69c9680
1 parent abd1dba
commit 69c9680
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/frontend/word-guessing-game/public/index.html b/frontend/word-guessing-game/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/logo1.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo1.jpg" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Ekreb</title> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -40,4 +40,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>
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.js b/frontend/word-guessing-game/src/GamePage/GamePage.js
@@ -31,9 +31,9 @@ function GamePage() {
         fetchRandomWord();
          setFeedback(''); // Clear the feedback
         }, 2500);
-} else {
+    } else {
       setFeedback('Incorrect. Try again.');
-}
+    }
     } catch (error) {
       // Handle error here
       console.error('Error submitting guess:', error);
@@ -83,7 +83,7 @@ function GamePage() {
         </div>
         <div className="accuracy-card">
           <h2 className="accuracy-title">Accuracy:</h2>
-          <p className="accuracy">{accuracy}%</p>
+          <p className="accuracy">{accuracy.toFixed(2)}%</p>
        </div>
         <div className="score-card">
           <h2 className="score-title">Score:</h2>

diff --git a/frontend/word-guessing-game/src/GamePage/Rules.css b/frontend/word-guessing-game/src/GamePage/Rules.css
@@ -1,9 +1,36 @@
 /* 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 */
+  cursor: pointer; /* Show pointer cursor on hover */
+  transition: background-color 0.3s ease; /* Smooth transition for background color */
+  border-radius: 15px;
+}
+
+.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 */
+}
+
+/* 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 */
+}
+
 .rules-container {
-    background-color: #f0f0f0;
+    background-color: #ffffff;
     padding: 20px;
     border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .rules-title {

diff --git a/frontend/word-guessing-game/src/GamePage/Rules.js b/frontend/word-guessing-game/src/GamePage/Rules.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import './Rules.css';
 
 function Rules({ showRules, toggleRules }) {
   return (
     <div className="rules-container">
-      <button onClick={toggleRules}>
+      <button class={`rules1 ${showRules ? 'hide' : 'show'}`} onClick={toggleRules}>
         {showRules ? 'Hide Rules' : 'Show Rules'}
       </button>
       {showRules && (