Implement monitoring infrastructure

frontend/src/pages/monitoring/font.ts

@@ -0,0 +1,25 @@
+export const charWidth = 6, charHeight = 9;
+
+export async function loadFont(src: RequestInfo | URL): Promise<ImageBitmap[]> {
+    const fontImg = await fetch(src);
+    const fontBlob = await fontImg.blob();
+
+    async function getCharBitmap(x: number, y: number) {
+        const fontOffsetX = 1, fontOffsetY = 1, fontPaddingX = 2, fontPaddingY = 2;
+
+        const offsetX = (charWidth + fontPaddingX) * x + fontOffsetX;
+        const offsetY = (charHeight + fontPaddingY) * y + fontOffsetY;
+
+        return await createImageBitmap(fontBlob, offsetX, offsetY, charWidth, charHeight);
+    }
+
+    const font = Array(256);
+
+    for (let y = 0; y < 16; ++y) {
+        for (let x = 0; x < 16; ++x) {
+            const i = 16 * y + x;
+            font[i] = getCharBitmap(x, y);
+        }
+    }
+    return await Promise.all(font);
+}