function MissionItem({ text, status }) { const icon = status === 'completed' ? 'fa fa-check text-green-500' : ''; const bgColor = status === 'completed' ? 'bg-gray-300' : 'bg-white'; return /*#__PURE__*/ React.createElement("div", { className: `${bgColor} shadow-md p-4 rounded-lg mb-4 flex justify-between items-center text-4xl`, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, text), status === 'completed' && /*#__PURE__*/ React.createElement("i", { className: icon, __source: { fileName: "", lineNumber: 7, columnNumber: 34 }, __self: this })); } function ProgressBar({ completed, total }) { const completionRate = completed / total * 100; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-300 rounded-full h-8 mb-4 relative", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 h-full rounded-full", style: { width: `${completionRate}%` }, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute inset-x-0 top-0 bottom-0 flex items-center justify-center font-roboto text-4xl", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, completed, "/", total)); } function MainComponent({ missions }) { const completedMissions = missions.filter((mission)=>mission.status === 'completed'); const incompleteMissions = missions.filter((mission)=>mission.status === 'incomplete'); const sortedMissions = [ ...incompleteMissions, ...completedMissions ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen text-4xl", style: { background: 'linear-gradient(45deg, rgba(255,204,255,0.3), rgba(204,204,255,0.3), rgba(240,248,255,0.3))' }, __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-6 overflow-y-auto scrollbar-hide", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-roboto mb-6 flex items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), " ホーム"), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "チュートリアルミッション"), /*#__PURE__*/ React.createElement(ProgressBar, { completed: completedMissions.length, total: missions.length, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), sortedMissions.map((mission, index)=>/*#__PURE__*/ React.createElement(MissionItem, { key: index, text: mission.text, status: mission.status, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-6 flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 text-white text-4xl font-roboto py-4 px-6 mb-6 rounded-lg shadow-md w-[400px] hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "最初の曲に挑戦"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-400 text-white text-4xl font-roboto py-4 px-6 mb-6 rounded-lg shadow-md flex items-center justify-center w-[400px] hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-lock mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), "チュートリアル曲集"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-400 text-white text-4xl font-roboto py-4 px-6 rounded-lg shadow-md flex items-center justify-center w-[400px] hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-lock mr-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), "メイン曲集")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` .scrollbar-hide::-webkit-scrollbar { display: none; } `)); } function StoryComponent() { const missions = [ { text: '初回起動', status: 'completed' }, { text: '「チューリップ」の右手を弾く', status: 'incomplete' }, { text: '「第九」の右手に挑戦', status: 'incomplete' }, { text: '「第九」の左手に挑戦', status: 'incomplete' }, { text: '「第九」の両手に挑戦', status: 'incomplete' } ]; return /*#__PURE__*/ React.createElement(MainComponent, { missions: missions, __source: { fileName: "", lineNumber: 72, columnNumber: 10 }, __self: this }); }