Merge branch '23-clean-improve-update-code' into 'master'

Resolve "Clean / improve / update code"

Closes #23

See merge request !22

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.1.0
-app.versionCode=19
+app.versionName=0.1.1
+app.versionCode=20

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

+Clean / improve / update code and UI.

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

+Nettoyage / amélioration / mise à jour de code et de l'interface.

lib/config/default_game_settings.dart

-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class DefaultGameSettings {
   // available game parameters codes
@@ -31,9 +31,4 @@ class DefaultGameSettings {
     printlog('Did not find any available value for game parameter "$parameterCode".');
     return [];
   }
-
-  // parameters displayed with assets (instead of painter)
-  static List<String> displayedWithAssets = [
-    //
-  ];
 }

lib/config/default_global_settings.dart

-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class DefaultGlobalSettings {
   // available global parameters codes
@@ -25,9 +25,4 @@ class DefaultGlobalSettings {
     printlog('Did not find any available value for global parameter "$parameterCode".');
     return [];
   }
-
-  // parameters displayed with assets (instead of painter)
-  static List<String> displayedWithAssets = [
-    //
-  ];
 }

lib/models/game/cell.dart

 import 'package:solitaire/models/game/cell_location.dart';
-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class Cell {
   Cell({

lib/models/game/cell_location.dart

-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class CellLocation {
   final int col;

lib/models/settings/settings_game.dart

 import 'package:solitaire/config/default_game_settings.dart';
-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class GameSettings {
   final String layout;

lib/models/settings/settings_global.dart

 import 'package:solitaire/config/default_global_settings.dart';
-import 'package:solitaire/utils/tools.dart'; 
+import 'package:solitaire/utils/tools.dart';
 
 class GlobalSettings {
   String skin;

lib/ui/game/game_end.dart

@@ -25,6 +25,7 @@ class GameEndWidget extends StatelessWidget {
           padding: const EdgeInsets.all(2),
           child: Table(
             defaultColumnWidth: const IntrinsicColumnWidth(),
+            defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
             children: [
               TableRow(
                 children: [

lib/ui/helpers/styled_button.dart

+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+
+import 'package:solitaire/utils/color_extensions.dart';
+
+class StyledButton extends StatelessWidget {
+  const StyledButton({
+    super.key,
+    required this.color,
+    required this.onPressed,
+    this.onLongPress,
+    required this.child,
+  });
+
+  final Color color;
+  final VoidCallback? onPressed;
+  final VoidCallback? onLongPress;
+  final Widget child;
+
+  factory StyledButton.text({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required String caption,
+    required Color color,
+  }) {
+    final Widget captionWidget = AutoSizeText(
+      caption,
+      maxLines: 1,
+      style: TextStyle(
+        inherit: true,
+        fontWeight: FontWeight.w900,
+        color: color.darken(60),
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: captionWidget,
+    );
+  }
+
+  factory StyledButton.icon({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required Icon icon,
+    required Color color,
+    required double iconSize,
+  }) {
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: Icon(
+        icon.icon,
+        color: icon.color ?? color.darken(60),
+        size: iconSize,
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const double borderWidth = 4;
+    final Color borderColor = color.darken(40);
+    const double borderRadius = 10;
+
+    return Container(
+      margin: const EdgeInsets.all(2),
+      padding: const EdgeInsets.all(2),
+      decoration: BoxDecoration(
+        color: color,
+        border: Border.all(
+          color: borderColor,
+          width: borderWidth,
+        ),
+        borderRadius: BorderRadius.circular(borderRadius),
+      ),
+      child: CustomPaint(
+        painter: StyledButtonPainter(
+          baseColor: color,
+        ),
+        child: MaterialButton(
+          onPressed: onPressed,
+          onLongPress: onLongPress,
+          padding: const EdgeInsets.all(8),
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          minWidth: 40,
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
+class StyledButtonPainter extends CustomPainter {
+  StyledButtonPainter({
+    required this.baseColor,
+  });
+
+  final Color baseColor;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Color lightColor = baseColor.lighten(20);
+    final Color darkColor = baseColor.darken(20);
+
+    final Paint paint = Paint()..style = PaintingStyle.fill;
+
+    const double cornerRadius = 6;
+
+    Path topPath = Path()
+      ..moveTo(cornerRadius, 0)
+      ..lineTo(size.width - cornerRadius, 0)
+      ..arcToPoint(
+        Offset(size.width, cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+      )
+      ..lineTo(size.width, size.height * .35)
+      ..quadraticBezierTo(
+        size.width * .4,
+        size.height * .1,
+        0,
+        size.height * .3,
+      )
+      ..lineTo(0, cornerRadius)
+      ..arcToPoint(
+        const Offset(cornerRadius, 0),
+        radius: const Radius.circular(cornerRadius),
+      );
+
+    Path bottomPath = Path()
+      ..moveTo(cornerRadius, size.height)
+      ..lineTo(size.width - cornerRadius, size.height)
+      ..arcToPoint(
+        Offset(size.width, size.height - cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      )
+      ..lineTo(size.width, size.height * .7)
+      ..quadraticBezierTo(
+        size.width * .6,
+        size.height * .9,
+        0,
+        size.height * .7,
+      )
+      ..lineTo(0, size.height - cornerRadius)
+      ..arcToPoint(
+        Offset(cornerRadius, size.height),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      );
+
+    paint.color = lightColor;
+    canvas.drawPath(topPath, paint);
+
+    paint.color = darkColor;
+    canvas.drawPath(bottomPath, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

lib/ui/layouts/parameters_layout.dart

@@ -5,8 +5,7 @@ import 'package:solitaire/config/default_game_settings.dart';
 import 'package:solitaire/config/default_global_settings.dart';
 import 'package:solitaire/cubit/settings_game_cubit.dart';
 import 'package:solitaire/cubit/settings_global_cubit.dart';
-import 'package:solitaire/ui/parameters/parameter_image.dart';
-import 'package:solitaire/ui/parameters/parameter_painter.dart';
+import 'package:solitaire/ui/parameters/parameter_widget.dart';
 import 'package:solitaire/ui/widgets/actions/button_delete_saved_game.dart';
 import 'package:solitaire/ui/widgets/actions/button_game_start_new.dart';
 import 'package:solitaire/ui/widgets/actions/button_resume_saved_game.dart';
@@ -35,21 +34,27 @@ class ParametersLayout extends StatelessWidget {
       lines.add(SizedBox(height: separatorHeight));
     }
 
-    lines.add(SizedBox(height: separatorHeight));
+    lines.add(Expanded(
+      child: SizedBox(height: separatorHeight),
+    ));
 
     if (canResume == false) {
       // Start new game
-      lines.add(const Expanded(
-        child: StartNewGameButton(),
-      ));
+      lines.add(
+        const AspectRatio(
+          aspectRatio: 3,
+          child: StartNewGameButton(),
+        ),
+      );
     } else {
       // Resume game
-      lines.add(const Expanded(
+      lines.add(const AspectRatio(
+        aspectRatio: 3,
         child: ResumeSavedGameButton(),
       ));
       // Delete saved game
       lines.add(SizedBox.square(
-        dimension: MediaQuery.of(context).size.width / 4,
+        dimension: MediaQuery.of(context).size.width / 5,
         child: const DeleteSavedGameButton(),
       ));
     }
@@ -102,44 +107,26 @@ class ParametersLayout extends StatelessWidget {
                   ? globalSettingsCubit.getParameterValue(code)
                   : gameSettingsCubit.getParameterValue(code);
 
-              final bool isActive = (value == currentValue);
+              final bool isSelected = (value == currentValue);
 
               final double displayWidth = MediaQuery.of(context).size.width;
-              final double itemWidth = displayWidth / availableValues.length - 26;
-
-              final bool displayedWithAssets =
-                  DefaultGlobalSettings.displayedWithAssets.contains(code) ||
-                      DefaultGameSettings.displayedWithAssets.contains(code);
-
-              return TextButton(
-                child: Container(
-                  child: displayedWithAssets
-                      ? SizedBox.square(
-                          dimension: itemWidth,
-                          child: ParameterImage(
-                            code: code,
-                            value: value,
-                            isSelected: isActive,
-                          ),
-                        )
-                      : CustomPaint(
-                          size: Size(itemWidth, itemWidth),
-                          willChange: false,
-                          painter: ParameterPainter(
-                            code: code,
-                            value: value,
-                            isSelected: isActive,
-                            gameSettings: gameSettingsState.settings,
-                            globalSettings: globalSettingsState.settings,
-                          ),
-                          isComplex: true,
-                        ),
+              final double itemWidth = displayWidth / availableValues.length - 4;
+
+              return SizedBox.square(
+                dimension: itemWidth,
+                child: ParameterWidget(
+                  code: code,
+                  value: value,
+                  isSelected: isSelected,
+                  size: itemWidth,
+                  gameSettings: gameSettingsState.settings,
+                  globalSettings: globalSettingsState.settings,
+                  onPressed: () {
+                    isGlobal
+                        ? globalSettingsCubit.setParameterValue(code, value)
+                        : gameSettingsCubit.setParameterValue(code, value);
+                  },
                 ),
-                onPressed: () {
-                  isGlobal
-                      ? globalSettingsCubit.setParameterValue(code, value)
-                      : gameSettingsCubit.setParameterValue(code, value);
-                },
               );
             },
           );

lib/ui/parameters/parameter_image.dart

-import 'package:flutter/material.dart';
-
-class ParameterImage extends StatelessWidget {
-  const ParameterImage({
-    super.key,
-    required this.code,
-    required this.value,
-    required this.isSelected,
-  });
-
-  final String code;
-  final String value;
-  final bool isSelected;
-
-  static const Color buttonBackgroundColor = Colors.white;
-  static const Color buttonBorderColorActive = Colors.blue;
-  static const Color buttonBorderColorInactive = Colors.white;
-  static const double buttonBorderWidth = 8.0;
-  static const double buttonBorderRadius = 8.0;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: buttonBackgroundColor,
-        borderRadius: BorderRadius.circular(buttonBorderRadius),
-        border: Border.all(
-          color: isSelected ? buttonBorderColorActive : buttonBorderColorInactive,
-          width: buttonBorderWidth,
-        ),
-      ),
-      child: Image(
-        image: AssetImage('assets/ui/${code}_$value.png'),
-        fit: BoxFit.fill,
-      ),
-    );
-  }
-}

lib/ui/parameters/parameter_painter.dart

@@ -15,14 +15,12 @@ class ParameterPainter extends CustomPainter {
   const ParameterPainter({
     required this.code,
     required this.value,
-    required this.isSelected,
     required this.gameSettings,
     required this.globalSettings,
   });
 
   final String code;
   final String value;
-  final bool isSelected;
   final GameSettings gameSettings;
   final GlobalSettings globalSettings;
 
@@ -31,26 +29,14 @@ class ParameterPainter extends CustomPainter {
     // force square
     final double canvasSize = min(size.width, size.height);
 
-    const Color borderColorEnabled = Colors.blue;
-    const Color borderColorDisabled = Colors.white;
-
-    // "enabled/disabled" border
-    final paint = Paint();
-    paint.style = PaintingStyle.stroke;
-    paint.color = isSelected ? borderColorEnabled : borderColorDisabled;
-    paint.strokeJoin = StrokeJoin.round;
-    paint.strokeWidth = 10;
-    canvas.drawRect(
-        Rect.fromPoints(const Offset(0, 0), Offset(canvasSize, canvasSize)), paint);
-
     // content
     switch (code) {
       case DefaultGameSettings.parameterCodeLayout:
-        paintLayoutParameterItem(value, canvas, canvasSize);
+        paintLayoutParameterItem(canvas, canvasSize);
         break;
       default:
         printlog('Unknown parameter: $code/$value');
-        paintUnknownParameterItem(value, canvas, canvasSize);
+        paintUnknownParameterItem(canvas, canvasSize);
     }
   }
 
@@ -61,7 +47,6 @@ class ParameterPainter extends CustomPainter {
 
   // "unknown" parameter -> simple block with text
   void paintUnknownParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
@@ -69,12 +54,8 @@ class ParameterPainter extends CustomPainter {
     paint.strokeJoin = StrokeJoin.round;
     paint.strokeWidth = 3;
 
-    paint.color = Colors.grey;
-    paint.style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
     final textSpan = TextSpan(
-      text: '?\n$value',
+      text: '$code\n$value',
       style: const TextStyle(
         color: Colors.black,
         fontSize: 18,
@@ -97,13 +78,10 @@ class ParameterPainter extends CustomPainter {
   }
 
   void paintLayoutParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
     {
-      const Color backgroundColor = Colors.white;
-
       Color gridBackgroundColor = Colors.grey;
 
       switch (value) {
@@ -127,11 +105,6 @@ class ParameterPainter extends CustomPainter {
       paint.strokeJoin = StrokeJoin.round;
       paint.strokeWidth = 3;
 
-      // Colored background
-      paint.color = backgroundColor;
-      paint.style = PaintingStyle.fill;
-      canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
       // Mini grid
       final borderColor = Colors.grey.shade800;
 
@@ -175,9 +148,8 @@ class ParameterPainter extends CustomPainter {
 
           if (grid[row][col].hasPeg) {
             paint.color = gridBackgroundColor;
+            canvas.drawRect(Rect.fromPoints(topLeft, bottomRight), paint);
           }
-          canvas.drawRect(Rect.fromPoints(topLeft, bottomRight), paint);
-
           if (grid[row][col].hasHole) {
             paint.color = borderColor;
             paint.style = PaintingStyle.stroke;

lib/ui/parameters/parameter_widget.dart

+import 'package:flutter/material.dart';
+
+import 'package:solitaire/config/default_game_settings.dart';
+import 'package:solitaire/config/default_global_settings.dart';
+import 'package:solitaire/models/settings/settings_game.dart';
+import 'package:solitaire/models/settings/settings_global.dart';
+import 'package:solitaire/ui/helpers/styled_button.dart';
+import 'package:solitaire/ui/parameters/parameter_painter.dart';
+import 'package:solitaire/utils/tools.dart';
+
+class ParameterWidget extends StatelessWidget {
+  const ParameterWidget({
+    super.key,
+    required this.code,
+    required this.value,
+    required this.isSelected,
+    required this.size,
+    required this.gameSettings,
+    required this.globalSettings,
+    required this.onPressed,
+  });
+
+  final String code;
+  final String value;
+  final bool isSelected;
+  final double size;
+  final GameSettings gameSettings;
+  final GlobalSettings globalSettings;
+  final VoidCallback onPressed;
+
+  static const Color buttonColorActive = Colors.blue;
+  static const Color buttonColorInactive = Colors.white;
+  static const double buttonBorderWidth = 4.0;
+  static const double buttonBorderRadius = 12.0;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content = const SizedBox.shrink();
+
+    switch (code) {
+      case DefaultGameSettings.parameterCodeLayout:
+        content = getLayoutParameterItem();
+        break;
+      case DefaultGlobalSettings.parameterCodeSkin:
+        content = getSkinParameterItem();
+        break;
+      default:
+        printlog('Unknown parameter: $code/$value');
+        content = getUnknownParameterItem();
+    }
+
+    final Color buttonColor = isSelected ? buttonColorActive : buttonColorInactive;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: buttonColor,
+        borderRadius: BorderRadius.circular(buttonBorderRadius),
+        border: Border.all(
+          color: buttonColor,
+          width: buttonBorderWidth,
+        ),
+      ),
+      child: content,
+    );
+  }
+
+  // "unknown" parameter -> simple block with text
+  Widget getUnknownParameterItem() {
+    return StyledButton.text(
+      caption: '$code / $value',
+      color: Colors.grey,
+      onPressed: null,
+    );
+  }
+
+  Widget getLayoutParameterItem() {
+    Color backgroundColor = Colors.grey;
+
+    return StyledButton(
+      color: backgroundColor,
+      onPressed: onPressed,
+      child: CustomPaint(
+        size: Size(size, size),
+        willChange: false,
+        painter: ParameterPainter(
+          code: code,
+          value: value,
+          gameSettings: gameSettings,
+          globalSettings: globalSettings,
+        ),
+        isComplex: true,
+      ),
+    );
+  }
+
+  Widget getSkinParameterItem() {
+    return StyledButton(
+      color: Colors.green.shade800,
+      onPressed: onPressed,
+      child: Image(
+        image: AssetImage('assets/ui/${DefaultGlobalSettings.parameterCodeSkin}_$value.png'),
+        fit: BoxFit.fill,
+      ),
+    );
+  }
+}

lib/ui/widgets/actions/button_delete_saved_game.dart

@@ -2,20 +2,22 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:solitaire/cubit/game_cubit.dart';
+import 'package:solitaire/ui/helpers/styled_button.dart';
 
 class DeleteSavedGameButton extends StatelessWidget {
   const DeleteSavedGameButton({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return TextButton(
+    return StyledButton(
+      color: Colors.grey,
+      onPressed: () {
+        BlocProvider.of<GameCubit>(context).deleteSavedGame();
+      },
       child: const Image(
         image: AssetImage('assets/ui/button_delete_saved_game.png'),
         fit: BoxFit.fill,
       ),
-      onPressed: () {
-        BlocProvider.of<GameCubit>(context).deleteSavedGame();
-      },
     );
   }
 }