#000

play

@play

10mo

ago

public

earned

reactions

import React, { useState, useEffect, useCallback } from 'react';
import './PharaohsTrivia.css'; // For professional styling

// Assuming image imports are correctly configured:
import Coin20 from './images/enhanced_1762428323273.jpg';
import Coin50 from './images/enhanced_1762430071978.jpg';
import Coin100 from './images/unnamed (9).jpg';

// --- Game Data: Questions and Levels Configuration ---
const QUIZ_DATA = [
// Level 1: Easy Questions (Reward: 20 EGP)
{
question: "What is the capital city of Egypt?",
options: ["Alexandria", "Luxor", "Cairo", "Aswan"],
answer: "Cairo"
},
{
question: "Which river is often called the 'Lifeblood' of Egypt?",
options: ["Tigris", "Euphrates", "Nile", "Jordan"],
answer: "Nile"
},
];

const LEVEL_CONFIG = [
{
levelId: 1,
minScore: 1, // Need at least 1 correct answer to pass Level 1
reward: { value: 20, image: Coin20, message: "Abu Simbel's Treasure!" }
},
{
levelId: 2,
minScore: 2, // Need at least 2 correct answers to pass Level 2
reward: { value: 50, image: Coin50, message: "Giza Pyramids' Wealth!" }
},
{
levelId: 3,
minScore: 3,
reward: { value: 100, image: Coin100, message: "Grand Museum's Gold!" }
},
];

// --- Main Component ---
const PharaohsTrivia = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [gameState, setGameState] = useState('playing'); // playing, levelComplete, finished
const [levelIndex, setLevelIndex] = useState(0);
const [isAnswerSelected, setIsAnswerSelected] = useState(false);
const [selectedOption, setSelectedOption] = useState(null);

const currentLevelConfig = LEVEL_CONFIG[levelIndex];
const totalQuestions = QUIZ_DATA.length;

// Handles the player selecting an answer
const handleAnswerSelect = useCallback((option) => {
if (isAnswerSelected) return;

setIsAnswerSelected(true);
setSelectedOption(option);

// Check if the answer is correct
if (option === QUIZ_DATA[currentQuestion].answer) {
setScore(prevScore => prevScore + 1);
}

}, [currentQuestion, isAnswerSelected]);

// Handles moving to the next question or checking level completion
const handleNext = useCallback(() => {
if (!isAnswerSelected) return; // Must select an answer first

const nextQuestion = currentQuestion + 1;

if (nextQuestion < totalQuestions) {
// Go to next question
setCurrentQuestion(nextQuestion);
setIsAnswerSelected(false);
setSelectedOption(null);
} else {
// All questions for the current level answered
if (score >= currentLevelConfig.minScore) {
setGameState('levelComplete');
} else {
setGameState('lost'); // Implement a specific loss state if needed
}
}
}, [currentQuestion, totalQuestions, score, currentLevelConfig, isAnswerSelected]);

// Handles moving to the next level
const handleNextLevel = useCallback(() => {
const nextLevelIndex = levelIndex + 1;

if (nextLevelIndex < LEVEL_CONFIG.length) {
// Reset and advance to the next level
setLevelIndex(nextLevelIndex);
setCurrentQuestion(0);
setScore(0);
setGameState('playing');
setIsAnswerSelected(false);
setSelectedOption(null);
} else {
// Game over, all levels finished
setGameState('finished');
}
}, [levelIndex]);

// Helper function for styling options
const getOptionStyle = (option) => {
if (!isAnswerSelected || selectedOption !== option) {
return {}; // Default style
}

// Once an answer is selected
if (option === QUIZ_DATA[currentQuestion].answer) {
return styles.correctOption;
} else {
return styles.incorrectOption;
}
};

// ******************
// UI Rendering Logic
// ******************

// Level Complete Screen (Reward screen)
if (gameState === 'levelComplete') {
const reward = currentLevelConfig.reward;
return (
<div style={styles.container}>
<div style={styles.resultModal}>
<h2 style={styles.winTitle}>Level {currentLevelConfig.levelId} Complete! ✅</h2>
<p style={styles.rewardText}>You earned a **{reward.value} EGP** reward!</p>
<img
src={reward.image}
alt={`Reward ${reward.value} EGP`}
style={styles.rewardImage}
/>
<button onClick={handleNextLevel} style={styles.nextButton}>
{levelIndex === LEVEL_CONFIG.length - 1 ? 'Finish Game' : 'Continue to Next Level'}
</button>
</div>
</div>
);
}

// Game Finished Screen
if (gameState === 'finished') {
return (
<div style={styles.container}>
<div style={{...styles.resultModal, backgroundColor: '#FFD700', color: '#162447'}}>
<h2 style={styles.finishTitle}>🏆 Congratulations! You are a Trivia Master!</h2>
<p>All rewards collected. Thanks for playing!</p>
</div>
</div>
);
}

// Main Playing Screen
return (
<div style={styles.container}>
<h1 style={styles.title}>Pharaoh's Fortune Trivia</h1>

{/* Progress Bar and Stats */}
<div style={styles.statsBar}>
<p>Level: {currentLevelConfig.levelId}</p>
<p>Question: {currentQuestion + 1} / {totalQuestions}</p>
<p>Score: {score}</p>
</div>

<div style={styles.quizArea}>
<p style={styles.questionText}>
{QUIZ_DATA[currentQuestion].question}
</p>

{/* Answer Options */}
<div style={styles.optionsContainer}>
{QUIZ_DATA[currentQuestion].options.map((option, index) => (
<button
key={index}
style={{ ...styles.optionButton, ...getOptionStyle(option) }}
onClick={() => handleAnswerSelect(option)}
disabled={isAnswerSelected}
>
{option}
</button>
))}
</div>

{/* Next Button */}
{isAnswerSelected && (
<button
onClick={handleNext}
style={styles.nextButton}
>
{currentQuestion === totalQuestions - 1 ? 'Check Results' : 'Next Question'}
</button>
)}
</div>
</div>
);
};

// --- Styling ---
const styles = {
container: {
fontFamily: 'Roboto, sans-serif',
textAlign: 'center',
padding: '20px',
background: 'linear-gradient(135deg, #4b0082 0%, #8a2be2 100%)', // Purple/Violet Theme
minHeight: '100vh',
color: 'white',
},
title: {
color: '#FFD700', // Gold
marginBottom: '20px',
fontSize: '2.5em',
textShadow: '2px 2px #000 ',
},
statsBar: {
display: 'flex',
justifyContent: 'space-around',
backgroundColor: 'rgba(255, 255, 255, 0.15)',
padding: '10px',
borderRadius: '8px',
marginBottom: '30px',
},
quizArea: {
backgroundColor: 'rgba(255, 255, 255, 0.95)',
padding: '40px',
borderRadius: '15px',
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.5)',
maxWidth: '550px',
margin: '0 auto',
color: '#333',
},
questionText: {
fontSize: '1.5em',
marginBottom: '30px',
color: '#4b0082',
fontWeight: 'bold',
},
optionsContainer: {
display: 'flex',
flexDirection: 'column',
gap: '15px',
marginBottom: '20px',
},
optionButton: {
padding: '15px 20px',
fontSize: '1.1em',
cursor: 'pointer',
backgroundColor: '#9370DB', // Medium Purple
color: 'white',
border: '3px solid #6A5ACD ',
borderRadius: '30px',
fontWeight: 'bold',
transition: 'background-color 0.3s',
},
correctOption: {
backgroundColor: '#4CAF50', // Green
border: '3px solid #2E8B57 ',
},
incorrectOption: {
backgroundColor: '#F44336', // Red
border: '3px solid #B22222 ',
},
nextButton: {
padding: '12px 25px',
fontSize: '1.1em',
cursor: 'pointer',
backgroundColor: '#FFD700', // Gold
color: '#4b0082',
border: 'none',
borderRadius: '25px',
fontWeight: 'bold',
marginTop: '20px',
},
// Result/Reward Modal Styles
resultModal: {
maxWidth: '500px',
margin: '50px auto',
padding: '40px',
borderRadius: '20px',
backgroundColor: '#8A2BE2',
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.7)',
color: 'white',
},
winTitle: {
fontSize: '2.5em',
color: '#EAF2F8',
},
rewardText: {
fontSize: '1.4em',
margin: '15px 0',
fontWeight: 'bold',
color: '#FFD700',
},
rewardImage: {
width: '100%',
maxWidth: '400px',
height: 'auto',
borderRadius: '10px',
border: '5px solid #FFD700 ',
margin: '20px 0',
},
finishTitle: {
fontSize: '2.5em',
}
};

export default PharaohsTrivia;