Add Unity WebGL build files

index.html

@@ -25,25 +25,85 @@
   </div>
   <div id="unity-fullscreen-button" style="display: none;"></div>
   <script>
-    // ... (Tu código JavaScript existente está aquí) ...
-  </script>
+    const hideFullScreenButton = "";
+    const buildUrl = "Build";
+    const loaderUrl = buildUrl + "/Retro-to-3D.loader.js";
+    const config = {
+      dataUrl: buildUrl + "/Retro-to-3D.data",
+      frameworkUrl: buildUrl + "/Retro-to-3D.framework.js",
+      codeUrl: buildUrl + "/Retro-to-3D.wasm",
+      streamingAssetsUrl: "StreamingAssets",
+      companyName: "ilumine AI",
+      productName: "Pj - 2D-to-3D",
+      productVersion: "0.1.12",
+    };
 
-  <!-- Aquí es donde hemos insertado el nuevo script -->
-  <script type="text/javascript">
-    function readFromClipboard() {
-      navigator.clipboard.readText().then(
-        function (text) {
-          if (typeof UnityInstance !== 'undefined') {
-            UnityInstance.SendMessage('ClipboardManager', 'OnTextPasted', text);
-          }
-        },
-        function (err) {
-          console.error('Error al leer del portapapeles: ', err);
+    const container = document.querySelector("#unity-container");
+    const canvas = document.querySelector("#unity-canvas");
+    const loadingCover = document.querySelector("#loading-cover");
+    const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
+    const progressBarFull = document.querySelector("#unity-progress-bar-full");
+    const fullscreenButton = document.querySelector("#unity-fullscreen-button");
+    const spinner = document.querySelector('.spinner');
+
+    const canFullscreen = (function () {
+      for (const key of [
+        'exitFullscreen',
+        'webkitExitFullscreen',
+        'webkitCancelFullScreen',
+        'mozCancelFullScreen',
+        'msExitFullscreen',
+      ]) {
+        if (key in document) {
+          return true;
         }
-      );
+      }
+      return false;
+    }());
+
+    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      container.className = "unity-mobile";
+      config.devicePixelRatio = 1;
     }
-  </script>
+    loadingCover.style.display = "";
 
+    const script = document.createElement("script");
+    script.src = loaderUrl;
+    script.onload = () => {
+      createUnityInstance(canvas, config, (progress) => {
+        spinner.style.display = "none";
+        progressBarEmpty.style.display = "";
+        progressBarFull.style.width = `${100 * progress}%`;
+      }).then((unityInstance) => {
+        loadingCover.style.display = "none";
+        if (canFullscreen) {
+          if (!hideFullScreenButton) {
+            fullscreenButton.style.display = "";
+          }
+          fullscreenButton.onclick = () => {
+            unityInstance.SetFullscreen(1);
+          };
+        }
+      }).catch((message) => {
+        alert(message);
+      });
+    };
+    document.body.appendChild(script);
+  </script>
+      <script type="text/javascript">
+        function readFromClipboard() {
+          navigator.clipboard.readText().then(
+            function (text) {
+              if (typeof UnityInstance !== 'undefined') {
+                UnityInstance.SendMessage('ClipboardManager', 'OnTextPasted', text);
+              }
+            },
+            function (err) {
+              console.error('Error al leer del portapapeles: ', err);
+            }
+          );
+        }
+      </script>
 </body>
 
 </html>