applied resize changes to WebGL template inside Packages

andygruening · andygruening · commit d9bad1974500 · 2025-01-21T15:42:49.000+01:00
diff --git a/Assets/WebGLTemplates/SequenceReact/index.html b/Assets/WebGLTemplates/SequenceReact/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sequence Unity</title>
+    <title>Sequence Unity Demo</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/Assets/WebGLTemplates/SequenceReact/src/App.css b/Assets/WebGLTemplates/SequenceReact/src/App.css
@@ -17,7 +17,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: grey;
+  background: #1a1a1a;
   /* We'll set the following Flex properties in order to center the text. */
   display: flex;
   justify-content: center;
diff --git a/Assets/WebGLTemplates/SequenceReact/src/index.css b/Assets/WebGLTemplates/SequenceReact/src/index.css
@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #1a1a1a;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
diff --git a/Packages/Sequence-Unity/WebGLTemplates/SequenceReact/src/App.css b/Packages/Sequence-Unity/WebGLTemplates/SequenceReact/src/App.css
@@ -8,9 +8,6 @@
 
 .container {
   position: relative;
-  /* The container determains the size. */
-  width: 800px;
-  height: 600px;
 }
 
 .container > .loading-overlay {
diff --git a/Packages/Sequence-Unity/WebGLTemplates/SequenceReact/src/App.tsx b/Packages/Sequence-Unity/WebGLTemplates/SequenceReact/src/App.tsx
@@ -50,12 +50,15 @@ import "./App.css";
     }
   }, [messageToSend]);
 
-  useEffect(() => {
-    addEventListener("GoogleSignIn", handleGoogleSignIn);
-    return () => {
-      removeEventListener("GoogleSignIn", handleGoogleSignIn);
-    };
-  }, []);
+    useEffect(() => {
+      addEventListener("GoogleSignIn", handleGoogleSignIn);
+      window.addEventListener("resize", handleResize);
+      handleResize()
+      return () => {
+        removeEventListener("GoogleSignIn", handleGoogleSignIn);
+        window.removeEventListener("resize", handleResize);
+      };
+    }, []);
 
   const [showLogin, setShowLogin] = useState(false);
 
@@ -68,6 +71,23 @@ import "./App.css";
     setShowLogin(false);
   };
 
+    const handleResize = () => {
+      const container = document.querySelector('.container') as any;
+
+      let w = window.innerWidth * 0.98;
+      let h = window.innerHeight * 0.98;
+
+      const r = 600 / 960;
+      if (w * r > window.innerHeight) {
+        w = Math.min(w, Math.ceil(h / r));
+      }
+
+      h = Math.floor(w * r);
+
+      container.style.width = w + "px";
+      container.style.height = h + "px";
+    }
+
   return (
     <div className="outer-container">
       <div className="container">

Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,6 @@`
`8`	`8`
`9`	`9`	`.container {`
`10`	`10`	`position: relative;`
`11`		`- /* The container determains the size. */`
`12`		`- width: 800px;`
`13`		`- height: 600px;`
`14`	`11`	`}`
`15`	`12`
`16`	`13`	`.container > .loading-overlay {`