Merge pull request #629 from lichess-org/board-radius-shadow

Improve board thumbnails with rounded border and shadow
lichess-org · Apr 12, 2024 · d81f499 · d81f499
2 parents 1d0d7f9 + 88d29e7
commit d81f499
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 12 deletions.
diff --git a/lib/src/constants.dart b/lib/src/constants.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 const kLichessHost = String.fromEnvironment(
@@ -32,6 +33,12 @@ const kProvisionalDeviation = 110;
 const kClueLessDeviation = 230;
 
 // UI
+
+/// Use same box shadows as material widgets with elevation 1.
+final List<BoxShadow> boardShadows = defaultTargetPlatform == TargetPlatform.iOS
+    ? <BoxShadow>[]
+    : kElevationToShadow[1]!;
+
 const kCardTextScaleFactor = 1.64;
 const kMaxClockTextScaleFactor = 1.94;
 const kEmptyWidget = SizedBox.shrink();

diff --git a/lib/src/view/analysis/analysis_screen.dart b/lib/src/view/analysis/analysis_screen.dart
@@ -188,9 +188,11 @@ class _Body extends ConsumerWidget {
                             ),
                             child: Row(
                               children: [
-                                _Board(options, boardSize),
-                                if (hasEval && showEvaluationGauge)
+                                _Board(options, boardSize, isTablet: isTablet),
+                                if (hasEval && showEvaluationGauge) ...[
+                                  const SizedBox(width: 4.0),
                                   _EngineGaugeVertical(ctrlProvider),
+                                ],
                               ],
                             ),
                           ),
@@ -234,10 +236,14 @@ class _Body extends ConsumerWidget {
                               padding: const EdgeInsets.all(
                                 kTabletBoardTableSidePadding,
                               ),
-                              child: _Board(options, boardSize),
+                              child: _Board(
+                                options,
+                                boardSize,
+                                isTablet: isTablet,
+                              ),
                             )
                           else
-                            _Board(options, boardSize),
+                            _Board(options, boardSize, isTablet: isTablet),
                           if (showAnalysisSummary)
                             Expanded(child: ServerAnalysisSummary(options))
                           else
@@ -260,10 +266,11 @@ class _Body extends ConsumerWidget {
 }
 
 class _Board extends ConsumerWidget {
-  const _Board(this.options, this.boardSize);
+  const _Board(this.options, this.boardSize, {required this.isTablet});
 
   final AnalysisOptions options;
   final double boardSize;
+  final bool isTablet;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -360,6 +367,10 @@ class _Board extends ConsumerWidget {
         showLastMove: boardPrefs.boardHighlights,
         enableCoordinates: boardPrefs.coordinates,
         animationDuration: boardPrefs.pieceAnimationDuration,
+        borderRadius: isTablet
+            ? const BorderRadius.all(Radius.circular(4.0))
+            : BorderRadius.zero,
+        boxShadow: isTablet ? boardShadows : const <BoxShadow>[],
       ),
     );
   }
@@ -374,9 +385,15 @@ class _EngineGaugeVertical extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final analysisState = ref.watch(ctrlProvider);
 
-    return EngineGauge(
-      displayMode: EngineGaugeDisplayMode.vertical,
-      params: analysisState.engineGaugeParams,
+    return Container(
+      clipBehavior: Clip.hardEdge,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(4.0),
+      ),
+      child: EngineGauge(
+        displayMode: EngineGaugeDisplayMode.vertical,
+        params: analysisState.engineGaugeParams,
+      ),
     );
   }
 }

diff --git a/lib/src/widgets/board_preview.dart b/lib/src/widgets/board_preview.dart
@@ -2,6 +2,7 @@ import 'package:chessground/chessground.dart' hide BoardTheme;
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lichess_mobile/src/constants.dart';
 import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
 import 'package:lichess_mobile/src/styles/styles.dart';
 
@@ -73,6 +74,9 @@ class _SmallBoardPreviewState extends ConsumerState<SmallBoardPreview> {
                     ),
                     settings: BoardSettings(
                       enableCoordinates: false,
+                      borderRadius:
+                          const BorderRadius.all(Radius.circular(4.0)),
+                      boxShadow: boardShadows,
                       animationDuration: const Duration(milliseconds: 150),
                       pieceAssets: boardPrefs.pieceSet.assets,
                       colorScheme: boardPrefs.boardTheme.colors,

diff --git a/lib/src/widgets/board_table.dart b/lib/src/widgets/board_table.dart
@@ -141,6 +141,10 @@ class BoardTable extends ConsumerWidget {
           showLastMove: boardPrefs.boardHighlights,
           enableCoordinates: boardPrefs.coordinates,
           animationDuration: boardPrefs.pieceAnimationDuration,
+          borderRadius: isTablet
+              ? const BorderRadius.all(Radius.circular(4.0))
+              : BorderRadius.zero,
+          boxShadow: isTablet ? boardShadows : const <BoxShadow>[],
         );
 
         final settings = boardSettingsOverrides != null

diff --git a/lib/src/widgets/board_thumbnail.dart b/lib/src/widgets/board_thumbnail.dart
@@ -1,7 +1,7 @@
 import 'package:chessground/chessground.dart' hide BoardTheme;
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lichess_mobile/src/constants.dart';
 import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
 
 /// A board thumbnail widget
@@ -67,6 +67,8 @@ class _BoardThumbnailState extends ConsumerState<BoardThumbnail> {
       ),
       settings: BoardSettings(
         enableCoordinates: false,
+        borderRadius: const BorderRadius.all(Radius.circular(4.0)),
+        boxShadow: boardShadows,
         animationDuration: const Duration(milliseconds: 150),
         pieceAssets: boardPrefs.pieceSet.assets,
         colorScheme: boardPrefs.boardTheme.colors,

diff --git a/pubspec.lock b/pubspec.lock
@@ -181,10 +181,10 @@ packages:
     dependency: "direct main"
     description:
       name: chessground
-      sha256: "5d8969f5f05aae3ca54edf7365c86701b1ca40bc67ef12c53724ab06f7f84c94"
+      sha256: "2532f645bdbe3e938bbb34a9cd4c7fd0d0cde375bcf4cab59a0245ed53793cff"
       url: "https://pub.dev"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.1"
   ci:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -11,7 +11,7 @@ environment:
 dependencies:
   async: ^2.10.0
   cached_network_image: ^3.2.2
-  chessground: ^2.5.0
+  chessground: ^2.6.1
   collection: ^1.17.0
   connectivity_plus: ^6.0.2
   crypto: ^3.0.3