diff --git a/assets/images/landing/sort_rubbish.gif b/assets/images/landing/sort_rubbish.gif new file mode 100644 index 0000000..ce44e83 Binary files /dev/null and b/assets/images/landing/sort_rubbish.gif differ diff --git a/lib/assets.dart b/lib/assets.dart index 2214691..5c884ec 100644 --- a/lib/assets.dart +++ b/lib/assets.dart @@ -1,7 +1,7 @@ // GENERATED CODE - DO NOT MODIFY BY HAND // ************************************************************************** -// Total assets: 244. +// Total assets: 245. // Generated by https://pub.dev/packages/assets_gen. // ************************************************************************** @@ -147,6 +147,9 @@ class Assets { static const String assets_images_buildings_waterhouse_png = 'assets/images/buildings/waterhouse.png'; static const String gomiland$assets_images_buildings_waterhouse_png = 'packages/gomiland/assets/images/buildings/waterhouse.png'; + static const String assets_images_landing_sort_rubbish_gif = 'assets/images/landing/sort_rubbish.gif'; + static const String gomiland$assets_images_landing_sort_rubbish_gif = 'packages/gomiland/assets/images/landing/sort_rubbish.gif'; + static const String assets_images_logo_gomiland_icon_png = 'assets/images/logo/gomiland_icon.png'; static const String gomiland$assets_images_logo_gomiland_icon_png = 'packages/gomiland/assets/images/logo/gomiland_icon.png'; diff --git a/lib/constants/landing_page_texts.dart b/lib/constants/landing_page_texts.dart index d865fbc..141774c 100644 --- a/lib/constants/landing_page_texts.dart +++ b/lib/constants/landing_page_texts.dart @@ -1,15 +1,29 @@ class LandingPageHeaders{ - static const String welcome = 'Welcome to Gomiland'; - static const String collectRubbish = 'Collect rubbish from the streets'; - static const String sortRubbish = 'Sort them in a fun way'; - static const String helpResidents = 'Help out your fellow residents'; + static const String welcome = 'Welcome to Gomiland!'; + static const String visitPark = 'Visit the National Park'; + static const String sortRubbish = 'Sort rubbish in a fun way'; + static const String helpResidents = 'Help out the residents'; static const String learnSustainability = 'Learn about sustainable cities'; } class LandingPageContent{ - static const String welcome = 'Gomiland is '; - static const String collectRubbish = ''; - static const String sortRubbish = ''; - static const String helpResidents = 'Some of the residents in town need assistance like Mr Stark!. '; - static const String learnSustainability = 'Explore the different parts of Gomiland. Read the signs to learn how they contribute to sustainability. Talk to '; + static const String welcome = 'Gomiland is a bustling, sustainable city and home to over 100 people. ' + 'Join the residents in their quest to achieve zero-waste by picking up and sorting rubbish.\n\n' + 'Rubbish can be found in all sorts of places. Under trees, around buildings, along paths and on the sidewalks.\n\n' + 'Movement: Use the joystick for mobile, "wasd" keys for web.\n' + 'Interact: Virtual button for mobile, "e" key for web.'; + static const String visitPark = 'Gomiland National Park is home to many protected species of flora and fauna. The residents love strolling about here and you would too!\n\n' + 'Find points-of-interests like the World Forest, Bee Colony, Castle grounds and Bamboo Forest Shrine.\n\n' + 'Bonus: It\'s Sakura season in a few days. Be sure to find a nice spot to take pictures and enjoy the beautiful sight!'; + static const String sortRubbish = 'The city has given you 6 bins to throw your rubbish.\n\n' + 'Learn about the materials each item is made of, then start sorting! \n\n' + 'Get coins for correct sorting and fines for incorrect sorting. Coins can buy useful items and objects for your zen garden!'; + static const String helpResidents = 'Some of the residents in town need assistance.\n\n' + 'Use your map to locate people needing help. Mr Stark here needs materials for his construction. ' + 'His machines will appear and start building when you collect enough recyclables!\n\n' + 'Bonus: Complete all the quests to erect the eco-warrior statue on the Castle Grounds.'; + static const String learnSustainability = 'Explore different parts of Gomiland to understand how the city achieves sustainability.\n\n' + 'Read the signs to learn about each location. ' + 'Talk to residents to get more tips on how you can be more environmentally friendly. ' + 'Get ideas on how you can incorporate steps to contribute to sustainability in your city and daily life!'; } \ No newline at end of file diff --git a/lib/constants/styles.dart b/lib/constants/styles.dart index fd356c1..87c9335 100644 --- a/lib/constants/styles.dart +++ b/lib/constants/styles.dart @@ -61,14 +61,23 @@ class TextStyles { color: GameColors.red, ); static const modalHeaderTextStyle = TextStyle( - fontSize: headerTextSize, - color: GameColors.black, - fontWeight: FontWeight.bold); + fontSize: headerTextSize, + color: GameColors.black, + fontWeight: FontWeight.bold, + ); static const popupTextStyle = TextStyle( fontSize: infoPopupFontSize, color: Colors.black, fontFamily: Strings.minecraft, ); + static const contentBoxHeader = TextStyle( + fontSize: normalTextSize, + color: GameColors.green, + ); + static const contentBoxContent = TextStyle( + fontSize: verySmallTextSize, + color: GameColors.offWhite, + ); } class ContainerStyles { @@ -83,6 +92,7 @@ class ContainerStyles { class GameColors { static const black = Color.fromRGBO(0, 0, 0, 1.0); static const white = Color.fromRGBO(255, 255, 255, 1.0); + static const offWhite = Color.fromRGBO(178, 178, 192, 1.0); static const purple = Color.fromRGBO(118, 48, 209, 1.0); static const green = Color.fromRGBO(57, 86, 41, 1.0); static const red = Color.fromRGBO(91, 23, 23, 1.0); diff --git a/lib/screens/landing_page/landing_page.dart b/lib/screens/landing_page/landing_page.dart index f0573fe..eff5c0d 100644 --- a/lib/screens/landing_page/landing_page.dart +++ b/lib/screens/landing_page/landing_page.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; import 'package:gomiland/assets.dart'; import 'package:gomiland/constants/landing_page_texts.dart'; +import 'package:gomiland/constants/styles.dart'; import 'package:gomiland/screens/landing_page/widgets/content_box.dart'; +import 'package:gomiland/screens/widgets/gomiland_logo.dart'; import 'package:gomiland/screens/widgets/menu_button.dart'; import 'package:gomiland/screens/widgets/spacer.dart'; import 'package:gomiland/utils/navigation.dart'; @@ -18,50 +20,45 @@ class LandingPage extends StatelessWidget { child: Column( mainAxisSize: MainAxisSize.min, children: [ - Image.asset( - Assets.assets_images_logo_gomiland_simple_png, - height: 164, - ), + const SpacerNormal(), + const GomilandLogo(), const SpacerNormal(), MenuButton( onPressed: () => goToMainMenu(context), text: 'Go to game', ), - ContentBox( - index: 0, + const SpacerNormal(), + const ContentBox( heading: LandingPageHeaders.welcome, - content: LandingPageContent.collectRubbish, - imgPath: Assets.assets_images_buildings_fish_shop_png, - borderColor: Colors.red, + content: LandingPageContent.welcome, + imgPath: Assets.assets_images_landing_sort_rubbish_gif, + borderColor: GameColors.purple, ), - ContentBox( - index: 1, - heading: LandingPageHeaders.collectRubbish, - content: LandingPageContent.collectRubbish, - imgPath: Assets.assets_images_buildings_fish_shop_png, - borderColor: Colors.red, + const ContentBox( + heading: LandingPageHeaders.visitPark, + content: LandingPageContent.visitPark, + imgPath: Assets.assets_images_landing_sort_rubbish_gif, + borderColor: GameColors.green, ), - ContentBox( - index: 2, + const ContentBox( heading: LandingPageHeaders.sortRubbish, - content: LandingPageContent.collectRubbish, - imgPath: Assets.assets_images_buildings_fish_shop_png, - borderColor: Colors.red, + content: LandingPageContent.sortRubbish, + imgPath: Assets.assets_images_landing_sort_rubbish_gif, + borderColor: GameColors.red, ), - ContentBox( - index: 3, + const ContentBox( heading: LandingPageHeaders.helpResidents, - content: LandingPageContent.collectRubbish, - imgPath: Assets.assets_images_buildings_fish_shop_png, - borderColor: Colors.red, + content: LandingPageContent.helpResidents, + imgPath: Assets.assets_images_landing_sort_rubbish_gif, + borderColor: GameColors.orange, ), - ContentBox( - index: 4, + const ContentBox( heading: LandingPageHeaders.learnSustainability, - content: LandingPageContent.collectRubbish, - imgPath: Assets.assets_images_buildings_fish_shop_png, - borderColor: Colors.red, + content: LandingPageContent.learnSustainability, + imgPath: Assets.assets_images_landing_sort_rubbish_gif, + borderColor: GameColors.purple, ), + const SpacerNormal(), ], ), ), diff --git a/lib/screens/landing_page/widgets/content_box.dart b/lib/screens/landing_page/widgets/content_box.dart index 903e596..79e0eef 100644 --- a/lib/screens/landing_page/widgets/content_box.dart +++ b/lib/screens/landing_page/widgets/content_box.dart @@ -1,7 +1,8 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:gomiland/constants/styles.dart'; class ContentBox extends StatelessWidget { - final int index; final String heading; final String content; final String imgPath; @@ -9,42 +10,63 @@ class ContentBox extends StatelessWidget { const ContentBox({ super.key, - required this.index, required this.heading, required this.content, required this.imgPath, required this.borderColor, }); - List getContentRow(Widget text, Widget image) { - return index % 2 == 0 - ? [text, const Spacer(), image] - : [image, const Spacer(), text]; - } - @override Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; return Padding( - padding: const EdgeInsets.all(32), + padding: const EdgeInsets.fromLTRB(32, 8, 32, 8), child: Container( padding: const EdgeInsets.all(32), decoration: BoxDecoration( border: Border.all(color: borderColor), borderRadius: const BorderRadius.all(Radius.circular(16)), ), - child: Row( - children: getContentRow( - Column( - children: [ - Text(heading), - Text(content), - ], + child: Wrap( + spacing: 32.0, + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + runSpacing: 8.0, + children: [ + SizedBox( + width: 500, + child: Column( + children: [ + Text( + heading, + style: TextStyle( + fontSize: TextStyles.normalTextSize, + color: borderColor, + ), + ), + Text( + content, + textAlign: TextAlign.justify, + style: TextStyles.contentBoxContent, + ), + ], + ), ), - Image.asset( - imgPath, - height: 64, + Container( + height: size.width * 0.16, + width: size.width * 0.32, + decoration: BoxDecoration( + border: Border.all(color: borderColor, width: 3), + borderRadius: const BorderRadius.all(Radius.circular(8)), + image: DecorationImage( + fit: BoxFit.cover, + image: AssetImage( + imgPath, + ), + ), + ), ), - ), + ], ), ), ); diff --git a/lib/screens/main_menu.dart b/lib/screens/main_menu.dart index a5f8dfc..6fe1afb 100644 --- a/lib/screens/main_menu.dart +++ b/lib/screens/main_menu.dart @@ -1,16 +1,16 @@ import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:gomiland/assets.dart'; import 'package:gomiland/constants/styles.dart'; import 'package:gomiland/controllers/audio_controller.dart'; -import 'package:gomiland/screens/widgets/mute_button.dart'; import 'package:gomiland/screens/auth/utils.dart'; import 'package:gomiland/screens/popups/popups.dart'; import 'package:gomiland/screens/widgets/friends_button.dart'; +import 'package:gomiland/screens/widgets/gomiland_logo.dart'; import 'package:gomiland/screens/widgets/hi_score_button.dart'; import 'package:gomiland/screens/widgets/load_button.dart'; import 'package:gomiland/screens/widgets/menu_button.dart'; +import 'package:gomiland/screens/widgets/mute_button.dart'; import 'package:gomiland/screens/widgets/spacer.dart'; import 'package:gomiland/utils/authentication.dart'; import 'package:gomiland/utils/firestore.dart'; @@ -28,6 +28,7 @@ class _MainMenuState extends State { bool _isLoading = false; bool _isSentToProfile = false; final double _sidePadding = 16.0; + final double _runSpacing = 16.0; void _setIsLoading(bool isLoading) { if (context.mounted) { @@ -81,6 +82,7 @@ class _MainMenuState extends State { return [ Wrap( alignment: WrapAlignment.center, + runSpacing: _runSpacing, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: _sidePadding), @@ -117,6 +119,7 @@ class _MainMenuState extends State { const SpacerNormal(), Wrap( alignment: WrapAlignment.center, + runSpacing: _runSpacing, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: _sidePadding), @@ -153,6 +156,7 @@ class _MainMenuState extends State { _isSignedIn ? Wrap( alignment: WrapAlignment.center, + runSpacing: _runSpacing, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: _sidePadding), @@ -171,6 +175,7 @@ class _MainMenuState extends State { : Container(), Wrap( alignment: WrapAlignment.center, + runSpacing: _runSpacing, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: _sidePadding), @@ -210,10 +215,7 @@ class _MainMenuState extends State { child: Column( mainAxisSize: MainAxisSize.min, children: [ - Image.asset( - Assets.assets_images_logo_gomiland_simple_png, - height: 164, - ), + const GomilandLogo(), const SpacerNormal(), if (isWebMobile) const Text( diff --git a/lib/screens/widgets/gomiland_logo.dart b/lib/screens/widgets/gomiland_logo.dart new file mode 100644 index 0000000..7cb3884 --- /dev/null +++ b/lib/screens/widgets/gomiland_logo.dart @@ -0,0 +1,17 @@ +import 'package:flutter/material.dart'; +import 'package:gomiland/assets.dart'; + +class GomilandLogo extends StatelessWidget{ + const GomilandLogo({super.key}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(4.0), + child: Image.asset( + Assets.assets_images_logo_gomiland_simple_png, + height: 164, + ), + ); + } +} \ No newline at end of file diff --git a/lib/screens/widgets/spacer.dart b/lib/screens/widgets/spacer.dart index 0a9706d..4d86b88 100644 --- a/lib/screens/widgets/spacer.dart +++ b/lib/screens/widgets/spacer.dart @@ -24,4 +24,12 @@ class SpacerSmall extends StatelessWidget { return const SizedBox(height: 10.0); } } +class SpacerHorizontal extends StatelessWidget { + const SpacerHorizontal({super.key}); + + @override + Widget build(BuildContext context) { + return const SizedBox(width: 32.0); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 33b1455..c20fa5d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -61,6 +61,7 @@ flutter: - assets/images/objects/ - assets/images/rubbish/ - assets/images/tile_maps/ + - assets/images/landing/ - assets/yarn/ fonts: