moved input widgets to new folder

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

@@ -27,37 +27,93 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: CustomTheme.backgroundColor,
-      appBar: AppBar(
+    return DefaultTabController(
+      length: 2,
+      initialIndex: 0,
+      child: Scaffold(
         backgroundColor: CustomTheme.backgroundColor,
-        scrolledUnderElevation: 0,
-        title: const Text(
-          'Choose Group',
-          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+        appBar: AppBar(
+          backgroundColor: CustomTheme.backgroundColor,
+          scrolledUnderElevation: 0,
+          title: const Text(
+            'Choose Gametype',
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+          ),
+          centerTitle: true,
+        ),
+        body: Column(
+          children: [
+            Container(
+              color: CustomTheme.backgroundColor,
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+              child: TabBar(
+                padding: const EdgeInsets.symmetric(horizontal: 5),
+                // Label Settings
+                labelStyle: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+                labelColor: Colors.white,
+                unselectedLabelStyle: const TextStyle(fontSize: 14),
+                unselectedLabelColor: Colors.white70,
+                // Indicator Settings
+                indicator: CustomTheme.standardBoxDecoration,
+                indicatorSize: TabBarIndicatorSize.tab,
+                indicatorWeight: 1,
+                indicatorPadding: const EdgeInsets.symmetric(
+                  horizontal: 20,
+                  vertical: 0,
+                ),
+                // Divider Settings
+                dividerHeight: 0,
+                tabs: const [
+                  Tab(text: 'Rulesets'),
+                  Tab(text: 'Gametypes'),
+                ],
+              ),
+            ),
+            const Divider(
+              indent: 30,
+              endIndent: 30,
+              thickness: 3,
+              radius: BorderRadius.all(Radius.circular(12)),
+            ),
+            Expanded(
+              child: TabBarView(
+                children: [
+                  ListView.builder(
+                    padding: const EdgeInsets.only(bottom: 85),
+                    itemCount: widget.rulesets.length,
+                    itemBuilder: (BuildContext context, int index) {
+                      return RulesetListTile(
+                        onPressed: () async {
+                          setState(() {
+                            selectedRulesetIndex = index;
+                          });
+                          Future.delayed(const Duration(milliseconds: 500), () {
+                            if (!context.mounted) return;
+                            Navigator.of(
+                              context,
+                            ).pop(widget.rulesets[index].$1);
+                          });
+                        },
+                        title: widget.rulesets[index].$2,
+                        description: widget.rulesets[index].$3,
+                        isHighlighted: selectedRulesetIndex == index,
+                      );
+                    },
+                  ),
+                  const Center(
+                    child: Text(
+                      'No gametypes available',
+                      style: TextStyle(color: Colors.white70),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
         ),
-        centerTitle: true,
-      ),
-      body: ListView.builder(
-        padding: const EdgeInsets.only(bottom: 85),
-        itemCount: widget.rulesets.length,
-        itemBuilder: (BuildContext context, int index) {
-          return RulesetListTile(
-            onPressed: () async {
-              setState(() {
-                selectedRulesetIndex = index;
-              });
-
-              Future.delayed(const Duration(milliseconds: 500), () {
-                if (!context.mounted) return;
-                Navigator.of(context).pop(widget.rulesets[index].$1);
-              });
-            },
-            title: widget.rulesets[index].$2,
-            description: widget.rulesets[index].$3,
-            isHighlighted: selectedRulesetIndex == index,
-          );
-        },
       ),
     );
   }

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

@@ -4,12 +4,12 @@ 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/buttons/custom_width_button.dart';
-import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/text_input/text_input_field.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class CreateGameView extends StatefulWidget {
   const CreateGameView({super.key});
@@ -19,19 +19,31 @@ class CreateGameView extends StatefulWidget {
 }
 
 class _CreateGameViewState extends State<CreateGameView> {
-  final TextEditingController _gameNameController = TextEditingController();
   late final AppDatabase db;
   late Future<List<Group>> _allGroupsFuture;
+  final TextEditingController _gameNameController = TextEditingController();
 
+  /// List of all groups from the database
   late final List<Group> groupsList;
 
+  /// The currently selected group
   Group? selectedGroup;
+
+  /// The index of the currently selected group in [groupsList] to mark it in
+  /// the [ChooseGroupView]
   int selectedGroupIndex = -1;
+
+  /// The currently selected ruleset
   Ruleset? selectedRuleset;
+
+  /// The index of the currently selected ruleset in [rulesets] to mark it in
+  /// 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 = [
     (
       Ruleset.singleWinner,
@@ -55,24 +67,15 @@ class _CreateGameViewState extends State<CreateGameView> {
     ),
   ];
 
-  late final List<Player> skeletonData = List.filled(
-    7,
-    Player(name: 'Player 0'),
-  );
-
   @override
   void initState() {
     super.initState();
     db = Provider.of<AppDatabase>(context, listen: false);
 
-    _gameNameController.addListener(() {
-      setState(() {});
-    });
-
     _allGroupsFuture = db.groupDao.getAllGroups();
 
     Future.wait([_allGroupsFuture]).then((result) async {
-      await Future.delayed(const Duration(milliseconds: 1000));
+      await Future.delayed(const Duration(milliseconds: 250));
       groupsList = result[0];
 
       if (mounted) {
@@ -97,126 +100,176 @@ class _CreateGameViewState extends State<CreateGameView> {
         centerTitle: true,
       ),
       body: SafeArea(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.start,
-          children: [
-            Container(
-              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-              child: TextInputField(
-                controller: _gameNameController,
-                hintText: 'Game name',
-                onChanged: (value) {
+        child: Skeletonizer(
+          effect: PulseEffect(
+            from: Colors.grey[800]!,
+            to: Colors.grey[600]!,
+            duration: const Duration(milliseconds: 800),
+          ),
+          enabled: isLoading,
+          enableSwitchAnimation: true,
+          switchAnimationConfig: const SwitchAnimationConfig(
+            duration: Duration(milliseconds: 200),
+            switchInCurve: Curves.linear,
+            switchOutCurve: Curves.linear,
+            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+            layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+          ),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Container(
+                margin: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
+                child: TextInputField(
+                  controller: _gameNameController,
+                  hintText: 'Game name',
+                  onChanged: (value) {
+                    setState(() {});
+                  },
+                ),
+              ),
+
+              GestureDetector(
+                onTap: () async {
+                  selectedRuleset = await Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (context) => ChooseRulesetView(
+                        rulesets: rulesets,
+                        initialRulesetIndex: selectedRulesetIndex,
+                      ),
+                    ),
+                  );
+                  selectedRulesetIndex = rulesets.indexWhere(
+                    (r) => r.$1 == selectedRuleset,
+                  );
                   setState(() {});
                 },
-              ),
-            ),
-            GestureDetector(
-              onTap: () async {
-                selectedRuleset = await Navigator.of(context).push(
-                  MaterialPageRoute(
-                    builder: (context) => ChooseRulesetView(
-                      rulesets: rulesets,
-                      initialRulesetIndex: selectedRulesetIndex,
-                    ),
+                child: Container(
+                  margin: const EdgeInsets.symmetric(
+                    horizontal: 12,
+                    vertical: 5,
+                  ),
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 10,
+                    horizontal: 15,
+                  ),
+                  decoration: CustomTheme.standardBoxDecoration,
+                  child: Row(
+                    children: [
+                      const Text(
+                        'Ruleset',
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      const Spacer(),
+                      Text(
+                        selectedRuleset == null
+                            ? 'None'
+                            : translateRulesetToString(selectedRuleset!),
+                      ),
+                      const SizedBox(width: 10),
+                      const Icon(Icons.arrow_forward_ios, size: 16),
+                    ],
                   ),
-                );
-                selectedRulesetIndex = rulesets.indexWhere(
-                  (r) => r.$1 == selectedRuleset,
-                );
-                setState(() {});
-              },
-              child: Container(
-                margin: const EdgeInsets.symmetric(
-                  horizontal: 12,
-                  vertical: 10,
                 ),
-                padding: const EdgeInsets.symmetric(
-                  vertical: 10,
-                  horizontal: 15,
-                ),
-                decoration: CustomTheme.standardBoxDecoration,
-                child: Row(
-                  children: [
-                    const Text(
-                      'Ruleset',
-                      style: TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.bold,
+              ),
+              GestureDetector(
+                onTap: () async {
+                  selectedGroup = await Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (context) => ChooseGroupView(
+                        groups: groupsList,
+                        initialGroupIndex: selectedGroupIndex,
                       ),
                     ),
-                    const Spacer(),
-                    Text(selectedRuleset == null ? 'None' : 'Single Winner'),
-                    const SizedBox(width: 10),
-                    const Icon(Icons.arrow_forward_ios, size: 16),
-                  ],
-                ),
-              ),
-            ),
-            GestureDetector(
-              onTap: () async {
-                selectedGroup = await Navigator.of(context).push(
-                  MaterialPageRoute(
-                    builder: (context) => ChooseGroupView(
-                      groups: groupsList,
-                      initialGroupIndex: selectedGroupIndex,
-                    ),
+                  );
+                  selectedGroupIndex = groupsList.indexWhere(
+                    (g) => g.id == selectedGroup?.id,
+                  );
+                  setState(() {});
+                },
+                child: Container(
+                  margin: const EdgeInsets.symmetric(
+                    horizontal: 12,
+                    vertical: 5,
                   ),
-                );
-                selectedGroupIndex = groupsList.indexWhere(
-                  (g) => g.id == selectedGroup?.id,
-                );
-                setState(() {});
-              },
-              child: Container(
-                margin: const EdgeInsets.symmetric(
-                  horizontal: 12,
-                  vertical: 10,
-                ),
-                padding: const EdgeInsets.symmetric(
-                  vertical: 10,
-                  horizontal: 15,
-                ),
-                decoration: CustomTheme.standardBoxDecoration,
-                child: Row(
-                  children: [
-                    const Text(
-                      'Group',
-                      style: TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.bold,
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 10,
+                    horizontal: 15,
+                  ),
+                  decoration: CustomTheme.standardBoxDecoration,
+                  child: Row(
+                    children: [
+                      const Text(
+                        'Group',
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold,
+                        ),
                       ),
-                    ),
-                    const Spacer(),
-                    Text(selectedGroup == null ? 'None' : selectedGroup!.name),
-                    const SizedBox(width: 10),
-                    const Icon(Icons.arrow_forward_ios, size: 16),
-                  ],
+                      const Spacer(),
+                      Text(
+                        selectedGroup == null ? 'None' : selectedGroup!.name,
+                      ),
+                      const SizedBox(width: 10),
+                      const Icon(Icons.arrow_forward_ios, size: 16),
+                    ],
+                  ),
                 ),
               ),
-            ),
-            const Spacer(),
-            CustomWidthButton(
-              text: 'Create game',
-              sizeRelativeToWidth: 0.95,
-              buttonType: ButtonType.primary,
-              onPressed:
-                  (_gameNameController.text.isEmpty ||
-                      selectedGroup == null ||
-                      selectedRuleset == null)
-                  ? null
-                  : () async {
-                      Game game = Game(
-                        name: _gameNameController.text.trim(),
-                        createdAt: DateTime.now(),
-                        group: selectedGroup!,
-                      );
-                      print('Creating game: ${game.name}');
-                    },
-            ),
-            const SizedBox(height: 20),
-          ],
+              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')),
+              ),
+              const Spacer(),
+              CustomWidthButton(
+                text: 'Create game',
+                sizeRelativeToWidth: 0.95,
+                buttonType: ButtonType.primary,
+                onPressed:
+                    (_gameNameController.text.isEmpty ||
+                        selectedGroup == null ||
+                        selectedRuleset == null)
+                    ? null
+                    : () async {
+                        Game game = Game(
+                          name: _gameNameController.text.trim(),
+                          createdAt: DateTime.now(),
+                          group: selectedGroup!,
+                        );
+                        // TODO: Replace with navigation to GameResultView()
+                        print('Created game: $game');
+                        Navigator.pop(context);
+                      },
+              ),
+              const SizedBox(height: 20),
+            ],
+          ),
         ),
       ),
     );
   }
+
+  /// Translates a [Ruleset] enum value to its corresponding string representation.
+  String translateRulesetToString(Ruleset ruleset) {
+    switch (ruleset) {
+      case Ruleset.singleWinner:
+        return 'Single Winner';
+      case Ruleset.singleLoser:
+        return 'Single Loser';
+      case Ruleset.mostPoints:
+        return 'Most Points';
+      case Ruleset.lastPoints:
+        return 'Least Points';
+    }
+  }
 }

lib/presentation/views/main_menu/create_group_view.dart

@@ -5,8 +5,8 @@ import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/group.dart';
 import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
-import 'package:game_tracker/presentation/widgets/custom_search_bar.dart';
-import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/text_input/custom_search_bar.dart';
+import 'package:game_tracker/presentation/widgets/text_input/text_input_field.dart';
 import 'package:game_tracker/presentation/widgets/tiles/text_icon_list_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
 import 'package:game_tracker/presentation/widgets/top_centered_message.dart';

lib/presentation/widgets/tiles/ruleset_list_tile.dart

@@ -17,7 +17,6 @@ class RulesetListTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Use the callback directly so a null onPressed disables taps
     return GestureDetector(
       onTap: onPressed,
       child: AnimatedContainer(