gov: show pop table with unemployed

ts/gov.ts

@@ -55,11 +55,64 @@ async function render(planetName: string, pop: Pop) {
 	}
 	const lastPOPRts = Math.floor(new Date(lastPOPR.ReportTimestamp).getTime() / 1000);
 	const nextPOPRts = lastPOPRts + 7 * 24 * 60 * 60;
-	renderTarget.innerHTML = `last POPR: ${lastPOPRts}<br>next POPR: ${nextPOPRts}`;
+	renderTarget.innerHTML = `last POPR: ${lastPOPR.ReportTimestamp} (${lastPOPRts})
+	<br>next POPR: ${new Date(nextPOPRts * 1000).toISOString()} (${nextPOPRts})
+
+	<table>
+		<tr>
+			<th></th>
+			<th>pio</th>
+			<th>set</th>
+			<th>tec</th>
+			<th>eng</th>
+			<th>sci</th>
+		</tr>
+		<tr>
+			<th>population</th>
+			<td>${lastPOPR.NextPopulationPioneer}<br>${formatDelta(lastPOPR.PopulationDifferencePioneer)}</td>
+			<td>${lastPOPR.NextPopulationSettler}<br>${formatDelta(lastPOPR.PopulationDifferenceSettler)}</td>
+			<td>${lastPOPR.NextPopulationTechnician}<br>${formatDelta(lastPOPR.PopulationDifferenceTechnician)}</td>
+			<td>${lastPOPR.NextPopulationEngineer}<br>${formatDelta(lastPOPR.PopulationDifferenceEngineer)}</td>
+			<td>${lastPOPR.NextPopulationScientist}<br>${formatDelta(lastPOPR.PopulationDifferenceScientist)}</td>
+		</tr>
+		<tr>
+			<th>unemployed</th>
+			<td>${unemployed(lastPOPR.NextPopulationPioneer, lastPOPR.PopulationDifferencePioneer, lastPOPR.OpenJobsPioneer, lastPOPR.UnemploymentRatePioneer)}</td>
+			<td>${unemployed(lastPOPR.NextPopulationSettler, lastPOPR.PopulationDifferenceSettler, lastPOPR.OpenJobsSettler, lastPOPR.UnemploymentRateSettler)}</td>
+			<td>${unemployed(lastPOPR.NextPopulationTechnician, lastPOPR.PopulationDifferenceTechnician, lastPOPR.OpenJobsTechnician, lastPOPR.UnemploymentRateTechnician)}</td>
+			<td>${unemployed(lastPOPR.NextPopulationEngineer, lastPOPR.PopulationDifferenceEngineer, lastPOPR.OpenJobsEngineer, lastPOPR.UnemploymentRateEngineer)}</td>
+			<td>${unemployed(lastPOPR.NextPopulationScientist, lastPOPR.PopulationDifferenceScientist, lastPOPR.OpenJobsScientist, lastPOPR.UnemploymentRateScientist)}</td>
+		</tr>
+	</table>`;
 
 	loader.style.display = 'none';
 }
 
+function formatDelta(n: number, withPlus: boolean = true): string {
+	if (n > 0)
+		return `<span class="positive">${withPlus ? '+' : ''}${n}</span>`;
+	else if (n < 0)
+		return `<span class="negative">${n}</span>`;
+	else
+		return n.toString();
+}
+
+function unemployed(people: number, change: number, openJobs: number, unemploymentRate: number): string {
+	let nextUnemployed;
+	if (openJobs <= people + change) {
+		let prevUnemploymentRate = unemploymentRate;
+		if (openJobs > 0)
+			if (people - change > 0)
+				prevUnemploymentRate = -openJobs / (people - change);
+			else
+				prevUnemploymentRate = -1
+		const prevUnemployed = prevUnemploymentRate * (people - change);
+		nextUnemployed = prevUnemployed + change;
+	} else
+		nextUnemployed = -openJobs + change;
+	return formatDelta(Math.round(nextUnemployed), false);
+}
+
 type Pop = 'pio' | 'set' | 'tec' | 'eng' | 'sci';
 
 interface Planet {
@@ -74,4 +127,19 @@ interface POPR {
 	NextPopulationTechnician: number;
 	NextPopulationEngineer: number;
 	NextPopulationScientist: number;
+	PopulationDifferencePioneer: number;
+	PopulationDifferenceSettler: number;
+	PopulationDifferenceTechnician: number;
+	PopulationDifferenceEngineer: number;
+	PopulationDifferenceScientist: number;
+	OpenJobsPioneer: number;
+	OpenJobsSettler: number;
+	OpenJobsTechnician: number;
+	OpenJobsEngineer: number;
+	OpenJobsScientist: number;
+	UnemploymentRatePioneer: number;
+	UnemploymentRateSettler: number;
+	UnemploymentRateTechnician: number;
+	UnemploymentRateEngineer: number;
+	UnemploymentRateScientist: number;
 }

www/style.css

@@ -112,6 +112,12 @@ main.gov {
 	div#gov {
 		margin-top: 2em;
 	}
+	.positive {
+		color: #0aa;
+	}
+	.negative {
+		color: #f80;
+	}
 }
 
 main.mat {