diff --git a/assets/images/pyramids/1.5x/foreground-back.png b/assets/images/pyramids/1.5x/foreground-back.png new file mode 100644 index 00000000..ce6fe282 Binary files /dev/null and b/assets/images/pyramids/1.5x/foreground-back.png differ diff --git a/assets/images/pyramids/1.5x/foreground-front.png b/assets/images/pyramids/1.5x/foreground-front.png new file mode 100644 index 00000000..090e7f9f Binary files /dev/null and b/assets/images/pyramids/1.5x/foreground-front.png differ diff --git a/assets/images/pyramids/2.0x/foreground-back.png b/assets/images/pyramids/2.0x/foreground-back.png index f2cdb1c4..3901317c 100755 Binary files a/assets/images/pyramids/2.0x/foreground-back.png and b/assets/images/pyramids/2.0x/foreground-back.png differ diff --git a/assets/images/pyramids/2.0x/foreground-front.png b/assets/images/pyramids/2.0x/foreground-front.png index 5c55685d..5cac4ae5 100755 Binary files a/assets/images/pyramids/2.0x/foreground-front.png and b/assets/images/pyramids/2.0x/foreground-front.png differ diff --git a/assets/images/pyramids/3.0x/foreground-back.png b/assets/images/pyramids/3.0x/foreground-back.png index e57f5900..81b8f848 100755 Binary files a/assets/images/pyramids/3.0x/foreground-back.png and b/assets/images/pyramids/3.0x/foreground-back.png differ diff --git a/assets/images/pyramids/3.0x/foreground-front.png b/assets/images/pyramids/3.0x/foreground-front.png index 5fd4678e..d873e273 100755 Binary files a/assets/images/pyramids/3.0x/foreground-front.png and b/assets/images/pyramids/3.0x/foreground-front.png differ diff --git a/assets/images/pyramids/4.0x/foreground-back.png b/assets/images/pyramids/4.0x/foreground-back.png new file mode 100644 index 00000000..3cd7d587 Binary files /dev/null and b/assets/images/pyramids/4.0x/foreground-back.png differ diff --git a/assets/images/pyramids/4.0x/foreground-front.png b/assets/images/pyramids/4.0x/foreground-front.png new file mode 100644 index 00000000..b7fd0c06 Binary files /dev/null and b/assets/images/pyramids/4.0x/foreground-front.png differ diff --git a/assets/images/pyramids/foreground-back.png b/assets/images/pyramids/foreground-back.png index 5ad424c9..04f821d1 100755 Binary files a/assets/images/pyramids/foreground-back.png and b/assets/images/pyramids/foreground-back.png differ diff --git a/assets/images/pyramids/foreground-front.png b/assets/images/pyramids/foreground-front.png index 289cab92..faca1f66 100755 Binary files a/assets/images/pyramids/foreground-front.png and b/assets/images/pyramids/foreground-front.png differ diff --git a/lib/ui/wonder_illustrations/common/illustration_fg.dart b/lib/ui/wonder_illustrations/common/illustration_fg.dart new file mode 100644 index 00000000..9255b6b9 --- /dev/null +++ b/lib/ui/wonder_illustrations/common/illustration_fg.dart @@ -0,0 +1,145 @@ +import 'package:wonders/common_libs.dart'; + +/// Combines [Align], [FractionalBoxWithMinSize], [Image] and [Transform.translate] +/// to standardize behavior across the various wonder illustrations +class IllustrationPiece extends StatelessWidget { + const IllustrationPiece({ + Key? key, + required this.type, + required this.anim, + required this.fileName, + required this.heightFactor, + this.alignment = Alignment.center, + this.minHeight, + this.translation, + }) : super(key: key); + + final WonderType type; + final Animation anim; + final double heightFactor; + final String fileName; + final Offset? translation; + final Alignment alignment; + final double? minHeight; + final BoxFit boxFit = BoxFit.cover; + + @override + Widget build(BuildContext context) { + return Align( + alignment: alignment, + child: Transform.translate( + offset: translation ?? Offset.zero, + child: FractionalBoxWithMinSize( + heightFactor: heightFactor, + minHeight: minHeight ?? 0, + child: Image.asset('${type.assetPath}/$fileName', opacity: anim, fit: boxFit), + ), + ), + ); + } +} +// +// class IllustrationPieceStack extends StatelessWidget { +// const IllustrationPieceStack({Key? key, required this.pieces}) : super(key: key); +// final List pieces; +// +// @override +// Widget build(BuildContext context) { +// return Stack( +// children: pieces, +// // [ +// // BottomCenter( +// // child: Transform.translate( +// // offset: Offset(context.widthPx * .05, 0), +// // child: FractionalBoxWithMinSize( +// // heightFactor: backHeightFactor, +// // minHeight: 300, +// // child: Image.asset( +// // '${type.assetPath}/foreground-back.png', +// // opacity: anim, +// // fit: BoxFit.cover, +// // ), +// // ), +// // ), +// // ), +// // BottomCenter( +// // child: Transform.translate( +// // offset: Offset(-context.widthPx * .1, 0), +// // child: FractionalBoxWithMinSize( +// // heightFactor: frontHeightFactor, +// // minHeight: 300, +// // child: Image.asset( +// // '${type.assetPath}/foreground-front.png', +// // opacity: anim, +// // fit: BoxFit.cover, +// // ), +// // ), +// // ), +// // ) +// +// // BottomCenter( +// // child: Transform.scale( +// // scale: 1 + config.zoom * .05, +// // child: FractionallySizedBox( +// // heightFactor: backHeightFactor, +// // child: FractionalTranslation( +// // translation: Offset(.1, 0), +// // child: Image.asset('${type.assetPath}/foreground-back.png', opacity: anim, fit: BoxFit.cover)), +// // ), +// // ), +// // ), +// // BottomCenter( +// // child: Transform.scale( +// // scale: 1 + config.zoom * .2, +// // child: FractionallySizedBox( +// // heightFactor: frontHeightFactor, +// // child: FractionalTranslation( +// // translation: Offset(-.2, 0), +// // child: Image.asset('${type.assetPath}/foreground-front.png', opacity: anim, fit: BoxFit.cover)), +// // ), +// // ), +// // ), +// // ], +// ); +// } +// } + +/// Encapsulates a common behavior where +/// - we want something to be fractionally sized, down to a pt... +/// - when we hit a minSize, stop reducing in size... +/// - until available space is less < minSize, then allow piece to reduce +/// eg, Take a piece with 50% height, and 500px minHeight. As available height is reduced it will attempt to use 50% height, +/// At 200px it it will stop reducing itself in height and ignore the fractional sizing. +/// One the available height is < 200px, the piece will then reduce itself so it still +/// fits on screen without being clipped. +class FractionalBoxWithMinSize extends StatelessWidget { + const FractionalBoxWithMinSize( + {Key? key, this.minWidth, this.minHeight, this.widthFactor, this.heightFactor, required this.child}) + : super(key: key); + + final double? widthFactor; + final double? heightFactor; + final double? minWidth; + final double? minHeight; + final Widget child; + + @override + Widget build(BuildContext context) { + assert((widthFactor == null && minWidth == null) || (widthFactor != null && minWidth != null), + 'widthFactor and minWidth must be provided together'); + assert((heightFactor == null && minHeight == null) || (heightFactor != null && minHeight != null), + 'heightFactor and minWidth must be provided together'); + return LayoutBuilder(builder: (context, constraints) { + var c = child; + if (widthFactor != null) { + double size = max(minWidth!, widthFactor! * constraints.maxWidth); + c = SizedBox(width: size, child: c); + } + if (heightFactor != null) { + double size = max(minHeight!, heightFactor! * constraints.maxHeight); + c = SizedBox(height: size, child: c); + } + return c; + }); + } +} diff --git a/lib/ui/wonder_illustrations/common/illustration_mg.dart b/lib/ui/wonder_illustrations/common/illustration_mg.dart index f3957723..228f887a 100644 --- a/lib/ui/wonder_illustrations/common/illustration_mg.dart +++ b/lib/ui/wonder_illustrations/common/illustration_mg.dart @@ -2,6 +2,9 @@ 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'; +/// TODO: This can just be an IllustrrationPiece +/// TODO: Add counter scaling to illustration piece like this +/// TODO: Add hero support to [IllustrationPiece]? Or at least use [FractionalBoxWithMinSize] class IllustrationMg extends StatelessWidget { const IllustrationMg( this.imagePath, { diff --git a/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart b/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart index 480fd111..df45c084 100644 --- a/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart +++ b/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_fg.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'; @@ -78,6 +79,20 @@ class PyramidsGizaIllustration extends StatelessWidget { List _buildFg(BuildContext context, Animation anim) { final curvedAnim = Curves.easeOut.transform(anim.value); return [ + IllustrationPiece( + type: WonderType.pyramidsGiza, + anim: anim, + fileName: 'foreground-back.png', + heightFactor: .5, + alignment: Alignment.bottomCenter, + ), + IllustrationPiece( + type: WonderType.pyramidsGiza, + anim: anim, + fileName: 'foreground-front.png', + heightFactor: .5, + alignment: Alignment.bottomCenter, + ) // Transform.scale( // scale: 1 + config.zoom * .2, // child: Transform.translate(