feat(loadout): add functionality to view other player loadouts

User can go to Player Champions screen, from there he can visit other player loadouts

resolves #275

lib/data_classes/champions/player_champions.dart

@@ -1,15 +1,17 @@
 class PlayerChampionsSortData {
  final String iconUrl;
  final int sortedIndex;
+ final String name;
  final String? iconBlurHash;
 
  PlayerChampionsSortData({
  required this.iconUrl,
  required this.sortedIndex,
+ required this.name,
  this.iconBlurHash,
  });
 
  int compareTo(PlayerChampionsSortData other) {
- return sortedIndex - other.sortedIndex;
+ return name.compareTo(other.name);
  }
 }

lib/data_classes/loadout/index.dart

@@ -3,4 +3,5 @@ export './loadout.dart'
  CreateLoadoutScreenArguments,
  LoadoutValidationResult,
  DraftLoadout,
- ShowLoadoutDetailsOptions;
+ ShowLoadoutDetailsOptions,
+ LoadoutScreenArguments;

lib/data_classes/loadout/loadout.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart' hide Card;
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:paladinsedge/models/index.dart'
- show Champion, Loadout, LoadoutCard, Card;
+ show Champion, Loadout, LoadoutCard, Card, Player;
 
 part 'loadout.freezed.dart';
 
@@ -54,6 +54,16 @@ class DraftLoadout with _$DraftLoadout {
  }
 }
 
+class LoadoutScreenArguments {
+ final Champion champion;
+ final Player? player;
+
+ LoadoutScreenArguments({
+ required this.champion,
+ this.player,
+ });
+}
+
 class ShowLoadoutDetailsOptions {
  final BuildContext context;
  final Champion champion;

lib/screens/champion_detail/champion_detail.dart

@@ -54,8 +54,14 @@ class ChampionDetail extends HookConsumerWidget {
  );
 
  final _onLoadoutPress = useCallback(
- () => Navigator.of(context)
- .pushNamed(screens.Loadouts.routeName, arguments: champion),
+ () {
+ Navigator.of(context).pushNamed(
+ screens.Loadouts.routeName,
+ arguments: data_classes.LoadoutScreenArguments(
+ champion: champion,
+ ),
+ );
+ },
  [],
  );
 

lib/screens/loadouts/loadouts.dart

@@ -19,15 +19,21 @@ class Loadouts extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
  // Providers
  final loadoutProvider = ref.read(providers.loadout);
- final playerId = ref.read(providers.auth).player?.playerId;
+ final userPlayerId = ref.read(providers.auth).player?.playerId;
  final loadouts = ref.watch(providers.loadout.select((_) => _.loadouts));
  final isGettingLoadouts =
  ref.watch(providers.loadout.select((_) => _.isGettingLoadouts));
 
  // Variables
  final textTheme = Theme.of(context).textTheme;
- final champion =
- ModalRoute.of(context)?.settings.arguments as models.Champion;
+ final arguments = ModalRoute.of(context)?.settings.arguments
+ as data_classes.LoadoutScreenArguments;
+ final champion = arguments.champion;
+ final otherPlayer = arguments.player;
+ final otherPlayerId = otherPlayer?.playerId;
+ final isOtherPlayer = otherPlayerId != userPlayerId;
+ final playerId = otherPlayerId ?? userPlayerId;
+
  final crossAxisCount = utilities.responsiveCondition(
  context,
  desktop: 2,
@@ -61,23 +67,29 @@ class Loadouts extends HookConsumerWidget {
 
  // Methods
  final onCreate = useCallback(
- () => Navigator.of(context).pushNamed(
- screens.CreateLoadout.routeName,
- arguments:
- data_classes.CreateLoadoutScreenArguments(champion: champion),
- ),
- [],
+ () {
+ if (isOtherPlayer) return;
+ Navigator.of(context).pushNamed(
+ screens.CreateLoadout.routeName,
+ arguments:
+ data_classes.CreateLoadoutScreenArguments(champion: champion),
+ );
+ },
+ [isOtherPlayer],
  );
 
  final onEdit = useCallback(
- (models.Loadout loadout) => Navigator.of(context).pushNamed(
- screens.CreateLoadout.routeName,
- arguments: data_classes.CreateLoadoutScreenArguments(
- champion: champion,
- loadout: loadout,
- ),
- ),
- [],
+ (models.Loadout loadout) {
+ if (isOtherPlayer) return;
+ Navigator.of(context).pushNamed(
+ screens.CreateLoadout.routeName,
+ arguments: data_classes.CreateLoadoutScreenArguments(
+ champion: champion,
+ loadout: loadout,
+ ),
+ );
+ },
+ [isOtherPlayer],
  );
 
  final onRefresh = useCallback(
@@ -94,42 +106,45 @@ class Loadouts extends HookConsumerWidget {
  );
 
  return Scaffold(
- floatingActionButton: SizedBox(
- height: 40,
- width: 90,
- child: AnimatedSlide(
- offset:
- hideLoadoutFab.value ? const Offset(0, 2) : const Offset(0, 0),
- duration: const Duration(milliseconds: 250),
- child: FloatingActionButton(
- onPressed: onCreate,
- elevation: 4,
- hoverElevation: 6,
- focusElevation: 8,
- backgroundColor: theme.themeMaterialColor,
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- const Icon(
- Icons.add,
- size: 18,
- color: Colors.white,
- ),
- const SizedBox(width: 2),
- Text(
- 'Create',
- style: textTheme.bodyText2?.copyWith(
- fontSize: 14,
- color: Colors.white,
+ floatingActionButton: isOtherPlayer
+ ? null
+ : SizedBox(
+ height: 40,
+ width: 90,
+ child: AnimatedSlide(
+ offset: hideLoadoutFab.value
+ ? const Offset(0, 2)
+ : const Offset(0, 0),
+ duration: const Duration(milliseconds: 250),
+ child: FloatingActionButton(
+ onPressed: onCreate,
+ elevation: 4,
+ hoverElevation: 6,
+ focusElevation: 8,
+ backgroundColor: theme.themeMaterialColor,
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ const Icon(
+ Icons.add,
+ size: 18,
+ color: Colors.white,
+ ),
+ const SizedBox(width: 2),
+ Text(
+ 'Create',
+ style: textTheme.bodyText2?.copyWith(
+ fontSize: 14,
+ color: Colors.white,
+ ),
+ ),
+ const SizedBox(width: 10),
+ ],
  ),
+ isExtended: true,
  ),
- const SizedBox(width: 10),
- ],
+ ),
  ),
- isExtended: true,
- ),
- ),
- ),
  body: widgets.Refresh(
  edgeOffset: utilities.getTopEdgeOffset(context),
  onRefresh: onRefresh,
@@ -142,9 +157,11 @@ class Loadouts extends HookConsumerWidget {
  pinned: constants.isWeb,
  title: Column(
  children: [
- const Text('Loadouts'),
+ const Text('Your Loadouts'),
  Text(
- champion.name,
+ isOtherPlayer
+ ? '${otherPlayer!.name} - ${champion.name}'
+ : champion.name,
  style: const TextStyle(fontSize: 12),
  ),
  ],

lib/screens/player_champions/player_champions.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:paladinsedge/data_classes/index.dart' as data_classes;
+import 'package:paladinsedge/models/index.dart' as models;
 import 'package:paladinsedge/providers/index.dart' as providers;
+import 'package:paladinsedge/screens/index.dart' as screens;
 import 'package:paladinsedge/screens/player_champions/player_champions_data_source.dart';
 import 'package:paladinsedge/widgets/index.dart' as widgets;
 import 'package:syncfusion_flutter_datagrid/datagrid.dart';
@@ -14,6 +17,7 @@ class PlayerChampions extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
  // Providers
+ final player = ref.watch(providers.players.select((_) => _.playerData));
  final playerChampions = ref.watch(
  providers.champions.select((_) => _.playerChampions),
  );
@@ -28,12 +32,28 @@ class PlayerChampions extends HookConsumerWidget {
  final _playerChampionsDataSource =
  useState<PlayerChampionsDataSource?>(null);
 
+ // Methods
+ final onLoadoutPress = useCallback(
+ (models.Champion champion) {
+ Navigator.of(context).pushNamed(
+ screens.Loadouts.routeName,
+ arguments: data_classes.LoadoutScreenArguments(
+ champion: champion,
+ player: player,
+ ),
+ );
+ },
+ [player],
+ );
+
  // Effects
  useEffect(
  () {
- if (playerChampions == null) return null;
+ if (player == null || playerChampions == null) return null;
 
  _playerChampionsDataSource.value = PlayerChampionsDataSource(
+ player: player,
+ onLoadoutPress: onLoadoutPress,
  champions: champions,
  playerChampions: playerChampions,
  );
@@ -45,7 +65,16 @@ class PlayerChampions extends HookConsumerWidget {
 
  return Scaffold(
  appBar: AppBar(
- title: const Text('Player Champions'),
+ title: Column(
+ children: [
+ const Text('Player Champions'),
+ if (player != null)
+ Text(
+ player.name,
+ style: const TextStyle(fontSize: 12),
+ ),
+ ],
+ ),
  ),
  body: _playerChampionsDataSource.value == null
  ? const Center(
@@ -103,6 +132,7 @@ class PlayerChampions extends HookConsumerWidget {
  ),
  GridColumn(
  columnName: 'Play Time',
+ width: 140,
  autoFitPadding: const EdgeInsets.symmetric(horizontal: 10),
  label: Center(
  child: Text('Play Time', style: headerTextStyle),
@@ -120,6 +150,14 @@ class PlayerChampions extends HookConsumerWidget {
  child: Text('Last Played', style: headerTextStyle),
  ),
  ),
+ GridColumn(
+ columnName: 'Loadouts',
+ allowSorting: false,
+ width: 160,
+ label: Center(
+ child: Text('Loadouts', style: headerTextStyle),
+ ),
+ ),
  ],
  ),
  );