Polish up responsive Wonder layouts

Adjust graphics within illustration widgets, Revise paint texture use, Update graphics for wonders and collectible search, Clean out extra scale factor images.

lib/ui/wonder_illustrations/chichen_itza_illustration.dart

@@ -27,18 +27,19 @@ class ChichenItzaIllustration extends StatelessWidget {
       Positioned.fill(
         child: IllustrationTexture(
           ImagePaths.roller2,
-          color: Colors.white,
+          color: Color(0xffDC762A),
           opacity: anim.drive(Tween(begin: 0, end: .5)),
           flipY: true,
+          scale: config.shortMode ? 4 : 1.15,
         ),
       ),
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .25,
+        heightFactor: .4,
         minHeight: 200,
-        fractionalOffset: Offset(1, config.shortMode ? 0 : -.5),
+        fractionalOffset: Offset(.55, config.shortMode ? -.1 : -.35),
       ),
     ];
   }
@@ -47,12 +48,12 @@ class ChichenItzaIllustration extends StatelessWidget {
     // We want to size to the shortest side
     return [
       Transform.translate(
-        offset: Offset(0, 20),
+        offset: Offset(0, config.shortMode ? 40 : -30),
         child: IllustrationPiece(
           fileName: 'chichen.png',
-          heightFactor: .55,
+          heightFactor: .45,
-          minHeight: 400,
+          minHeight: 300,
-          zoomAmt: .05,
+          zoomAmt: -.1,
           enableHero: true,
         ),
       ),
@@ -67,7 +68,7 @@ class ChichenItzaIllustration extends StatelessWidget {
         initialOffset: Offset(20, 40),
         initialScale: .95,
         heightFactor: .4,
-        fractionalOffset: Offset(.35, -.1),
+        fractionalOffset: Offset(.5, -.1),
         zoomAmt: .1,
         dynamicHzOffset: 250,
       ),
@@ -77,7 +78,7 @@ class ChichenItzaIllustration extends StatelessWidget {
         initialScale: .9,
         initialOffset: Offset(-40, 60),
         heightFactor: .65,
-        fractionalOffset: Offset(-.45, .2),
+        fractionalOffset: Offset(-.4, .2),
         zoomAmt: .25,
         dynamicHzOffset: -250,
       ),
@@ -86,9 +87,9 @@ class ChichenItzaIllustration extends StatelessWidget {
         alignment: Alignment.topLeft,
         initialScale: .9,
         initialOffset: Offset(-40, 60),
-        heightFactor: .75,
+        heightFactor: .65,
-        fractionalOffset: Offset(-.4, -.3),
+        fractionalOffset: Offset(-.4, -.4),
-        zoomAmt: .25,
+        zoomAmt: .05,
         dynamicHzOffset: 100,
       ),
       IllustrationPiece(
@@ -96,9 +97,9 @@ class ChichenItzaIllustration extends StatelessWidget {
         alignment: Alignment.topRight,
         initialOffset: Offset(20, 40),
         initialScale: .95,
-        heightFactor: .85,
+        heightFactor: .65,
         fractionalOffset: Offset(.35, -.4),
-        zoomAmt: .1,
+        zoomAmt: .05,
         dynamicHzOffset: -100,
       ),
     ];

lib/ui/wonder_illustrations/christ_redeemer_illustration.dart

@@ -28,18 +28,19 @@ class ChristRedeemerIllustration extends StatelessWidget {
       Positioned.fill(
         child: IllustrationTexture(
           ImagePaths.roller1,
-          color: Colors.white,
+          color: Color(0xffFAE5C8),
           flipX: false,
-          opacity: anim.drive(Tween(begin: 0, end: .4)),
+          opacity: anim.drive(Tween(begin: 0, end: .8)),
+          scale: config.shortMode ? 4 : 1.15,
         ),
       ),
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .2,
+        heightFactor: .25,
         minHeight: 120,
-        fractionalOffset: Offset(.5, -1),
+        fractionalOffset: Offset(.7, config.shortMode ?  -.5 : -1.35),
       ),
     ];
   }
@@ -51,8 +52,8 @@ class ChristRedeemerIllustration extends StatelessWidget {
         enableHero: true,
         heightFactor: 1,
         alignment: Alignment.bottomCenter,
-        fractionalOffset: Offset(0, .1),
+        fractionalOffset: Offset(0, config.shortMode ? .5 : .1),
-        zoomAmt: .1,
+        zoomAmt: .7,
       )
       //
     ];
@@ -63,21 +64,21 @@ class ChristRedeemerIllustration extends StatelessWidget {
       IllustrationPiece(
         fileName: 'foreground-left.png',
         alignment: Alignment.bottomCenter,
-        initialScale: .9,
+        initialScale: .95,
-        initialOffset: Offset(-40, 60),
+        initialOffset: Offset(-140, 60),
-        heightFactor: .55,
+        heightFactor: .65,
-        fractionalOffset: Offset(-.15, .05),
+        fractionalOffset: Offset(-.25, .05),
-        zoomAmt: .1,
+        zoomAmt: .15,
         dynamicHzOffset: -100,
       ),
       IllustrationPiece(
         fileName: 'foreground-right.png',
         alignment: Alignment.bottomCenter,
-        initialOffset: Offset(20, 40),
+        initialOffset: Offset(120, 40),
-        initialScale: .95,
+        initialScale: .9,
-        heightFactor: .65,
+        heightFactor: .55,
-        fractionalOffset: Offset(.2, 0),
+        fractionalOffset: Offset(.35, .2),
-        zoomAmt: .15,
+        zoomAmt: .1,
         dynamicHzOffset: 100,
       ),
     ];

lib/ui/wonder_illustrations/colosseum_illustration.dart

@@ -30,32 +30,30 @@ class ColosseumIllustration extends StatelessWidget {
         child: IllustrationTexture(
           ImagePaths.roller1,
           color: Colors.white,
-          opacity: anim.drive(Tween(begin: 0, end: .5)),
+          opacity: anim.drive(Tween(begin: 0, end: .75)),
+          scale: config.shortMode ? 4 : 1,
         ),
       ),
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .15,
+        heightFactor: config.shortMode ? .25 : .25,
-        minHeight: 150,
+        minHeight: 100,
-        offset: config.shortMode ? Offset(70, context.heightPx * -.05) : Offset(50, context.heightPx * -.25),
+        offset: config.shortMode ? Offset(50, context.heightPx * -.07) : Offset(80, context.heightPx * -.28),
       ),
     ];
   }
 
   List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
     return [
-      Stack(
-        children: const [
           IllustrationPiece(
             fileName: 'colosseum.png',
             enableHero: true,
-            heightFactor: .55,
+            heightFactor: .6,
-            minHeight: 400,
+            minHeight: 200,
             zoomAmt: .15,
-          ),
+            fractionalOffset: Offset(0, config.shortMode ? .10: -.1),
-        ],
       )
     ];
   }
@@ -70,7 +68,7 @@ class ColosseumIllustration extends StatelessWidget {
         heightFactor: .65,
         offset: Offset.zero,
         fractionalOffset: Offset(-.5, .1),
-        zoomAmt: .25,
+        zoomAmt: .05,
         dynamicHzOffset: -150,
       ),
       IllustrationPiece(
@@ -80,7 +78,7 @@ class ColosseumIllustration extends StatelessWidget {
         initialScale: .95,
         heightFactor: .75,
         fractionalOffset: Offset(.5, .25),
-        zoomAmt: .1,
+        zoomAmt: .05,
         dynamicHzOffset: 150,
       ),
     ];

lib/ui/wonder_illustrations/common/paint_textures.dart

@@ -18,7 +18,7 @@ class IllustrationTexture extends StatelessWidget {
           child: Transform.scale(
               scaleX: scale * (flipX ? -1 : 1),
               scaleY: scale * (flipY ? -1 : 1),
-              child: Image.asset(path, fit: BoxFit.cover, color: color, opacity: opacity, cacheWidth: 1024)),
+              child: Image.asset(path, repeat: ImageRepeat.repeat, fit: BoxFit.contain, alignment: Alignment.topCenter, color: color, opacity: opacity, cacheWidth: 2048)),
         ),
       );
 }

lib/ui/wonder_illustrations/great_wall_illustration.dart

@@ -30,17 +30,18 @@ class GreatWallIllustration extends StatelessWidget {
         child: IllustrationTexture(
           ImagePaths.roller2,
           flipX: true,
-          color: Colors.white,
+          color: Color(0xff688750),
-          opacity: anim.drive(Tween(begin: 0, end: .5)),
+          opacity: anim.drive(Tween(begin: 0, end: 1)),
+          scale: config.shortMode ? 4 : 1.15,
         ),
       ),
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .15,
+        heightFactor: config.shortMode ? .05 : .25,
         minHeight: 150,
-        offset: config.shortMode ? Offset(-70, context.heightPx * -.05) : Offset(-150, context.heightPx * -.25),
+        offset: config.shortMode ? Offset(-40, context.heightPx * -.06) : Offset(-75, context.heightPx * -.3),
       ),
     ];
   }
@@ -49,10 +50,11 @@ class GreatWallIllustration extends StatelessWidget {
     return [
       IllustrationPiece(
         fileName: 'great-wall.png',
-        heightFactor: .55,
+        heightFactor: .65,
-        minHeight: 500,
+        minHeight: 400,
         zoomAmt: .05,
         enableHero: true,
+        fractionalOffset: Offset(0, config.shortMode ? 0: -.1),
       ),
     ];
   }
@@ -64,7 +66,7 @@ class GreatWallIllustration extends StatelessWidget {
         alignment: Alignment.bottomCenter,
         initialScale: .9,
         initialOffset: Offset(-40, 60),
-        heightFactor: .75,
+        heightFactor: .85,
         fractionalOffset: Offset(-.4, .45),
         zoomAmt: .25,
         dynamicHzOffset: -150,
@@ -74,8 +76,8 @@ class GreatWallIllustration extends StatelessWidget {
         alignment: Alignment.bottomCenter,
         initialOffset: Offset(20, 40),
         initialScale: .95,
-        heightFactor: .85,
+        heightFactor: 1,
-        fractionalOffset: Offset(.4, .25),
+        fractionalOffset: Offset(.4, .3),
         zoomAmt: .1,
         dynamicHzOffset: 150,
       ),

lib/ui/wonder_illustrations/machu_picchu_illustration.dart

@@ -29,18 +29,19 @@ class MachuPicchuIllustration extends StatelessWidget {
       Positioned.fill(
         child: IllustrationTexture(
           ImagePaths.roller1,
-          flipX: true,
+          flipX: false,
-          color: Colors.white,
+          color: Color(0xff1E736D),
-          opacity: anim.drive(Tween(begin: 0, end: .7)),
+          opacity: anim.drive(Tween(begin: 0, end: .5)),
+          scale: config.shortMode ? 4 : 1,
         ),
       ),
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .15,
+        heightFactor: config.shortMode ? .15 : .15,
-        minHeight: 150,
+        minHeight: 100,
-        offset: config.shortMode ? Offset(-70, context.heightPx * -.05) : Offset(-150, context.heightPx * -.25),
+        offset: config.shortMode ? Offset(150, context.heightPx * -.08) : Offset(150, context.heightPx * -.35),
       ),
     ];
   }
@@ -50,8 +51,9 @@ class MachuPicchuIllustration extends StatelessWidget {
           fileName: 'machu-picchu.png',
           heightFactor: .65,
           minHeight: 500,
-          zoomAmt: .05,
+          zoomAmt: config.shortMode ? .1 : -1,
           enableHero: true,
+          fractionalOffset: Offset(config.shortMode ? 0 : -.05, config.shortMode ? 0.02 : -.12),
         ),
       ];
 
@@ -63,18 +65,18 @@ class MachuPicchuIllustration extends StatelessWidget {
         initialScale: .9,
         initialOffset: Offset(0, 60),
         heightFactor: .6,
-        fractionalOffset: Offset(0, .3),
+        fractionalOffset: Offset(0, .2),
-        zoomAmt: .1,
+        zoomAmt: .05,
         dynamicHzOffset: 150,
       ),
       IllustrationPiece(
         fileName: 'foreground-front.png',
         alignment: Alignment.bottomCenter,
         initialOffset: Offset(20, 40),
-        heightFactor: .5,
+        heightFactor: .6,
-        initialScale: .95,
+        initialScale: 1.2,
-        fractionalOffset: Offset(-.25, .25),
+        fractionalOffset: Offset(-.35, .4),
-        zoomAmt: .12,
+        zoomAmt: .2,
         dynamicHzOffset: -50,
       ),
     ];

lib/ui/wonder_illustrations/petra_illustration.dart

@@ -29,15 +29,17 @@ class PetraIllustration extends StatelessWidget {
       Positioned.fill(
         child: IllustrationTexture(
           ImagePaths.roller1,
-          color: Colors.white,
+          color: WonderType.petra.bgColor,
           flipX: true,
-          opacity: anim.drive(Tween(begin: 0, end: .25)),
+          opacity: anim.drive(Tween(begin: 0, end: 1)),
+          scale: config.shortMode ? 4 : 1.15,
         ),
       ),
       IllustrationPiece(
         fileName: 'moon.png',
+        initialOffset: Offset(0, -150),
         heightFactor: .15,
-        minHeight: 100,
+        minHeight: 50,
         alignment: Alignment.topCenter,
         fractionalOffset: Offset(-.7, 0),
       ),
@@ -52,7 +54,7 @@ class PetraIllustration extends StatelessWidget {
             fileName: 'petra.png',
             heightFactor: .65,
             minHeight: 500,
-            zoomAmt: .1,
+            zoomAmt: config.shortMode ? -0.05 : -1,
             enableHero: true,
           ),
         ),
@@ -65,8 +67,8 @@ class PetraIllustration extends StatelessWidget {
         alignment: Alignment.bottomCenter,
         initialOffset: Offset(-80, 0),
         heightFactor: 1,
-        fractionalOffset: Offset(-.55, 0),
+        fractionalOffset: Offset(-.6, 0),
-        zoomAmt: .1,
+        zoomAmt: .03,
         dynamicHzOffset: -130,
         bottom: (_) {
           /// To cover everything behind this piece with a solid color, we scale up a container
@@ -85,7 +87,7 @@ class PetraIllustration extends StatelessWidget {
         initialOffset: Offset(80, 00),
         heightFactor: 1,
         fractionalOffset: Offset(.55, 0),
-        zoomAmt: .15,
+        zoomAmt: .12,
         dynamicHzOffset: 130,
         bottom: (_) {
           /// To cover everything behind this piece with a solid color, we scale up a container and then offset it in negative space

lib/ui/wonder_illustrations/pyramids_giza_illustration.dart

@@ -29,18 +29,20 @@ class PyramidsGizaIllustration extends StatelessWidget {
       Positioned.fill(
         child: IllustrationTexture(
           ImagePaths.roller2,
-          color: Colors.white,
+          color: Color(0xff797FD8),
-          opacity: anim.drive(Tween(begin: 0, end: .3)),
+          opacity: anim.drive(Tween(begin: 0, end: .75)),
           flipY: true,
+          scale: config.shortMode ? 4 : 1.15,
+
         ),
       ),
       IllustrationPiece(
         fileName: 'moon.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
         heightFactor: .15,
         minHeight: 100,
-        offset: config.shortMode ? Offset(100, context.heightPx * -.1) : Offset(150, context.heightPx * -.15),
+        offset: config.shortMode ? Offset(100, context.heightPx * -.06) : Offset(150, context.heightPx * -.3),
         zoomAmt: .05,
       ),
     ];
@@ -53,7 +55,8 @@ class PyramidsGizaIllustration extends StatelessWidget {
         enableHero: true,
         heightFactor: .5,
         minHeight: 300,
-        zoomAmt: .1,
+        zoomAmt: config.shortMode ? -.2 : -2,
+        fractionalOffset: Offset(0, config.shortMode ? .1 : -.05),
       )
     ];
   }
@@ -66,7 +69,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
         initialOffset: Offset(20, 40),
         initialScale: .95,
         heightFactor: .55,
-        fractionalOffset: Offset(.1, .06),
+        fractionalOffset: Offset(.2, -.01),
         zoomAmt: .1,
         dynamicHzOffset: 150,
       ),
@@ -76,7 +79,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
         initialScale: .9,
         initialOffset: Offset(-40, 60),
         heightFactor: .55,
-        fractionalOffset: Offset(-.1, .1),
+        fractionalOffset: Offset(-.09, 0.02),
         zoomAmt: .25,
         dynamicHzOffset: -150,
       ),

lib/ui/wonder_illustrations/taj_mahal_illustration.dart

@@ -31,20 +31,21 @@ class TajMahalIllustration extends StatelessWidget {
       // Noise texture
       Positioned.fill(
         child: IllustrationTexture(
-          ImagePaths.roller1,
+          ImagePaths.roller2,
           flipY: true,
-          opacity: anim.drive(Tween(begin: 0, end: 1)),
+          opacity: anim.drive(Tween(begin: 0, end: .7)),
           color: bgColor,
+          scale: config.shortMode ? 4 : 1.15,
         ),
       ),
       // Sun
       IllustrationPiece(
         fileName: 'sun.png',
-        initialOffset: Offset(0, 20),
+        initialOffset: Offset(0, 50),
         enableHero: true,
-        heightFactor: .15,
+        heightFactor: .3,
         minHeight: 140,
-        offset: config.shortMode ? Offset(-100, context.heightPx * -.05) : Offset(-150, context.heightPx * -.15),
+        offset: config.shortMode ? Offset(-100, context.heightPx * -.05) : Offset(-220, context.heightPx * -.34),
       ),
     ];
   }
@@ -61,10 +62,11 @@ class TajMahalIllustration extends StatelessWidget {
               minHeight: minHeight,
               enableHero: true,
               zoomAmt: .05,
+              fractionalOffset: Offset(0, config.shortMode ? 0 : -.15),
               top: config.shortMode
                   ? null
                   : (_) => FractionalTranslation(
-                        translation: Offset(0, .85),
+                        translation: Offset(0, 0.73),
                         child: IllustrationPiece(
                           fileName: 'pool.png',
                           heightFactor: heightFactor * poolScale,
@@ -88,16 +90,16 @@ class TajMahalIllustration extends StatelessWidget {
         alignment: Alignment.bottomRight,
         initialOffset: Offset(20, 40),
         initialScale: .85,
-        heightFactor: .4 + .2 * mangoScale,
+        heightFactor: .5 + .4 * mangoScale,
         fractionalOffset: Offset(.3, 0),
-        zoomAmt: .1,
+        zoomAmt: .25,
       ),
       IllustrationPiece(
         fileName: 'foreground-left.png',
         alignment: Alignment.bottomLeft,
         initialScale: .9,
         initialOffset: Offset(-40, 60),
-        heightFactor: .5 + .3 * mangoScale,
+        heightFactor: .6 + .3 * mangoScale,
         fractionalOffset: Offset(-.3, 0),
         zoomAmt: .25,
         dynamicHzOffset: 0,