Add total salary of selected players for 'Trading Block Page'

src/ui/views/TradingBlock.tsx

@@ -382,17 +382,26 @@ export const OfferTable = ({
 	);
 };
 
+type Contract = {
+	pid: number;
+	contract: number;
+};
+
 const TradingBlock = (props: View<"tradingBlock">) => {
 	const [state, setState] = useState<{
 		asking: boolean;
 		offers: OfferType[];
 		pids: number[];
 		dpids: number[];
+		selectedContracts: Contract[];
+		contractsSum: number;
 	}>({
 		asking: false,
 		offers: [],
 		pids: props.initialPid !== undefined ? [props.initialPid] : [],
 		dpids: props.initialDpid !== undefined ? [props.initialDpid] : [],
+		selectedContracts: [],
+		contractsSum: 0,
 	});
 
 	const handleChangeAsset = (type: "pids" | "dpids", id: number) => {
@@ -415,6 +424,32 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 		});
 	};
 
+	/**
+	 * Tally the sum of selected contracts.
+	 *
+	 * @param {number} pid - The ID of the contract.
+	 * @param {number} contract - The value of the contract.
+	 */
+	const handleContractSum = (pid: number, contract: number) => {
+		setState(prevState => {
+			// Copy the selected contracts array.
+			const contracts = [...prevState.selectedContracts];
+			// Find the index of the contract.
+			const index = contracts.findIndex(c => c.pid === pid);
+			// If the contract is not found, add it to the array and tally it to the sum.
+			if (index === -1) {
+				contracts.push({ pid, contract });
+				prevState.contractsSum += contract;
+			} else {
+				// Otherwise, remove the contract from the array.
+				contracts.splice(index, 1);
+				prevState.contractsSum -= contract;
+			}
+			// Return the updated state
+			return { ...prevState, selectedContracts: contracts };
+		});
+	};
+
 	const handleClickAsk = async () => {
 		setState(prevState => ({
 			...prevState,
@@ -535,7 +570,10 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 					type="checkbox"
 					checked={state.pids.includes(p.pid)}
 					disabled={p.untradable}
-					onChange={() => handleChangeAsset("pids", p.pid)}
+					onChange={() => {
+						handleChangeAsset("pids", p.pid);
+						handleContractSum(p.pid, p.contract.amount);
+					}}
 					title={p.untradableMsg}
 				/>,
 				wrappedPlayerNameLabels({
@@ -585,6 +623,12 @@ const TradingBlock = (props: View<"tradingBlock">) => {
 				trade proposals.
 			</p>
 
+			{/* Display total sum of selected contracts */}
+			<p>
+				<b>Total Salary: </b>
+				{helpers.formatCurrency(state.contractsSum, "M")}
+			</p>
+
 			<div className="row mb-3">
 				<div className="col-md-9">
 					<DataTable