function MainComponent() { const [selectedTeam, setSelectedTeam] = useState(null); const [score, setScore] = useState(0); const [opponentScore, setOpponentScore] = useState(0); const [currentQuestion, setCurrentQuestion] = useState(0); const [position, setPosition] = useState(0); const [ballAnimation, setBallAnimation] = useState(false); const [gameOver, setGameOver] = useState(false); const [streak, setStreak] = useState(0); const [difficulty, setDifficulty] = useState("easy"); const [highScore, setHighScore] = useState(0); const allQuestions = { easy: [ { question: "Which country won the 2022 FIFA World Cup?", options: [ "France", "Argentina", "Brazil", "Croatia" ], correct: 1 }, { question: "Who is known as 'The GOAT'?", options: [ "Neymar", "Mbappe", "Messi", "Ronaldo" ], correct: 2 }, { question: "Which team has won the most Champions League titles?", options: [ "Real Madrid", "AC Milan", "Liverpool", "Bayern Munich" ], correct: 0 }, { question: "What color cards do referees use?", options: [ "Red and Yellow", "Blue and Red", "Green and Red", "Yellow and Blue" ], correct: 0 }, { question: "How many players are on a soccer team during a match?", options: [ "9", "10", "11", "12" ], correct: 2 } ], medium: [ { question: "Which player scored the 'Hand of God' goal?", options: [ "Pele", "Maradona", "Cruyff", "Platini" ], correct: 1 }, { question: "In which year was the first World Cup held?", options: [ "1930", "1934", "1938", "1950" ], correct: 0 }, { question: "Who won the Ballon d'Or in 2023?", options: [ "Haaland", "Mbappe", "Messi", "De Bruyne" ], correct: 2 }, { question: "Which national team is known as 'The Three Lions'?", options: [ "Belgium", "Netherlands", "England", "Denmark" ], correct: 2 }, { question: "How long is a standard soccer match?", options: [ "80 minutes", "85 minutes", "90 minutes", "95 minutes" ], correct: 2 } ], hard: [ { question: "Who was the first goalkeeper to score in the Premier League?", options: [ "Peter Schmeichel", "Pepe Reina", "Brad Friedel", "Paul Robinson" ], correct: 0 }, { question: "Which team went unbeaten in the 2003-04 Premier League season?", options: [ "Chelsea", "Arsenal", "Manchester United", "Liverpool" ], correct: 1 }, { question: "What was the first soccer team to win a domestic treble in England?", options: [ "Liverpool", "Manchester United", "Manchester City", "Arsenal" ], correct: 2 }, { question: "Who has scored the most goals in World Cup history?", options: [ "Miroslav Klose", "Pele", "Ronaldo", "Gerd Muller" ], correct: 0 }, { question: "Which country has appeared in every World Cup tournament?", options: [ "Germany", "Argentina", "Brazil", "Italy" ], correct: 2 } ] }; const handleAnswer = (selectedOption)=>{ setBallAnimation(true); const audio = new Audio(selectedOption === allQuestions[difficulty][currentQuestion].correct ? "/goal.mp3" : "/miss.mp3"); audio.play(); if (selectedOption === allQuestions[difficulty][currentQuestion].correct) { setScore(score + 1); setStreak(streak + 1); setPosition(Math.random() * 80 + 10); if (streak + 1 > highScore) { setHighScore(streak + 1); } } else { setOpponentScore(opponentScore + 1); setStreak(0); } setTimeout(()=>{ setBallAnimation(false); if (currentQuestion + 1 < allQuestions[difficulty].length) { setCurrentQuestion(currentQuestion + 1); } else { setGameOver(true); } }, 500); }; const resetGame = ()=>{ setScore(0); setOpponentScore(0); setCurrentQuestion(0); setGameOver(false); setPosition(0); setBallAnimation(false); }; const ballStyle = { left: `${position}%`, animation: ballAnimation ? "bounce 0.5s" : "none" }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "shortcut icon", href: "/soccer-ball.png", type: "image/png", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#2c5530] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white rounded-xl shadow-lg p-8 max-w-4xl w-full", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 overflow-hidden rounded-xl", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-[400px] bg-[#2c5530]", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full h-[100px] bg-[#1a4d1a]", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 bottom-[60px] w-[200px] h-[80px] border-[8px] border-white -translate-x-1/2", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 bottom-[60px] w-[8px] h-[80px] bg-white -translate-x-1/2", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-center mb-8 text-white relative z-10", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "⚽ Penalty Shootout Quiz ⚽"), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, !gameOver ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 bg-[#1a365d] bg-opacity-90 p-6 rounded-lg", __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-white", __source: { fileName: "", lineNumber: 183, columnNumber: 23 }, __self: this }, "Player Score: ", score, " - Computer Score: ", opponentScore, " ", "| Shots: ", currentQuestion + 1, "/5"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 187, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-white", __source: { fileName: "", lineNumber: 188, columnNumber: 25 }, __self: this }, "Streak: ", streak, " | Best: ", highScore), /*#__PURE__*/ React.createElement("select", { value: difficulty, onChange: (e)=>{ setDifficulty(e.target.value); resetGame(); }, className: "bg-white text-[#1a365d] rounded px-2", __source: { fileName: "", lineNumber: 191, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 199, columnNumber: 27 }, __self: this }, "Easy"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 200, columnNumber: 27 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 201, columnNumber: 27 }, __self: this }, "Hard")))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text text-white mb-4", __source: { fileName: "", lineNumber: 205, columnNumber: 21 }, __self: this }, allQuestions[difficulty][currentQuestion].question)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, allQuestions[difficulty][currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(index), className: "bg-white hover:bg-[#f0f4f8] text-[#1a365d] font-roboto py-3 px-6 rounded-lg transition-colors border-2 border-[#1a365d]", __source: { fileName: "", lineNumber: 213, columnNumber: 25 }, __self: this }, option)))) : /*#__PURE__*/ React.createElement("div", { className: "text-center bg-[#1a365d] bg-opacity-90 p-8 rounded-lg", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4 text-white", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, "Full Time!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-6 text-white", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, "Final Score - Player: ", score, " Computer: ", opponentScore), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-white hover:bg-[#f0f4f8] text-[#1a365d] font-roboto py-3 px-6 rounded-lg transition-colors border-2 border-[#1a365d]", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }, "New Match"))), /*#__PURE__*/ React.createElement("div", { style: ballStyle, className: "absolute bottom-[80px] transition-all duration-500 z-20 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "⚽")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0) translateX(-50%); } 50% { transform: translateY(-100px) translateX(-50%); } } `))); }