function MainComponent() { const [pairs, setPairs] = React.useState([]); const handleSubmit = (e)=>{ e.preventDefault(); const species = e.target.species.value; const pairing = e.target.pairing.value; const health = parseInt(e.target.health.value, 10); const stamina = parseInt(e.target.stamina.value, 10); const food = parseInt(e.target.food.value, 10); const oxygen = parseInt(e.target.oxygen.value, 10); const meleeDamage = parseInt(e.target.meleeDamage.value, 10); const weight = parseInt(e.target.weight.value, 10); const gender = e.target.gender.value; const speed = parseInt(e.target.speed.value, 10); const torpor = parseInt(e.target.torpor.value, 10); const newPair = { species, pairing, health, stamina, food, oxygen, meleeDamage, weight, gender, speed, torpor }; if (pairs.length === 0) { setPairs([ newPair ]); } else { const combinedStats = pairs.reduce((acc, cur)=>{ acc.health += cur.health; acc.stamina += cur.stamina; acc.food += cur.food; acc.oxygen += cur.oxygen; acc.meleeDamage += cur.meleeDamage; acc.weight += cur.weight; acc.speed += cur.speed; acc.torpor += cur.torpor; return acc; }, { health: 0, stamina: 0, food: 0, oxygen: 0, meleeDamage: 0, weight: 0, speed: 0, torpor: 0 }); combinedStats.health = Math.ceil((combinedStats.health + health) / (pairs.length + 1)); combinedStats.stamina = Math.ceil((combinedStats.stamina + stamina) / (pairs.length + 1)); combinedStats.food = Math.ceil((combinedStats.food + food) / (pairs.length + 1)); combinedStats.oxygen = Math.ceil((combinedStats.oxygen + oxygen) / (pairs.length + 1)); combinedStats.meleeDamage = Math.ceil((combinedStats.meleeDamage + meleeDamage) / (pairs.length + 1)); combinedStats.weight = Math.ceil((combinedStats.weight + weight) / (pairs.length + 1)); combinedStats.speed = Math.ceil((combinedStats.speed + speed) / (pairs.length + 1)); combinedStats.torpor = Math.ceil((combinedStats.torpor + torpor) / (pairs.length + 1)); setPairs([ { ...newPair, health: combinedStats.health, stamina: combinedStats.stamina, food: combinedStats.food, oxygen: combinedStats.oxygen, meleeDamage: combinedStats.meleeDamage, weight: combinedStats.weight, speed: combinedStats.speed, torpor: combinedStats.torpor } ]); } }; const resetPairs = ()=>{ setPairs([]); }; const formContent = /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "species", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Species"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "species", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "pairing", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Pairing"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "pairing", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "health", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Health"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "health", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "stamina", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Stamina"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "stamina", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "food", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Food"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "food", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "oxygen", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Oxygen"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "oxygen", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "meleeDamage", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Melee Damage"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "meleeDamage", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "weight", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Weight"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "gender", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "gender", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "speed", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Speed"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "speed", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-1 font-roboto", htmlFor: "torpor", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Torpor"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "torpor", className: "border p-2 w-full", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded font-roboto w-full", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "Create Pair")), /*#__PURE__*/ React.createElement("button", { onClick: resetPairs, className: "bg-red-500 text-white p-2 rounded font-roboto w-full", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "Restart")); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, pairs.map((pair, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4 mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 120, columnNumber: 16 }, __self: this }, "Species:"), " ", pair.species), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 121, columnNumber: 16 }, __self: this }, "Pairing:"), " ", pair.pairing), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 122, columnNumber: 16 }, __self: this }, "Health:"), " ", pair.health), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 123, columnNumber: 16 }, __self: this }, "Stamina:"), " ", pair.stamina), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 124, columnNumber: 16 }, __self: this }, "Food:"), " ", pair.food), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 125, columnNumber: 16 }, __self: this }, "Oxygen:"), " ", pair.oxygen), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 126, columnNumber: 16 }, __self: this }, "Melee Damage:"), " ", pair.meleeDamage), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 127, columnNumber: 16 }, __self: this }, "Weight:"), " ", pair.weight), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 128, columnNumber: 16 }, __self: this }, "Gender:"), " ", pair.gender), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 129, columnNumber: 16 }, __self: this }, "Speed:"), " ", pair.speed), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 130, columnNumber: 16 }, __self: this }, "Torpor:"), " ", pair.torpor)))), formContent); }