completed landing page

xjyribro · Apr 17, 2024 · 6b24f57 · 6b24f57
1 parent 7bd88d2
commit 6b24f57
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 69 deletions.
diff --git a/assets/images/landing/sort_rubbish.gif b/assets/images/landing/sort_rubbish.gif
diff --git a/lib/assets.dart b/lib/assets.dart
diff --git 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!';
 }
diff --git 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
@@ -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: <Widget>[
-              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
@@ -1,50 +1,72 @@
+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;
   final Color borderColor;
 
   const ContentBox({
     super.key,
-    required this.index,
     required this.heading,
     required this.content,
     required this.imgPath,
     required this.borderColor,
   });
 
-  List<Widget> 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
@@ -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<MainMenu> {
   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<MainMenu> {
     return [
       Wrap(
         alignment: WrapAlignment.center,
+        runSpacing: _runSpacing,
         children: [
           Padding(
             padding: EdgeInsets.symmetric(horizontal: _sidePadding),
@@ -117,6 +119,7 @@ class _MainMenuState extends State<MainMenu> {
       const SpacerNormal(),
       Wrap(
         alignment: WrapAlignment.center,
+        runSpacing: _runSpacing,
         children: [
           Padding(
             padding: EdgeInsets.symmetric(horizontal: _sidePadding),
@@ -153,6 +156,7 @@ class _MainMenuState extends State<MainMenu> {
       _isSignedIn
           ? Wrap(
               alignment: WrapAlignment.center,
+              runSpacing: _runSpacing,
               children: [
                 Padding(
                   padding: EdgeInsets.symmetric(horizontal: _sidePadding),
@@ -171,6 +175,7 @@ class _MainMenuState extends State<MainMenu> {
           : Container(),
       Wrap(
         alignment: WrapAlignment.center,
+        runSpacing: _runSpacing,
         children: [
           Padding(
             padding: EdgeInsets.symmetric(horizontal: _sidePadding),
@@ -210,10 +215,7 @@ class _MainMenuState extends State<MainMenu> {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              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
@@ -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,
+      ),
+    );
+  }
+}
diff --git 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
@@ -61,6 +61,7 @@ flutter:
     - assets/images/objects/
     - assets/images/rubbish/
     - assets/images/tile_maps/
+    - assets/images/landing/
     - assets/yarn/
 
   fonts: