Add insights

frontend/src/scripts/get-insights-from-renderer.ts

@@ -0,0 +1,21 @@
+import { Renderer } from 'sdf-2d';
+
+export const getInsightsFromRenderer = (
+  renderer?: Renderer,
+): {
+  vendor?: string;
+  renderer?: string;
+  fps?: number;
+  renderScale?: number;
+  lightScale?: number;
+  canvasWidth?: number;
+  canvasHeight?: number;
+} => ({
+  fps: renderer?.insights?.fps,
+  vendor: renderer?.insights?.vendor,
+  renderer: renderer?.insights?.renderer,
+  renderScale: renderer?.insights?.renderPasses.distance.renderScale,
+  lightScale: renderer?.insights?.renderPasses.lights.renderScale,
+  canvasWidth: renderer?.canvasSize.x,
+  canvasHeight: renderer?.canvasSize.y,
+});

frontend/src/scripts/handle-insights.ts

@@ -0,0 +1,28 @@
+const baseUri = 'https://insights.decla.red';
+const type = 'decla-red-frontend';
+const updateTime = 15000;
+
+export const handleInsights = async (initialData: any, getFrameData: () => any) => {
+  const sessionId = await createSession(initialData);
+  setInterval(() => createFrame(sessionId, getFrameData()), updateTime);
+};
+
+const createSession = async (data: any): Promise<string> => {
+  const response = await sendPostRequest(`${baseUri}/${type}/sessions/`, data);
+  const { sessionId } = await response.json();
+  return sessionId;
+};
+
+const createFrame = async (sessionId: string, data: any): Promise<unknown> =>
+  await sendPostRequest(`${baseUri}/${type}/sessions/${sessionId}`, data);
+
+const sendPostRequest = async (uri: string, data: any): Promise<Response> =>
+  await fetch(uri, {
+    method: 'POST',
+    mode: 'cors',
+    redirect: 'follow',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });

frontend/src/scripts/landing-page-background.ts

@@ -20,9 +20,12 @@ const LangindPagePolygon = NoisyPolygonFactory(
 
 export class LandingPageBackground {
   private isActive = true;
+  public renderer: Promise<Renderer>;
+  private resolveRenderer!: (r: Renderer) => unknown;
 
   constructor(canvas: HTMLCanvasElement) {
     this.start(canvas);
+    this.renderer = new Promise((r) => (this.resolveRenderer = r));
   }
 
   private async start(canvas: HTMLCanvasElement): Promise<void> {
@@ -65,6 +68,8 @@ export class LandingPageBackground {
   private gameLoop(renderer: Renderer, time: DOMHighResTimeStamp, _: number): boolean {
     Random.seed = 42;
 
+    this.resolveRenderer(renderer);
+
     renderer.setViewArea(vec2.fromValues(0, renderer.canvasSize.y), renderer.canvasSize);
 
     const topPlanetPosition = vec2.fromValues(