feat: remove react-unity-webgl

src/MainApp.tsx

@@ -1,9 +1,17 @@
-import { UnityGame } from './components/unity-game';
+import {PromogameGame} from "promogame-game-component";
 
 export default function MainApp() {
+  const Loading = ({ progress }: { progress: number }) => {
+    return (
+        <div className={'h-full w-full items-center justify-center text-center'}>
+          Loading {progress * 100}%
+        </div>
+    );
+  };
+
   return (
     <div className={'flex h-dvh w-screen flex-col items-center justify-center'}>
-      <UnityGame />
+      <PromogameGame loadingComponent={Loading} className={'h-full w-full'} apiUrl={import.meta.env.VITE_API_URL} />
     </div>
   );
 }

src/components/unity-game.tsx

@@ -1,35 +0,0 @@
-import clsx from 'clsx';
-import { useEffect } from 'react';
-import { Unity, useUnityContext } from 'react-unity-webgl';
-import zmpSdk from 'zmp-sdk';
-
-export const UnityGame = () => {
-  const gameLink = import.meta.env.VITE_GAME_LINK;
-  const { unityProvider, isLoaded, loadingProgression, UNSAFE__unityInstance } = useUnityContext({
-    loaderUrl: `${gameLink}/Build/Build.loader.js`,
-    dataUrl: `${gameLink}/Build/Build.data.unityweb`,
-    frameworkUrl: `${gameLink}/Build/Build.framework.js.unityweb`,
-    codeUrl: `${gameLink}/Build/Build.wasm.unityweb`,
-  });
-
-  useEffect(() => {
-    window.ZaloMiniAppSDK = zmpSdk;
-    window.unityInstance = UNSAFE__unityInstance;
-  }, [UNSAFE__unityInstance]);
-
-  return (
-    <>
-      {!isLoaded && (
-        <div className={'h-full w-full items-center justify-center text-center'}>
-          Loading {loadingProgression * 100 + 10}%
-        </div>
-      )}
-      <Unity
-        id='unity-canvas'
-        unityProvider={unityProvider}
-        className={clsx('h-full w-full', !isLoaded && 'hidden')}
-        devicePixelRatio={window.devicePixelRatio}
-      />
-    </>
-  );
-};