function MainComponent() { const [speeds, setSpeeds] = React.useState({ enemy: 45, vanguard: 28, middle: 19, rear: 23 }); const [orderLog, setOrderLog] = React.useState([]); const [calculationResult, setCalculationResult] = React.useState(''); const [currentActive, setCurrentActive] = React.useState(0); React.useEffect(()=>{ const handleKeyDown = (event)=>{ if (event.key === '2' || event.key === '5') { let newIndex = event.key === '2' ? currentActive + 1 : currentActive - 1; newIndex = (newIndex + orderLog.length) % orderLog.length; setCurrentActive(newIndex); } }; document.addEventListener('keydown', handleKeyDown); return ()=>{ document.removeEventListener('keydown', handleKeyDown); }; }, [ orderLog, currentActive ]); const handleInputChange = (event)=>{ const { name, value } = event.target; setSpeeds({ ...speeds, [name]: Number(value) }); }; const resetSpeedsCalculation = (participant, baseSpeed)=>{ if (participant === 'enemy') { let y = baseSpeed; let x = 2399 - 20 * y; let z = Math.floor(0.49 * x); let newSpeed = 90 - Math.floor((z - 599) / 20); setCalculationResult(`y: ${y}, x: ${x}, z: ${z}, 新たな敵の素早さゲージ: ${newSpeed}`); return newSpeed; } return baseSpeed; }; const calculateTurnOrder = ()=>{ let currentSpeeds = { ...speeds }; let log = []; const priority = [ 'vanguard', 'middle', 'rear', 'enemy' ]; for(let count = 0; count < 200; count++){ let sortedParticipants = Object.entries(currentSpeeds).sort((a, b)=>{ return a[1] - b[1] || priority.indexOf(a[0]) - priority.indexOf(b[0]); }); let minSpeed = sortedParticipants[0][1]; if (minSpeed === 0) minSpeed = 1; sortedParticipants.forEach(([participant])=>{ currentSpeeds[participant] -= minSpeed; }); sortedParticipants.forEach(([participant])=>{ if (currentSpeeds[participant] === 0) { currentSpeeds[participant] = resetSpeedsCalculation(participant, speeds[participant]); const actor = participant === 'enemy' ? '敵' : participant === 'vanguard' ? '前衛' : participant === 'middle' ? '中衛' : '後衛'; log.push(actor); } }); } setOrderLog(log); setCurrentActive(0); }; const displayLog = orderLog.map((actor, index)=>{ let className = "text-base ml-0"; if (actor === '敵') { className += " text-red-500 font-bold text-xl"; } else if (actor === '前衛') { className += " text-green-500"; } else if (actor === '中衛') { className += " text-blue-500"; } else { className += " text-yellow-500"; } if (index === currentActive) { className += " border-4 border-black font-bold"; } return /*#__PURE__*/ React.createElement("li", { key: index, className: className, __source: { fileName: "", lineNumber: 83, columnNumber: 12 }, __self: this }, index === currentActive ? '▶ ' : '', actor); }); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] p-5 w-full min-h-screen flex flex-col items-center justify-start font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "行動順を割り出すツール"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "enemy", value: speeds.enemy, onChange: handleInputChange, placeholder: "敵の素早さ", className: "border p-2 w-[200px]", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "vanguard", value: speeds.vanguard, onChange: handleInputChange, placeholder: "前衛の素早さ", className: "border p-2 w-[200px]", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "middle", value: speeds.middle, onChange: handleInputChange, placeholder: "中衛の素早さ", className: "border p-2 w-[200px]", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rear", value: speeds.rear, onChange: handleInputChange, placeholder: "後衛の素早さ", className: "border p-2 w-[200px]", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: calculateTurnOrder, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "行動順計算")), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, calculationResult), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, displayLog)); }