Add Webgl max texture size check

Users who have a device where the WebGL max texture size is too small
will have a difficult time diagnosing the problem as they will be
greated with a black screen. So we add the max texture detection as a
check so users see a warning (and report it as a user metric so we can
see the spread)

src/app/src/components/landing/BrowserCheck.tsx

@@ -1,3 +1,4 @@
+import { emitEvent } from "@/lib/plausible";
 import { Alert } from "antd";
 import { useEffect, useState } from "react";
 
@@ -6,9 +7,18 @@ export const BrowserCheck: React.FC<{}> = () => {
 
   useEffect(() => {
     const gl = document.createElement("canvas").getContext("webgl2");
+    const requiredSize = 8192;
+    const maxTextureSize = gl ? gl.getParameter(gl.MAX_TEXTURE_SIZE) : 0;
     if (!gl) {
       setWarnings((x) => [...x, "WebGL2 not available"]);
+    } else if (maxTextureSize < requiredSize) {
+      setWarnings((x) => [
+        ...x,
+        `WebGL2 max texture size (${maxTextureSize}) is smaller than required (${requiredSize})`,
+      ]);
     }
+
+    emitEvent({ kind: "webgl", maxTextureSize });
   }, []);
 
   useEffect(() => {

src/app/src/features/eu4/SavePage.tsx

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import { Alert } from "antd";
 import { AppHeader } from "@/components/layout/AppHeader";
 import { AppLoading } from "@/components/AppLoading";
+import { BrowserCheck } from "@/components/landing/BrowserCheck";
 
 interface SaveProps {
   saveId: string;
@@ -19,6 +20,7 @@ export const SavePage: React.FC<SaveProps> = ({ saveId }) => {
 
   return (
     <>
+      <BrowserCheck />
       {engineError && (
         <>
           <AppHeader />

src/app/src/features/skanderbeg/SkanderbegSavePage.tsx

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import { Alert } from "antd";
 import { AppHeader } from "@/components/layout/AppHeader";
 import { AppLoading } from "@/components/AppLoading";
+import { BrowserCheck } from "@/components/landing/BrowserCheck";
 
 interface SkanRoute {
   skanId: string;
@@ -19,6 +20,7 @@ export const SkanderbegSavePage: React.FC<SkanRoute> = ({ skanId }) => {
 
   return (
     <>
+      <BrowserCheck />
       {engineError && (
         <>
           <AppHeader />

src/app/src/lib/plausible.ts

@@ -31,6 +31,10 @@ export type Event =
   | {
       kind: "download";
       game: DetectedDataType;
+    }
+  | {
+      kind: "webgl";
+      maxTextureSize: number;
     };
 
 export function emitEvent(event: Event) {