function QuizQA({ onSave }) { const [question, setQuestion] = React.useState(''); const [answer, setAnswer] = React.useState(''); function handleSave() { onSave({ question, answer }); setQuestion(''); setAnswer(''); } return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 mb-4 border border-gray-200 rounded-lg bg-white", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "mb-2 block font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Question:"), /*#__PURE__*/ React.createElement("input", { id: "question", type: "text", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), className: "w-full p-2 border border-gray-200 rounded shadow-sm font-roboto text-[#555]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-gray-200 rounded-lg bg-white", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "answer", className: "mb-2 block font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Answer:"), /*#__PURE__*/ React.createElement("input", { id: "answer", type: "text", name: "answer", value: answer, onChange: (e)=>setAnswer(e.target.value), className: "w-full p-2 border border-gray-200 rounded shadow-sm font-roboto text-[#555]", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Save")); } function QuizQAStory() { function handleSaveQuizItem(quizItem) { console.log('Saving Quiz Item:', quizItem); } return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizQA, { onSave: handleSaveQuizItem, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); } function MainComponent() { const [players, setPlayers] = React.useState([]); const [currentPlayerIndex, setCurrentPlayerIndex] = React.useState(0); const [timer, setTimer] = React.useState(120); const [scores, setScores] = React.useState({}); const [showRanking, setShowRanking] = React.useState(false); const [quizItems, setQuizItems] = React.useState([]); const handleSaveQuizItem = (quizItem)=>{ setQuizItems((prevItems)=>[ ...prevItems, quizItem ]); }; React.useEffect(()=>{ if (timer > 0 && players.length > 0) { const interval = setInterval(()=>{ setTimer(timer - 1); }, 1000); return ()=>clearInterval(interval); } else if (timer === 0 && currentPlayerIndex < players.length - 1) { setCurrentPlayerIndex(currentPlayerIndex + 1); setTimer(120); } else if (timer === 0) { setShowRanking(true); } }, [ timer, currentPlayerIndex, players.length ]); const addPlayer = (player)=>{ if (player && !players.includes(player)) { setPlayers((prevPlayers)=>[ ...prevPlayers, player ]); setScores((prevScores)=>({ ...prevScores, [player]: 0 })); } }; const incrementScore = (player)=>{ setScores((prevScores)=>({ ...prevScores, [player]: prevScores[player] + 1 })); }; const ranking = ()=>{ return Object.entries(scores).sort((a, b)=>b[1] - a[1]); }; if (showRanking) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Classement des joueurs"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, ranking().map(([player, score], index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, player, ": ", score, " points")))); } return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizQA, { onSave: addPlayer, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }), players.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Quiz pour ", players[currentPlayerIndex]), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Temps restant : ", timer, " secondes"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Score actuel : ", scores[players[currentPlayerIndex]]), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, quizItems.map((quizItem, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>incrementScore(players[currentPlayerIndex]), className: "px-4 py-2 mt-2 bg-gray-200 text-black rounded block", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, quizItem.question, ": ", quizItem.answer))))); }