Add insights

frontend/src/index.ts

@@ -21,6 +21,8 @@ import { PlayerCharacterView } from './scripts/objects/player-character-view';
 import '../static/settings.svg';
 import '../static/minimize.svg';
 import '../static/maximize.svg';
+import { handleInsights } from './scripts/handle-insights';
+import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -51,14 +53,48 @@ const main = async () => {
 
     const background = new LandingPageBackground(canvas);
     const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
-
     handleFullScreen(minimize, maximize);
+
+    let backgroundRenderer = await background.renderer;
+    let isInGame = false;
+    let game: Game;
+    const getFrameData = () => {
+      const {
+        fps,
+        renderScale,
+        lightScale,
+        canvasWidth,
+        canvasHeight,
+      } = getInsightsFromRenderer(isInGame ? game.renderer : backgroundRenderer);
+
+      return {
+        isInGame,
+        fps,
+        renderScale,
+        lightScale,
+        canvasWidth,
+        canvasHeight,
+      };
+    };
+    const { vendor, renderer } = getInsightsFromRenderer(backgroundRenderer);
+    handleInsights(
+      {
+        vendor,
+        renderer,
+        referrer: document.referrer,
+        connection: (navigator as any)?.connection.effectiveType,
+        devicePixelRatio: devicePixelRatio,
+      },
+      getFrameData,
+    );
+
     const playerDecision = await joinHandler.getPlayerDecision();
     landingUI.style.display = 'none';
 
     background.destroy();
 
-    new Game(playerDecision, canvas, overlay);
+    game = new Game(playerDecision, canvas, overlay);
+    isInGame = true;
   } catch (e) {
     console.error(e);
     alert(e);

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(