function Component() { React.useEffect(()=>{ const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js'; script.async = true; document.body.appendChild(script); const getButtonByIndex = (index)=>{ const component = document.querySelectorAll('button')[index]; return component; }; window.getButtonByIndex = getButtonByIndex; return ()=>{ document.body.removeChild(script); delete window.getButtonByIndex; }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-transparent w-[800px] h-[600px] flex items-end justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black w-[600px] h-[300px] flex flex-col justify-center items-center space-y-2 border border-white", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-[140px] h-[60px] bg-gray-700 border border-white text-white font-crimson-text inline-block", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Button 1"), /*#__PURE__*/ React.createElement("button", { className: "w-[140px] h-[60px] bg-gray-700 border border-white text-white font-crimson-text inline-block", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Button 2")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-[140px] h-[60px] bg-gray-700 border border-white text-white font-crimson-text inline-block", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Button 3"), /*#__PURE__*/ React.createElement("button", { className: "w-[140px] h-[60px] bg-gray-700 border border-white text-white font-crimson-text inline-block", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Button 4")))); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-[800px] h-[600px] bg-transparent", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [playerHP, setPlayerHP] = React.useState(100); const [playerMP, setPlayerMP] = React.useState(50); const [enemyHP, setEnemyHP] = React.useState(100); const [isShaking, setIsShaking] = React.useState(false); const [showSpells, setShowSpells] = React.useState(false); const maxHP = 100; const maxMP = 50; const attack = ()=>{ setEnemyHP(Math.max(enemyHP - 5, 0)); setIsShaking(true); setTimeout(()=>setIsShaking(false), 500); enemyAttack(); }; const castSpell = (spell)=>{ if (spell === 'メラ' && playerMP >= 5) { setEnemyHP(Math.max(enemyHP - 15, 0)); setPlayerMP(playerMP - 5); setIsShaking(true); setTimeout(()=>setIsShaking(false), 500); enemyAttack(); } else if (spell === 'ホイミ' && playerMP >= 3) { setPlayerHP(Math.min(playerHP + 10, maxHP)); setPlayerMP(playerMP - 3); enemyAttack(); } setShowSpells(false); }; const enemyAttack = ()=>{ setPlayerHP(Math.max(playerHP - 5, 0)); }; const handleButtonClick = async (action, index)=>{ const component = window.getButtonByIndex(index); if (component) { const response = await fetch("/api/button-component-handler", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ buttonComponent: component, displayText: action, onClickAction: action }) }); if (response.ok) { component.innerHTML = action; component.onclick = ()=>{ if (action === 'たたかう') attack(); else if (action === 'じゅもん') setShowSpells(true); else if (action === 'どうぐ') console.log('どうぐ機能はまだ実装されていません'); else if (action === 'にげる') console.log('にげる機能はまだ実装されていません'); }; } } }; React.useEffect(()=>{ const actions = [ 'たたかう', 'じゅもん', 'どうぐ', 'にげる' ]; actions.forEach((action, index)=>{ handleButtonClick(action, index); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-pixel bg-blue-800 w-[800px] h-[600px] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2/3 relative w-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-2xl mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "ドラゴン"), /*#__PURE__*/ React.createElement("img", { src: "/dragon.png", alt: "A fearsome dragon enemy", className: `w-64 h-64 ${isShaking ? 'animate-shake' : ''}`, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-64 bg-gray-200 h-4 rounded-full", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 h-full rounded-full", style: { width: `${enemyHP / 100 * 100}%` }, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-1/3 bg-gray-700 p-4 flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2 w-full", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "HP: ", playerHP, "/", maxHP), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "MP: ", playerMP, "/", maxMP)), /*#__PURE__*/ React.createElement("div", { className: "mb-2 bg-gray-200 h-4 rounded-full w-full", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 h-full rounded-full", style: { width: `${playerHP / maxHP * 100}%` }, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 bg-gray-200 h-4 rounded-full w-full", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 h-full rounded-full", style: { width: `${playerMP / maxMP * 100}%` }, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(Component, { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this })), showSpells && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>castSpell('メラ'), className: "bg-white text-black border-2 border-black rounded-md p-2 m-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "メラ"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>castSpell('ホイミ'), className: "bg-white text-black border-2 border-black rounded-md p-2 m-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "ホイミ"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSpells(false), className: "bg-white text-black border-2 border-black rounded-md p-2 m-2", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "戻る"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, ` @keyframes shake { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(5px, 5px) rotate(5deg); } 50% { transform: translate(0, 0) rotate(0eg); } 75% { transform: translate(-5px, 5px) rotate(-5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .animate-shake { animation: shake 0.5s; } `), /*#__PURE__*/ React.createElement("script", { src: "https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this })); }