diff --git a/assets/images/instructions_background.png b/assets/images/instructions_background.png new file mode 100644 index 00000000..4c5b6848 Binary files /dev/null and b/assets/images/instructions_background.png differ diff --git a/lib/game_intro/game_instructions/view/game_instructions_overlay.dart b/lib/game_intro/game_instructions/view/game_instructions_overlay.dart index 57204e06..4976ba78 100644 --- a/lib/game_intro/game_instructions/view/game_instructions_overlay.dart +++ b/lib/game_intro/game_instructions/view/game_instructions_overlay.dart @@ -117,6 +117,7 @@ class _GameInstructionsOverlayViewState return AppDialog( border: Border.all(color: Colors.white24), backgroundColor: Colors.white24, + imageProvider: Assets.images.instructionsBackground.provider(), child: Column( mainAxisSize: MainAxisSize.min, children: [ @@ -138,12 +139,11 @@ class _GameInstructionsOverlayViewState }, ), ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 24), - child: GameInstructionNavigationControls( - pageController: pageController, - ), + const SizedBox(height: 24), + GameInstructionNavigationControls( + pageController: pageController, ), + const SizedBox(height: 16), ], ), ); diff --git a/lib/gen/assets.gen.dart b/lib/gen/assets.gen.dart index ed78da8d..4add28e6 100644 --- a/lib/gen/assets.gen.dart +++ b/lib/gen/assets.gen.dart @@ -43,6 +43,10 @@ class $AssetsImagesGen { /// File path: assets/images/gate.png AssetGenImage get gate => const AssetGenImage('assets/images/gate.png'); + /// File path: assets/images/instructions_background.png + AssetGenImage get instructionsBackground => + const AssetGenImage('assets/images/instructions_background.png'); + /// File path: assets/images/intro_background_desktop.png AssetGenImage get introBackgroundDesktop => const AssetGenImage('assets/images/intro_background_desktop.png'); @@ -84,6 +88,7 @@ class $AssetsImagesGen { gameLogo, gameOverBg, gate, + instructionsBackground, introBackgroundDesktop, introBackgroundMobile, leaderboardBg, @@ -103,9 +108,6 @@ class $AssetsMapGen { $AssetsMapAnimGen get anim => const $AssetsMapAnimGen(); - /// File path: assets/map/flutter_runnergame_map.tmx - String get flutterRunnergameMap => 'assets/map/flutter_runnergame_map.tmx'; - /// File path: assets/map/flutter_runnergame_map_A.tmx String get flutterRunnergameMapA => 'assets/map/flutter_runnergame_map_A.tmx'; @@ -121,7 +123,6 @@ class $AssetsMapGen { /// List of all assets List get values => [ gitignore, - flutterRunnergameMap, flutterRunnergameMapA, flutterRunnergameMapB, flutterRunnergameMapC @@ -282,6 +283,10 @@ class $AssetsMapAnimGen { String get spritesheetEnemyButterflyTsx => 'assets/map/anim/spritesheet_enemy_butterfly.tsx'; + /// File path: assets/map/anim/spritesheet_enemy_dragonfly.png + AssetGenImage get spritesheetEnemyDragonfly => + const AssetGenImage('assets/map/anim/spritesheet_enemy_dragonfly.png'); + /// File path: assets/map/anim/spritesheet_enemy_grasshopper.png AssetGenImage get spritesheetEnemyGrasshopperPng => const AssetGenImage('assets/map/anim/spritesheet_enemy_grasshopper.png'); @@ -397,6 +402,7 @@ class $AssetsMapAnimGen { spritesheetEnemyBeetleTsx, spritesheetEnemyButterflyPng, spritesheetEnemyButterflyTsx, + spritesheetEnemyDragonfly, spritesheetEnemyGrasshopperPng, spritesheetEnemyGrasshopperTsx, spritesheetFxLargePng, @@ -477,6 +483,14 @@ class $AssetsMapObjectsGen { String get tileMountainTreeV01Tsx => 'assets/map/objects/tile_mountain_tree_v01.tsx'; + /// File path: assets/map/objects/tile_plains_mountains_B.png + AssetGenImage get tilePlainsMountainsBPng => + const AssetGenImage('assets/map/objects/tile_plains_mountains_B.png'); + + /// File path: assets/map/objects/tile_plains_mountains_B.tsx + String get tilePlainsMountainsBTsx => + 'assets/map/objects/tile_plains_mountains_B.tsx'; + /// File path: assets/map/objects/tile_plains_mountains_v01.png AssetGenImage get tilePlainsMountainsV01Png => const AssetGenImage('assets/map/objects/tile_plains_mountains_v01.png'); @@ -501,6 +515,8 @@ class $AssetsMapObjectsGen { tileItemsV2Tsx, tileMountainTreeV01Png, tileMountainTreeV01Tsx, + tilePlainsMountainsBPng, + tilePlainsMountainsBTsx, tilePlainsMountainsV01Png, tilePlainsMountainsV01Tsx ]; @@ -560,6 +576,14 @@ class $AssetsMapTilesGen { String get tileForestBushesV02Tsx => 'assets/map/tiles/tile_forest_bushes_v02.tsx'; + /// File path: assets/map/tiles/tile_forest_bushes_v03.png + AssetGenImage get tileForestBushesV03Png => + const AssetGenImage('assets/map/tiles/tile_forest_bushes_v03.png'); + + /// File path: assets/map/tiles/tile_forest_bushes_v03.tsx + String get tileForestBushesV03Tsx => + 'assets/map/tiles/tile_forest_bushes_v03.tsx'; + /// File path: assets/map/tiles/tile_forest_ground_v02.png AssetGenImage get tileForestGroundV02Png => const AssetGenImage('assets/map/tiles/tile_forest_ground_v02.png'); @@ -655,6 +679,14 @@ class $AssetsMapTilesGen { String get tilePlainsHillsV01Tsx => 'assets/map/tiles/tile_plains_hills_v01.tsx'; + /// File path: assets/map/tiles/tile_plains_hills_v02.png + AssetGenImage get tilePlainsHillsV02Png => + const AssetGenImage('assets/map/tiles/tile_plains_hills_v02.png'); + + /// File path: assets/map/tiles/tile_plains_hills_v02.tsx + String get tilePlainsHillsV02Tsx => + 'assets/map/tiles/tile_plains_hills_v02.tsx'; + /// File path: assets/map/tiles/tile_sky_v02.png AssetGenImage get tileSkyV02Png => const AssetGenImage('assets/map/tiles/tile_sky_v02.png'); @@ -685,6 +717,8 @@ class $AssetsMapTilesGen { tileDecorationsV01Tsx, tileForestBushesV02Png, tileForestBushesV02Tsx, + tileForestBushesV03Png, + tileForestBushesV03Tsx, tileForestGroundV02Png, tileForestGroundV02Tsx, tileForestGroundV03Png, @@ -709,6 +743,8 @@ class $AssetsMapTilesGen { tilePlainsGroundV03Tsx, tilePlainsHillsV01Png, tilePlainsHillsV01Tsx, + tilePlainsHillsV02Png, + tilePlainsHillsV02Tsx, tileSkyV02Png, tileSkyV02Tsx, tileTreehousePng, diff --git a/packages/app_ui/lib/src/widgets/app_card.dart b/packages/app_ui/lib/src/widgets/app_card.dart index 8a7b279e..46aba64b 100644 --- a/packages/app_ui/lib/src/widgets/app_card.dart +++ b/packages/app_ui/lib/src/widgets/app_card.dart @@ -20,6 +20,7 @@ class AppCard extends StatelessWidget { ), this.borderRadius = const BorderRadius.all(Radius.circular(24)), this.border, + this.imageProvider, super.key, }); @@ -38,20 +39,32 @@ class AppCard extends StatelessWidget { /// The border of the card. final BoxBorder? border; + /// The background image of the card. Setting the image makes the [gradient] + /// and [backgroundColor] invisible. Also removes the border. + final ImageProvider? imageProvider; + @override Widget build(BuildContext context) { + final showImage = imageProvider != null; + return Container( constraints: const BoxConstraints(maxWidth: 328, maxHeight: 624), decoration: BoxDecoration( borderRadius: borderRadius, - border: border, - color: backgroundColor, + border: showImage ? null : border, + color: showImage ? null : backgroundColor, ), child: Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( borderRadius: borderRadius, - gradient: gradient, + gradient: showImage ? null : gradient, + image: showImage + ? DecorationImage( + image: imageProvider!, + fit: BoxFit.cover, + ) + : null, ), child: child, ), diff --git a/packages/app_ui/lib/src/widgets/app_dialog.dart b/packages/app_ui/lib/src/widgets/app_dialog.dart index 55ad5810..dfd2a3e8 100644 --- a/packages/app_ui/lib/src/widgets/app_dialog.dart +++ b/packages/app_ui/lib/src/widgets/app_dialog.dart @@ -22,6 +22,7 @@ class AppDialog extends StatelessWidget { ), this.borderRadius = const BorderRadius.all(Radius.circular(24)), this.border, + this.imageProvider, super.key, }); @@ -43,6 +44,10 @@ class AppDialog extends StatelessWidget { /// The border of the dialog. final BoxBorder? border; + /// The background image of the dialog. Setting the image makes the [gradient] + /// and [backgroundColor] invisible. Also removes the border. + final ImageProvider? imageProvider; + @override Widget build(BuildContext context) { return Dialog( @@ -54,6 +59,7 @@ class AppDialog extends StatelessWidget { gradient: gradient, backgroundColor: backgroundColor, borderRadius: borderRadius, + imageProvider: imageProvider, child: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min,