rat: show FRM/HYF

ts/rat.ts

@@ -16,9 +16,23 @@ async function render(): Promise<void> {
 async function _render(): Promise<void> {
 	const allRecipes: readonly RecipeFull[] = await cachedFetchJSON('https://api.prunplanner.org/data/recipes/');
 	const cols = ratRecipes(allRecipes);
-	document.querySelector('#cols')!.innerHTML = cols.map((col) => 
-		`<div class="col">${Array.from(col).map((input) => `<div class="mat">${input}</div>`).join('')}</div>`
-	).join('');
+	const frm = buildingOutputs(allRecipes, 'FRM');
+	const hyf = buildingOutputs(allRecipes, 'HYF');
+	document.querySelector('#cols')!.append(...cols.map((col) => {
+		const colEl = document.createElement('div');
+		colEl.className = 'col';
+		colEl.append(...Array.from(col).map((input) => {
+			const matEl = document.createElement('div');
+			matEl.className = 'mat';
+			if (frm.has(input))
+				matEl.classList.add('frm');
+			if (hyf.has(input))
+				matEl.classList.add('hyf');
+			matEl.textContent = input;
+			return matEl;
+		}));
+		return colEl;
+	}));
 }
 
 function ratRecipes(allRecipes: readonly RecipeFull[]): Set<string>[] {
@@ -62,6 +76,15 @@ function ratRecipes(allRecipes: readonly RecipeFull[]): Set<string>[] {
 	return cols;
 }
 
+function buildingOutputs(allRecipes: readonly RecipeFull[], building: string): Set<string> {
+	const outputs = new Set<string>();
+	for (const recipe of allRecipes)
+		if (recipe.building_ticker === building)
+			for (const output of recipe.outputs)
+				outputs.add(output.material_ticker);
+	return outputs;
+}
+
 interface RecipeFull {
 	building_ticker: string;
 	inputs: Array<{material_ticker: string}>

www/style.css

@@ -282,7 +282,15 @@ main.rat {
 				justify-content: space-evenly;
 				align-items: center;
 				margin-bottom: 1em;
-				background-color: #242;
+				&.frm {
+					background-color: #141;
+				}
+				&.hyf {
+					background-color: #124;
+				}
+				&.frm.hyf {
+					background-color: #144;
+				}
 			}
 		}
 	}