shipbuilding: show amount in storage

ts/ledger.ts

@@ -6,7 +6,6 @@ const apiKey = document.querySelector('#api-key') as HTMLInputElement;
 }
 document.querySelector('#fetch')!.addEventListener('click', async () => {
 	const loader = document.querySelector('#loader') as HTMLElement;
-	loader.innerHTML = '';
 	loader.style.display = 'block';
 	try {
 		await renderLedger(apiKey.value);

ts/shipbuilding.ts

@@ -29,22 +29,36 @@ const blueprint = {
 	'CQM': 1,
 }
 
+const apiKey = document.querySelector('#api-key') as HTMLInputElement;
+{
+	const storedApiKey = localStorage.getItem('punoted-api-key');
+	if (storedApiKey)
+		apiKey.value = storedApiKey;
+}
+document.querySelector('#fetch')!.addEventListener('click', render);
 
-const main = document.querySelector('main.shipbuilding')!;
-(async () => {
-	setupPopover();
-	main.innerHTML = 'loading...';
+const renderTarget = document.querySelector('div#shipbuilding')!;
+async function render() {
+	const loader = document.querySelector('#loader') as HTMLElement;
+	loader.style.display = 'block';
 	try {
-		await render();
+		await _render();
+		if (apiKey.value)
+			localStorage.setItem('punoted-api-key', apiKey.value);
 	} catch (e) {
-		main.innerHTML = e instanceof Error ? e.message : String(e);
+		renderTarget.innerHTML = e instanceof Error ? e.message : String(e);
 	}
-})();
-async function render() {
-	const [allPrices, recipes, buildingList] = await Promise.all([
+	loader.style.display = 'none';
+}
+setupPopover();
+render();
+
+async function _render() {
+	const [allPrices, recipes, buildingList, storage] = await Promise.all([
 		cachedFetchJSON('https://refined-prun.github.io/refined-prices/all.json') as Promise<RawPrice[]>,
 		recipeForMats(),
 		cachedFetchJSON('https://api.prunplanner.org/data/buildings/') as Promise<Building[]>,
+		fetchStorage(),
 	]);
 	const prices = Object.fromEntries(allPrices.filter((price) => price.ExchangeCode === 'IC1')
 			.map((price) => [price.MaterialTicker, price]));
@@ -56,8 +70,8 @@ async function render() {
 	const analysisNodes: AnalysisNode[] = [];
 	let cost = 0;
 	for (const [mat, amount] of Object.entries(blueprint)) {
-		const { cost: matCost, node } = analyzeMat(mat, amount, production, extract, buy, prices, recipes);
-		cost += matCost;
+		const node = analyzeMat(mat, amount, production, extract, buy, prices, recipes, storage);
+		cost += node.cost;
 		analysisNodes.push(node);
 	}
 
@@ -76,8 +90,8 @@ async function render() {
 		expertiseGroups[building.expertise].push(building.building_ticker);
 	}
 
-	main.innerHTML = '';
-	main.append(
+	renderTarget.innerHTML = '';
+	renderTarget.append(
 		renderAnalysis(analysisNodes),
 		element('p', {textContent: `total cost: ${formatWhole(cost)}`}),
 		renderProduction(expertiseGroups, production, prices, recipes, buildings),
@@ -116,25 +130,32 @@ async function recipeForMats(): Promise<Record<string, Recipe>> {
 }
 
 function analyzeMat(mat: string, amount: number, production: Production, extract: Record<string, number>, buy: Record<string, number>,
-		prices: Record<string, RawPrice>, recipes: Record<string, Recipe>): { cost: number, node: AnalysisNode } {
+		prices: Record<string, RawPrice>, recipes: Record<string, Recipe>, storage: Record<string, number>): AnalysisNode {
 	const price = prices[mat];
 	if (!price)
 		throw new Error(`missing price for ${mat}`);
 	const traded = price.AverageTraded30D ?? 0;
+
+	const inStorage = storage[mat] ?? 0;
+
 	if (BUY.has(mat)) {
 		const matPrice = price.VWAP30D ?? price.Ask;
 		if (matPrice == null) throw new Error(`missing ask price for ${mat}`);
 		buy[mat] = (buy[mat] ?? 0) + amount;
 		return {
+			ticker: mat,
+			amount,
+			inStorage,
+			acquisition: `buy: ${formatAmount(matPrice)}, daily traded ${formatFixed(traded, 1)}`,
+			children: [],
 			cost: matPrice * amount,
-			node: { text: `${formatAmount(amount)}x${mat} buy: ${formatAmount(matPrice)}, daily traded ${formatFixed(traded, 1)}`, children: [] },
 		};
 	}
 
 	const recipe = recipes[mat];
 	if (!recipe) {
 		extract[mat] = (extract[mat] ?? 0) + amount;
-		return { cost: 0, node: { text: `${formatAmount(amount)}x${mat} extract`, children: [] } };
+		return {ticker: mat, amount, inStorage, acquisition: `extract`, children: [], cost: 0};
 	}
 
 	const building = recipe.building_ticker;
@@ -148,14 +169,17 @@ function analyzeMat(mat: string, amount: number, production: Production, extract
 	const children: AnalysisNode[] = [];
 	for (const inputMat of recipe.inputs) {
 		const inputAmount = inputMat.material_amount * amount / recipe.outputs[0].material_amount;
-		const {cost, node} = analyzeMat(inputMat.material_ticker, inputAmount, production, extract, buy, prices, recipes);
-		totalCost += cost;
+		const node = analyzeMat(inputMat.material_ticker, inputAmount, production, extract, buy, prices, recipes, storage);
+		totalCost += node.cost;
 		children.push(node);
 	}
-	children.push({ text: `cost: ${formatWhole(totalCost)}`, children: [] });
 	return {
+		ticker: mat,
+		amount,
+		inStorage,
+		acquisition: `make (${building}, ${liquid})`,
+		children,
 		cost: totalCost,
-		node: { text: `${formatAmount(amount)}x${mat} make (${building}, ${liquid})`, children },
 	};
 }
 
@@ -167,14 +191,24 @@ function renderAnalysis(nodes: AnalysisNode[]): HTMLElement {
 }
 
 function renderAnalysisNode(node: AnalysisNode, level = 0): HTMLElement {
+	const amountText = element('span', {textContent: `${formatAmount(node.amount)}x${node.ticker} `});
+	const storageText = element('span', {textContent: `(${formatAmount(node.inStorage)})`});
+	const percent = Math.min(node.inStorage / node.amount, 1);
+	storageText.style.color = `color-mix(in xyz, #0aa ${percent * 100}%, #f80 )`;
+	const acquisitionText = element('span', {textContent: ' ' + node.acquisition});
+
 	let el;
 	if (node.children.length === 0) {
-		el = element('div', {textContent: node.text, className: 'analysis-node'});
+		el = element('div', {className: 'analysis-node'});
+		el.append(amountText, storageText, acquisitionText);
 	} else {
-		el = element('details', {className: 'analysis-node', open: level > 0});
-		el.append(element('summary', {textContent: node.text}));
+		el = element('details', {className: 'analysis-node', open: level > 0 && percent < 1});
+		const summary = element('summary');
+		summary.append(amountText, storageText, acquisitionText);
+		el.append(summary);
 		for (const child of node.children)
 			el.append(renderAnalysisNode(child, level + 1));
+		el.append(document.createTextNode(`total cost: ${formatWhole(node.cost)}`));
 	}
 	if (level === 0)
 		el.classList.add('root');
@@ -282,6 +316,19 @@ function renderProduction(expertiseGroups: Record<string, string[]>, production:
 	return section;
 }
 
+async function fetchStorage(): Promise<Record<string, number>> {
+	if (!apiKey.value)
+		return {};
+	const users = await fetch('https://api.punoted.net/v1/storages/', {headers: {'X-Data-Token': apiKey.value}})
+			.then((r) => r.json()) as PUNUserStore[];
+	const items: Record<string, number> = {};
+	for (const user of users)
+		for (const storage of user.Storages)
+			for (const item of storage.StorageItems)
+				items[item.MaterialTicker] = (items[item.MaterialTicker] ?? 0) + item.MaterialAmount;
+	return items;
+}
+
 function element<K extends keyof HTMLElementTagNameMap>(tagName: K,
 		properties: Partial<HTMLElementTagNameMap[K]> = {}): HTMLElementTagNameMap[K] {
 	const node = document.createElement(tagName);
@@ -305,8 +352,12 @@ function formatWhole(n: number): string {
 }
 
 interface AnalysisNode {
-	text: string
+	ticker: string
+	amount: number
+	inStorage: number
+	acquisition: string
 	children: AnalysisNode[]
+	cost: number
 }
 
 interface Recipe {
@@ -341,4 +392,13 @@ interface Building {
 	scientists: number
 }
 
+interface PUNUserStore {
+	Storages: Array<{
+		StorageItems: Array<{
+			MaterialTicker: string
+			MaterialAmount: number
+		}>
+	}>
+}
+
 type Production = Record<string, Record<string, number>>;

www/shipbuilding.html

@@ -10,7 +10,14 @@
 </head>
 <body>
 	<a href="/">← back</a>
-	<main class="shipbuilding"></main>
+	<main class="shipbuilding">
+		<form>
+			<label>PUNoted API key: <input type="password" size="30" id="api-key"></label>
+			<input type="button" value="fetch" id="fetch">
+		</form>
+		<section id="loader"></section>
+		<div id="shipbuilding"></div>
+	</main>
 	<div id="popover" popover="hint"></div>
 	<script src="shipbuilding.js"></script>
 </body>