527 lines
18 KiB
Dart
527 lines
18 KiB
Dart
import 'dart:async';
|
|
import 'dart:math';
|
|
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:animated_flip_counter/animated_flip_counter.dart';
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:material_symbols_icons/symbols.dart';
|
|
import 'package:matrix/matrix_api_lite/generated/model.dart';
|
|
|
|
import 'package:fluffychat/config/app_config.dart';
|
|
import 'package:fluffychat/l10n/l10n.dart';
|
|
import 'package:fluffychat/pangea/analytics_misc/learning_skills_enum.dart';
|
|
import 'package:fluffychat/pangea/analytics_misc/level_up/level_popup_progess_bar.dart';
|
|
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_banner.dart';
|
|
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_manager.dart';
|
|
import 'package:fluffychat/pangea/analytics_misc/level_up/star_rain_widget.dart';
|
|
import 'package:fluffychat/pangea/common/widgets/error_indicator.dart';
|
|
import 'package:fluffychat/pangea/common/widgets/full_width_dialog.dart';
|
|
import 'package:fluffychat/pangea/constructs/construct_repo.dart';
|
|
import 'package:fluffychat/pangea/languages/language_constants.dart';
|
|
import 'package:fluffychat/widgets/avatar.dart';
|
|
import 'package:fluffychat/widgets/matrix.dart';
|
|
import 'package:fluffychat/widgets/mxc_image.dart';
|
|
|
|
class LevelUpPopup extends StatefulWidget {
|
|
final Completer<ConstructSummary> constructSummaryCompleter;
|
|
const LevelUpPopup({
|
|
required this.constructSummaryCompleter,
|
|
super.key,
|
|
});
|
|
|
|
@override
|
|
State<LevelUpPopup> createState() => _LevelUpPopupState();
|
|
}
|
|
|
|
class _LevelUpPopupState extends State<LevelUpPopup> {
|
|
bool shouldShowRain = false;
|
|
|
|
void setShowRain(bool show) {
|
|
setState(() {
|
|
shouldShowRain = show;
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
FullWidthDialog(
|
|
maxWidth: 400,
|
|
maxHeight: 800,
|
|
dialogContent: Scaffold(
|
|
appBar: AppBar(
|
|
centerTitle: true,
|
|
title: kIsWeb
|
|
? Text(
|
|
L10n.of(context).youHaveLeveledUp,
|
|
style: const TextStyle(
|
|
color: AppConfig.gold,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
)
|
|
: null,
|
|
),
|
|
body: LevelUpPopupContent(
|
|
prevLevel: LevelUpManager.instance.prevLevel,
|
|
level: LevelUpManager.instance.level,
|
|
constructSummaryCompleter: widget.constructSummaryCompleter,
|
|
onRainTrigger: () => setShowRain(true),
|
|
),
|
|
),
|
|
),
|
|
if (shouldShowRain) const StarRainWidget(showBlast: true),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class LevelUpPopupContent extends StatefulWidget {
|
|
final int prevLevel;
|
|
final int level;
|
|
final Completer<ConstructSummary> constructSummaryCompleter;
|
|
|
|
final VoidCallback? onRainTrigger;
|
|
|
|
const LevelUpPopupContent({
|
|
super.key,
|
|
required this.prevLevel,
|
|
required this.level,
|
|
required this.constructSummaryCompleter,
|
|
this.onRainTrigger,
|
|
});
|
|
|
|
@override
|
|
State<LevelUpPopupContent> createState() => _LevelUpPopupContentState();
|
|
}
|
|
|
|
class _LevelUpPopupContentState extends State<LevelUpPopupContent>
|
|
with SingleTickerProviderStateMixin {
|
|
late final AnimationController _controller;
|
|
late final Future<Profile> profile;
|
|
|
|
int displayedLevel = -1;
|
|
Uri? avatarUrl;
|
|
final bool _hasBlastedConfetti = false;
|
|
|
|
String language =
|
|
MatrixState.pangeaController.userController.userL2Code?.toUpperCase() ??
|
|
LanguageKeys.unknownLanguage;
|
|
|
|
ConstructSummary? _constructSummary;
|
|
Object? _error;
|
|
bool _loading = true;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_loadConstructSummary();
|
|
LevelUpManager.instance.markPopupSeen();
|
|
displayedLevel = widget.prevLevel;
|
|
|
|
final client = Matrix.of(context).client;
|
|
client.fetchOwnProfile().then((profile) {
|
|
setState(() => avatarUrl = profile.avatarUrl);
|
|
});
|
|
|
|
_controller = AnimationController(
|
|
duration: const Duration(seconds: 5),
|
|
vsync: this,
|
|
);
|
|
|
|
// halfway through the animation, switch to the new level
|
|
_controller.addListener(() {
|
|
if (_controller.value >= 0.5 && displayedLevel == widget.prevLevel) {
|
|
setState(() {
|
|
displayedLevel = widget.level;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Listener to trigger rain confetti via callback
|
|
_controller.addListener(() {
|
|
if (_controller.value >= 0.5 && !_hasBlastedConfetti) {
|
|
// _hasBlastedConfetti = true;
|
|
if (widget.onRainTrigger != null) widget.onRainTrigger!();
|
|
}
|
|
});
|
|
|
|
_controller.forward();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
LevelUpManager.instance.reset();
|
|
super.dispose();
|
|
}
|
|
|
|
int get _startGrammar => LevelUpManager.instance.prevGrammar;
|
|
int get _startVocab => LevelUpManager.instance.prevVocab;
|
|
|
|
get _endGrammar => LevelUpManager.instance.nextGrammar;
|
|
get _endVocab => LevelUpManager.instance.nextVocab;
|
|
|
|
Future<void> _loadConstructSummary() async {
|
|
try {
|
|
_constructSummary = await widget.constructSummaryCompleter.future;
|
|
} catch (e) {
|
|
_error = e;
|
|
} finally {
|
|
setState(() => _loading = false);
|
|
}
|
|
}
|
|
|
|
int _getSkillXP(LearningSkillsEnum skill) {
|
|
if (_constructSummary == null) return 0;
|
|
return switch (skill) {
|
|
LearningSkillsEnum.writing =>
|
|
_constructSummary?.writingConstructScore ?? 0,
|
|
LearningSkillsEnum.reading =>
|
|
_constructSummary?.readingConstructScore ?? 0,
|
|
LearningSkillsEnum.speaking =>
|
|
_constructSummary?.speakingConstructScore ?? 0,
|
|
LearningSkillsEnum.hearing =>
|
|
_constructSummary?.hearingConstructScore ?? 0,
|
|
_ => 0,
|
|
};
|
|
}
|
|
|
|
@override
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final Animation<int> vocabAnimation =
|
|
IntTween(begin: _startVocab, end: _endVocab).animate(
|
|
CurvedAnimation(
|
|
parent: _controller,
|
|
curve: const Interval(0.0, 0.5, curve: Curves.easeInOutQuad),
|
|
),
|
|
);
|
|
|
|
final Animation<int> grammarAnimation =
|
|
IntTween(begin: _startGrammar, end: _endGrammar).animate(
|
|
CurvedAnimation(
|
|
parent: _controller,
|
|
curve: const Interval(0.0, 0.5, curve: Curves.easeInOutQuad),
|
|
),
|
|
);
|
|
|
|
final Animation<double> skillsOpacity =
|
|
Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
CurvedAnimation(
|
|
parent: _controller,
|
|
curve: const Interval(0.7, 1.0, curve: Curves.easeIn),
|
|
),
|
|
);
|
|
|
|
final Animation<double> shrinkMultiplier =
|
|
Tween<double>(begin: 1.0, end: 0.3).animate(
|
|
CurvedAnimation(
|
|
parent: _controller,
|
|
curve: const Interval(0.7, 1.0, curve: Curves.easeInOut),
|
|
),
|
|
);
|
|
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
final grammarVocabStyle = Theme.of(context).textTheme.titleLarge?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
color: colorScheme.primary,
|
|
);
|
|
final username =
|
|
Matrix.of(context).client.userID?.split(':').first.substring(1) ?? '';
|
|
|
|
return Stack(
|
|
children: [
|
|
SingleChildScrollView(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
AnimatedBuilder(
|
|
animation: _controller,
|
|
builder: (_, __) => Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: avatarUrl == null
|
|
? Avatar(
|
|
name: username,
|
|
showPresence: false,
|
|
size: 150 * shrinkMultiplier.value,
|
|
)
|
|
: ClipOval(
|
|
child: MxcImage(
|
|
uri: avatarUrl,
|
|
width: 150 * shrinkMultiplier.value,
|
|
height: 150 * shrinkMultiplier.value,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
language,
|
|
style: TextStyle(
|
|
fontSize: 24 * skillsOpacity.value,
|
|
color: AppConfig.goldLight,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Progress bar + Level
|
|
AnimatedBuilder(
|
|
animation: _controller,
|
|
builder: (_, __) => Row(
|
|
children: [
|
|
const Expanded(
|
|
child: LevelPopupProgressBar(
|
|
height: 20,
|
|
duration: Duration(milliseconds: 1000),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
"⭐",
|
|
style: Theme.of(context).textTheme.titleLarge,
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: AnimatedFlipCounter(
|
|
value: displayedLevel,
|
|
textStyle: Theme.of(context)
|
|
.textTheme
|
|
.headlineMedium
|
|
?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
color: AppConfig.goldLight,
|
|
),
|
|
duration: const Duration(milliseconds: 1000),
|
|
curve: Curves.easeInOut,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 25),
|
|
|
|
// Vocab and grammar row
|
|
AnimatedBuilder(
|
|
animation: _controller,
|
|
builder: (_, __) => Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
"+ ${_endVocab - _startVocab}",
|
|
style: const TextStyle(
|
|
color: Colors.lightGreen,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Symbols.dictionary,
|
|
color: colorScheme.primary,
|
|
size: 35,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'${vocabAnimation.value}',
|
|
style: grammarVocabStyle,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(width: 40),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
"+ ${_endGrammar - _startGrammar}",
|
|
style: const TextStyle(
|
|
color: Colors.lightGreen,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Symbols.toys_and_games,
|
|
color: colorScheme.primary,
|
|
size: 35,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'${grammarAnimation.value}',
|
|
style: grammarVocabStyle,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
if (_loading)
|
|
const Center(
|
|
child: SizedBox(
|
|
height: 50,
|
|
width: 50,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2.0,
|
|
color: AppConfig.goldLight,
|
|
),
|
|
),
|
|
)
|
|
else if (_error != null)
|
|
Padding(
|
|
padding: const EdgeInsets.all(16.0),
|
|
child: ErrorIndicator(
|
|
message: L10n.of(context).errorFetchingLevelSummary,
|
|
),
|
|
)
|
|
else if (_constructSummary != null)
|
|
// Skills section
|
|
AnimatedBuilder(
|
|
animation: skillsOpacity,
|
|
builder: (_, __) => Opacity(
|
|
opacity: skillsOpacity.value,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
_buildSkillsTable(context),
|
|
const SizedBox(height: 8),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 16),
|
|
child: Text(
|
|
_constructSummary!.textSummary,
|
|
textAlign: TextAlign.left,
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: CachedNetworkImage(
|
|
imageUrl:
|
|
"${AppConfig.assetsBaseURL}/${LevelUpConstants.dinoLevelUPFileName}",
|
|
width: 400,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Share button, currently no functionality
|
|
// ElevatedButton(
|
|
// onPressed: () {
|
|
// // Add share functionality
|
|
// },
|
|
// style: ElevatedButton.styleFrom(
|
|
// backgroundColor: Colors.white,
|
|
// foregroundColor: Colors.black,
|
|
// padding: const EdgeInsets.symmetric(
|
|
// vertical: 12,
|
|
// horizontal: 24,
|
|
// ),
|
|
// shape: RoundedRectangleBorder(
|
|
// borderRadius: BorderRadius.circular(8),
|
|
// ),
|
|
// ),
|
|
// child: const Row(
|
|
// mainAxisSize: MainAxisSize.min,
|
|
// children: [
|
|
// Text(
|
|
// "Share with Friends",
|
|
// style: TextStyle(
|
|
// fontSize: 16,
|
|
// fontWeight: FontWeight.bold,
|
|
// ),
|
|
// ),
|
|
// SizedBox(
|
|
// width: 8,
|
|
// ),
|
|
// Icon(
|
|
// Icons.ios_share,
|
|
// size: 20,
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildSkillsTable(BuildContext context) {
|
|
final visibleSkills = LearningSkillsEnum.values
|
|
.where((skill) => (_getSkillXP(skill) > -1) && skill.isVisible)
|
|
.toList();
|
|
|
|
const itemsPerRow = 4;
|
|
// chunk into rows of up to 4
|
|
final rows = <List<LearningSkillsEnum>>[
|
|
for (var i = 0; i < visibleSkills.length; i += itemsPerRow)
|
|
visibleSkills.sublist(
|
|
i,
|
|
min(i + itemsPerRow, visibleSkills.length),
|
|
),
|
|
];
|
|
|
|
return Column(
|
|
children: rows.map((row) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: row.map((skill) {
|
|
return Flexible(
|
|
fit: FlexFit.loose,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
skill.tooltip(context),
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 4),
|
|
Icon(
|
|
skill.icon,
|
|
size: 25,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
'+ ${_getSkillXP(skill)} XP',
|
|
style: const TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: AppConfig.gold,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}).toList(),
|
|
);
|
|
}
|
|
}
|