lib/presentation/views/main_menu/create_game/create_game_view.dart

@@ -4,10 +4,11 @@ import 'package:game_tracker/core/enums.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/game.dart';
 import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_group_view.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_ruleset_view.dart';
-import 'package:game_tracker/presentation/widgets/app_skeleton.dart';
 import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
+import 'package:game_tracker/presentation/widgets/player_selection.dart';
 import 'package:game_tracker/presentation/widgets/text_input/text_input_field.dart';
 import 'package:provider/provider.dart';
 
@@ -19,12 +20,23 @@ class CreateGameView extends StatefulWidget {
 }
 
 class _CreateGameViewState extends State<CreateGameView> {
+  /// Reference to the app database
   late final AppDatabase db;
+
+  /// Futures to load all groups and players from the database
   late Future<List<Group>> _allGroupsFuture;
+
+  /// Future to load all players from the database
+  late Future<List<Player>> _allPlayersFuture;
+
+  /// Controller for the game name input field
   final TextEditingController _gameNameController = TextEditingController();
 
   /// List of all groups from the database
-  late final List<Group> groupsList;
+  List<Group> groupsList = [];
+
+  /// List of all players from the database
+  List<Player> playerList = [];
 
   /// The currently selected group
   Group? selectedGroup;
@@ -40,8 +52,6 @@ class _CreateGameViewState extends State<CreateGameView> {
   /// the [ChooseRulesetView]
   int selectedRulesetIndex = -1;
 
-  bool isLoading = true;
-
   /// List of available rulesets with their display names and descriptions
   /// as tuples of (Ruleset, String, String)
   List<(Ruleset, String, String)> rulesets = [
@@ -73,16 +83,11 @@ class _CreateGameViewState extends State<CreateGameView> {
     db = Provider.of<AppDatabase>(context, listen: false);
 
     _allGroupsFuture = db.groupDao.getAllGroups();
+    _allPlayersFuture = db.playerDao.getAllPlayers();
 
-    Future.wait([_allGroupsFuture]).then((result) async {
-      await Future.delayed(const Duration(milliseconds: 250));
-      groupsList = result[0];
-
-      if (mounted) {
-        setState(() {
-          isLoading = false;
-        });
-      }
+    Future.wait([_allGroupsFuture, _allPlayersFuture]).then((result) async {
+      groupsList = result[0] as List<Group>;
+      playerList = result[1] as List<Player>;
     });
   }
 
@@ -100,16 +105,11 @@ class _CreateGameViewState extends State<CreateGameView> {
         centerTitle: true,
       ),
       body: SafeArea(
-        child: AppSkeleton(
-          enabled: isLoading,
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           children: [
             Container(
-                margin: const EdgeInsets.symmetric(
-                  horizontal: 12,
-                  vertical: 10,
-                ),
+              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
               child: TextInputField(
                 controller: _gameNameController,
                 hintText: 'Game name',
@@ -118,7 +118,6 @@ class _CreateGameViewState extends State<CreateGameView> {
                 },
               ),
             ),
-
             GestureDetector(
               onTap: () async {
                 selectedRuleset = await Navigator.of(context).push(
@@ -135,10 +134,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                 setState(() {});
               },
               child: Container(
-                  margin: const EdgeInsets.symmetric(
-                    horizontal: 12,
-                    vertical: 5,
-                  ),
+                margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
                 padding: const EdgeInsets.symmetric(
                   vertical: 10,
                   horizontal: 15,
@@ -178,13 +174,18 @@ class _CreateGameViewState extends State<CreateGameView> {
                 selectedGroupIndex = groupsList.indexWhere(
                   (g) => g.id == selectedGroup?.id,
                 );
+                print('selectedGroup: $selectedGroup');
+                print(
+                  playerList
+                      .where(
+                        (p) => !selectedGroup!.members.any((m) => m.id == p.id),
+                      )
+                      .toList(),
+                );
                 setState(() {});
               },
               child: Container(
-                  margin: const EdgeInsets.symmetric(
-                    horizontal: 12,
-                    vertical: 5,
-                  ),
+                margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
                 padding: const EdgeInsets.symmetric(
                   vertical: 10,
                   horizontal: 15,
@@ -200,24 +201,31 @@ class _CreateGameViewState extends State<CreateGameView> {
                       ),
                     ),
                     const Spacer(),
-                      Text(
-                        selectedGroup == null ? 'None' : selectedGroup!.name,
-                      ),
+                    Text(selectedGroup == null ? 'None' : selectedGroup!.name),
                     const SizedBox(width: 10),
                     const Icon(Icons.arrow_forward_ios, size: 16),
                   ],
                 ),
               ),
             ),
-              Container(
-                decoration: CustomTheme.standardBoxDecoration,
-                width: MediaQuery.of(context).size.width * 0.95,
-                height: 400,
-                padding: const EdgeInsets.all(12),
-                margin: const EdgeInsets.symmetric(vertical: 10),
-                child: const Center(child: Text('PlayerComponent')),
+            Expanded(
+              child: PlayerSelection(
+                key: ValueKey(selectedGroup?.id ?? 'no_group'),
+                initialPlayers: selectedGroup == null
+                    ? playerList
+                    : playerList
+                          .where(
+                            (p) => !selectedGroup!.members.any(
+                              (m) => m.id == p.id,
                             ),
-              const Spacer(),
+                          )
+                          .toList(),
+                onChanged: (value) {
+                  print(value);
+                },
+              ),
+            ),
+
             CustomWidthButton(
               text: 'Create game',
               sizeRelativeToWidth: 0.95,
@@ -242,7 +250,6 @@ class _CreateGameViewState extends State<CreateGameView> {
           ],
         ),
       ),
-      ),
     );
   }
 

lib/presentation/widgets/player_selection.dart

@@ -11,8 +11,13 @@ import 'package:provider/provider.dart';
 
 class PlayerSelection extends StatefulWidget {
   final Function(List<Player> value) onChanged;
+  final List<Player> initialPlayers;
 
-  const PlayerSelection({super.key, required this.onChanged});
+  const PlayerSelection({
+    super.key,
+    required this.onChanged,
+    this.initialPlayers = const [],
+  });
 
   @override
   State<PlayerSelection> createState() => _PlayerSelectionState();
@@ -46,9 +51,14 @@ class _PlayerSelectionState extends State<PlayerSelection> {
     suggestedPlayers = skeletonData;
     _allPlayersFuture.then((loadedPlayers) {
       setState(() {
+        if (widget.initialPlayers.isNotEmpty) {
+          allPlayers = [...widget.initialPlayers];
+          suggestedPlayers = [...widget.initialPlayers];
+        } else {
           loadedPlayers.sort((a, b) => a.name.compareTo(b.name));
           allPlayers = [...loadedPlayers];
           suggestedPlayers = [...loadedPlayers];
+        }
       });
     });
   }