fix(planning): show total construction cost per building row

src/features/planning/components/PlanProductionBuilding.vue

@@ -84,6 +84,14 @@
 			(element) => element.efficiencyType === "COGC"
 		);
 	});
+
+	// area and revenue are for all buildings of this row, so is construction;
+	// the engine's constructionCost stays per building (COGM, finance)
+	const constructionCostTotal: ComputedRef<number> = computed(
+		() =>
+			localBuildingData.value.constructionCost *
+			localBuildingData.value.amount
+	);
 </script>
 
 <template>
@@ -231,8 +239,36 @@
 					}}
 				</span>
 				<span class="text-xs font-bold whitespace-nowrap">
-					{{ formatNumber(localBuildingData.constructionCost * -1) }}
-					<span class="font-light text-muted">ȼ</span>
+					<PTooltip :disabled="localBuildingData.amount <= 1">
+						<template #trigger>
+							<span
+								:class="{
+									'hover:cursor-help':
+										localBuildingData.amount > 1,
+								}">
+								{{ formatNumber(constructionCostTotal * -1) }}
+								<span class="font-light text-muted">ȼ</span>
+							</span>
+						</template>
+						<div
+							class="flex flex-row justify-between align-center gap-x-3 child:p-1">
+							<div>
+								{{
+									$t(
+										"plan.components.production_building.table.construction_per_building"
+									)
+								}}
+							</div>
+							<div>
+								{{
+									formatNumber(
+										localBuildingData.constructionCost * -1
+									)
+								}}
+								ȼ
+							</div>
+						</div>
+					</PTooltip>
 				</span>
 			</div>
 			<div class="flex justify-end">

src/locales/en_US/plan.json

@@ -308,7 +308,8 @@
 				"efficiency": "Efficiency",
 				"revenue": "@:terms.revenue",
 				"area": "@:terms.area",
-				"construction": "Construction"
+				"construction": "Construction",
+				"construction_per_building": "Per building"
 			},
 			"zero_reason": {
 				"FERTILITY": "Planet not fertile",

src/tests/features/planning/components/PlanProductionBuilding.test.ts

@@ -6,6 +6,7 @@ import PlanProductionBuilding from "@/features/planning/components/PlanProductio
 import PlanProductionRecipe from "@/features/planning/components/PlanProductionRecipe.vue";
 import PInputNumber from "@/ui/components/PInputNumber.vue";
 import PValue from "@/ui/components/PValue.vue";
+import PTooltip from "@/ui/components/PTooltip.vue";
 import { mountComponent } from "@/tests/mountComponent";
 
 // Types & Interfaces
@@ -82,6 +83,8 @@ function button(wrapper: VueWrapper, text: string) {
 }
 
 const ADD_RECIPE = "plan.components.production_building.buttons.add_recipe";
+const PER_BUILDING =
+	"plan.components.production_building.table.construction_per_building";
 
 describe("PlanProductionBuilding", () => {
 	it("shows amount, name and the building figures", async () => {
@@ -94,13 +97,43 @@ describe("PlanProductionBuilding", () => {
 		expect(text).toContain("133.75 %");
 		expect(text).toContain("2,500.00");
 		expect(text).toContain("105");
-		// construction cost shown negated
-		expect(text).toContain("-123,456.79");
+		// construction cost for all 3 buildings, shown negated
+		expect(text).toContain("-370,370.37");
 		expect(
 			wrapper.findComponent(PInputNumber).find("input").element.value
 		).toBe("3");
 	});
 
+	it("shows the single building construction cost in a tooltip", async () => {
+		// PTooltip observes its size, the test DOM has no ResizeObserver
+		vi.stubGlobal("ResizeObserver", class {
+			observe() {}
+			disconnect() {}
+		});
+		// efficiency comes first, construction last
+		const hover = (wrapper: VueWrapper) =>
+			wrapper
+				.findAllComponents(PTooltip)
+				.at(-1)!
+				.find("div")
+				.trigger("mouseenter");
+
+		const { wrapper } = await mountBuilding();
+		await hover(wrapper);
+		expect(document.body.textContent).toContain(PER_BUILDING);
+		expect(document.body.textContent).toContain("-123,456.79");
+		// unmounting removes the teleported tooltip
+		wrapper.unmount();
+
+		// one building: total and single cost are the same, no tooltip
+		const { wrapper: single } = await mountBuilding({
+			buildingData: building({ amount: 1 }),
+		});
+		expect(single.text()).toContain("-123,456.79");
+		await hover(single);
+		expect(document.body.textContent).not.toContain(PER_BUILDING);
+	});
+
 	it("marks the expertise positive with a COGC bonus", async () => {
 		const { wrapper, setProps } = await mountBuilding();
 		expect(expertise(wrapper).classes()).toContain("text-positive");