function MainComponent() { const fishSpecies = [ { name: "Pangasius", a: 0.364, b: -0.03 }, { name: "Indian Major Carp", a: 0.283, b: -0.041 }, { name: "Chinese Carp", a: 0.325, b: -0.03 }, { name: "Nile Tilapia", a: 0.179, b: -0.035 }, { name: "Pabda Catfish", a: 0.354, b: -0.0411 }, { name: "Shingi Catfish", a: 0.297, b: -0.0219 }, { name: "Koi Climbing Perch", a: 0.126, b: -0.048 }, { name: "Common Carp", a: 0.204, b: -0.051 } ]; const calculateResults = (e)=>{ e.preventDefault(); const selectedSpecies = fishSpecies.find((species)=>species.name === e.target.species.value); const W = parseFloat(e.target.mass.value); const T = parseFloat(e.target.temperature.value); const SD = parseFloat(e.target.secchi.value); const DEPTH = parseFloat(e.target.depth.value); const WIND = parseFloat(e.target.wind.value); const SAT = parseFloat(e.target.saturation.value); const DO = parseFloat(e.target.do_level.value); const RAD = parseFloat(e.target.rad.value); // OCR Calculation const OCR = selectedSpecies.a * Math.pow(W / 1000, selectedSpecies.b) * Math.pow(1.024, T - 20); // Plankton Respiration Calculation const CHL_A = Math.pow(10, 2.33 - 0.94 * Math.log(SD)); const PLANKTON_RESPIRATION = -1.133 + 0.00381 * SD + 0.0000145 * SD * SD + 0.0812 * T - 0.000749 * T * T - 0.000349 * SD * T; // Benthic Respiration Calculation const BENTHIC_RESPIRATION = 0.061 / DEPTH; // Reaeration Calculation const REAERATION = (0.03 * Math.sqrt(WIND) - 0.0132 * WIND + 0.0015 * WIND * WIND) * (SAT - DO); // Gross Primary Production Calculation const EXT = 0.594 * Math.exp(-0.00594 * 440) + 0.0604 * Math.pow(CHL_A, 0.7546); const ZEU = 4.6 / EXT; const PMAX = 0.43 * RAD * (1367 * ZEU); const GPP = (1 - ZEU / (4.6 / (0.594 * Math.exp(-0.00594 * 440)))) * PMAX * 0.43 * RAD; // Display Results document.getElementById('ocrResult').textContent = `OCR: ${OCR.toFixed(3)} g O2 per kg fish per hour`; document.getElementById('planktonRespirationResult').textContent = `Plankton Respiration: ${PLANKTON_RESPIRATION.toFixed(3)} g m^-3 h^-1`; document.getElementById('benthicRespirationResult').textContent = `Benthic Respiration: ${BENTHIC_RESPIRATION.toFixed(3)} g m^-3 h^-1`; document.getElementById('reaerationResult').textContent = `Reaeration: ${REAERATION.toFixed(3)} g m^-3 h^-1`; document.getElementById('grossPrimaryProductionResult').textContent = `Gross Primary Production: ${GPP.toFixed(3)} g m^-3 h^-1`; }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Fish Species Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculateResults, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "species", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Fish Species"), /*#__PURE__*/ React.createElement("select", { id: "species", name: "species", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md bg-white", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, fishSpecies.map(({ name })=>/*#__PURE__*/ React.createElement("option", { key: name, value: name, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mass", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Fish Mass (grams)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "mass", name: "mass", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "temperature", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Water Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "temperature", name: "temperature", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "secchi", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Secchi Disk Depth (meters)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "secchi", name: "secchi", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "depth", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Average Pond Depth (meters)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "depth", name: "depth", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "wind", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Wind Velocity (m/s)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "wind", name: "wind", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "saturation", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Saturation Level at Given Temperature"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "saturation", name: "saturation", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "do_level", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Existing DO Level in Pond (mg/L)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "do_level", name: "do_level", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rad", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Total Solar Radiation (nm)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rad", name: "rad", step: "0.01", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 w-full p-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { id: "ocrResult", className: "mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "planktonRespirationResult", className: "mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "benthicRespirationResult", className: "mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "reaerationResult", className: "mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "grossPrimaryProductionResult", className: "mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }))); }