function MainComponent() { const quizData = [ { question: "日本の首都はどこですか？", options: [ "東京", "大阪", "京都", "福岡" ], correct: "東京" }, { question: "日本の国花は何ですか？", options: [ "桜", "梅", "菊", "牡丹" ], correct: "桜" } ]; React.useEffect(()=>{ const socket = io(); socket.on('answer', (data)=>{ document.getElementById('question-display').innerText = `回答: ${data}`; }); return ()=>socket.disconnect(); }, []); const handleAnswerClick = (answer)=>{ const socket = io(); socket.emit('answer', answer); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto bg-[#f0f0f0] min-h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "クイズパネル"), /*#__PURE__*/ React.createElement("div", { id: "question-display", className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "ここに質問が表示されます"), quizData.map(({ question, options, correct }, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-6 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, question), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, options.map((option, idx)=>{ const handleClick = ()=>handleAnswerClick(option); return /*#__PURE__*/ React.createElement("li", { key: idx, className: "mb-1", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClick, className: "w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-700", name: `option-${idx}`, __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, option)); })))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-green-500 text-white p-3 rounded-full shadow-lg text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), " ランキング"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, ` .hidden { display: none; } `)); }