Merge branch '40-improve-ux-ui' into 'master'

Resolve "Improve UX/UI"

Closes #40

See merge request !41

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.2.31
-app.versionCode=37
+app.versionName=1.2.32
+app.versionCode=38

assets/translations/en.json

@@ -7,7 +7,6 @@
 
   "settings_title": "Settings",
   "settings_label_theme":"Theme mode",
-  "settings_label_timer_value":"Game turn allowed time",
 
   "about_title": "Informations",
   "about_content": "Categories",

assets/translations/fr.json

@@ -7,7 +7,6 @@
 
   "settings_title": "Réglages",
   "settings_label_theme":"Thème de couleurs",
-  "settings_label_timer_value":"Durée du tour de jeu",
 
   "about_title": "Informations",
   "about_content": "Petit Bac.",

fastlane/metadata/android/en-US/changelogs/38.txt

+Improve UI, add emojis.

fastlane/metadata/android/fr-FR/changelogs/38.txt

+Améliorations graphiques, ajout d'émojis.

lib/data/fetch_data_helper.dart

@@ -19,10 +19,13 @@ class FetchDataHelper {
     try {
       final List<dynamic> rawCategories = GameData.data['categories'] as List<dynamic>;
       for (var rawElement in rawCategories) {
-        final categoryCode = rawElement.toString();
+        final categoryCode = rawElement['code'].toString();
+        final categoryText = rawElement['text-fr'].toString();
+        final categoryEmoji = rawElement['emoji'].toString();
         _categories.add(Category(
           key: categoryCode,
-          text: categoryCode,
+          text: categoryText,
+          emoji: categoryEmoji,
         ));
       }
     } catch (e) {

lib/data/game_data.dart

 class GameData {
   static const Map<String, dynamic> data = {
     "categories": [
-      "Pays",
-      "Prénom fille",
-      "Prénom garçon",
-      "Animal",
-      "Métier",
-      "Villes",
-      "Dessin animé",
-      "Film",
-      "Auteur de littérature",
-      "Acteur ou actrice",
-      "Chanteur ou chanteuse",
-      "Chose ou objet",
-      "Fruit ou légume",
-      "Couleur",
-      "Marque",
-      "Moyen de transport",
-      "Outil",
-      "Capitale",
-      "Instrument de musique",
-      "Boisson",
-      "Fleur",
-      "Plat",
-      "Personnage historique",
-      "Vêtement",
-      "Minéral ou pierre précieuse",
-      "Étoile, planète ou constellation",
-      "Fleuve, cours d'eau ou océan",
-      "Partie du corps humain",
-      "Oiseau",
-      "Poisson",
-      "Qualité ou défaut",
-      "Arbre",
-      "Bande dessinée",
-      "Département français",
-      "Insecte",
-      "Dessert",
-      "Mammifère",
-      "Épice",
-      "Héros de mythologie",
-      "Héros fictif",
-      "Fromage",
-      "Jeu",
-      "Élément de véhicules",
-      "Site internet",
-      "Mot de plus de 8 lettres",
-      "Cadeau de Noël",
-      "Mot en anglais",
-      "Mot en espagnol",
-      "Métier dont rêvent les enfants",
-      "Chose qui se trouve dans une voiture",
-      "Chose qui se trouve dans un camping",
-      "Chose qui se trouve dans un cartable",
-      "Chose qui se trouve dans une maison",
-      "Chose qui se trouve dans une forêt",
-      "Chose qui se trouve dans la mer",
-      "Ville française",
-      "Qui sent mauvais",
-      "Qui fait plaisir",
-      "Mauvais pour la santé",
-      "Mauvais pour l'environement",
+      {
+        "code": "Pays",
+        "text-fr": "Pays",
+        "emoji": "🗺️",
+      },
+      {
+        "code": "Prénom fille",
+        "text-fr": "Prénom fille",
+        "emoji": "👧🏼",
+      },
+      {
+        "code": "Prénom garçon",
+        "text-fr": "Prénom garçon",
+        "emoji": "👦🏼",
+      },
+      {
+        "code": "Animal",
+        "text-fr": "Animal",
+        "emoji": "🐒",
+      },
+      {
+        "code": "Métier",
+        "text-fr": "Métier",
+        "emoji": "👷",
+      },
+      {
+        "code": "Villes",
+        "text-fr": "Villes",
+        "emoji": "🏙️",
+      },
+      {
+        "code": "Dessin animé",
+        "text-fr": "Dessin animé",
+        "emoji": "",
+      },
+      {
+        "code": "Film",
+        "text-fr": "Film",
+        "emoji": "🎥",
+      },
+      {
+        "code": "Auteur de littérature",
+        "text-fr": "Auteur de littérature",
+        "emoji": "🧑‍🏫",
+      },
+      {
+        "code": "Acteur ou actrice",
+        "text-fr": "Acteur ou actrice",
+        "emoji": "🎭",
+      },
+      {
+        "code": "Chanteur ou chanteuse",
+        "text-fr": "Chanteur ou chanteuse",
+        "emoji": "🎤",
+      },
+      {
+        "code": "Chose ou objet",
+        "text-fr": "Chose ou objet",
+        "emoji": "📦",
+      },
+      {
+        "code": "Fruit ou légume",
+        "text-fr": "Fruit ou légume",
+        "emoji": "🍅",
+      },
+      {
+        "code": "Couleur",
+        "text-fr": "Couleur",
+        "emoji": "🎨",
+      },
+      {
+        "code": "Marque",
+        "text-fr": "Marque",
+        "emoji": "™️",
+      },
+      {
+        "code": "Moyen de transport",
+        "text-fr": "Moyen de transport",
+        "emoji": "🚂",
+      },
+      {
+        "code": "Outil",
+        "text-fr": "Outil",
+        "emoji": "🛠️",
+      },
+      {
+        "code": "Capitale",
+        "text-fr": "Capitale",
+        "emoji": "",
+      },
+      {
+        "code": "Instrument de musique",
+        "text-fr": "Instrument de musique",
+        "emoji": "🎸",
+      },
+      {
+        "code": "Boisson",
+        "text-fr": "Boisson",
+        "emoji": "🥤",
+      },
+      {
+        "code": "Fleur",
+        "text-fr": "Fleur",
+        "emoji": "💐",
+      },
+      {
+        "code": "Plat",
+        "text-fr": "Plat",
+        "emoji": "🍲",
+      },
+      {
+        "code": "Personnage historique",
+        "text-fr": "Personnage historique",
+        "emoji": "🤴",
+      },
+      {
+        "code": "Vêtement",
+        "text-fr": "Vêtement",
+        "emoji": "👖",
+      },
+      {
+        "code": "Minéral ou pierre précieuse",
+        "text-fr": "Minéral ou pierre précieuse",
+        "emoji": "💎",
+      },
+      {
+        "code": "Étoile, planète ou constellation",
+        "text-fr": "Étoile, planète ou constellation",
+        "emoji": "🪐",
+      },
+      {
+        "code": "Fleuve, cours d'eau ou océan",
+        "text-fr": "Fleuve, cours d'eau ou océan",
+        "emoji": "🌊",
+      },
+      {
+        "code": "Partie du corps humain",
+        "text-fr": "Partie du corps humain",
+        "emoji": "🖐️",
+      },
+      {
+        "code": "Oiseau",
+        "text-fr": "Oiseau",
+        "emoji": "🐦",
+      },
+      {
+        "code": "Poisson",
+        "text-fr": "Poisson",
+        "emoji": "🐟",
+      },
+      {
+        "code": "Qualité ou défaut",
+        "text-fr": "Qualité ou défaut",
+        "emoji": "🙃",
+      },
+      {
+        "code": "Arbre",
+        "text-fr": "Arbre",
+        "emoji": "🌳",
+      },
+      {
+        "code": "Bande dessinée",
+        "text-fr": "Bande dessinée",
+        "emoji": "🗯️",
+      },
+      {
+        "code": "Département français",
+        "text-fr": "Département français",
+        "emoji": "",
+      },
+      {
+        "code": "Insecte",
+        "text-fr": "Insecte",
+        "emoji": "🐞",
+      },
+      {
+        "code": "Dessert",
+        "text-fr": "Dessert",
+        "emoji": "🍰",
+      },
+      {
+        "code": "Mammifère",
+        "text-fr": "Mammifère",
+        "emoji": "🐇",
+      },
+      {
+        "code": "Épice",
+        "text-fr": "Épice",
+        "emoji": "🌶️",
+      },
+      {
+        "code": "Héros de mythologie",
+        "text-fr": "Héros de mythologie",
+        "emoji": "🧙",
+      },
+      {
+        "code": "Héros fictif",
+        "text-fr": "Héros fictif",
+        "emoji": "🦸",
+      },
+      {
+        "code": "Fromage",
+        "text-fr": "Fromage",
+        "emoji": "🧀",
+      },
+      {
+        "code": "Jeu",
+        "text-fr": "Jeu",
+        "emoji": "🎲",
+      },
+      {
+        "code": "Élément de véhicules",
+        "text-fr": "Élément de véhicules",
+        "emoji": "🚗",
+      },
+      {
+        "code": "Site internet",
+        "text-fr": "Site internet",
+        "emoji": "💻",
+      },
+      {
+        "code": "Mot de plus de 8 lettres",
+        "text-fr": "Mot de plus de 8 lettres",
+        "emoji": "8️⃣",
+      },
+      {
+        "code": "Cadeau de Noël",
+        "text-fr": "Cadeau de Noël",
+        "emoji": "🎁",
+      },
+      {
+        "code": "Mot en anglais",
+        "text-fr": "Mot en anglais",
+        "emoji": "🇬🇧",
+      },
+      {
+        "code": "Mot en espagnol",
+        "text-fr": "Mot en espagnol",
+        "emoji": "🇪🇸",
+      },
+      {
+        "code": "Métier dont rêvent les enfants",
+        "text-fr": "Métier dont rêvent les enfants",
+        "emoji": "🧑‍⚕️",
+      },
+      {
+        "code": "Chose qui se trouve dans une voiture",
+        "text-fr": "Chose qui se trouve dans une voiture",
+        "emoji": "🚙",
+      },
+      {
+        "code": "Chose qui se trouve dans un camping",
+        "text-fr": "Chose qui se trouve dans un camping",
+        "emoji": "🏕️",
+      },
+      {
+        "code": "Chose qui se trouve dans un cartable",
+        "text-fr": "Chose qui se trouve dans un cartable",
+        "emoji": "🎒",
+      },
+      {
+        "code": "Chose qui se trouve dans une maison",
+        "text-fr": "Chose qui se trouve dans une maison",
+        "emoji": "🏠",
+      },
+      {
+        "code": "Chose qui se trouve dans une forêt",
+        "text-fr": "Chose qui se trouve dans une forêt",
+        "emoji": "🌲",
+      },
+      {
+        "code": "Chose qui se trouve dans la mer",
+        "text-fr": "Chose qui se trouve dans la mer",
+        "emoji": "🌊",
+      },
+      {
+        "code": "Ville française",
+        "text-fr": "Ville française",
+        "emoji": "",
+      },
+      {
+        "code": "Qui sent mauvais",
+        "text-fr": "Qui sent mauvais",
+        "emoji": "💩",
+      },
+      {
+        "code": "Qui fait plaisir",
+        "text-fr": "Qui fait plaisir",
+        "emoji": "🥰",
+      },
+      {
+        "code": "Mauvais pour la santé",
+        "text-fr": "Mauvais pour la santé",
+        "emoji": "☠️",
+      },
+      {
+        "code": "Mauvais pour l'environement",
+        "text-fr": "Mauvais pour l'environement",
+        "emoji": "🏭",
+      },
     ]
   };
 }

lib/models/data/category.dart

 class Category {
   final String key;
   final String text;
+  final String emoji;
 
   const Category({
     required this.key,
     required this.text,
+    required this.emoji,
   });
 
   @override
@@ -16,6 +18,7 @@ class Category {
     return {
       'key': key,
       'text': text,
+      'emoji': emoji,
     };
   }
 }

lib/ui/widgets/game/game_countdown.dart

@@ -39,34 +39,37 @@ class GameButtonNextWithCountdown extends StatelessWidget {
                       width: borderWidth,
                     ),
                   ),
-                  child: TextButton(
-                    onPressed: () {
-                      final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
+                  child: SizedBox.square(
+                    dimension: 100,
+                    child: TextButton(
+                      onPressed: () {
+                        final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
 
-                      if (currentGame.isFinished) {
-                        gameCubit.quitGame();
-                      } else {
-                        if (currentGame.gameSettings.itemsCount == 0) {
-                          gameCubit.pickNewItem();
-                          gameCubit.startTimer();
+                        if (currentGame.isFinished) {
+                          gameCubit.quitGame();
                         } else {
-                          if (currentGame.countdown == 0) {
-                            gameCubit.next();
+                          if (currentGame.gameSettings.itemsCount == 0) {
+                            gameCubit.pickNewItem();
+                            gameCubit.startTimer();
+                          } else {
+                            if (currentGame.countdown == 0) {
+                              gameCubit.next();
+                            }
                           }
                         }
-                      }
-                    },
-                    child: Text(
-                      currentGame.isFinished
-                          ? '🎆'
-                          : ((currentGame.countdown == 0)
-                              ? '🎲'
-                              : currentGame.countdown.toString()),
-                      textAlign: TextAlign.center,
-                      style: const TextStyle(
-                        fontSize: 50,
-                        fontWeight: FontWeight.w600,
-                        color: textColor,
+                      },
+                      child: Text(
+                        currentGame.isFinished
+                            ? '🎆'
+                            : ((currentGame.countdown == 0)
+                                ? '🎲'
+                                : currentGame.countdown.toString()),
+                        textAlign: TextAlign.center,
+                        style: const TextStyle(
+                          fontSize: 50,
+                          fontWeight: FontWeight.w600,
+                          color: textColor,
+                        ),
                       ),
                     ),
                   ),

lib/ui/widgets/game/game_position_indicator.dart

@@ -34,7 +34,7 @@ class GamePositionIndicator extends StatelessWidget {
               color: baseColor,
               backgroundColor: baseColor.darken(),
               minHeight: barHeight,
-              borderRadius: const BorderRadius.all(Radius.circular(15)),
+              borderRadius: const BorderRadius.all(Radius.circular(10)),
             ),
             OutlinedText(
               text: '$currentPosition/$maxPosition',

lib/ui/widgets/game/widget_category.dart

@@ -20,6 +20,7 @@ class WidgetCategory extends StatelessWidget {
         final Color borderColor = backgroundColor.darken();
 
         return Container(
+          width: double.maxFinite,
           margin: const EdgeInsets.all(borderWidth),
           padding: const EdgeInsets.all(borderWidth),
           decoration: BoxDecoration(
@@ -30,20 +31,37 @@ class WidgetCategory extends StatelessWidget {
               width: borderWidth,
             ),
           ),
-          child: TextButton(
-            onPressed: () {
-              final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
-              gameCubit.pickNewCategory();
-            },
-            child: Text(
-              currentGame.category.text,
-              textAlign: TextAlign.center,
-              style: const TextStyle(
-                fontSize: 30,
-                fontWeight: FontWeight.w600,
-                color: Colors.black,
+          child: Column(
+            children: [
+              SizedBox(
+                height: 100,
+                child: TextButton(
+                  onPressed: () {
+                    final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
+                    gameCubit.pickNewCategory();
+                  },
+                  child: Text(
+                    currentGame.category.text,
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                      fontSize: 30,
+                      fontWeight: FontWeight.w600,
+                      color: Colors.black,
+                    ),
+                  ),
+                ),
               ),
-            ),
+              SizedBox.square(
+                dimension: 80,
+                child: Text(
+                  currentGame.category.emoji,
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    fontSize: 50,
+                  ),
+                ),
+              ),
+            ],
           ),
         );
       },

lib/ui/widgets/game/widget_letter.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:petitbac/cubit/game_cubit.dart';
 import 'package:petitbac/models/game.dart';
+import 'package:petitbac/ui/widgets/helpers/outlined_text_widget.dart';
 import 'package:petitbac/utils/color_extensions.dart';
 
 class WidgetLetter extends StatelessWidget {
@@ -20,6 +21,7 @@ class WidgetLetter extends StatelessWidget {
         final Color borderColor = backgroundColor.darken();
 
         return Container(
+          width: double.maxFinite,
           margin: const EdgeInsets.all(borderWidth),
           padding: const EdgeInsets.all(borderWidth),
           decoration: BoxDecoration(
@@ -30,17 +32,18 @@ class WidgetLetter extends StatelessWidget {
               width: borderWidth,
             ),
           ),
-          child: TextButton(
-            onPressed: () {
-              final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
-              gameCubit.pickNewLetter();
-            },
-            child: Text(
-              currentGame.letter.text,
-              style: const TextStyle(
-                fontSize: 40,
-                fontWeight: FontWeight.w600,
-                color: Colors.black,
+          child: SizedBox(
+            height: 100,
+            child: TextButton(
+              onPressed: () {
+                final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
+                gameCubit.pickNewLetter();
+              },
+              child: OutlinedText(
+                text: currentGame.letter.text,
+                fontSize: 60,
+                textColor: Colors.black,
+                outlineColor: Colors.orange.darken(),
               ),
             ),
           ),

pubspec.yaml

@@ -3,7 +3,7 @@ description: A PetitBac game application.
 
 publish_to: "none"
 
-version: 1.2.31+37
+version: 1.2.32+38
 
 environment:
   sdk: "^3.0.0"