Skip to content

Commit

Permalink
Final push
Browse files Browse the repository at this point in the history
  • Loading branch information
@emrebilge
emrebilge committed Sep 22, 2023
1 parent b3a6523 commit 51c5272
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 141 deletions.
24 changes: 16 additions & 8 deletions frontend/word-guessing-game/src/GamePage/GamePage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,27 @@
/* Add styles for the header */
/* Styles for the app header container */
.app-header {
background-color: rgb(132, 164, 170) ; /* Background color for the header */
color: #fff; /* Text color */
padding: 10px; /* Add padding for spacing */
text-align: center; /* Center-align the text */
background-color: rgb(132, 164, 170);
color: #fff;
padding: 10px;
text-align: center;
border-radius: 10px;
margin-bottom: 10px;
display: flex; /* Make the children inline */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
}

/* Style for the game name */
.game-name {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 36px; /* Adjust font size for the game name */
font-weight: bold; /* Make the name bold if needed */
font-size: 36px;
font-weight: bold;
margin-left: 10px; /* Add some spacing between the logo and text */
}

.logo {
width: 50px; /* Adjust the size as needed */
height: auto; /* Maintain aspect ratio */
}


Expand All @@ -34,7 +42,7 @@

/* Container styles */
.game-container {
font-family: 'Arial', sans-serif;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
Expand Down
123 changes: 71 additions & 52 deletions frontend/word-guessing-game/src/GamePage/GamePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function GamePage() {
const [round, setRound] = useState(1);

const [gameStarted, setGameStarted] = useState(false);
const [showWelcomeScreen, setShowWelcomeScreen] = useState(true);

// Define feedbackClass based on the content of the feedback message
const feedbackClass = feedback.includes('Correct') ? 'green' : 'red';
Expand Down Expand Up @@ -66,17 +67,26 @@ function GamePage() {
};

useEffect(() => {
fetchRandomWord();
if(gameStarted){
fetchRandomWord();
}
}, []);

const onStartGame = () => {
setGameStarted(true);
};
// const onStartGame = () => {
// setGameStarted(true);
// };

const toggleRules = () => {
setShowRules(!showRules);
};

const handlePlayClick = () => {
// Start the game by hiding the welcome screen
setShowWelcomeScreen(false);
setGameStarted(true);
fetchRandomWord(); // Fetch initial word when starting the game
};

const handleSkip = async () => {
try {
const response = await axios.post('http://localhost:5551/skip_word');
Expand Down Expand Up @@ -120,56 +130,65 @@ function GamePage() {
};

return (
<div>
<div>
{!gameStarted && showWelcomeScreen && (
<WelcomePage onStartGame={handlePlayClick} />
)}

{gameStarted && !showWelcomeScreen && (
<div className="app-header">
<img src="/logo1.jpg" alt="Ekreb Logo" className="logo" />
<h1 className="game-name">Ekreb</h1>
</div>
<div className="game-container">
<Rules showRules={showRules} toggleRules={toggleRules} />
<div className="game-content">
<div className="game-card">
<div className="word-container">
<h2 className="game-title">Guess the Word:</h2>
<p className="scrambled-word">Scrambled Word: {word}</p>
<input
type="text"
className="guess-input"
placeholder="Your Guess"
value={guess}
onChange={(e) => setGuess(e.target.value)}
/>
<button className="button" onClick={handleSubmitGuess}>
Submit Guess
</button>
<button className="button hint-button" onClick={handleHint} style={{ marginLeft: '10px' }}>
Get Hint
</button>
{<p className="hint-message">Hint: {hint}</p>}
</div>
<div className="card-container">
<div className="accuracy-card">
<h2 className="accuracy-title">Accuracy:</h2>
<p className="accuracy">{accuracy}%</p>
</div>
<div className="score-card">
<h2 className="score-title">Score:</h2>
<p className="score">{score}</p>
</div>
</div>
</div>
</div>
<p className="feedback-message" style={{ color: feedbackClass }}>
{feedback}
</p>
<button className="button" onClick={handleSkip}>
Skip Word
</button>
<button className="button reset-button" onClick={handleReset} style={{ marginLeft: '10px' }}>
Reset Game
</button>
)}

</div>
</div>
)};
{gameStarted && !showWelcomeScreen && (
<div className="game-container">
<Rules showRules={showRules} toggleRules={toggleRules} />
<div className="game-content">
<div className="game-card">
<div className="word-container">
<h2 className="game-title">Guess the Word:</h2>
<p className="scrambled-word">Scrambled Word: {word}</p>
<input
type="text"
className="guess-input"
placeholder="Your Guess"
value={guess}
onChange={(e) => setGuess(e.target.value)}
/>
<button className="button" onClick={handleSubmitGuess}>
Submit Guess
</button>
<button className="button hint-button" onClick={handleHint} style={{ marginLeft: '10px' }}>
Get Hint
</button>
{<p className="hint-message">Hint: {hint}</p>}
</div>
<div className="card-container">
<div className="accuracy-card">
<h2 className="accuracy-title">Accuracy:</h2>
<p className="accuracy">{accuracy}%</p>
</div>
<div className="score-card">
<h2 className="score-title">Score:</h2>
<p className="score">{score}</p>
</div>
</div>
</div>
</div>
<p className="feedback-message" style={{ color: feedbackClass }}>
{feedback}
</p>
<button className="button" onClick={handleSkip}>
Skip Word
</button>
<button className="button reset-button" onClick={handleReset} style={{ marginLeft: '10px' }}>
Reset Game
</button>
</div>
)}
</div>
)};

export default GamePage;
export default GamePage;
159 changes: 89 additions & 70 deletions frontend/word-guessing-game/src/GamePage/WelcomePage.css
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,90 @@
/* WelcomeScreen.css */

/* Welcome screen container */
.welcome-screen {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
z-index: 1000; /* Ensure the welcome screen is on top */
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none; /* Initially not clickable */
}

.welcome-screen.show {
opacity: 1; /* Fade in when shown */
pointer-events: auto; /* Allow interaction */
}

.welcome-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}

.welcome-content h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}

.welcome-content h2 {
font-size: 18px;
margin-bottom: 10px;
color: #555;
}

.welcome-content ul {
list-style-type: disc;
padding-left: 20px;
text-align: left;
margin-bottom: 20px;
}

.welcome-content li {
font-size: 16px;
margin-bottom: 10px;
color: #777;
}

.play-button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.play-button:hover {
background-color: #0056b3;
}

background-color: #fff; /* White background */
padding: 20px;
border-radius: 5px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}

/* Hide the welcome screen by default */
.welcome-screen.hide {
display: none;
}

/* Welcome screen content */
.welcome-content {
margin: 0 auto; /* Center content horizontally */
max-width: 400px; /* Set the maximum width of the content */
}

/* Welcome screen title */
.Welcome-module_title__uhLqe {
font-size: 36px;
font-weight: bold;
margin-top: 20px;
}

/* Welcome screen subtitle */
.Welcome-module_subtitle__rL8EE {
font-size: 18px;
color: #333;
margin-bottom: 20px;
}

/* Welcome screen buttons container */
.Welcome-module_buttonContainer__K4GEw {
margin-top: 20px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

/* Welcome screen buttons */
.Welcome-module_button__ZG0Zh {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Style for Play button */
.Welcome-module_button__ZG0Zh.Welcome-module_button__ZG0Zh {
background-color: #91726b; /* Blue background color */
color: #fff;
font-size: 20px;
width: 30%;
}

/* Date and wordle meta information */
.Welcome-module_dateContainer__GTeM2 {
margin-top: 20px;
}

/* Date */
.Welcome-module_date__Fmbmx {
font-size: 16px;
color: #333;
}

/* Wordle meta information */
.Welcome-module_wordleMeta__P_0lJ {
font-size: 14px;
color: #333;
margin: 5px 0;
}

/* Style for the wordle grid icon */
.Welcome-module_icon__iYwGT {
width: 100px;
height: 80px;
background-image: url('../../public/logo1.jpg');
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
margin-top: 20px;
border-radius: 10px;
}
24 changes: 13 additions & 11 deletions frontend/word-guessing-game/src/GamePage/WelcomePage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import './WelcomePage.css'; // You can create a CSS file for styling the welcome screen
import './WelcomePage.css'; // Import the CSS file for styling the welcome screen

function WelcomeScreen({ onStartGame }) {
const [showWelcomeScreen, setShowWelcomeScreen] = useState(true);
Expand All @@ -12,16 +12,18 @@ function WelcomeScreen({ onStartGame }) {
return (
<div className={`welcome-screen ${showWelcomeScreen ? 'show' : 'hide'}`}>
<div className="welcome-content">
<h1>Welcome to Ekreb</h1>
<h2>Rules:</h2>
<ul>
<li>Rule 1: Explain the first rule here.</li>
<li>Rule 2: Explain the second rule here.</li>
{/* Add more rules as needed */}
</ul>
<button className="play-button" onClick={handlePlayClick}>
Play
</button>
<div className="Welcome-module_icon__iYwGT"></div>
<h1 className="Welcome-module_title__uhLqe">Ekreb</h1>
<h2 className="Welcome-module_subtitle__rL8EE">Try your best at guessing unscrambled Words <span className="Welcome-module_noWrap__ThSVO"></span></h2>
<div className="Welcome-module_buttonContainer__K4GEw">
<button data-testid="Play" type="button" className="Welcome-module_button__ZG0Zh" onClick={handlePlayClick}>
Play
</button>
</div>
<div className="Welcome-module_dateContainer__GTeM2">
<h3 className="Welcome-module_date__Fmbmx">September 22, 2023</h3>
<p className="Welcome-module_wordleMeta__P_0lJ">Developed by Emre Bilge</p>
</div>
</div>
</div>
);
Expand Down

0 comments on commit 51c5272

Please sign in to comment.