liquid-development/game-tracker
3
0
Fork 0
Code Issues 14 Pull Requests 6 Actions Releases 1 Activity

Added Skeleton Loading

Browse Source
This commit is contained in:
Felix Kirchner
2025-11-24 15:17:46 +01:00
parent 093c527591
commit 3afae89234
1 changed files with 159 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
lib/presentation/views/main_menu/create_game/create_game_view.dart
View File

@@ -4,12 +4,12 @@ import 'package:game_tracker/core/enums.dart';
import 'package:game_tracker/data/db/database.dart'; import 'package:game_tracker/data/db/database.dart';
import 'package:game_tracker/data/dto/game.dart'; import 'package:game_tracker/data/dto/game.dart';
import 'package:game_tracker/data/dto/group.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_group_view.dart';
import 'package:game_tracker/presentation/views/main_menu/create_game/choose_ruleset_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/buttons/custom_width_button.dart';
import 'package:game_tracker/presentation/widgets/text_input_field.dart'; import 'package:game_tracker/presentation/widgets/text_input_field.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:skeletonizer/skeletonizer.dart';
class CreateGameView extends StatefulWidget { class CreateGameView extends StatefulWidget {
const CreateGameView({super.key}); const CreateGameView({super.key});
@@ -55,24 +55,15 @@ class _CreateGameViewState extends State<CreateGameView> {
), ),
]; ];
late final List<Player> skeletonData = List.filled(
7,
Player(name: 'Player 0'),
);
@override @override
void initState() { void initState() {
super.initState(); super.initState();
db = Provider.of<AppDatabase>(context, listen: false); db = Provider.of<AppDatabase>(context, listen: false);
_gameNameController.addListener(() {
setState(() {});
});
_allGroupsFuture = db.groupDao.getAllGroups(); _allGroupsFuture = db.groupDao.getAllGroups();
Future.wait([_allGroupsFuture]).then((result) async { Future.wait([_allGroupsFuture]).then((result) async {
await Future.delayed(const Duration(milliseconds: 1000)); await Future.delayed(const Duration(milliseconds: 250));
groupsList = result[0]; groupsList = result[0];
if (mounted) { if (mounted) {
@@ -97,126 +88,175 @@ class _CreateGameViewState extends State<CreateGameView> {
centerTitle: true, centerTitle: true,
), ),
body: SafeArea( body: SafeArea(
child: Column( child: Skeletonizer(
mainAxisAlignment: MainAxisAlignment.start, effect: PulseEffect(
children: [ from: Colors.grey[800]!,
Container( to: Colors.grey[600]!,
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), duration: const Duration(milliseconds: 800),
child: TextInputField( ),
controller: _gameNameController, enabled: isLoading,
hintText: 'Game name', enableSwitchAnimation: true,
onChanged: (value) { 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(() {}); setState(() {});
}, },
), child: Container(
), margin: const EdgeInsets.symmetric(
GestureDetector( horizontal: 12,
onTap: () async { vertical: 5,
selectedRuleset = await Navigator.of(context).push( ),
MaterialPageRoute( padding: const EdgeInsets.symmetric(
builder: (context) => ChooseRulesetView( vertical: 10,
rulesets: rulesets, horizontal: 15,
initialRulesetIndex: selectedRulesetIndex, ),
), 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, GestureDetector(
horizontal: 15, onTap: () async {
), selectedGroup = await Navigator.of(context).push(
decoration: CustomTheme.standardBoxDecoration, MaterialPageRoute(
child: Row( builder: (context) => ChooseGroupView(
children: [ groups: groupsList,
const Text( initialGroupIndex: selectedGroupIndex,
'Ruleset',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
), ),
), ),
const Spacer(), );
Text(selectedRuleset == null ? 'None' : 'Single Winner'), selectedGroupIndex = groupsList.indexWhere(
const SizedBox(width: 10), (g) => g.id == selectedGroup?.id,
const Icon(Icons.arrow_forward_ios, size: 16), );
], setState(() {});
), },
), child: Container(
), margin: const EdgeInsets.symmetric(
GestureDetector( horizontal: 12,
onTap: () async { vertical: 5,
selectedGroup = await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ChooseGroupView(
groups: groupsList,
initialGroupIndex: selectedGroupIndex,
),
), ),
); padding: const EdgeInsets.symmetric(
selectedGroupIndex = groupsList.indexWhere( vertical: 10,
(g) => g.id == selectedGroup?.id, horizontal: 15,
); ),
setState(() {}); decoration: CustomTheme.standardBoxDecoration,
}, child: Row(
child: Container( children: [
margin: const EdgeInsets.symmetric( const Text(
horizontal: 12, 'Group',
vertical: 10, style: TextStyle(
), fontSize: 16,
padding: const EdgeInsets.symmetric( fontWeight: FontWeight.bold,
vertical: 10, ),
horizontal: 15,
),
decoration: CustomTheme.standardBoxDecoration,
child: Row(
children: [
const Text(
'Group',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
), ),
), const Spacer(),
const Spacer(), Text(
Text(selectedGroup == null ? 'None' : selectedGroup!.name), selectedGroup == null ? 'None' : selectedGroup!.name,
const SizedBox(width: 10), ),
const Icon(Icons.arrow_forward_ios, size: 16), const SizedBox(width: 10),
], const Icon(Icons.arrow_forward_ios, size: 16),
],
),
), ),
), ),
), Container(
const Spacer(), decoration: CustomTheme.standardBoxDecoration,
CustomWidthButton( width: MediaQuery.of(context).size.width * 0.95,
text: 'Create game', height: 400,
sizeRelativeToWidth: 0.95, padding: const EdgeInsets.all(12),
buttonType: ButtonType.primary, margin: const EdgeInsets.symmetric(vertical: 10),
onPressed: child: const Center(child: Text('PlayerComponent')),
(_gameNameController.text.isEmpty || ),
selectedGroup == null || const Spacer(),
selectedRuleset == null) CustomWidthButton(
? null text: 'Create game',
: () async { sizeRelativeToWidth: 0.95,
Game game = Game( buttonType: ButtonType.primary,
name: _gameNameController.text.trim(), onPressed:
createdAt: DateTime.now(), (_gameNameController.text.isEmpty ||
group: selectedGroup!, selectedGroup == null ||
); selectedRuleset == null)
print('Creating game: ${game.name}'); ? null
}, : () async {
), Game game = Game(
const SizedBox(height: 20), 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';
}
}
} }