Built web

Branch: main Commit: cf9c5e5 (dirty) package:peanut 5.1.0
Flutter-Journey · Nov 4, 2024 · 9b49bb0 · 9b49bb0
1 parent 1c648ca
commit 9b49bb0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/assets/load.gif b/assets/load.gif
diff --git a/flutter_bootstrap.js b/flutter_bootstrap.js
diff --git a/flutter_service_worker.js b/flutter_service_worker.js
@@ -35,6 +35,7 @@ const RESOURCES = {"assets/AssetManifest.bin": "bab5a8a7ab084453c1408fb7f67e9f52
 "assets/images/orange.png": "e39bf94af6f2c43fe65c90112c7a23e6",
 "assets/images/peach.png": "6498c8c4073e8e5a129883814c3235a3",
 "assets/images/pineapple.png": "58b42fbfa7f168271777e48b7134bd49",
+"assets/load.gif": "42ee4d31c6e3eddf34d0aa8211a714ac",
 "assets/manifest.json": "c9d701e059e4bb70e89999148726b0a4",
 "assets/NOTICES": "4b465e3d787954ea060fae4b609ab0e3",
 "assets/shaders/ink_sparkle.frag": "ecc85a2e95f5e9f53123dcaf8cb9b6ce",
@@ -50,13 +51,13 @@ const RESOURCES = {"assets/AssetManifest.bin": "bab5a8a7ab084453c1408fb7f67e9f52
 "canvaskit/skwasm.worker.js": "89990e8c92bcb123999aa81f7e203b1c",
 "favicon.png": "d013459ae83c2741755f17e806da3e85",
 "flutter.js": "f393d3c16b631f36852323de8e583132",
-"flutter_bootstrap.js": "bb2c542830c8b95bc4e8c6a61f796dcf",
+"flutter_bootstrap.js": "885f753641c2041376ba230409eaa34e",
 "icons/Icon-192.png": "97b1eb6da642b5c879721b4a498d52fd",
 "icons/Icon-512.png": "14a9d69f21be7b67853e5350b0a55b36",
 "icons/Icon-maskable-192.png": "97b1eb6da642b5c879721b4a498d52fd",
 "icons/Icon-maskable-512.png": "14a9d69f21be7b67853e5350b0a55b36",
-"index.html": "f1f670ac45b729fd48f8165ffd24c814",
-"/": "f1f670ac45b729fd48f8165ffd24c814",
+"index.html": "9ad95b3cf06001431e362c091323e32c",
+"/": "9ad95b3cf06001431e362c091323e32c",
 "main.dart.js": "1767d3574b49e90356dec4f911f11088",
 "manifest.json": "c9d701e059e4bb70e89999148726b0a4",
 "version.json": "f10c1d4b94f547b3f03bade8f040b6d4"};

diff --git a/index.html b/index.html
@@ -1,30 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <!--
-    If you are serving your web app in a path other than the root, change the
-    href value below to reflect the base path you are serving from.
-
-    The path provided below has to start and end with a slash "/" in order for
-    it to work correctly.
-
-    For more details:
-    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-
-    This is a placeholder for base href that will be replaced by the value of
-    the `--base-href` argument provided to `flutter build`.
-  -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="/Fruit-Cutting-Game/">
-
   <base href="/Fruit-Cutting-Game/">
-
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description"
         content="A fun and interactive Fruit Cutting Game built using Flutter. 🎮">
   <meta name="keywords"
-        content="Nguyển Thành Chung, Chung Nguyen Thanh, Nguyen Thanh Chung, ChunhThanhDe, ChunhThanhDe Software Engineers in VietNam, flutter example, Fruit Cutting Game, Fruit Ninja">
+        content="Nguyễn Thành Chung, Chung Nguyen Thanh, Nguyen Thanh Chung, ChunhThanhDe, ChunhThanhDe Software Engineers in VietNam, flutter example, Fruit Cutting Game, Fruit Ninja">
   <meta name="author" content="ChunhThanhDe">
 
   <!-- iOS meta tags & icons -->
@@ -37,21 +22,68 @@
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="./assets/icons/fruit_cutting_logo.png"/>
-
   <link rel="manifest" href="./assets/manifest.json">
+
+  <style>
+    /* Set body and html to full height and remove margins */
+    body, html {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      background-color: black; /* Set background to black */
+      display: flex;
+      justify-content: center;
+      align-items: center; /* Center the content vertically */
+    }
+    /* Style for the loading image */
+    #loading-image {
+      height: 250px; /* Set fixed height for the GIF */
+    }
+  </style>
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <!-- Loading image -->
+  <img id="loading-image" src="./assets/load.gif" alt="Loading...">
+
   <script>
+      // Variable to track if the app has loaded
+      let appLoaded = false;
+
+      // Check for service worker registration and hide the loading image when ready
       if ('serviceWorker' in navigator) {
         window.addEventListener('flutter-first-frame', function () {
-          navigator.serviceWorker.register('flutter_service_worker.js?v=2222597059');
+          navigator.serviceWorker.register('flutter_service_worker.js?v=2902242697');
+          appLoaded = true; // Mark the app as loaded
+          hideLoadingImage();
         });
       }
+
+      // Function to hide the loading image
+      function hideLoadingImage() {
+        if (appLoaded) {
+          document.getElementById('loading-image').style.display = 'none';
+        }
+      }
+
+      // Ensure the loading image is displayed for at least 3 seconds
+      const minLoadTime = 3000; // 3 seconds
+      const startTime = Date.now();
+
+      const interval = setInterval(() => {
+        // Check if the minimum load time has passed and the app has loaded
+        if (appLoaded && (Date.now() - startTime >= minLoadTime)) {
+          hideLoadingImage();
+          clearInterval(interval); // Stop the interval check
+        }
+      }, 100); // Check every 100ms
+
+      // If the minimum load time passes, hide the loading image regardless
+      setTimeout(() => {
+        appLoaded = true; // Set to true to bypass any further checks
+        hideLoadingImage(); // Hide the loading image after 3 seconds if the app hasn't loaded
+      }, minLoadTime);
   </script>
-  
+
   <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>