production: show imports for each expertise

ts/production.ts

@@ -281,6 +281,7 @@ function renderProduction(expertiseGroups: Record<string, string[]>, production:
 	let totalConsumablesCost = 0;
 	for (const [expertise, productionBuildings] of Object.entries(expertiseGroups)) {
 		section.append(element('h3', {textContent: expertise.toLocaleLowerCase()}));
+		const imports: Record<string, number> = {};
 		const exportTo: Record<string, Record<string, number>> = {};
 		for (const building of productionBuildings) {
 			const buildingRow = element('div', {className: 'building-row'});
@@ -289,7 +290,7 @@ function renderProduction(expertiseGroups: Record<string, string[]>, production:
 			for (const [mat, amount] of mats) {
 				buildingRow.append(document.createTextNode(' '));
 				buildingRow.append(renderProductionBuildingMat(expertise, mat, amount, storage,
-						matInputs, matConsumers, exportTo));
+						matInputs, matConsumers, imports, exportTo));
 
 				const recipe = recipes[mat];
 				const outputPerRun = recipe.outputs.find((o) => o.material_ticker === mat)!.material_amount;
@@ -303,6 +304,15 @@ function renderProduction(expertiseGroups: Record<string, string[]>, production:
 			section.append(buildingRow);
 		}
 
+		const importDetails = element('details');
+		importDetails.append(element('summary', {textContent: 'imports'}));
+		for (const [mat, amount] of Object.entries(imports)) {
+			if (recipes[mat] && buildings[recipes[mat].building_ticker].expertise == expertise)
+				continue;
+			importDetails.append(element('div', {textContent: `${formatAmount(amount)}x${mat}`}));
+		}
+		section.append(importDetails);
+
 		const exportDetails = element('details');
 		exportDetails.append(element('summary', {textContent: 'exports'}));
 		for (const [expertise, mats] of Object.entries(exportTo)) {
@@ -321,7 +331,7 @@ function renderProduction(expertiseGroups: Record<string, string[]>, production:
 function renderProductionBuildingMat(expertise: string, mat: string, amount: number, storage: Record<string, number>,
 		matInputs: Record<string, {upstreamMat: string, amount: number}[]>,
 		matConsumers: Record<string, {downstreamMat: string, expertise: string, amount: number}[]>,
-		exportTo: Record<string, Record<string, number>>): HTMLElement {
+		imports: Record<string, number>, exportTo: Record<string, Record<string, number>>): HTMLElement {
 	const inStorage = storage[mat] ?? 0;
 	const wrapper = element('span');
 
@@ -342,9 +352,12 @@ function renderProductionBuildingMat(expertise: string, mat: string, amount: num
 
 	let tooltip = '';
 	const inputs = matInputs[mat];
-	if (inputs)
+	if (inputs) {
 		tooltip += inputs.map((i) => `${formatAmount(i.amount)}x${i.upstreamMat} (${storage[i.upstreamMat] ?? 0}) → ` +
 				`${formatAmount(amount)}x${mat}`).join('\n') + '\n';
+		for (const input of inputs)
+			imports[input.upstreamMat] = (imports[input.upstreamMat] ?? 0) + input.amount;
+	}
 	const consumers = matConsumers[mat];
 	if (consumers) {
 		tooltip += consumers