mat: show recipes

ts/mat.ts

@@ -50,6 +50,7 @@ async function render() {
 	charts.append(...await Promise.all([
 		renderExchange('NC1', ticker, cxpcRange, cxpc[0]), renderExchange('CI1', ticker, cxpcRange, cxpc[1]),
 		renderExchange('IC1', ticker, cxpcRange, cxpc[2]), renderExchange('AI1', ticker, cxpcRange, cxpc[3]),
+		renderRecipes(ticker),
 	]));
 }
 
@@ -170,6 +171,19 @@ function renderOrder(order: Order): HTMLTableRowElement {
 
 const formatPrice = new Intl.NumberFormat(undefined, {minimumSignificantDigits: 3, maximumSignificantDigits: 3}).format;
 
+async function renderRecipes(ticker: string): Promise<HTMLElement> {
+	const recipes: Recipe[] = await cachedFetchJSON(`https://rest.fnar.net/recipes/${ticker}`);
+
+	const section = document.createElement('section');
+	for (const recipe of recipes)
+		section.innerHTML += `<div class="recipe">
+			${recipe.Inputs.map((i) => `${i.Amount}×${i.CommodityTicker}`).join(' ')}
+			<span class="building">${recipe.BuildingTicker}</span>
+			${recipe.Outputs.map((o) => `${o.Amount}×${o.CommodityTicker}`).join(' ')}
+		</div>`;
+	return section;
+}
+
 interface Material {
 	Ticker: string;
 	Name: string;
@@ -203,3 +217,14 @@ interface Order {
 	ItemCount: number | null;
 	ItemCost: number;
 }
+
+interface Recipe {
+	BuildingTicker: string;
+	Inputs: RecipeMat[];
+	Outputs: RecipeMat[];
+}
+
+interface RecipeMat {
+	CommodityTicker: string;
+	Amount: number;
+}

www/style.css

@@ -132,6 +132,20 @@ main.mat {
 				color: #0aa;
 			}
 		}
+
+		div.recipe {
+			margin-bottom: 1em;
+
+			span.building {
+				display: inline-flex;
+				height: 50px;
+				width: 50px;
+				align-items: center;
+				justify-content: center;
+				background-color: #222;
+				border: 1px solid #555;
+			}
+		}
 	}
 }