function MainComponent() { const [gameState, setGameState] = React.useState('welcome'); const startGame = ()=>{ setGameState('battle'); }; const characters = [ { name: '戦士', hp: 50, mp: 0, attack: 30, defense: 30, speed: 9, magicAttack: 0, magicDefense: 5 }, { name: '勇者', hp: 40, mp: 20, attack: 25, defense: 25, speed: 15, magicAttack: 15, magicDefense: 15 }, { name: '僧侶', hp: 30, mp: 30, attack: 20, defense: 20, speed: 8, magicAttack: 20, magicDefense: 20 }, { name: '魔法使い', hp: 20, mp: 40, attack: 10, defense: 15, speed: 12, magicAttack: 25, magicDefense: 25 } ]; const enemies = [ { name: 'ドラゴン', hp: 100, mp: 50, attack: 10, defense: 10, speed: 10, magicAttack: 15, magicDefense: 15 }, { name: 'ガーゴイル', hp: 80, mp: 50, attack: 10, defense: 10, speed: 20, magicAttack: 10, magicDefense: 15 } ]; const [battleLog, setBattleLog] = React.useState([]); const performAction = (actionType)=>{ const newLog = `${actionType} を実行した！`; setBattleLog([ newLog, ...battleLog.slice(0, 0) ]); }; if (gameState === 'welcome') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center bg-[#000] text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path_to_fantasy_background.jpg", alt: "Sword and Magic Fantasy World Illustration", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[48px] sm:text-[72px] font-bold animate-glow", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "RPG Battle Simulator"), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-[#7d00ff] text-white py-2 px-6 sm:py-3 sm:px-8 rounded animate-blink", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Start"))))); } if (gameState === 'battle') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center bg-[#000] text-white", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[24px] sm:text-[36px] font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Battle Scene"), /*#__PURE__*/ React.createElement("div", { className: "flex w-full justify-around", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#666666] p-4 rounded w-1/3", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[20px] sm:text-[24px] font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Team"), characters.map((char, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "名前: ", char.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "HP: ", char.hp), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "MP: ", char.mp), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "攻撃力: ", char.attack)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#666666] p-4 rounded w-1/3", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[20px] sm:text-[24px] font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Enemy"), enemies.map((enemy, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mt-2", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "名前: ", enemy.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "HP: ", enemy.hp), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "MP: ", enemy.mp), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "攻撃力: ", enemy.attack))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path_to_dragon_image.png", alt: "Pixel Art of Dragon", className: "w-[80px] h-[80px]", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path_to_gargoyle_image.png", alt: "Pixel Art of Gargoyle", className: "w-[80px] h-[80px]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#666666] p-4 mt-4 w-full text-left", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Commands:"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 mt-2", onClick: ()=>performAction('たたかう'), __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "たたかう"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 mt-2 ml-2", onClick: ()=>performAction('まほう'), __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "まほう"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 mt-2 ml-2", onClick: ()=>performAction('まもる'), __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "まもる")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#666666] p-4 mt-4 w-full text-left text-white", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, battleLog.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 36 }, __self: this }, battleLog[0]))); } return null; } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 91, columnNumber: 1 }, __self: this }, ` @keyframes glow { 0%, 100% { text-shadow: 0 0 4px #fff, 0 0 6px #f0f, 0 0 8px #f0f, 0 0 10px #f0f; } 50% { text-shadow: 0 0 8px #fff, 0 0 10px #f0f, 0 0 12px #f0f, 0 0 14px #f0f; } } @keyframes blink { 50% { opacity: 0; } } .animate-glow { animation: glow 1.5s infinite ease-in-out; } .animate-blink { animation: blink 1s infinite step-start; } `);