improve(i18n): localize plan

src/features/government/components/PlanetPOPRButton.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import { ref, Ref, computed } from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Composables
 	import { useQuery } from "@/lib/query_cache/useQuery";
 	import { trackEvent } from "@/lib/analytics/useAnalytics";
@@ -53,7 +56,9 @@
 	}
 
 	const compButtonText = computed(() =>
-		!buttonDisabled.value ? buttonText : "No POPR"
+		!buttonDisabled.value
+			? buttonText
+			: t("government.popr_button.buttons.no_popr")
 	);
 
 	const buttonType = computed(() =>

src/features/government/components/PlanetPOPRTable.vue

@@ -48,39 +48,47 @@
 
 <template>
 	<div v-if="!poprData" class="text-center">
-		Planet {{ planetNaturalId }} has no population data.
+		{{
+			$t("government.popr_button.no_data", { planet_id: planetNaturalId })
+		}}
 	</div>
 
 	<PTable v-if="poprData" striped>
 		<thead>
 			<tr>
 				<th></th>
-				<th>Pioneer</th>
-				<th>Settler</th>
-				<th>Technician</th>
-				<th>Engineer</th>
-				<th>Scientist</th>
+				<th>{{ $t("game.workforce_type.pioneer") }}</th>
+				<th>{{ $t("game.workforce_type.settler") }}</th>
+				<th>{{ $t("game.workforce_type.technician") }}</th>
+				<th>{{ $t("game.workforce_type.engineer") }}</th>
+				<th>{{ $t("game.workforce_type.scientist") }}</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
-				<td class="font-bold">Total Population</td>
+				<td class="font-bold">
+					{{ $t("government.popr_button.table.total_population") }}
+				</td>
 				<td>{{ formatAmount(poprData.next_population_pioneer) }}</td>
 				<td>{{ formatAmount(poprData.next_population_settler) }}</td>
 				<td>{{ formatAmount(poprData.next_population_technician) }}</td>
 				<td>{{ formatAmount(poprData.next_population_engineer) }}</td>
 				<td>{{ formatAmount(poprData.next_population_scientist) }}</td>
 			</tr>
 			<tr>
-				<td class="font-bold">Free Population</td>
+				<td class="font-bold">
+					{{ $t("government.popr_button.table.free_population") }}
+				</td>
 				<td>{{ formatAmount(poprData.free_pioneer) }}</td>
 				<td>{{ formatAmount(poprData.free_settler) }}</td>
 				<td>{{ formatAmount(poprData.free_technician) }}</td>
 				<td>{{ formatAmount(poprData.free_engineer) }}</td>
 				<td>{{ formatAmount(poprData.free_scientist) }}</td>
 			</tr>
 			<tr>
-				<td class="font-bold">Free Population %</td>
+				<td class="font-bold">
+					{{ $t("government.popr_button.table.free_population_pct") }}
+				</td>
 				<td>
 					{{ formatNumber(poprData.unemployment_rate_pioneer * 100) }}
 				</td>
@@ -106,7 +114,9 @@
 				</td>
 			</tr>
 			<tr>
-				<td class="font-bold">Unfilled Jobs</td>
+				<td class="font-bold">
+					{{ $t("government.popr_button.table.unfilled_jobs") }}
+				</td>
 				<td>{{ formatAmount(poprData.open_jobs_pioneer) }}</td>
 				<td>{{ formatAmount(poprData.open_jobs_settler) }}</td>
 				<td>{{ formatAmount(poprData.open_jobs_technician) }}</td>
@@ -115,7 +125,9 @@
 			</tr>
 			<template v-if="workforceData">
 				<tr class="child:border-t-2! child:border-t-white/20!">
-					<td class="font-bold">Plan Need</td>
+					<td class="font-bold">
+						{{ $t("government.popr_button.table.plan_need") }}
+					</td>
 					<td>{{ formatAmount(workforceData.pioneer.required) }}</td>
 					<td>{{ formatAmount(workforceData.settler.required) }}</td>
 					<td>
@@ -127,7 +139,9 @@
 					</td>
 				</tr>
 				<tr>
-					<td class="font-bold">Plan Check</td>
+					<td class="font-bold">
+						{{ $t("government.popr_button.table.plan_check") }}
+					</td>
 					<td>
 						<PIcon>
 							<component

src/features/planning/components/PlanArea.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 	import { computed, PropType, WritableComputedRef } from "vue";
+
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	import { trackEvent } from "@/lib/analytics/useAnalytics";
 
 	// Types & Interfaces
@@ -42,7 +46,7 @@
 
 <template>
 	<PForm>
-		<PFormItem label="Permits">
+		<PFormItem :label="t('plan.components.area.permits')">
 			<PInputNumber
 				v-model:value="localPermits"
 				:disabled="disabled"
@@ -51,7 +55,7 @@
 				:max="3"
 				class="w-full" />
 		</PFormItem>
-		<PFormItem label="Area">
+		<PFormItem :label="t('plan.components.area.area')">
 			<div class="flex flex-row w-full">
 				<div class="grow">
 					{{ areaData.areaUsed }} / {{ areaData.areaTotal }}
@@ -66,7 +70,7 @@
 						"
 						>{{ areaData.areaLeft }}</span
 					>
-					Free
+					{{ $t("plan.components.area.free") }}
 				</div>
 			</div>
 		</PFormItem>

src/features/planning/components/PlanBonuses.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 	import { computed, PropType, WritableComputedRef } from "vue";
+
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	import { trackEvent } from "@/lib/analytics/useAnalytics";
 	// Types & Interfaces
 	import { PLAN_COGCPROGRAM_TYPE } from "@/stores/planningStore.types";
@@ -55,40 +59,75 @@
 		},
 	});
 
-	const cogcOptions: PSelectOption[] = [
-		{ value: "---", label: "None" },
-		{ value: "AGRICULTURE", label: "Agriculture" },
-		{ value: "CHEMISTRY", label: "Chemistry" },
-		{ value: "CONSTRUCTION", label: "Construction" },
-		{ value: "ELECTRONICS", label: "Electronics" },
-		{ value: "FOOD_INDUSTRIES", label: "Food Industries" },
-		{ value: "FUEL_REFINING", label: "Fuel Refining" },
-		{ value: "MANUFACTURING", label: "Manufacturing" },
-		{ value: "METALLURGY", label: "Metallurgy" },
-		{ value: "RESOURCE_EXTRACTION", label: "Resource Extraction" },
-		{ value: "PIONEERS", label: "Pioneers" },
-		{ value: "SETTLERS", label: "Settlers" },
-		{ value: "TECHNICIANS", label: "Technicians" },
-		{ value: "ENGINEERS", label: "Engineers" },
-		{ value: "SCIENTISTS", label: "Scientists" },
-	];
+	const cogcOptions = computed<PSelectOption[]>(() => [
+		{ value: "---", label: t("game.cogc_program.NONE") },
+		{
+			value: "AGRICULTURE",
+			label: t("game.cogc_program.ADVERTISING_AGRICULTURE"),
+		},
+		{
+			value: "CHEMISTRY",
+			label: t("game.cogc_program.ADVERTISING_CHEMISTRY"),
+		},
+		{
+			value: "CONSTRUCTION",
+			label: t("game.cogc_program.ADVERTISING_CONSTRUCTION"),
+		},
+		{
+			value: "ELECTRONICS",
+			label: t("game.cogc_program.ADVERTISING_ELECTRONICS"),
+		},
+		{
+			value: "FOOD_INDUSTRIES",
+			label: t("game.cogc_program.ADVERTISING_FOOD_INDUSTRIES"),
+		},
+		{
+			value: "FUEL_REFINING",
+			label: t("game.cogc_program.ADVERTISING_FUEL_REFINING"),
+		},
+		{
+			value: "MANUFACTURING",
+			label: t("game.cogc_program.ADVERTISING_MANUFACTURING"),
+		},
+		{
+			value: "METALLURGY",
+			label: t("game.cogc_program.ADVERTISING_METALLURGY"),
+		},
+		{
+			value: "RESOURCE_EXTRACTION",
+			label: t("game.cogc_program.ADVERTISING_RESOURCE_EXTRACTION"),
+		},
+		{ value: "PIONEERS", label: t("game.cogc_program.WORKFORCE_PIONEERS") },
+		{ value: "SETTLERS", label: t("game.cogc_program.WORKFORCE_SETTLERS") },
+		{
+			value: "TECHNICIANS",
+			label: t("game.cogc_program.WORKFORCE_TECHNICIANS"),
+		},
+		{
+			value: "ENGINEERS",
+			label: t("game.cogc_program.WORKFORCE_ENGINEERS"),
+		},
+		{
+			value: "SCIENTISTS",
+			label: t("game.cogc_program.WORKFORCE_SCIENTISTS"),
+		},
+	]);
 </script>
 
 <template>
 	<PForm>
-		<PFormItem label="Corp. HQ">
+		<PFormItem :label="t('plan.components.bonuses.corp_hq')">
 			<PTooltip>
 				<template #trigger>
 					<PCheckbox
 						v-model:checked="localCorpHQ"
 						:disabled="disabled" />
 				</template>
-				The corporation you belong to has its headquarters on <br />
-				this planet (not your individual company).
+				{{ $t("plan.components.bonuses.corp_hq_tooltip") }}
 			</PTooltip>
 		</PFormItem>
 
-		<PFormItem label="COGC">
+		<PFormItem :label="t('plan.components.bonuses.cogc')">
 			<PSelect
 				v-model:value="localCOGC"
 				class="w-full"

src/features/planning/components/PlanConfiguration.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import { computed, ComputedRef, PropType, WritableComputedRef } from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Types & Interfaces
 	import { IPlanEmpire } from "@/stores/planningStore.types";
 	import { PSelectOption } from "@/ui/ui.types";
@@ -85,14 +88,14 @@
 
 <template>
 	<PForm>
-		<PFormItem label="Name">
+		<PFormItem :label="t('plan.components.configuration.name')">
 			<PInput
 				v-model:value="localPlanName"
 				class="w-full"
 				:disabled="disabled"
 				placeholder="Plan Name" />
 		</PFormItem>
-		<PFormItem label="Empire">
+		<PFormItem :label="t('plan.components.configuration.empire')">
 			<PSelect
 				v-model:value="localActiveEmpireUuid"
 				class="w-full"

src/features/planning/components/PlanExperts.vue

@@ -10,7 +10,6 @@
 
 	// Util
 	import { formatNumber } from "@/util/numbers";
-	import { capitalizeString } from "@/util/text";
 
 	// UI
 	import { PInputNumber } from "@/ui";
@@ -52,13 +51,18 @@
 
 <template>
 	<div v-if="totalExperts > 6" class="bg-red-500/50 p-2 mb-3">
-		Maximum number of experts on a base is 6. You currently have
-		{{ totalExperts }} experts assigned.
+		{{
+			$t("plan.components.experts.warning", {
+				expert_number: totalExperts,
+			})
+		}}
 	</div>
 	<div
 		class="grid grid-cols-[repeat(3,auto)] sm:grid-cols-[repeat(6,auto)] gap-3 child:my-auto">
 		<template v-for="expert in expertData" :key="expert.name">
-			<div>{{ capitalizeString(expert.name) }}</div>
+			<div>
+				{{ $t(`game.expertise.${expert.name.toUpperCase()}`) }}
+			</div>
 			<PInputNumber
 				v-model:value="localExpertData[expert.name].amount"
 				:disabled="disabled"

src/features/planning/components/PlanInfrastructure.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 	import { computed, ComputedRef, PropType, WritableComputedRef } from "vue";
+
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	import { trackEvent } from "@/lib/analytics/useAnalytics";
 	import { HabSolverGoal } from "@/features/planning/calculations/habOptimization";
 
@@ -85,15 +89,19 @@
 <template>
 	<div class="mb-3">
 		<PForm>
-			<PFormItem label="Auto-Optimize Habs">
+			<PFormItem
+				:label="t('plan.components.infrastructure.auto_optimize')">
 				<PTooltip>
 					<template #trigger>
 						<PCheckbox
 							v-model:checked="localAutoOptimizeHabs"
 							:disabled="disabled" />
 					</template>
-					Automatically optimize habitations to meet<br />workforce
-					needs as buildings are added.
+					{{
+						$t(
+							"plan.components.infrastructure.auto_optimize_tooltip"
+						)
+					}}
 				</PTooltip>
 			</PFormItem>
 		</PForm>
@@ -103,7 +111,10 @@
 			<div>{{ inf }}</div>
 			<PInputNumber
 				v-model:value="localInfrastructureData[inf]"
-				:disabled="disabled || (localAutoOptimizeHabs && !isStorageInfrastructure(inf))"
+				:disabled="
+					disabled ||
+					(localAutoOptimizeHabs && !isStorageInfrastructure(inf))
+				"
 				show-buttons
 				:min="0"
 				class="min-w-21.25 max-w-25"
@@ -124,14 +135,14 @@
 			<PButton
 				:disabled="disabled || localAutoOptimizeHabs"
 				@click="emit('optimize-habs', 'cost')">
-				Optimize Cost
+				{{ $t("plan.components.infrastructure.buttons.optimize_cost") }}
 			</PButton>
 		</div>
 		<div class="col-span-2 justify-self-center">
 			<PButton
 				:disabled="disabled || localAutoOptimizeHabs"
 				@click="emit('optimize-habs', 'area')">
-				Optimize Area
+				{{ $t("plan.components.infrastructure.buttons.optimize_area") }}
 			</PButton>
 		</div>
 	</div>