set up popover for buy

ts/buy.ts

@@ -1,3 +1,5 @@
+import {setupPopover} from './popover';
+
 document.querySelector("#fetch")!.addEventListener("click", async () => {
 	const username = (document.querySelector("#username") as HTMLInputElement).value;
 	const apiKey = (document.querySelector("#api-key") as HTMLInputElement).value;
@@ -5,6 +7,7 @@ document.querySelector("#fetch")!.addEventListener("click", async () => {
 	const output = await calculate(username, apiKey, supplyForDays);
 	console.log(output);
 });
+setupPopover();
 
 async function calculate(username: string, apiKey: string, supplyForDays: number): Promise<void> {
 	const [prices, planets, warehouse, {bids, orders}] = await Promise.all([

ts/popover.ts

@@ -0,0 +1,19 @@
+export function setupPopover() {
+    const main = document.querySelector('main')!;
+    const popover = document.querySelector('#popover') as HTMLElement;
+    main.addEventListener('mouseover', (event) => {
+        const target = event.target as HTMLElement;
+        if (target.dataset.tooltip) {
+            popover.textContent = target.dataset.tooltip;
+            const rect = target.getBoundingClientRect();
+            popover.style.left = `${rect.left}px`;
+            popover.style.top = `${rect.bottom}px`;
+            popover.showPopover();
+        }
+    });
+    main.addEventListener('mouseout', (event) => {
+        const target = event.target as HTMLElement;
+        if (target.dataset.tooltip)
+            popover.hidePopover();
+    });
+}

ts/roi.ts

@@ -1,3 +1,5 @@
+import {setupPopover} from './popover';
+
 const profits: Promise<Profit[]> = (async function () {
 	const response = await fetch('roi.json');
 	return await response.json();
@@ -44,24 +46,7 @@ function color(n: number, low: number, high: number): string {
 	return `color-mix(in oklch, #0c8 ${scale * 100}%, #f70)`;
 }
 
-const main = document.querySelector('main')!;
-const popover = document.querySelector('#popover') as HTMLElement;
-main.addEventListener('mouseover', (event) => {
-	const target = event.target as HTMLElement;
-	if (target.dataset.tooltip) {
-		popover.textContent = target.dataset.tooltip;
-		const rect = target.getBoundingClientRect();
-		popover.style.left = `${rect.left}px`;
-		popover.style.top = `${rect.bottom}px`;
-		popover.showPopover();
-	}
-});
-main.addEventListener('mouseout', (event) => {
-	const target = event.target as HTMLElement;
-	if (target.dataset.tooltip)
-		popover.hidePopover();
-});
-
+setupPopover();
 lowVolume.addEventListener('change', render);
 render();