liquid-development/game-tracker
3
0
Fork 0
Code Issues 13 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/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:provider/provider.dart';
import 'package:skeletonizer/skeletonizer.dart';
class CreateGameView extends StatefulWidget {
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
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 +88,175 @@ 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';
}
}
}