|
|
@@ -1,13 +1,32 @@
|
|
|
import {setupPopover} from './popover';
|
|
|
|
|
|
const roi: Promise<{lastModified: Date, profits: Profit[]}> = (async function () {
|
|
|
- const response = await fetch('https://prun.raylu.net/roi.json');
|
|
|
+ const response = await fetch('/roi.json');
|
|
|
const lastModified = new Date(response.headers.get('last-modified')!);
|
|
|
const profits = await response.json();
|
|
|
return {lastModified, profits};
|
|
|
})();
|
|
|
|
|
|
-const lowVolume = document.querySelector('#low-volume') as HTMLInputElement;
|
|
|
+const lowVolume = document.querySelector('input#low-volume') as HTMLInputElement;
|
|
|
+
|
|
|
+const expertise = {
|
|
|
+ AGRICULTURE: 'agri',
|
|
|
+ CHEMISTRY: 'chem',
|
|
|
+ CONSTRUCTION: 'const',
|
|
|
+ ELECTRONICS: 'elec',
|
|
|
+ FOOD_INDUSTRIES: 'food ind',
|
|
|
+ FUEL_REFINING: 'fuel',
|
|
|
+ MANUFACTURING: 'mfg',
|
|
|
+ METALLURGY: 'metal',
|
|
|
+ RESOURCE_EXTRACTION: 'res ext',
|
|
|
+} as const;
|
|
|
+const expertiseSelect = document.querySelector('select#expertise') as HTMLSelectElement;
|
|
|
+for (const key of Object.keys(expertise)) {
|
|
|
+ const option = document.createElement('option');
|
|
|
+ option.value = key;
|
|
|
+ option.textContent = key.replace('_', ' ').toLowerCase();
|
|
|
+ expertiseSelect.appendChild(option);
|
|
|
+}
|
|
|
|
|
|
async function render() {
|
|
|
const formatDecimal = new Intl.NumberFormat(undefined,
|
|
|
@@ -19,15 +38,16 @@ async function render() {
|
|
|
const {lastModified, profits} = await roi;
|
|
|
for (const p of profits) {
|
|
|
const volumeRatio = p.output_per_day / p.average_traded_7d;
|
|
|
- if (!lowVolume.checked && volumeRatio > 0.05) {
|
|
|
+ if (!lowVolume.checked && volumeRatio > 0.05)
|
|
|
+ continue;
|
|
|
+ if (expertiseSelect.value !== '' && p.expertise !== expertiseSelect.value)
|
|
|
continue;
|
|
|
- }
|
|
|
const tr = document.createElement('tr');
|
|
|
const profit_per_area = p.profit_per_day / p.area;
|
|
|
const break_even = p.profit_per_day > 0 ? p.capex / p.profit_per_day : Infinity;
|
|
|
tr.innerHTML = `
|
|
|
<td>${p.output}</td>
|
|
|
- <td>${p.expertise}</td>
|
|
|
+ <td>${expertise[p.expertise]}</td>
|
|
|
<td style="color: ${color(profit_per_area, 0, 250)}">${formatDecimal(profit_per_area)}</td>
|
|
|
<td><span style="color: ${color(break_even, 30, 3)}">${formatDecimal(break_even)}</span>d</td>
|
|
|
<td style="color: ${color(p.capex, 300_000, 40_000)}">${formatWhole(p.capex)}</td>
|
|
|
@@ -54,12 +74,13 @@ function color(n: number, low: number, high: number): string {
|
|
|
|
|
|
setupPopover();
|
|
|
lowVolume.addEventListener('change', render);
|
|
|
+expertiseSelect.addEventListener('change', render);
|
|
|
render();
|
|
|
|
|
|
interface Profit {
|
|
|
output: string
|
|
|
recipe: string
|
|
|
- expertise: string
|
|
|
+ expertise: keyof typeof expertise
|
|
|
profit_per_day: number
|
|
|
area: number
|
|
|
capex: number
|
