init template

src/MainApp.tsx

@@ -0,0 +1,9 @@
+import { UnityGame } from './components/unity-game';
+
+export default function MainApp() {
+  return (
+    <div className={'flex h-dvh w-screen flex-col items-center justify-center'}>
+      <UnityGame />
+    </div>
+  );
+}

src/app.ts

@@ -0,0 +1,21 @@
+// ZaUI stylesheet
+import 'zmp-ui/zaui.css';
+// Tailwind stylesheet
+import 'css/tailwind.scss';
+// Your stylesheet
+import 'css/app.scss';
+
+// React core
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Expose app configuration
+import appConfig from '../app-config.json';
+
+if (!window.APP_CONFIG) {
+  window.APP_CONFIG = appConfig;
+}
+
+import App from './MainApp';
+const root = createRoot(document.getElementById('app')!);
+root.render(React.createElement(App));

src/components/unity-game.tsx

@@ -0,0 +1,35 @@
+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}
+      />
+    </>
+  );
+};

src/css/app.scss

@@ -0,0 +1,38 @@
+.page {
+  padding: 16px 16px 96px 16px;
+}
+
+.section-container {
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.progress {
+  display: inline-block;
+  height: 50px;
+  width: 80%;
+  margin-bottom: 200px;
+  border-radius: 99px;
+  background: #f9f9f9;
+}
+
+.bar {
+  border-radius: 99px;
+  width: 0%;
+  height: 100%;
+  transition: width;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(.36,.55,.63,.48);
+  box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25);
+}
+
+.pattern {
+  background-color: #DFDBE5;
+}
+
+
+.zaui-list-item {
+  cursor: pointer;
+}

src/css/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/types.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  interface Window {
+    APP_ID: string;
+    APP_CONFIG: unknown;
+    ZaloMiniAppSDK: unknown;
+    unityInstance: unknown;
+  }
+}