🚀 Update Warning size monitor

lib/presentation/home/home.dart

@@ -1,4 +1,5 @@
 import 'package:flame/components.dart';
+import 'package:flame/flame.dart';
 import 'package:flutter/material.dart';
 import 'package:fruit_cutting_game/common/widgets/button/rounded_button.dart';
 import 'package:fruit_cutting_game/common/widgets/text/simple_center_text.dart';
@@ -23,10 +24,50 @@ class HomePage extends Component with HasGameReference<MainRouterGame> {
 
   late final InteractiveButtonComponent _gameModeComponent;
 
+  // warning widget
+  late final SpriteComponent _gifWidget;
+  late final TextComponent _textComponent;
+
+  bool isAddAll = false;
+  bool isAddWarning = false;
+
   @override
   void onLoad() async {
     super.onLoad();
+    if (game.size.y < 400 || game.size.x < 400 || game.size.x < game.size.y) {
+      final warningGifImage = await Flame.images.load(AppImages.banana);
+      addAll(
+        [
+          _textComponent = TextComponent(
+            text: 'Use a computer monitor\nfor the best experience',
+            textRenderer: TextPaint(
+              style: const TextStyle(
+                fontSize: 22,
+                color: AppColors.white,
+                fontFamily: 'Insan',
+                letterSpacing: 2.0,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            position: Vector2(game.size.x / 2, game.size.y / 2 + 70),
+            anchor: Anchor.center,
+          ),
+          _gifWidget = SpriteComponent.fromImage(
+            warningGifImage,
+            size: Vector2(120, 120),
+          )
+            ..position = Vector2(game.size.x / 2, game.size.y / 2 - 50)
+            ..anchor = Anchor.center,
+        ],
+      );
+
+      isAddWarning = true;
+    } else {
+      initComponent();
+    }
+  }
 
+  void initComponent() {
     final textTitlePaint = TextPaint(
       style: const TextStyle(
         fontSize: 26,
@@ -104,21 +145,27 @@ class HomePage extends Component with HasGameReference<MainRouterGame> {
         )..anchor = Anchor.bottomRight,
       ],
     );
+
+    isAddAll = true;
   }
 
   @override
   void onGameResize(Vector2 size) {
     super.onGameResize(size);
+    if (isAddAll) {
+      // button in center of page
+      _button.position = size / 2;
 
-    // button in center of page
-    _button.position = size / 2;
-
-    _tutorialRuleScore1Component.position = Vector2(game.size.x / 2, game.size.y - game.size.y / 3.9);
-    _tutorialRuleScore2Component.position = Vector2(game.size.x / 2, game.size.y - game.size.y / 5.1);
-    _tutorialRuleLose1Component.position = Vector2(game.size.x / 2, game.size.y / 5.1);
-    _tutorialRuleLose2Component.position = Vector2(game.size.x / 2, game.size.y / 3.9);
+      _tutorialRuleScore1Component.position = Vector2(game.size.x / 2, game.size.y - game.size.y / 3.9);
+      _tutorialRuleScore2Component.position = Vector2(game.size.x / 2, game.size.y - game.size.y / 5.1);
+      _tutorialRuleLose1Component.position = Vector2(game.size.x / 2, game.size.y / 5.1);
+      _tutorialRuleLose2Component.position = Vector2(game.size.x / 2, game.size.y / 3.9);
 
-    _bombTextComponent.position = Vector2(game.size.x - 45, 10);
-    _gameModeComponent.position = Vector2(game.size.x - 50, game.size.y - 50);
+      _bombTextComponent.position = Vector2(game.size.x - 45, 10);
+      _gameModeComponent.position = Vector2(game.size.x - 50, game.size.y - 50);
+    } else if (isAddWarning) {
+      _textComponent.position = Vector2(game.size.x / 2, game.size.y / 2 + 70);
+      _gifWidget.position = Vector2(game.size.x / 2, game.size.y / 2 - 50);
+    }
   }
 }

web/index.html

@@ -46,42 +46,15 @@
   <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');
-          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
+    // Remove loading image after 10 seconds
+    window.onload = function () {
+      setTimeout(function () {
+        var loadingIndicator = document.getElementById("loading-image");
+        if (loadingIndicator) {
+          loadingIndicator.remove();
         }
-      }, 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);
+      }, 10000);
+    };
   </script>
 
   <script src="main.dart.js" type="application/javascript"></script>