Play with standardizing illustrations-mg

lib/ui/wonder_illustrations/common/illustration_mg.dart

@@ -0,0 +1,48 @@
+import 'package:wonders/common_libs.dart';
+import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart';
+import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart';
+
+class IllustrationMg extends StatelessWidget {
+  const IllustrationMg(
+    this.imagePath, {
+    Key? key,
+    required this.config,
+    required this.anim,
+    required this.type,
+    required this.heightFraction,
+    this.maxHeight = 700,
+  }) : super(key: key);
+
+  final String imagePath;
+  final WonderIllustrationConfig config;
+  final Animation<double> anim;
+  final WonderType type;
+  final double maxHeight;
+  final double heightFraction;
+  String get assetPath => type.assetPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: $styles.insets.sm),
+      child: LayoutBuilder(builder: (_, constraints) {
+        final height = min(maxHeight, constraints.maxHeight) * heightFraction;
+        return Center(
+          child: WonderHero(
+            config,
+            '$imagePath-hero',
+            child: Transform.scale(
+              scale: 4 + config.zoom * .5,
+              child: Image.asset(
+                '$assetPath/$imagePath',
+                opacity: anim,
+                height: height * .25,
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}

lib/ui/wonder_illustrations/great_wall_illustration.dart

@@ -1,5 +1,6 @@
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/ui/common/fade_color_transition.dart';
+import 'package:wonders/ui/wonder_illustrations/common/illustration_mg.dart';
 import 'package:wonders/ui/wonder_illustrations/common/paint_textures.dart';
 import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart';
 import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart';
@@ -52,7 +53,18 @@ class GreatWallIllustration extends StatelessWidget {
     ];
   }
 
-  List<Widget> _buildMg(BuildContext context, Animation<double> anim) => [
+  List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
+    return [
+      IllustrationMg(
+        'great-wall.png',
+        type: WonderType.greatWall,
+        anim: anim,
+        config: config,
+        maxHeight: 800,
+        heightFraction: .85,
+      ),
+    ];
+    return [
       Center(
         child: FractionalTranslation(
           translation: Offset(0, config.shortMode ? .1 * anim.value : 0),
@@ -87,6 +99,7 @@ class GreatWallIllustration extends StatelessWidget {
         // ),
       )
     ];
+  }
 
   List<Widget> _buildFg(BuildContext context, Animation<double> anim) {
     final curvedAnim = Curves.easeOut.transform(anim.value);

lib/ui/wonder_illustrations/pyramids_giza_illustration.dart

@@ -1,5 +1,6 @@
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/ui/common/fade_color_transition.dart';
+import 'package:wonders/ui/wonder_illustrations/common/illustration_mg.dart';
 import 'package:wonders/ui/wonder_illustrations/common/paint_textures.dart';
 import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart';
 import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart';
@@ -51,52 +52,61 @@ class PyramidsGizaIllustration extends StatelessWidget {
 
   List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
     return [
-      Align(
+      IllustrationMg(
-        alignment: Alignment(0, config.shortMode ? 0.9 : 0),
+        'pyramids.png',
-        child: WonderHero(config, 'pyramids-mg',
+        type: WonderType.pyramidsGiza,
-            child: Transform.scale(
+        anim: anim,
-              scale: 1 + config.zoom * .1,
+        config: config,
-              child: FractionallySizedBox(
+        maxHeight: 600,
-                widthFactor: config.shortMode ? 1 : 1.94,
+        heightFraction: .85,
-                child: Image.asset('$assetPath/pyramids.png', fit: BoxFit.contain, opacity: anim),
-              ),
-            )),
       ),
+
+      // Align(
+      //   alignment: Alignment(0, config.shortMode ? 0.9 : 0),
+      //   child: WonderHero(config, 'pyramids-mg',
+      //       child: Transform.scale(
+      //         scale: 1 + config.zoom * .1,
+      //         child: FractionallySizedBox(
+      //           widthFactor: config.shortMode ? 1 : 1.94,
+      //           child: Image.asset('$assetPath/pyramids.png', fit: BoxFit.contain, opacity: anim),
+      //         ),
+      //       )),
+      // ),
     ];
   }
 
   List<Widget> _buildFg(BuildContext context, Animation<double> anim) {
     final curvedAnim = Curves.easeOut.transform(anim.value);
     return [
-      Transform.scale(
+      // Transform.scale(
-        scale: 1 + config.zoom * .2,
+      //   scale: 1 + config.zoom * .2,
-        child: Transform.translate(
+      //   child: Transform.translate(
-          offset: Offset(0, 10 * (1 - curvedAnim)),
+      //     offset: Offset(0, 10 * (1 - curvedAnim)),
-          child: BottomCenter(
+      //     child: BottomCenter(
-            child: FractionallySizedBox(
+      //       child: FractionallySizedBox(
-              widthFactor: 1.2,
+      //         widthFactor: 1.2,
-              child: FractionalTranslation(
+      //         child: FractionalTranslation(
-                  translation: Offset(0, -1.2),
+      //             translation: Offset(0, -1.2),
-                  child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)),
+      //             child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)),
-            ),
+      //       ),
-          ),
+      //     ),
-        ),
+      //   ),
-      ),
+      // ),
-      Transform.scale(
+      // Transform.scale(
-        scale: 1 + config.zoom * .4,
+      //   scale: 1 + config.zoom * .4,
-        child: Transform.translate(
+      //   child: Transform.translate(
-          offset: Offset(0, 30 * (1 - curvedAnim)),
+      //     offset: Offset(0, 30 * (1 - curvedAnim)),
-          child: BottomCenter(
+      //     child: BottomCenter(
-            child: FractionallySizedBox(
+      //       child: FractionallySizedBox(
-              widthFactor: 1.52,
+      //         widthFactor: 1.52,
-              child: FractionalTranslation(
+      //         child: FractionalTranslation(
-                translation: Offset(0, 0.1),
+      //           translation: Offset(0, 0.1),
-                child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover),
+      //           child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover),
-              ),
+      //         ),
-            ),
+      //       ),
-          ),
+      //     ),
-        ),
+      //   ),
-      ),
+      // ),
     ];
   }
 }