feat: implement scoreboard

lib/core/common/widgets/game_button.dart

@@ -2,7 +2,6 @@
 // TODO(Test): Rive causes this to fail, so, restore this test after the next
 //  Rive major update when the issue is fixed
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:rive/rive.dart';
 import 'package:sozzle/core/res/media.dart';
 
@@ -20,6 +19,8 @@ class _GameButtonState extends State<GameButton> {
   File? _riveFile;
 
   late RiveWidgetController controller;
+  late ViewModelInstance viewModelInstance;
+  ViewModelInstanceString? currentState;
 
   bool clicked = false;
 
@@ -32,13 +33,14 @@ class _GameButtonState extends State<GameButton> {
   @override
   void dispose() {
     controller.dispose();
+    currentState?.clearListeners();
+    viewModelInstance.dispose();
     super.dispose();
   }
 
   Future<void> _preload() async {
-    final data = await rootBundle.load(Media.gameButton);
-    _riveFile = await File.decode(
-      data.buffer.asUint8List(),
+    _riveFile = await File.asset(
+      Media.gameButton,
       riveFactory: Factory.rive,
     );
     controller = RiveWidgetController(_riveFile!);
@@ -47,11 +49,11 @@ class _GameButtonState extends State<GameButton> {
   }
 
   void _onInit(Artboard artboard) {
-    artboard.setText('buttonText', widget.text);
+    viewModelInstance = controller.dataBind(DataBind.auto());
 
-    final viewModelInstance = controller.dataBind(DataBind.auto());
+    viewModelInstance.string('buttonText')?.value = widget.text;
 
-    final currentState = viewModelInstance.string('currentState');
+    currentState = viewModelInstance.string('currentState');
     currentState?.addListener((value) {
       if (value == 'click') {
         clicked = true;

lib/core/common/widgets/scorecard.dart

@@ -0,0 +1,142 @@
+// coverage:ignore-file
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:rive/rive.dart';
+import 'package:sozzle/core/enums/rive_enums.dart';
+import 'package:sozzle/core/res/media.dart';
+import 'package:sozzle/src/theme/cubit/theme_cubit.dart';
+
+class Scorecard extends StatefulWidget {
+  const Scorecard({
+    required this.level,
+    required this.failedAttempts,
+    super.key,
+  });
+
+  final int level;
+  final String failedAttempts;
+
+  @override
+  State<Scorecard> createState() => _ScorecardState();
+}
+
+class _ScorecardState extends State<Scorecard> {
+  File? _riveFile;
+
+  late RiveWidgetController controller;
+  late ViewModelInstance viewModelInstance;
+
+  ViewModelInstanceNumber? _levelValue;
+  ViewModelInstanceString? _failedAttemptsValue;
+  ViewModelInstanceBoolean? _isDarkMode;
+  ViewModelInstanceEnum? _levelAlignment;
+  ViewModelInstanceEnum? _failedAttemptsAlignment;
+  ViewModelInstanceEnum? _boardLayout;
+  ViewModelInstanceEnum? _cardLayoutAlignment;
+  ViewModelInstanceEnum? _scoreSectionHeightScale;
+
+  bool clicked = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _preload();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    viewModelInstance.dispose();
+    _isDarkMode?.dispose();
+    _levelValue?.dispose();
+    _failedAttemptsValue?.dispose();
+    _levelAlignment?.dispose();
+    _failedAttemptsAlignment?.dispose();
+    _boardLayout?.dispose();
+    _cardLayoutAlignment?.dispose();
+    _scoreSectionHeightScale?.dispose();
+    super.dispose();
+  }
+
+  Future<void> _preload() async {
+    _riveFile = await File.asset(
+      Media.scorecard,
+      riveFactory: Factory.rive,
+    );
+
+    controller = RiveWidgetController(
+      _riveFile!,
+      artboardSelector: ArtboardSelector.byName('Scorecard'),
+    );
+    _onInit();
+    setState(() {});
+  }
+
+  void _onInit() {
+    viewModelInstance = controller.dataBind(DataBind.auto());
+
+    _levelValue = viewModelInstance.number('levelValue');
+    _levelValue?.value = widget.level.toDouble();
+
+    _failedAttemptsValue = viewModelInstance.string('failedAttemptsValue');
+    _failedAttemptsValue?.value = widget.failedAttempts;
+
+    _isDarkMode = viewModelInstance.boolean('isDarkMode');
+    _isDarkMode?.value = context.read<ThemeCubit>().state is ThemeStateDark;
+
+    _boardLayout = viewModelInstance.enumerator('scoreSectionLayout');
+
+    _levelAlignment = viewModelInstance.enumerator('levelAlignment');
+
+    _failedAttemptsAlignment = viewModelInstance.enumerator(
+      'failedAttemptsAlignment',
+    );
+
+    _cardLayoutAlignment = viewModelInstance.enumerator(
+      'cardLayoutAlignment',
+    );
+
+    _scoreSectionHeightScale = viewModelInstance.enumerator(
+      'scoreSectionHeightScale',
+    );
+  }
+
+  void renderLayout({required bool isNarrow}) {
+    if (isNarrow) {
+      _boardLayout?.value = LayoutDirection.column.value;
+      _failedAttemptsAlignment?.value = AlignmentType.topLeft.value;
+      _levelAlignment?.value = AlignmentType.bottomLeft.value;
+      _cardLayoutAlignment?.value = AlignmentType.bottomCenter.value;
+      _scoreSectionHeightScale?.value = LayoutScale.fill.value;
+    } else {
+      _boardLayout?.value = LayoutDirection.row.value;
+      _levelAlignment?.value = AlignmentType.center.value;
+      _failedAttemptsAlignment?.value = AlignmentType.center.value;
+      _cardLayoutAlignment?.value = AlignmentType.centerLeft.value;
+      _scoreSectionHeightScale?.value = LayoutScale.hug.value;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_riveFile == null) return const SizedBox.shrink();
+    return LayoutBuilder(
+      builder: (_, constraints) {
+        renderLayout(isNarrow: constraints.maxWidth < 330);
+        return BlocListener<ThemeCubit, ThemeState>(
+          listener: (context, state) {
+            _isDarkMode?.value = state is ThemeStateDark;
+          },
+          child: SizedBox(
+            height: 100,
+            child: RiveWidget(
+              controller: controller,
+              alignment: Alignment.centerLeft,
+              fit: Fit.layout,
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/core/enums/rive_enums.dart

@@ -0,0 +1,43 @@
+// coverage:ignore-file
+
+/// Represents the primary direction of layout.
+enum LayoutDirection {
+  column('Column'),
+  columnReverse('Column Reverse'),
+  row('Row'),
+  rowReverse('Row Reverse');
+
+  const LayoutDirection(this.value);
+
+  final String value;
+}
+
+/// Represents various types of alignment for layout.
+enum AlignmentType {
+  topLeft('Top Left'),
+  topCenter('Top Center'),
+  topRight('Top Right'),
+  centerLeft('Center Left'),
+  center('Center'),
+  centerRight('Center Right'),
+  bottomLeft('Bottom Left'),
+  bottomCenter('Bottom Center'),
+  bottomRight('Bottom Right'),
+  spaceBetweenStart('Space Between Start'),
+  spaceBetweenCenter('Space Between Center'),
+  spaceBetweenEnd('Space Between End');
+
+  const AlignmentType(this.value);
+
+  final String value;
+}
+
+/// Represents different scaling options for layout.
+enum LayoutScale {
+  fixed('Fixed'),
+  fill('Fill'),
+  hug('Hug');
+
+  const LayoutScale(this.value);
+  final String value;
+}

lib/core/extensions/string_extensions.dart

@@ -0,0 +1,41 @@
+// coverage:ignore-file
+
+import 'package:sozzle/core/enums/rive_enums.dart';
+
+extension StringExtensions on String {
+  /// Converts this string to an [AlignmentType] enum value.
+  ///
+  /// Returns `null` if no matching [AlignmentType] is found.
+  AlignmentType? toAlignmentType() {
+    for (final alignment in AlignmentType.values) {
+      if (alignment.value == this) {
+        return alignment;
+      }
+    }
+    return null;
+  }
+
+  /// Converts this string to a [LayoutDirection] enum value.
+  ///
+  /// Returns `null` if no matching [LayoutDirection] is found.
+  LayoutDirection? toLayoutDirection() {
+    for (final direction in LayoutDirection.values) {
+      if (direction.value == this) {
+        return direction;
+      }
+    }
+    return null;
+  }
+
+  /// Converts this string to a [LayoutScale] enum value.
+  ///
+  /// Returns `null` if no matching [LayoutScale] is found.
+  LayoutScale? toLayoutScale() {
+    for (final scale in LayoutScale.values) {
+      if (scale.value == this) {
+        return scale;
+      }
+    }
+    return null;
+  }
+}

lib/core/res/media.dart

@@ -11,6 +11,7 @@ sealed class Media {
   // Rive
   static const lake = '$_baseRive/small_lake_on_a_rainy_day.riv';
   static const space = '$_baseRive/space.riv';
-  static const animatedHint = '$_baseRive/bulb.riv';
+  static const animatedHint = '$_baseRive/hint.riv';
   static const gameButton = '$_baseRive/game_button.riv';
+  static const scorecard = '$_baseRive/scorecard.riv';
 }

lib/src/game_play/view/components/game_play_board.dart

@@ -6,18 +6,27 @@ import 'package:sozzle/src/game_play/bloc/game_play_bloc.dart';
 import 'package:sozzle/src/theme/cubit/theme_cubit.dart';
 import 'package:sozzle/src/user_stats/user_stats.dart';
 
-class GamePlayBoard extends StatelessWidget {
+class GamePlayBoard extends StatefulWidget {
   const GamePlayBoard(this.levelData, {super.key});
 
   final LevelData levelData;
 
   @override
-  Widget build(BuildContext context) {
-    final theme = BlocProvider.of<ThemeCubit>(context).state;
+  State<GamePlayBoard> createState() => _GamePlayBoardState();
+}
 
-    final gridSize = GridSize(levelData.boardWidth, levelData.boardHeight);
+class _GamePlayBoardState extends State<GamePlayBoard> {
+  late final GridBoardController controller;
 
-    final cells = levelData.boardData.map(
+  @override
+  void initState() {
+    super.initState();
+    final gridSize = GridSize(
+      widget.levelData.boardWidth,
+      widget.levelData.boardHeight,
+    );
+
+    final cells = widget.levelData.boardData.map(
       (e) {
         return GridCell(
           controller: GridCellController(),
@@ -34,12 +43,23 @@ class GamePlayBoard extends StatelessWidget {
       },
     ).toList();
 
-    final controller = GridBoardController(
+    controller = GridBoardController(
       gridBoardProperties: GridBoardProperties(
         gridSize: gridSize,
       ),
       cells: cells,
     );
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = BlocProvider.of<ThemeCubit>(context).state;
     return BlocListener<GamePlayBloc, GamePlayState>(
       listener: (context, gameState) {
         if (gameState is LetterRevealed) {
@@ -56,8 +76,7 @@ class GamePlayBoard extends StatelessWidget {
           }
         }
       },
-      child: SizedBox(
-        width: MediaQuery.of(context).size.width - 50,
+      child: Center(
         child: GridBoard(
           backgroundColor: theme.backgroundColor,
           controller: controller,