fix: RouterComponent should be on top (#3524)

To get the `WorldRoute` and `world` to work well with other components,
the `RouterComponent` needs to be on top.

This also fixes a small deprecation in the index.html file for the
examples.

examples/lib/stories/router/router_world_example.dart

@@ -4,13 +4,14 @@ import 'package:flame/events.dart';
 import 'package:flame/game.dart';
 import 'package:flame/geometry.dart';
 import 'package:flame/rendering.dart';
+import 'package:flutter/material.dart' show Colors;
 import 'package:flutter/rendering.dart';
 
 class RouterWorldExample extends FlameGame {
   static const description = '''
-  This example shows how to use the RouterComponent to navigate between
+This example shows how to use the RouterComponent to navigate between
-  different worlds and pages.
+different worlds and pages.
-  ''';
+''';
 
   late final RouterComponent router;
 
@@ -328,52 +329,55 @@ class Level2Page extends DecoratedWorld with HasGameReference {
   }
 }
 
-class Planet extends PositionComponent {
+class Planet extends CircleComponent
+    with TapCallbacks, HasGameReference<RouterWorldExample> {
   Planet({
-    required this.radius,
+    required super.radius,
-    required this.color,
+    required Color color,
-    super.position,
     super.children,
-  }) : _paint = Paint()..color = color;
+  }) : super(paint: Paint()..color = color, anchor: Anchor.center);
-
-  final double radius;
-  final Color color;
-  final Paint _paint;
 
   @override
-  void render(Canvas canvas) {
+  void onTapDown(TapDownEvent event) {
-    canvas.drawCircle(Offset.zero, radius, _paint);
+    game.router.pushAndWait(YesNoDialog()).then((shouldRemove) {
+      if (shouldRemove) {
+        removeFromParent();
+      }
+    });
   }
 }
 
-class Orbit extends PositionComponent {
+class Orbit extends CircleComponent {
   Orbit({
-    required this.radius,
+    required super.radius,
     required this.planet,
     required this.revolutionPeriod,
-    double initialAngle = 0,
+  }) : super(
-  })  : _paint = Paint()
+          children: [planet],
-          ..style = PaintingStyle.stroke
+          anchor: Anchor.center,
-          ..color = const Color(0x888888aa),
+          paint: Paint()
-        _angle = initialAngle {
+            ..style = PaintingStyle.stroke
-    add(planet);
+            ..color = const Color(0x888888aa),
-  }
+        );
 
-  final double radius;
   final double revolutionPeriod;
   final Planet planet;
-  final Paint _paint;
-  double _angle;
 
   @override
-  void render(Canvas canvas) {
+  Future<void> onLoad() async {
-    canvas.drawCircle(Offset.zero, radius, _paint);
+    super.onLoad();
-  }
+    if (parent is Planet) {
-
+      position = Vector2.all((parent! as Planet).radius);
-  @override
+    }
-  void update(double dt) {
+    planet.position.x = size.x;
-    _angle += dt / revolutionPeriod * tau;
+    planet.position.y = size.y / 2;
-    planet.position = Vector2(radius, 0)..rotate(_angle);
+    planet.add(
+      RotateAroundEffect(
+        tau,
+        EffectController(duration: revolutionPeriod, infinite: true),
+        center: size / 2,
+      ),
+    );
   }
 }
 
@@ -441,3 +445,43 @@ class DecoratedWorld extends World with HasTimeScale {
     }
   }
 }
+
+class YesNoDialog extends ValueRoute<bool> {
+  YesNoDialog() : super(value: false);
+
+  @override
+  Component build() {
+    final gameSize = findGame()!.size;
+    const margin = 10.0;
+    final boxSize = Vector2(350, 100);
+    return PositionComponent(
+      position: Vector2(gameSize.x / 2, margin),
+      size: boxSize,
+      anchor: Anchor.topCenter,
+      children: [
+        RectangleComponent(
+          size: boxSize,
+          paint: Paint()..color = const Color(0xFFAA0000),
+        ),
+        TextComponent(
+          position: Vector2.all(margin),
+          text: 'Remove the planet?',
+        ),
+        RoundedButton(
+          text: 'Yes',
+          action: () => completeWith(true),
+          color: Colors.green,
+          borderColor: Colors.white,
+          position: Vector2(boxSize.x / 4, boxSize.y - 30),
+        ),
+        RoundedButton(
+          text: 'No',
+          action: () => completeWith(false),
+          color: Colors.red,
+          borderColor: Colors.white,
+          position: Vector2(boxSize.x * 0.75, boxSize.y - 30),
+        ),
+      ],
+    );
+  }
+}

examples/web/index.html

@@ -19,16 +19,6 @@
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
+  <script src="flutter_bootstrap.js" async></script>
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('flutter_service_worker.js');
-      });
-    }
-  </script>
-  <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>

packages/flame/lib/src/components/router/router_component.dart

@@ -34,6 +34,7 @@ class RouterComponent extends Component {
     Map<String, RouteFactory>? routeFactories,
     this.onUnknownRoute,
     super.key,
+    super.priority = 0x7fffffff,
   })  : _routes = routes,
         _routeFactories = routeFactories ?? {} {
     routes.forEach((name, route) => route.name = name);