Merge branch '12-improve-layout' into 'master'

Resolve "Improve layout"

Closes #12

See merge request !12

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.0.29
-app.versionCode=29
+app.versionName=0.0.30
+app.versionCode=30

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

+Improve layout and design.

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

+Amélioration des graphismes.

lib/ui/screens/game.dart

@@ -12,15 +12,10 @@ class ScreenGame extends StatelessWidget {
   Widget build(BuildContext context) {
     return Material(
       color: Theme.of(context).colorScheme.background,
-      child: Column(
-        children: <Widget>[
-          const SizedBox(height: 8),
-          BlocBuilder<GameCubit, GameState>(
-            builder: (BuildContext context, GameState gameState) {
-              return gameState.currentGame.isRunning ? const GameWidget() : const Parameters();
-            },
-          ),
-        ],
+      child: BlocBuilder<GameCubit, GameState>(
+        builder: (BuildContext context, GameState gameState) {
+          return gameState.currentGame.isRunning ? const GameWidget() : const Parameters();
+        },
       ),
     );
   }

lib/ui/widgets/game_top_indicator.dart

 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:unicons/unicons.dart';
 
 import 'package:jeweled/cubit/game_cubit.dart';
 import 'package:jeweled/models/game.dart';
+import 'package:jeweled/ui/widgets/indicators/indicator_available_blocks.dart';
+import 'package:jeweled/ui/widgets/indicators/indicator_moves_count.dart';
+import 'package:jeweled/ui/widgets/indicators/indicator_score.dart';
+import 'package:jeweled/ui/widgets/indicators/indicator_shuffle_button.dart';
 
 class GameTopIndicatorWidget extends StatelessWidget {
   const GameTopIndicatorWidget({super.key});
 
   @override
   Widget build(BuildContext context) {
-    const Color scoreTextColor = Colors.white;
-    const Color movesCountTextColor = Colors.grey;
-    const Color availableBlocksCountTextColor = Colors.green;
-
-    const double scoreFontSize = 40;
-    const double movesCountFontSize = 15;
-    const double availableBlocksCountFontSize = 20;
-
     return BlocBuilder<GameCubit, GameState>(
       builder: (BuildContext context, GameState gameState) {
         final Game currentGame = gameState.currentGame;
 
-        return Table(
+        return Column(
           children: [
-            TableRow(
+            ScoreIndicator(game: currentGame),
+            Table(
+              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
               children: [
-                Column(
+                TableRow(
                   children: [
-                    Text(
-                      currentGame.score.toString(),
-                      style: const TextStyle(
-                        fontSize: scoreFontSize,
-                        fontWeight: FontWeight.w600,
-                        color: scoreTextColor,
-                      ),
-                    ),
-                    Text(
-                      currentGame.movesCount.toString(),
-                      style: const TextStyle(
-                        fontSize: movesCountFontSize,
-                        fontWeight: FontWeight.w600,
-                        color: movesCountTextColor,
-                      ),
+                    Center(
+                      child: MovesCountsIndicator(game: currentGame),
                     ),
-                  ],
-                ),
-                Column(
-                  children: [
-                    Text(
-                      currentGame.availableBlocksCount.toString(),
-                      style: const TextStyle(
-                        fontSize: availableBlocksCountFontSize,
-                        fontWeight: FontWeight.w600,
-                        color: availableBlocksCountTextColor,
-                      ),
+                    AvailableBlocksCountIndicator(game: currentGame),
+                    Center(
+                      child: ShuffleButton(game: currentGame),
                     ),
-                    TextButton(
-                      child: const Icon(UniconsSolid.refresh),
-                      onPressed: () {
-                        final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
-                        gameCubit.shuffleColors(currentGame.globalSettings.colorsTheme);
-                      },
-                    )
                   ],
-                ),
+                )
               ],
             ),
           ],

lib/ui/widgets/global_app_bar.dart

@@ -3,7 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:jeweled/cubit/game_cubit.dart';
 import 'package:jeweled/models/game.dart';
-import 'package:jeweled/ui/widgets/app_titles.dart';
+import 'package:jeweled/ui/widgets/helpers/app_titles.dart';
 
 class GlobalAppBar extends StatelessWidget implements PreferredSizeWidget {
   const GlobalAppBar({super.key});

lib/ui/widgets/helpers/outlined_text_widget.dart

+import 'package:flutter/material.dart';
+
+class OutlinedText extends StatelessWidget {
+  const OutlinedText({
+    super.key,
+    required this.text,
+    required this.fontSize,
+    required this.textColor,
+    required this.outlineColor,
+  });
+
+  final String text;
+  final double fontSize;
+  final Color textColor;
+  final Color outlineColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final double delta = fontSize / 35;
+
+    return Text(
+      text,
+      style: TextStyle(
+        inherit: true,
+        fontSize: fontSize,
+        fontWeight: FontWeight.w600,
+        color: textColor,
+        shadows: [
+          Shadow(
+            offset: Offset(-delta, -delta),
+            color: outlineColor,
+          ),
+          Shadow(
+            offset: Offset(delta, -delta),
+            color: outlineColor,
+          ),
+          Shadow(
+            offset: Offset(delta, delta),
+            color: outlineColor,
+          ),
+          Shadow(
+            offset: Offset(-delta, delta),
+            color: outlineColor,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/widgets/indicators/indicator_available_blocks.dart

+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import 'package:jeweled/models/game.dart';
+import 'package:jeweled/ui/widgets/helpers/outlined_text_widget.dart';
+import 'package:jeweled/utils/color_extensions.dart';
+
+class AvailableBlocksCountIndicator extends StatelessWidget {
+  const AvailableBlocksCountIndicator({super.key, required this.game});
+
+  final Game game;
+
+  @override
+  Widget build(BuildContext context) {
+    // Minimum available blocks count value to fill bar
+    const minBlocksCount = 6;
+
+    // Normalized [0..1] value
+    final double barValue = min(minBlocksCount, game.availableBlocksCount) / minBlocksCount;
+
+    // Bar color: red < orange < green
+    final Color baseColor = (barValue < 0.5
+            ? Color.lerp(Colors.red, Colors.orange, barValue * 2)
+            : Color.lerp(Colors.orange, Colors.green, (barValue - 0.5) * 2)) ??
+        Colors.grey;
+
+    const barHeight = 25.0;
+    const Color textColor = Color.fromARGB(255, 238, 238, 238);
+    const Color outlineColor = Color.fromARGB(255, 200, 200, 200);
+
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        LinearProgressIndicator(
+          value: barValue,
+          color: baseColor,
+          backgroundColor: baseColor.darken(),
+          minHeight: barHeight,
+          borderRadius: const BorderRadius.all(Radius.circular(15)),
+        ),
+        OutlinedText(
+          text: game.availableBlocksCount.toString(),
+          fontSize: barHeight,
+          textColor: textColor,
+          outlineColor: outlineColor,
+        ),
+      ],
+    );
+  }
+}

lib/ui/widgets/indicators/indicator_moves_count.dart

+import 'package:flutter/material.dart';
+
+import 'package:jeweled/models/game.dart';
+import 'package:jeweled/ui/widgets/helpers/outlined_text_widget.dart';
+import 'package:jeweled/utils/color_extensions.dart';
+
+class MovesCountsIndicator extends StatelessWidget {
+  const MovesCountsIndicator({super.key, required this.game});
+
+  final Game game;
+
+  @override
+  Widget build(BuildContext context) {
+    const Color baseColor = Color.fromARGB(255, 215, 1, 133);
+    final Color outlineColor = baseColor.darken();
+
+    return OutlinedText(
+      text: game.movesCount.toString(),
+      fontSize: 40,
+      textColor: baseColor,
+      outlineColor: outlineColor,
+    );
+  }
+}

lib/ui/widgets/indicators/indicator_score.dart

+import 'package:flutter/material.dart';
+
+import 'package:jeweled/models/game.dart';
+import 'package:jeweled/ui/widgets/helpers/outlined_text_widget.dart';
+import 'package:jeweled/utils/color_extensions.dart';
+
+class ScoreIndicator extends StatelessWidget {
+  const ScoreIndicator({super.key, required this.game});
+
+  final Game game;
+
+  @override
+  Widget build(BuildContext context) {
+    const Color baseColor = Color.fromARGB(255, 218, 218, 218);
+    final Color outlineColor = baseColor.darken();
+
+    return OutlinedText(
+      text: game.score.toString(),
+      fontSize: 70,
+      textColor: baseColor,
+      outlineColor: outlineColor,
+    );
+  }
+}

lib/ui/widgets/indicators/indicator_shuffle_button.dart

+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'package:jeweled/cubit/game_cubit.dart';
+import 'package:jeweled/models/game.dart';
+import 'package:jeweled/ui/widgets/helpers/outlined_text_widget.dart';
+import 'package:jeweled/utils/color_extensions.dart';
+
+class ShuffleButton extends StatelessWidget {
+  const ShuffleButton({super.key, required this.game});
+
+  final Game game;
+
+  @override
+  Widget build(BuildContext context) {
+    const Color textColor = Color.fromARGB(255, 215, 1, 133);
+    final Color outlineColor = textColor.darken();
+
+    return TextButton(
+      child: OutlinedText(
+        text: '🔄',
+        fontSize: 25,
+        textColor: textColor,
+        outlineColor: outlineColor,
+      ),
+      onPressed: () {
+        final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
+        gameCubit.shuffleColors(game.globalSettings.colorsTheme);
+      },
+    );
+  }
+}

lib/ui/widgets/parameters.dart

@@ -92,7 +92,7 @@ class Parameters extends StatelessWidget {
     }
 
     lines.add(SizedBox(height: separatorHeight));
-    lines.add(buildStartNewGameButton());
+    lines.add(Expanded(child: buildStartNewGameButton()));
     lines.add(SizedBox(height: separatorHeight));
 
     // Global settings
@@ -138,39 +138,17 @@ class Parameters extends StatelessWidget {
   }
 
   static Widget buildStartNewGameButton() {
-    const double blockMargin = 3.0;
-    const double blockPadding = 2.0;
-
     return BlocBuilder<GameSettingsCubit, GameSettingsState>(
       builder: (BuildContext context, GameSettingsState gameSettingsState) {
         return BlocBuilder<GlobalSettingsCubit, GlobalSettingsState>(
           builder: (BuildContext context, GlobalSettingsState globalSettingsState) {
             final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
 
-            return Container(
-              margin: const EdgeInsets.all(blockMargin),
-              padding: const EdgeInsets.all(blockPadding),
-              child: Table(
-                defaultColumnWidth: const IntrinsicColumnWidth(),
-                children: [
-                  TableRow(
-                    children: [
-                      buildDecorationImageWidget(),
-                      Column(
-                        children: [
-                          TextButton(
-                            child: buildImageContainerWidget('button_start'),
-                            onPressed: () => gameCubit.startNewGame(
-                              gameSettings: gameSettingsState.settings,
-                              globalSettings: globalSettingsState.settings,
-                            ),
-                          ),
-                        ],
-                      ),
-                      buildDecorationImageWidget(),
-                    ],
-                  ),
-                ],
+            return TextButton(
+              child: buildImageContainerWidget('button_start'),
+              onPressed: () => gameCubit.startNewGame(
+                gameSettings: gameSettingsState.settings,
+                globalSettings: globalSettingsState.settings,
               ),
             );
           },

pubspec.lock

@@ -13,10 +13,10 @@ packages:
     dependency: transitive
     description:
       name: bloc
-      sha256: f53a110e3b48dcd78136c10daa5d51512443cea5e1348c9d80a320095fa2db9e
+      sha256: "106842ad6569f0b60297619e9e0b1885c2fb9bf84812935490e6c5275777804e"
       url: "https://pub.dev"
     source: hosted
-    version: "8.1.3"
+    version: "8.1.4"
   characters:
     dependency: transitive
     description:
@@ -98,18 +98,18 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_bloc
-      sha256: "87325da1ac757fcc4813e6b34ed5dd61169973871fdf181d6c2109dd6935ece1"
+      sha256: f0ecf6e6eb955193ca60af2d5ca39565a86b8a142452c5b24d96fb477428f4d2
       url: "https://pub.dev"
     source: hosted
-    version: "8.1.4"
+    version: "8.1.5"
   flutter_lints:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: e2a421b7e59244faef694ba7b30562e489c2b489866e505074eb005cd7060db7
+      sha256: "9e8c3858111da373efc5aa341de011d9bd23e2c5c5e0c62bccf32438e192d7b1"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.1"
+    version: "3.0.2"
   flutter_localizations:
     dependency: transitive
     description: flutter
@@ -132,10 +132,10 @@ packages:
     dependency: "direct main"
     description:
       name: hydrated_bloc
-      sha256: "00a2099680162e74b5a836b8a7f446e478520a9cae9f6032e028ad8129f4432d"
+      sha256: af35b357739fe41728df10bec03aad422cdc725a1e702e03af9d2a41ea05160c
       url: "https://pub.dev"
     source: hosted
-    version: "9.1.4"
+    version: "9.1.5"
   intl:
     dependency: transitive
     description:
@@ -333,14 +333,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.2"
-  unicons:
-    dependency: "direct main"
-    description:
-      name: unicons
-      sha256: dbfcf93ff4d4ea19b324113857e358e4882115ab85db04417a4ba1c72b17a670
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.1.1"
   vector_math:
     dependency: transitive
     description:
@@ -361,10 +353,10 @@ packages:
     dependency: transitive
     description:
       name: win32
-      sha256: "464f5674532865248444b4c3daca12bd9bf2d7c47f759ce2617986e7229494a8"
+      sha256: "0a989dc7ca2bb51eac91e8fd00851297cfffd641aa7538b165c62637ca0eaa4a"
       url: "https://pub.dev"
     source: hosted
-    version: "5.2.0"
+    version: "5.4.0"
   xdg_directories:
     dependency: transitive
     description:

pubspec.yaml

@@ -3,7 +3,7 @@ description: Jeweled Game
 
 publish_to: 'none'
 
-version: 0.0.29+29
+version: 0.0.30+30
 
 environment:
   sdk: '^3.0.0'
@@ -17,7 +17,6 @@ dependencies:
   hive: ^2.2.3
   hydrated_bloc: ^9.0.0
   path_provider: ^2.0.11
-  unicons: ^2.1.1
 
 dev_dependencies:
   flutter_lints: ^3.0.1