refactor: update team selection UI (#310)

* feat: update the TeamSelectionPage UI

* fix: assets gen file

* update mobile layout and assets

* update gradient animation

* add dash android android assets

* refactor: add animations and correct layouts

* rename name field

* remove unused assets

* add team classes

* update tests

* set images prefix in test

* set images prefix in more tests

* add team tests and remove failing zoom tests

* remove unused imports

api/packages/game_domain/lib/src/models/mascots.dart

@@ -1,16 +1,16 @@
 /// {@template mascots}
-/// Google Mascots enum
+/// Google Mascots enum.
 /// {@endtemplate}
 enum Mascots {
-  /// Flutter Dash mascot
+  /// Flutter Dash mascot.
   dash,
 
-  /// Firebase Sparky mascot
+  /// Firebase Sparky mascot.
   sparky,
 
-  /// Chrome Dino mascot
-  dino,
-
-  /// Android mascot
+  /// Android mascot.
   android,
+
+  /// Chrome Dino mascot.
+  dino;
 }

lib/crossword/game/crossword_game.dart

@@ -8,6 +8,7 @@ import 'package:flame/extensions.dart';
 import 'package:flame/game.dart';
 import 'package:flutter/foundation.dart';
 import 'package:game_domain/game_domain.dart';
+import 'package:io_crossword/assets/assets.gen.dart';
 import 'package:io_crossword/crossword/crossword.dart';
 import 'package:io_crossword/player/player.dart';
 import 'package:io_crossword/word_selection/word_selection.dart';
@@ -50,7 +51,7 @@ class CrosswordGame extends FlameGame
     await super.onLoad();
 
     // TODO(erickzanardo): Use the assets cubit instead
-    lettersSprite = await images.load('letters.png');
+    lettersSprite = await images.load(Assets.images.letters.path);
 
     sectionSize = state.sectionSize * cellSize;
 

lib/team_selection/cubit/team_selection_cubit.dart

@@ -1,9 +1,29 @@
 import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flame/cache.dart';
+import 'package:flame/flame.dart';
+import 'package:game_domain/game_domain.dart';
+import 'package:io_crossword/team_selection/team_selection.dart';
 
-class TeamSelectionCubit extends Cubit<int> {
-  TeamSelectionCubit() : super(0);
+part 'team_selection_state.dart';
+
+class TeamSelectionCubit extends Cubit<TeamSelectionState> {
+  TeamSelectionCubit() : super(const TeamSelectionState());
+
+  Future<void> load() async {
+    emit(state.copyWith(status: TeamSelectionStatus.loading));
+    Flame.images = Images(prefix: '');
+    await Flame.images.loadAll([
+      Mascots.dash.teamMascot.idleAnimation.keyName,
+      Mascots.android.teamMascot.platformAnimation.keyName,
+    ]);
+
+    if (!isClosed) {
+      emit(state.copyWith(status: TeamSelectionStatus.loadingComplete));
+    }
+  }
 
   void selectTeam(int teamIndex) {
-    emit(teamIndex);
+    emit(state.copyWith(index: teamIndex));
   }
 }

lib/team_selection/cubit/team_selection_state.dart

@@ -0,0 +1,34 @@
+part of 'team_selection_cubit.dart';
+
+enum TeamSelectionStatus {
+  loading,
+
+  loadingComplete,
+}
+
+class TeamSelectionState extends Equatable {
+  const TeamSelectionState({
+    this.status = TeamSelectionStatus.loading,
+    this.index = 0,
+  });
+
+  final TeamSelectionStatus status;
+
+  final int index;
+
+  TeamSelectionState copyWith({
+    TeamSelectionStatus? status,
+    int? index,
+  }) {
+    return TeamSelectionState(
+      status: status ?? this.status,
+      index: index ?? this.index,
+    );
+  }
+
+  @override
+  List<Object> get props => [
+        status,
+        index,
+      ];
+}

lib/team_selection/team_selection.dart

@@ -2,4 +2,6 @@
 library;
 
 export 'cubit/team_selection_cubit.dart';
+export 'teams/teams.dart';
 export 'view/view.dart';
+export 'widgets/widgets.dart';

lib/team_selection/teams/android_team.dart

@@ -0,0 +1,15 @@
+import 'package:io_crossword/assets/assets.gen.dart';
+import 'package:io_crossword/team_selection/teams/team.dart';
+
+class AndroidTeam extends Team {
+  const AndroidTeam();
+
+  @override
+  String get name => 'Android';
+
+  @override
+  AssetGenImage get idleAnimation => Assets.anim.dashIdle;
+
+  @override
+  AssetGenImage get platformAnimation => Assets.anim.androidPlatform;
+}

lib/team_selection/teams/dash_team.dart

@@ -0,0 +1,15 @@
+import 'package:io_crossword/assets/assets.gen.dart';
+import 'package:io_crossword/team_selection/teams/team.dart';
+
+class DashTeam extends Team {
+  const DashTeam();
+
+  @override
+  String get name => 'Dash';
+
+  @override
+  AssetGenImage get idleAnimation => Assets.anim.dashIdle;
+
+  @override
+  AssetGenImage get platformAnimation => Assets.anim.androidPlatform;
+}

lib/team_selection/teams/dino_team.dart

@@ -0,0 +1,15 @@
+import 'package:io_crossword/assets/assets.gen.dart';
+import 'package:io_crossword/team_selection/teams/team.dart';
+
+class DinoTeam extends Team {
+  const DinoTeam();
+
+  @override
+  String get name => 'Dino';
+
+  @override
+  AssetGenImage get idleAnimation => Assets.anim.dashIdle;
+
+  @override
+  AssetGenImage get platformAnimation => Assets.anim.androidPlatform;
+}

lib/team_selection/teams/sparky_team.dart

@@ -0,0 +1,15 @@
+import 'package:io_crossword/assets/assets.gen.dart';
+import 'package:io_crossword/team_selection/teams/team.dart';
+
+class SparkyTeam extends Team {
+  const SparkyTeam();
+
+  @override
+  String get name => 'Sparky';
+
+  @override
+  AssetGenImage get idleAnimation => Assets.anim.dashIdle;
+
+  @override
+  AssetGenImage get platformAnimation => Assets.anim.androidPlatform;
+}

lib/team_selection/teams/team.dart

@@ -0,0 +1,19 @@
+import 'package:equatable/equatable.dart';
+import 'package:io_crossword/assets/assets.dart';
+
+abstract class Team extends Equatable {
+  const Team();
+
+  String get name;
+
+  AssetGenImage get idleAnimation;
+
+  AssetGenImage get platformAnimation;
+
+  @override
+  List<Object> get props => [
+        name,
+        idleAnimation,
+        platformAnimation,
+      ];
+}

lib/team_selection/teams/teams.dart

@@ -0,0 +1,5 @@
+export 'android_team.dart';
+export 'dash_team.dart';
+export 'dino_team.dart';
+export 'sparky_team.dart';
+export 'team.dart';