function MainComponent() { const [screen, setScreen] = React.useState(0); const [bioChemLevel, setBioChemLevel] = React.useState(null); const [bioLevel, setBioLevel] = React.useState(null); const [anatLevel, setAnatLevel] = React.useState(null); const handleKeyDown = (event, levelSetter, nextScreen)=>{ if (event.key === 'Enter' && levelSetter !== null) { setScreen(nextScreen); } }; const renderTopScreen = ()=>/*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[25pt] font-bold mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(1), className: "w-[30mm] h-[10mm] text-[20pt] bg-red-200", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "生化学"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(3), className: "w-[30mm] h-[10mm] text-[20pt] bg-yellow-200", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "生物学"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(5), className: "w-[30mm] h-[10mm] text-[20pt] bg-blue-200", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "解剖学")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(7), className: "w-[30mm] h-[10mm] text-[15pt] bg-gray-200", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "作成")); const renderSubScreen = (title, level, setLevel, screenIndex)=>/*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-[21pt] font-bold mb-4 ${title === '生化学' ? 'text-red-200' : title === '生物学' ? 'text-yellow-200' : title === '解剖学' ? 'text-blue-200' : 'text-gray-200'}`, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, [ '初級', '中級', '上級' ].map((lvl, idx)=>/*#__PURE__*/ React.createElement("button", { key: idx, className: `w-[30mm] text-[20pt] ${level === idx ? 'bg-gray-500' : 'bg-gray-200'}`, onClick: ()=>setLevel(idx), __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, lvl))), /*#__PURE__*/ React.createElement("p", { className: "text-[25pt]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Enterでスタート"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(0), className: "text-[15pt]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "トップ画面に戻る"))); const renderCreationScreen = ()=>/*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[21pt] text-gray-200 font-bold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "作成"), /*#__PURE__*/ React.createElement("p", { className: "text-[20pt] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "ファイルを選択"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(0), className: "text-[15pt]", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "トップ画面に戻る"))); return /*#__PURE__*/ React.createElement(React.Fragment, null, screen === 0 && renderTopScreen(), screen === 1 && /*#__PURE__*/ React.createElement("div", { onKeyDown: (e)=>handleKeyDown(e, bioChemLevel, 2), __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, renderSubScreen('生化学', bioChemLevel, setBioChemLevel)), screen === 2 && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[21pt] text-red-200 font-bold mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "生化学"), /*#__PURE__*/ React.createElement("img", { src: "nucleus.png", alt: "細胞の核", className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-400 rounded p-2", name: "kaku", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(0), className: "text-[15pt]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "トップ画面に戻る"))), screen === 3 && /*#__PURE__*/ React.createElement("div", { onKeyDown: (e)=>handleKeyDown(e, bioLevel, 4), __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, renderSubScreen('生物学', bioLevel, setBioLevel)), screen === 4 && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[21pt] text-yellow-200 font-bold mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "生物学"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(0), className: "text-[15pt]", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "トップ画面に戻る"))), screen === 5 && /*#__PURE__*/ React.createElement("div", { onKeyDown: (e)=>handleKeyDown(e, anatLevel, 6), __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, renderSubScreen('解剖学', anatLevel, setAnatLevel)), screen === 6 && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[21pt] text-blue-200 font-bold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "解剖学"), /*#__PURE__*/ React.createElement("img", { src: "anatomy.png", alt: "解剖の画像", className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-400 rounded p-2", name: "anatomy_input", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScreen(0), className: "text-[15pt]", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "トップ画面に戻る"))), screen === 7 && renderCreationScreen()); }