Merge pull request #21 from finol-digital/develop

Develop

app/global.css

@@ -30,9 +30,3 @@ footer {
   width: 100%;
   height: 100px;
 }
-
-canvas {
-  width: 960px;
-  height: 600px;
-  background: url("/Unity/WebGL.jpg") center / cover;
-}

app/link/[slug]/native/page.tsx

@@ -8,7 +8,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   if (!game) return notFound();
   return (
     <main className="main-container">
-      <Banner url={game.bannerImageUrl} />
+      <Banner url={game.bannerImageUrl} txt={game.name} />
       <h1>CGS for {game.name}</h1>
       <a href="https://apps.apple.com/us/app/card-game-simulator/id1392877362?itsct=apps_box_badge&amp;itscg=30200">
         <img

app/link/[slug]/page.tsx

@@ -9,7 +9,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   if (!game) return notFound();
   return (
     <main className="main-container">
-      <Banner url={game.bannerImageUrl} />
+      <Banner url={game.bannerImageUrl} txt={game.name} />
       <h1>Play {game.name}</h1>
       <p>
         To get started with playing {game.name}, select your preferred platform:

app/link/[slug]/steam/page.tsx

@@ -8,7 +8,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
   if (!game) return notFound();
   return (
     <main className="main-container">
-      <Banner url={game.bannerImageUrl} />
+      <Banner url={game.bannerImageUrl} txt={game.name} />
       <h1>CGS for {game.name}</h1>
       <iframe
         src="https://store.steampowered.com/widget/1742850/"

app/link/[slug]/web/page.tsx

@@ -1,15 +1,15 @@
+import Footer from "@/components/footer";
+import UnityWeb from "@/components/unityWeb";
 import { getGame } from "@/lib/firebase/firestore";
 import { notFound } from "next/navigation";
-import Script from "next/script";
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const game = (await getGame(params.slug))?.at(0);
   if (!game) return notFound();
   return (
-    <>
-      <canvas id="unity-canvas" width="960" height="600"></canvas>
-      <Script src="/Unity/WebGL.loader.js" />
-      <Script src="/UnityWebGL.js" />
-    </>
+    <main className="main-container">
+      <UnityWeb url={game.autoUpdateUrl} />
+      <Footer />
+    </main>
   );
 }

app/page.tsx

@@ -2,7 +2,7 @@ import Banner from "@/components/banner";
 import Footer from "@/components/footer";
 import Link from "next/link";
 
-export default async function Page() {
+export default function Page() {
   return (
     <main className="main-container">
       <Banner />

components/banner.tsx

@@ -1,12 +1,18 @@
-export default function Banner({ url = "/cgs.png" }: { url?: string }) {
+export default function Banner({
+  url = "/cgs.png",
+  txt = "Share your Card Game Simulator (CGS) games",
+}: {
+  url?: string;
+  txt?: string;
+}) {
   return (
     <>
       <center>
         <img
           // img instead of next/Image
           src={url}
           height="128"
-          alt="Share your Card Game Simulator (CGS) games"
+          alt={txt}
           //priority={true}
         />
       </center>

components/unityWeb.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Unity, useUnityContext } from "react-unity-webgl";
+
+export default function UnityWeb({
+  url = "https://www.cardgamesimulator.com/games/Standard/Standard.json",
+}: {
+  url?: string;
+}) {
+  const { unityProvider } = useUnityContext({
+    loaderUrl: "/Unity/WebGL.loader.js",
+    dataUrl: "/Unity/WebGL.data",
+    frameworkUrl: "/Unity/WebGL.framework.js",
+    codeUrl: "/Unity/WebGL.wasm",
+  });
+
+  // We'll use a state to store the device pixel ratio.
+  const [devicePixelRatio, setDevicePixelRatio] = useState(
+    window.devicePixelRatio,
+  );
+
+  useEffect(
+    function () {
+      // A function which will update the device pixel ratio of the Unity
+      // Application to match the device pixel ratio of the browser.
+      const updateDevicePixelRatio = function () {
+        setDevicePixelRatio(window.devicePixelRatio);
+      };
+      // A media matcher which watches for changes in the device pixel ratio.
+      const mediaMatcher = window.matchMedia(
+        `screen and (resolution: ${devicePixelRatio}dppx)`,
+      );
+      // Adding an event listener to the media matcher which will update the
+      // device pixel ratio of the Unity Application when the device pixel
+      // ratio changes.
+      mediaMatcher.addEventListener("change", updateDevicePixelRatio);
+      return function () {
+        // Removing the event listener when the component unmounts.
+        mediaMatcher.removeEventListener("change", updateDevicePixelRatio);
+      };
+    },
+    [devicePixelRatio],
+  );
+
+  return (
+    <>
+      <Unity
+        unityProvider={unityProvider}
+        style={{ width: 1280, height: 720 }}
+        devicePixelRatio={devicePixelRatio}
+      />
+    </>
+  );
+}

package.json

@@ -20,6 +20,7 @@
     "next": "^13.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-unity-webgl": "^9.4.3",
     "sharp": "^0.32.5",
     "typescript": "5.2.2"
   },