feat(web): fixed iframe rendering

akorzunin · Aug 2, 2024 · 50ec87a · 50ec87a
1 parent 3b0d17f
commit 50ec87a
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 25 deletions.
diff --git a/web/package.json b/web/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.51.18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.417.0",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/GodotFrame.tsx b/web/src/components/GodotFrame.tsx
@@ -1,29 +1,50 @@
-import { useEffect } from "react";
+import { useState } from "react";
 import Iframe from "react-iframe";
+import { Button } from "../shadcn/ui/button";
+import { FaPlay } from "react-icons/fa";
+import { useQuery } from "@tanstack/react-query";
+import { getGameVersionInfo } from "../lib/versions";
 
 export const GodotFrame = () => {
-  useEffect(() => {
-    window.frames[0].stop();
-  }, []);
-
+  const [showIframe, setShowIframe] = useState(false);
+  const { data: gameVersionData } = useQuery({
+    queryKey: ["version-data"],
+    queryFn: async () => await getGameVersionInfo(),
+  });
   return (
-    <div className="grid justify-items-center pt-6">
-      <div className="w-max">
-        <Iframe
-          url="download/web/index.html"
-          width="800px"
-          height="450px"
-          id=""
-          className=""
-          title="SuperIcosahedron"
-          display="block"
-          position="static"
-          loading="lazy"
-          frameBorder={0}
-          allowFullScreen
-        />
-        <p className="flex justify-end text-primary-foreground">
-          GodotFrame Latest build: version: __VERSION__ commit: __COMMIT__
+    <div className="grid justify-items-center px-6 pt-6">
+      <div className="w-screen-lg relative aspect-video min-w-[90vw]">
+        {!showIframe && (
+          <div className="absolute inset-0 flex items-center justify-center bg-muted bg-opacity-75">
+            <Button onClick={() => setShowIframe(true)}>
+              <FaPlay />
+              &nbsp;Run
+            </Button>
+          </div>
+        )}
+        {showIframe && (
+          <Iframe
+            url={import.meta.env.DEV ? "/download/" : "download/web/index.html"}
+            id=""
+            className="inset-0"
+            height="100%"
+            width="100%"
+            title="SuperIcosahedron"
+            display="initial"
+            loading="lazy"
+            scrolling="no"
+            frameBorder={0}
+          />
+        )}
+        <p className="absolute bottom-0 right-2 text-primary-foreground">
+          build:{" "}
+          {gameVersionData
+            ? gameVersionData.version
+            : import.meta.env.VITE_GAME_VERSION}{" "}
+          commit:{" "}
+          {gameVersionData
+            ? gameVersionData.commit
+            : import.meta.env.VITE_GAME_COMMIT}
         </p>
       </div>
     </div>

diff --git a/web/src/lib/versions.ts b/web/src/lib/versions.ts
@@ -0,0 +1,14 @@
+interface GameVarsion {
+  VERSION: string;
+  COMMIT: string;
+}
+
+export async function getGameVersionInfo() {
+  const req = await fetch("/download/latest_version.json");
+  const data = (await req.json()) as GameVarsion;
+
+  return {
+    version: data.VERSION,
+    commit: data.COMMIT,
+  };
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -3,11 +3,16 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { HomePage } from "./pages/HomePage.tsx";
 import { ThemeProvider } from "./shadcn/ui/theme-provider.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-      <HomePage />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
+        <HomePage />
+      </ThemeProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_GAME_VERSION: string;
+  readonly VITE_GAME_COMMIT: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}