Clean / improve / update code

android/gradle.properties

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

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

+Clean / improve / update code and UI.

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

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

lib/config/default_game_settings.dart

@@ -41,9 +41,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

@@ -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/ui/game/game_end.dart

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

lib/ui/helpers/app_titles.dart

@@ -11,8 +11,7 @@ class AppHeader extends StatelessWidget {
     return Text(
       tr(text),
       textAlign: TextAlign.start,
-      style:
-          Theme.of(context).textTheme.headlineMedium!.apply(fontWeightDelta: 2),
+      style: Theme.of(context).textTheme.headlineMedium!.apply(fontWeightDelta: 2),
     );
   }
 }

lib/ui/helpers/styled_button.dart

+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+
+import 'package:puzzlegame/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:puzzlegame/config/default_game_settings.dart';
 import 'package:puzzlegame/config/default_global_settings.dart';
 import 'package:puzzlegame/cubit/settings_game_cubit.dart';
 import 'package:puzzlegame/cubit/settings_global_cubit.dart';
-import 'package:puzzlegame/ui/parameters/parameter_image.dart';
-import 'package:puzzlegame/ui/parameters/parameter_painter.dart';
+import 'package:puzzlegame/ui/parameters/parameter_widget.dart';
 import 'package:puzzlegame/ui/widgets/actions/button_delete_saved_game.dart';
 import 'package:puzzlegame/ui/widgets/actions/button_game_start_new.dart';
 import 'package:puzzlegame/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

@@ -11,14 +11,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;
 
@@ -27,26 +25,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.parameterCodeTilesetSize:
-        paintTilesetSizeParameterItem(value, canvas, canvasSize);
+        paintTilesetSizeParameterItem(canvas, canvasSize);
         break;
       default:
         printlog('Unknown parameter: $code/$value');
-        paintUnknownParameterItem(value, canvas, canvasSize);
+        paintUnknownParameterItem(canvas, canvasSize);
     }
   }
 
@@ -57,7 +43,6 @@ class ParameterPainter extends CustomPainter {
 
   // "unknown" parameter -> simple block with text
   void paintUnknownParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
@@ -65,12 +50,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,
@@ -93,36 +74,15 @@ class ParameterPainter extends CustomPainter {
   }
 
   void paintTilesetSizeParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
-    Color backgroundColor = Colors.grey;
     final int gridSize = int.parse(value.split('x')[0]);
 
-    switch (value) {
-      case DefaultGameSettings.tilesetSizeValueSmall:
-        backgroundColor = Colors.green;
-        break;
-      case DefaultGameSettings.tilesetSizeValueMedium:
-        backgroundColor = Colors.orange;
-        break;
-      case DefaultGameSettings.tilesetSizeValueLarge:
-        backgroundColor = Colors.red;
-        break;
-      default:
-        printlog('Wrong value for size parameter value: $value');
-    }
-
     final paint = Paint();
     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
     // TODO: add image
     final borderColor = Colors.grey.shade800;

lib/ui/parameters/parameter_widget.dart

+import 'package:flutter/material.dart';
+
+import 'package:puzzlegame/config/default_game_settings.dart';
+import 'package:puzzlegame/config/default_global_settings.dart';
+import 'package:puzzlegame/models/settings/settings_game.dart';
+import 'package:puzzlegame/models/settings/settings_global.dart';
+import 'package:puzzlegame/ui/helpers/styled_button.dart';
+import 'package:puzzlegame/ui/parameters/parameter_painter.dart';
+import 'package:puzzlegame/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.parameterCodeTilesetSize:
+        content = getTilesetSizeParameterItem();
+        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 getTilesetSizeParameterItem() {
+    Color backgroundColor = Colors.grey;
+
+    switch (value) {
+      case DefaultGameSettings.tilesetSizeValueSmall:
+        backgroundColor = Colors.green;
+        break;
+      case DefaultGameSettings.tilesetSizeValueMedium:
+        backgroundColor = Colors.orange;
+        break;
+      case DefaultGameSettings.tilesetSizeValueLarge:
+        backgroundColor = Colors.red;
+        break;
+      default:
+        printlog('Wrong value for size parameter value: $value');
+    }
+
+    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:puzzlegame/cubit/game_cubit.dart';
+import 'package:puzzlegame/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();
-      },
     );
   }
 }

lib/ui/widgets/actions/button_game_quit.dart

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

lib/ui/widgets/actions/button_game_start_new.dart

@@ -4,6 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:puzzlegame/cubit/game_cubit.dart';
 import 'package:puzzlegame/cubit/settings_game_cubit.dart';
 import 'package:puzzlegame/cubit/settings_global_cubit.dart';
+import 'package:puzzlegame/ui/helpers/styled_button.dart';
 
 class StartNewGameButton extends StatelessWidget {
   const StartNewGameButton({super.key});
@@ -14,17 +15,18 @@ class StartNewGameButton extends StatelessWidget {
       builder: (BuildContext context, GameSettingsState gameSettingsState) {
         return BlocBuilder<GlobalSettingsCubit, GlobalSettingsState>(
           builder: (BuildContext context, GlobalSettingsState globalSettingsState) {
-            return TextButton(
-              child: const Image(
-                image: AssetImage('assets/ui/button_start.png'),
-                fit: BoxFit.fill,
-              ),
+            return StyledButton(
+              color: Colors.blue,
               onPressed: () {
                 BlocProvider.of<GameCubit>(context).startNewGame(
                   gameSettings: gameSettingsState.settings,
                   globalSettings: globalSettingsState.settings,
                 );
               },
+              child: const Image(
+                image: AssetImage('assets/ui/button_start.png'),
+                fit: BoxFit.fill,
+              ),
             );
           },
         );

lib/ui/widgets/actions/button_resume_saved_game.dart

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