ember/fluffychat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3039 from pangeachat/2576-level-up-ui-tweaks

Browse source 
2576 level up UI tweaks
This commit is contained in:
ggurdin 2025-07-01 09:35:12 -04:00 • committed by GitHub
commit dac5f3cae8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 1094 additions and 568 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
lib/l10n/intl_en.arb
View file

@ -4630,9 +4630,9 @@
"meaningSectionHeader": "Meaning:",
"formSectionHeader": "Forms used in chats:",
"noEmojiSelectedTooltip": "No emoji selected",
"writingExercisesTooltip": "Writing practice",
"listeningExercisesTooltip": "Listening practice",
"readingExercisesTooltip": "Reading practice",
"writingExercisesTooltip": "Writing",
"listeningExercisesTooltip": "Listening",
"readingExercisesTooltip": "Reading",
"meaningNotFound": "Meaning could not be found.",
"formsNotFound": "Forms could not be found.",
"chooseBaseForm": "Choose the base form",
@ -5001,6 +5001,7 @@
"canBeFoundViaKnock": "\u2022 request to join and admin approval",
"anyoneCanJoin": "Anyone can join! However, admin can kick and ban whoever misbehaves. Those who are banned may not return!",
"createYourSpace": "Create your space",
"youHaveLeveledUp": "You have leveled up!",
"sendActivities": "Send activities",
"getStarted": "Get Started",
"getStartedBotChatDesc": "Chatting with AI is a great place to start and Pangea reading, writing, listening and speaking tools make it easy!",
@ -5015,7 +5016,7 @@
"groupChat": "Group Chat",
"directMessage": "Direct Message",
"newDirectMessage": "New direct message",
"speakingExercisesTooltip": "Speaking practice",
"speakingExercisesTooltip": "Speaking",
"noChatsFoundHereYet": "No chats found here yet",
"duration": "Duration",
"transcriptionFailed": "Failed to transcribe audio",
@ -5031,4 +5032,4 @@
},
"failedToFetchTranscription": "Failed to fetch transcription",
"deleteEmptySpaceDesc": "The space will be deleted for all participants. This action cannot be undone."
}
}

2
lib/pages/chat/chat.dart
View file

@ -33,7 +33,7 @@ import 'package:fluffychat/pages/chat_details/chat_details.dart';
import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
import 'package:fluffychat/pangea/analytics_misc/constructs_model.dart';
import 'package:fluffychat/pangea/analytics_misc/gain_points_animation.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_banner.dart';
import 'package:fluffychat/pangea/analytics_misc/put_analytics_controller.dart';
import 'package:fluffychat/pangea/bot/utils/bot_name.dart';
import 'package:fluffychat/pangea/chat/utils/unlocked_morphs_snackbar.dart';

4
lib/pangea/analytics_misc/construct_list_model.dart
View file

@ -8,6 +8,7 @@ import 'package:fluffychat/pangea/analytics_misc/analytics_constants.dart';
import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
import 'package:fluffychat/pangea/analytics_misc/construct_use_model.dart';
import 'package:fluffychat/pangea/analytics_misc/constructs_model.dart';
import 'package:fluffychat/pangea/common/config/environment.dart';
import 'package:fluffychat/pangea/common/utils/error_handler.dart';
import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
import 'package:fluffychat/pangea/morphs/get_grammar_copy.dart';
@ -35,7 +36,8 @@ class ConstructListModel {
/// [D] is the "compression factor". It determines how quickly
/// or slowly the level grows relative to XP
final double D = 1500;
final double D = Environment.isStagingEnvironment ? 500 : 1500;
List<ConstructIdentifier> unlockedLemmas(
ConstructTypeEnum type, {

16
lib/pangea/analytics_misc/get_analytics_controller.dart
View file

@ -22,6 +22,7 @@ import 'package:fluffychat/pangea/events/constants/pangea_event_types.dart';
import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
import 'package:fluffychat/pangea/practice_activities/practice_selection_repo.dart';
import 'package:fluffychat/widgets/matrix.dart';
/// A minimized version of AnalyticsController that get the logged in user's analytics
class GetAnalyticsController extends BaseController {
@ -455,10 +456,13 @@ class GetAnalyticsController extends BaseController {
// int diffXP = maxXP - minXP;
// if (diffXP < 0) diffXP = 0;
Future<ConstructSummary?> getConstructSummaryFromStateEvent() async {
ConstructSummary? getConstructSummaryFromStateEvent() {
try {
final Room? analyticsRoom = _client.analyticsRoomLocal(_l2!);
if (analyticsRoom == null) return null;
if (analyticsRoom == null) {
debugPrint("Analytics room is null");
return null;
}
final state =
analyticsRoom.getState(PangeaEventTypes.constructSummary, '');
if (state == null) return null;
@ -477,8 +481,8 @@ class GetAnalyticsController extends BaseController {
// generate level up analytics as a construct summary
ConstructSummary summary;
try {
final int minXP = constructListModel.calculateXpWithLevel(upperLevel);
final int maxXP = constructListModel.calculateXpWithLevel(lowerLevel);
final int maxXP = constructListModel.calculateXpWithLevel(upperLevel);
final int minXP = constructListModel.calculateXpWithLevel(lowerLevel);
int diffXP = maxXP - minXP;
if (diffXP < 0) diffXP = 0;
@ -539,6 +543,10 @@ class GetAnalyticsController extends BaseController {
final response = await ConstructRepo.generateConstructSummary(request);
summary = response.summary;
summary.levelVocabConstructs = MatrixState
.pangeaController.getAnalytics.constructListModel.vocabLemmas;
summary.levelGrammarConstructs = MatrixState
.pangeaController.getAnalytics.constructListModel.grammarLemmas;
} catch (e) {
debugPrint("Error generating level up analytics: $e");
ErrorHandler.logError(e: e, data: {'e': e});

557
lib/pangea/analytics_misc/level_up.dart
View file

@ -1,557 +0,0 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/pangea/analytics_misc/analytics_constants.dart';
import 'package:fluffychat/pangea/analytics_misc/learning_skills_enum.dart';
import 'package:fluffychat/pangea/common/config/environment.dart';
import 'package:fluffychat/pangea/common/utils/overlay.dart';
import 'package:fluffychat/pangea/constructs/construct_repo.dart';
import 'package:fluffychat/widgets/matrix.dart';
class LevelUpConstants {
static const String starFileName = "star.png";
static const String dinoLevelUPFileName = "DinoBot-Congratulate.png";
}
class LevelUpUtil {
static Future<void> showLevelUpDialog(
int level,
int prevLevel,
BuildContext context,
) async {
final player = AudioPlayer();
final snackbarRegex = RegExp(r'_snackbar$');
while (MatrixState.pAnyState.activeOverlays
.any((overlayId) => snackbarRegex.hasMatch(overlayId))) {
await Future.delayed(const Duration(milliseconds: 100));
}
player
.play(
UrlSource(
"${AppConfig.assetsBaseURL}/${AnalyticsConstants.levelUpAudioFileName}",
),
)
.then(
(_) => Future.delayed(
const Duration(seconds: 2),
() => player.dispose(),
),
);
OverlayUtil.showOverlay(
overlayKey: "level_up_notification",
context: context,
child: LevelUpBanner(
level: level,
prevLevel: prevLevel,
),
transformTargetId: '',
position: OverlayPositionEnum.top,
backDropToDismiss: false,
closePrevOverlay: false,
canPop: false,
);
}
}
class LevelUpBanner extends StatefulWidget {
final int level;
final int prevLevel;
const LevelUpBanner({
required this.level,
required this.prevLevel,
super.key,
});
@override
LevelUpBannerState createState() => LevelUpBannerState();
}
class LevelUpBannerState extends State<LevelUpBanner>
with TickerProviderStateMixin {
late AnimationController _slideController;
late Animation<Offset> _slideAnimation;
late AnimationController _sizeController;
late Animation<double> _sizeAnimation;
bool _showDetails = false;
bool _showedDetails = false;
ConstructSummary? _constructSummary;
String? _error;
bool _loading = true;
@override
void initState() {
super.initState();
_setConstructSummary();
_slideController = AnimationController(
vsync: this,
duration: FluffyThemes.animationDuration,
);
_slideAnimation = Tween<Offset>(
begin: const Offset(0, -1),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _slideController,
curve: Curves.easeOut,
),
);
_sizeController = AnimationController(
vsync: this,
duration: FluffyThemes.animationDuration,
);
_sizeAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(
CurvedAnimation(
parent: _sizeController,
curve: Curves.easeOut,
),
);
_slideController.forward();
Future.delayed(const Duration(seconds: 15), () async {
if (mounted && !_showedDetails) _close();
});
}
@override
void dispose() {
_slideController.dispose();
_sizeController.dispose();
super.dispose();
}
Future<void> _setConstructSummary() async {
try {
setState(() => _loading = true);
_constructSummary = await MatrixState.pangeaController.getAnalytics
.generateLevelUpAnalytics(
widget.level,
widget.prevLevel,
);
} catch (e) {
_error = e.toString();
} finally {
if (mounted) {
setState(() => _loading = false);
}
}
}
Future<void> _close() async {
await _slideController.reverse();
MatrixState.pAnyState.closeOverlay("level_up_notification");
}
int _skillsPoints(LearningSkillsEnum skill) {
switch (skill) {
case LearningSkillsEnum.writing:
return _constructSummary?.writingConstructScore ?? 0;
case LearningSkillsEnum.reading:
return _constructSummary?.readingConstructScore ?? 0;
case LearningSkillsEnum.speaking:
return _constructSummary?.speakingConstructScore ?? 0;
case LearningSkillsEnum.hearing:
return _constructSummary?.hearingConstructScore ?? 0;
default:
return 0;
}
}
Future<void> _toggleDetails() async {
if (!Environment.isStagingEnvironment) return;
FocusScope.of(context).unfocus();
if (mounted) {
setState(() {
_showDetails = !_showDetails;
if (_showDetails && !_showedDetails) {
_showedDetails = true;
}
});
await (_showDetails
? _sizeController.forward()
: _sizeController.reverse());
if (!_showDetails) {
await Future.delayed(
const Duration(milliseconds: 300),
() async {
if (!mounted) return;
_close();
},
);
}
}
}
@override
Widget build(BuildContext context) {
final style = FluffyThemes.isColumnMode(context)
? Theme.of(context).textTheme.titleLarge?.copyWith(
color: Theme.of(context).colorScheme.onSecondaryContainer,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
)
: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).colorScheme.onSecondaryContainer,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
);
return SafeArea(
child: Material(
color: Colors.transparent,
child: Stack(
children: [
SlideTransition(
position: _slideAnimation,
child: Align(
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 600.0,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onPanUpdate: (details) {
if (details.delta.dy < -10) _close();
},
onTap: _toggleDetails,
child: Container(
margin: const EdgeInsets.only(
top: 16,
),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.secondaryContainer,
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 24,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spacing: 8.0,
children: [
Flexible(
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: L10n.of(context)
.congratulationsOnReaching(
widget.level,
),
style: style,
),
TextSpan(
text: " ",
style: style,
),
WidgetSpan(
child: CachedNetworkImage(
imageUrl:
"${AppConfig.assetsBaseURL}/${LevelUpConstants.starFileName}",
height: 24,
width: 24,
),
),
],
),
),
),
Row(
children: [
if (Environment.isStagingEnvironment)
AnimatedSize(
duration: FluffyThemes.animationDuration,
child: _error == null
? FluffyThemes.isColumnMode(context)
? ElevatedButton(
style: IconButton.styleFrom(
padding: const EdgeInsets
.symmetric(
vertical: 4.0,
horizontal: 16.0,
),
),
onPressed: _toggleDetails,
child: Text(
L10n.of(context).details,
),
)
: SizedBox(
width: 32.0,
height: 32.0,
child: Center(
child: IconButton(
icon: const Icon(
Icons.info_outline,
),
style:
IconButton.styleFrom(
padding:
const EdgeInsets
.all(
4.0,
),
),
onPressed: _toggleDetails,
constraints:
const BoxConstraints(),
),
),
)
: Row(
children: [
Tooltip(
message: L10n.of(context)
.oopsSomethingWentWrong,
child: Icon(
Icons.error,
color: Theme.of(context)
.colorScheme
.error,
),
),
],
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: _close,
),
],
),
],
),
),
),
SizeTransition(
sizeFactor: _sizeAnimation,
child: Container(
constraints: BoxConstraints(
maxHeight:
MediaQuery.of(context).size.height * 0.75,
),
margin: const EdgeInsets.only(
top: 4.0,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.all(16),
child: _loading
? const Center(
child: CircularProgressIndicator.adaptive(),
)
: _error != null
? Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Icon(
Icons.error,
color: Theme.of(context)
.colorScheme
.error,
),
const SizedBox(width: 8.0),
Text(
L10n.of(context)
.oopsSomethingWentWrong,
),
],
)
: SingleChildScrollView(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
spacing: 24.0,
children: [
Table(
columnWidths: const {
0: IntrinsicColumnWidth(),
1: FlexColumnWidth(),
2: IntrinsicColumnWidth(),
},
defaultVerticalAlignment:
TableCellVerticalAlignment
.middle,
children: [
...LearningSkillsEnum.values
.where(
(v) =>
v.isVisible &&
_skillsPoints(v) > -1,
)
.map((skill) {
return TableRow(
children: [
Padding(
padding: const EdgeInsets
.symmetric(
vertical: 9.0,
horizontal: 18.0,
),
child: Icon(
skill.icon,
size: 25,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets
.symmetric(
vertical: 9.0,
horizontal: 18.0,
),
child: Text(
skill.tooltip(context),
style: const TextStyle(
fontSize: 16,
fontWeight:
FontWeight.w600,
color: Colors.white,
),
textAlign:
TextAlign.center,
),
),
Padding(
padding: const EdgeInsets
.symmetric(
vertical: 9.0,
horizontal: 18.0,
),
child: Text(
"+ ${_skillsPoints(skill)} XP",
style: const TextStyle(
fontSize: 16,
fontWeight:
FontWeight.w600,
color: Colors.white,
),
textAlign:
TextAlign.center,
),
),
],
);
}),
],
),
CachedNetworkImage(
imageUrl:
"${AppConfig.assetsBaseURL}/${LevelUpConstants.dinoLevelUPFileName}",
width: 400,
fit: BoxFit.cover,
),
if (_constructSummary?.textSummary !=
null)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.secondaryContainer,
borderRadius:
BorderRadius.circular(8),
),
child: Text(
_constructSummary!.textSummary,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.colorScheme
.onSecondaryContainer,
),
textAlign: TextAlign.center,
),
),
const SizedBox(
height: 24,
),
// 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,
// ),
// ),
// ),
// ),
],
),
),
),
),
],
),
),
),
),
],
),
),
);
}
}

270
lib/pangea/analytics_misc/level_up/level_up_banner.dart Normal file
View file

@ -0,0 +1,270 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pangea/analytics_misc/analytics_constants.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_manager.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_popup.dart';
import 'package:fluffychat/pangea/common/config/environment.dart';
import 'package:fluffychat/pangea/common/utils/overlay.dart';
import 'package:fluffychat/widgets/matrix.dart';
class LevelUpConstants {
static const String starFileName = "star.png";
static const String dinoLevelUPFileName = "DinoBot-Congratulate.png";
}
class LevelUpUtil {
static Future<void> showLevelUpDialog(
int level,
int prevLevel,
BuildContext context,
) async {
// Remove delay since GetAnalyticsController._onLevelUp is already async
final player = AudioPlayer();
// Wait for any existing snackbars to dismiss
await _waitForSnackbars(context);
await player.play(
UrlSource(
"${AppConfig.assetsBaseURL}/${AnalyticsConstants.levelUpAudioFileName}",
),
);
if (!context.mounted) return;
await OverlayUtil.showOverlay(
overlayKey: "level_up_notification",
context: context,
child: LevelUpBanner(
level: level,
prevLevel: prevLevel,
backButtonOverride: IconButton(
icon: const Icon(Icons.close),
onPressed: () {
MatrixState.pAnyState.closeOverlay("level_up_notification");
},
),
),
transformTargetId: '',
position: OverlayPositionEnum.top,
backDropToDismiss: false,
closePrevOverlay: false,
canPop: false,
);
await Future.delayed(const Duration(seconds: 2));
player.dispose();
}
static Future<void> _waitForSnackbars(BuildContext context) async {
final snackbarRegex = RegExp(r'_snackbar$');
while (MatrixState.pAnyState.activeOverlays
.any((id) => snackbarRegex.hasMatch(id))) {
await Future.delayed(const Duration(milliseconds: 100));
}
}
}
class LevelUpBanner extends StatefulWidget {
final int level;
final int prevLevel;
final Widget? backButtonOverride;
const LevelUpBanner({
required this.level,
required this.prevLevel,
required this.backButtonOverride,
super.key,
});
@override
LevelUpBannerState createState() => LevelUpBannerState();
}
class LevelUpBannerState extends State<LevelUpBanner>
with TickerProviderStateMixin {
late AnimationController _slideController;
late Animation<Offset> _slideAnimation;
bool _showedDetails = false;
@override
void initState() {
super.initState();
LevelUpManager.instance.preloadAnalytics(
context,
widget.level,
widget.prevLevel,
);
_slideController = AnimationController(
vsync: this,
duration: FluffyThemes.animationDuration,
);
_slideAnimation = Tween<Offset>(
begin: const Offset(0, -1),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _slideController,
curve: Curves.easeOut,
),
);
_slideController.forward();
Future.delayed(const Duration(seconds: 10), () async {
if (mounted && !_showedDetails) {
_close();
}
});
}
Future<void> _close() async {
await _slideController.reverse();
MatrixState.pAnyState.closeOverlay("level_up_notification");
}
@override
void dispose() {
_slideController.dispose();
super.dispose();
}
Future<void> _toggleDetails() async {
await _close();
LevelUpManager.instance.markPopupSeen();
_showedDetails = true;
FocusScope.of(context).unfocus();
await showDialog(
context: context,
builder: (context) => const LevelUpPopup(),
);
}
@override
Widget build(BuildContext context) {
final isColumnMode = FluffyThemes.isColumnMode(context);
final style = isColumnMode
? Theme.of(context).textTheme.titleLarge?.copyWith(
color: AppConfig.gold,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
)
: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: AppConfig.gold,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
);
return SafeArea(
child: Material(
type: MaterialType.transparency,
child: SlideTransition(
position: _slideAnimation,
child: LayoutBuilder(
builder: (context, constraints) {
return GestureDetector(
onPanUpdate: (details) {
if (details.delta.dy < -10) _close();
},
onTap: _toggleDetails,
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 4.0,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
border: Border(
bottom: BorderSide(
color: AppConfig.gold.withAlpha(200),
width: 2.0,
),
),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(AppConfig.borderRadius),
bottomRight: Radius.circular(AppConfig.borderRadius),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Spacer for symmetry
SizedBox(
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
),
// Centered content
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: isColumnMode ? 16.0 : 8.0,
),
child: Wrap(
spacing: 16.0,
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Text(
"Level up",
style: style,
overflow: TextOverflow.ellipsis,
),
CachedNetworkImage(
imageUrl:
"${AppConfig.assetsBaseURL}/${LevelUpConstants.starFileName}",
height: 24,
width: 24,
),
],
),
),
),
SizedBox(
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (Environment.isStagingEnvironment)
SizedBox(
width: 32.0,
height: 32.0,
child: Center(
child: IconButton(
icon: const Icon(Icons.arrow_drop_down),
style: IconButton.styleFrom(
padding: const EdgeInsets.all(4.0),
),
onPressed: _toggleDetails,
constraints: const BoxConstraints(),
color:
Theme.of(context).colorScheme.onSurface,
),
),
),
],
),
),
],
),
),
);
},
),
),
),
);
}
}

133
lib/pangea/analytics_misc/level_up/level_up_manager.dart Normal file
View file

@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/pangea/analytics_misc/client_analytics_extension.dart';
import 'package:fluffychat/pangea/constructs/construct_repo.dart';
import 'package:fluffychat/pangea/events/constants/pangea_event_types.dart';
import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
import 'package:fluffychat/widgets/matrix.dart';
class LevelUpManager {
// Singleton instance so analytics can be generated when level up is initiated, and be ready by the time user clicks on banner
static final LevelUpManager instance = LevelUpManager._internal();
LevelUpManager._internal();
int prevLevel = 0;
int level = 0;
int prevGrammar = 0;
int nextGrammar = 0;
int prevVocab = 0;
int nextVocab = 0;
String? userL2Code;
ConstructSummary? constructSummary;
bool hasSeenPopup = false;
bool shouldAutoPopup = false;
String? error;
Future<void> preloadAnalytics(
BuildContext context,
int level,
int prevLevel,
) async {
this.level = level;
this.prevLevel = prevLevel;
//For on route change behavior, if added in the future
shouldAutoPopup = true;
nextGrammar = MatrixState
.pangeaController.getAnalytics.constructListModel.grammarLemmas;
nextVocab = MatrixState
.pangeaController.getAnalytics.constructListModel.vocabLemmas;
userL2Code = MatrixState.pangeaController.languageController
.activeL2Code()
?.toUpperCase();
getConstructFromLevelUp();
final LanguageModel? l2 =
MatrixState.pangeaController.languageController.userL2;
final Room? analyticsRoom =
MatrixState.pangeaController.matrixState.client.analyticsRoomLocal(l2!);
if (analyticsRoom != null) {
// How to get all summary events in the timeline
final timeline = await analyticsRoom.getTimeline();
final summaryEvents = timeline.events
.where(
(e) => e.type == PangeaEventTypes.constructSummary,
)
.map(
(e) => ConstructSummary.fromJson(e.content),
)
.toList();
//Find previous summary to get grammar constructs and vocab numbers from
final lastSummary = summaryEvents
.where((summary) => summary.upperLevel == prevLevel)
.toList()
.isNotEmpty
? summaryEvents
.firstWhere((summary) => summary.upperLevel == prevLevel)
: null;
//Set grammar and vocab from last level summary, if there is one. Otherwise set to placeholder data
if (lastSummary != null &&
lastSummary.levelVocabConstructs != null &&
lastSummary.levelGrammarConstructs != null) {
prevVocab = lastSummary.levelVocabConstructs!;
prevGrammar = lastSummary.levelGrammarConstructs!;
} else {
prevGrammar = (nextGrammar / prevLevel) as int;
prevVocab = (nextVocab / prevLevel) as int;
}
}
}
//for testing, just fetch last level up from saved analytics
void getConstructFromButton() {
constructSummary = MatrixState.pangeaController.getAnalytics
.getConstructSummaryFromStateEvent();
debugPrint(
"Last saved construct summary from analytics controller function: ${constructSummary?.toJson()}",
);
}
//for getting real level up data when leveled up
void getConstructFromLevelUp() async {
try {
constructSummary = await MatrixState.pangeaController.getAnalytics
.generateLevelUpAnalytics(
prevLevel,
level,
);
} catch (e) {
error = e.toString();
}
}
void markPopupSeen() {
hasSeenPopup = true;
shouldAutoPopup = false;
}
void reset() {
hasSeenPopup = false;
shouldAutoPopup = false;
prevLevel = 0;
level = 0;
prevGrammar = 0;
nextGrammar = 0;
prevVocab = 0;
nextVocab = 0;
constructSummary = null;
error = null;
}
}

521
lib/pangea/analytics_misc/level_up/level_up_popup.dart Normal file
View file

@ -0,0 +1,521 @@
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:confetti/confetti.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_up_banner.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up/level_up_manager.dart';
import 'package:fluffychat/pangea/analytics_misc/level_up/rain_confetti.dart';
import 'package:fluffychat/pangea/analytics_summary/progress_bar/level_bar.dart';
import 'package:fluffychat/pangea/analytics_summary/progress_bar/progress_bar_details.dart';
import 'package:fluffychat/pangea/common/widgets/full_width_dialog.dart';
import 'package:fluffychat/pangea/constructs/construct_repo.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
class LevelUpPopup extends StatelessWidget {
const LevelUpPopup({
super.key,
});
@override
Widget build(BuildContext context) {
return 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,
),
),
);
}
}
class LevelUpPopupContent extends StatefulWidget {
final int prevLevel;
final int level;
const LevelUpPopupContent({
super.key,
required this.prevLevel,
required this.level,
});
@override
State<LevelUpPopupContent> createState() => _LevelUpPopupContentState();
}
class _LevelUpPopupContentState extends State<LevelUpPopupContent>
with SingleTickerProviderStateMixin {
late int _endGrammar;
late int _endVocab;
final int _startGrammar = LevelUpManager.instance.prevGrammar;
final int _startVocab = LevelUpManager.instance.prevVocab;
Timer? _summaryPollTimer;
final String? _error = LevelUpManager.instance.error;
String language = LevelUpManager.instance.userL2Code ?? "N/A";
late final AnimationController _controller;
late final ConfettiController _confettiController;
bool _hasBlastedConfetti = false;
final Duration _animationDuration = const Duration(seconds: 5);
Uri? avatarUrl;
late final Future<Profile> profile;
int displayedLevel = -1;
late ConstructSummary? _constructSummary;
@override
void initState() {
super.initState();
LevelUpManager.instance.markPopupSeen();
displayedLevel = widget.prevLevel;
_confettiController =
ConfettiController(duration: const Duration(seconds: 1));
_endGrammar = LevelUpManager.instance.nextGrammar;
_endVocab = LevelUpManager.instance.nextVocab;
_constructSummary = LevelUpManager.instance.constructSummary;
// Poll for constructSummary if not available
if (_constructSummary == null) {
_summaryPollTimer =
Timer.periodic(const Duration(milliseconds: 300), (timer) {
final summary = LevelUpManager.instance.constructSummary;
if (summary != null) {
setState(() {
_constructSummary = summary;
});
timer.cancel();
}
});
}
final client = Matrix.of(context).client;
client.fetchOwnProfile().then((profile) {
setState(() {
avatarUrl = profile.avatarUrl;
});
});
_controller = AnimationController(
duration: _animationDuration,
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;
});
}
});
_controller.addListener(() {
if (_controller.value >= 0.5 && !_hasBlastedConfetti) {
//_confettiController.play();
_hasBlastedConfetti = true;
rainConfetti(context);
}
});
_controller.forward();
}
@override
void dispose() {
_summaryPollTimer?.cancel();
_controller.dispose();
_confettiController.dispose();
LevelUpManager.instance.reset();
stopConfetti();
super.dispose();
}
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<double> progressAnimation =
Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: _controller, curve: const Interval(0.0, 0.5)),
);
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: [
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
return LevelBar(
details: const LevelBarDetails(
fillColor: AppConfig.goldLight,
currentPoints: 0,
widthMultiplier: 1,
),
progressBarDetails: ProgressBarDetails(
totalWidth: constraints.maxWidth *
progressAnimation.value,
height: 20,
borderColor: colorScheme.primary,
),
);
},
),
),
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),
// Skills section
AnimatedBuilder(
animation: skillsOpacity,
builder: (_, __) => Opacity(
opacity: skillsOpacity.value,
child: _error == null
? Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildSkillsTable(context),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text(
_constructSummary?.textSummary ??
L10n.of(context).loadingPleaseWait,
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,
),
),
],
)
// if error getting construct summary
: Row(
children: [
Tooltip(
message: L10n.of(context).oopsSomethingWentWrong,
child: Icon(
Icons.error,
color: Theme.of(context).colorScheme.error,
),
),
],
),
),
),
// 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(),
);
}
}

121
lib/pangea/analytics_misc/level_up/rain_confetti.dart Normal file
View file

@ -0,0 +1,121 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:confetti/confetti.dart';
import 'package:fluffychat/config/app_config.dart';
OverlayEntry? _confettiEntry;
ConfettiController? _blastController;
ConfettiController? _rainController;
void rainConfetti(BuildContext context) {
if (_confettiEntry != null) return; // Prevent duplicates
_blastController = ConfettiController(duration: const Duration(seconds: 1));
_rainController = ConfettiController(duration: const Duration(seconds: 3));
_blastController!.play();
_rainController!.play();
final screenWidth = MediaQuery.of(context).size.width;
final isSmallScreen = screenWidth < 600;
final count = isSmallScreen ? 2 : 5;
final spacing = screenWidth / (count + 1);
_confettiEntry = OverlayEntry(
builder: (context) => Stack(
children: [
// Initial center blast
Positioned(
top: 0,
left: screenWidth / 2,
child: IgnorePointer(
child: ConfettiWidget(
confettiController: _blastController!,
blastDirectionality: BlastDirectionality.explosive,
shouldLoop: false,
emissionFrequency: .02,
numberOfParticles: 40,
minimumSize: const Size(20, 20),
maximumSize: const Size(25, 25),
minBlastForce: 10,
maxBlastForce: 40,
gravity: 0.07,
colors: const [AppConfig.goldLight, AppConfig.gold],
createParticlePath: drawStar,
),
),
),
// Rain confetti from the top
...List.generate(count, (index) {
final left = spacing * (index + 1) - 10;
return Positioned(
top: -30, // Small buffer above top edge
left: left,
child: IgnorePointer(
child: ConfettiWidget(
confettiController: _rainController!,
blastDirectionality: BlastDirectionality.directional,
blastDirection: 3 * pi / 2,
shouldLoop: true,
maxBlastForce: 5,
minBlastForce: 2,
minimumSize: const Size(20, 20),
maximumSize: const Size(25, 25),
gravity: 0.07,
emissionFrequency: 0.1,
numberOfParticles: 2,
colors: const [AppConfig.goldLight, AppConfig.gold],
createParticlePath: drawStar,
),
),
);
}),
],
),
);
Overlay.of(context, rootOverlay: true).insert(_confettiEntry!);
}
void stopConfetti() {
_confettiEntry?.remove();
_confettiEntry = null;
_blastController?.dispose();
_blastController = null;
_rainController?.dispose();
_rainController = null;
}
Path drawStar(Size size) {
double degToRad(double deg) => deg * (pi / 180.0);
const numberOfPoints = 5;
final halfWidth = size.width / 2;
final externalRadius = halfWidth;
final internalRadius = halfWidth / 2.5;
final degreesPerStep = degToRad(360 / numberOfPoints);
final halfDegreesPerStep = degreesPerStep / 2;
final path = Path();
final fullAngle = degToRad(360);
path.moveTo(size.width, halfWidth);
for (double step = 0; step < fullAngle; step += degreesPerStep) {
path.lineTo(
halfWidth + externalRadius * cos(step),
halfWidth + externalRadius * sin(step),
);
path.lineTo(
halfWidth + internalRadius * cos(step + halfDegreesPerStep),
halfWidth + internalRadius * sin(step + halfDegreesPerStep),
);
}
path.close();
return path;
}

8
lib/pangea/constructs/construct_repo.dart
View file

@ -11,6 +11,8 @@ import 'package:fluffychat/widgets/matrix.dart';
class ConstructSummary {
final int upperLevel;
final int lowerLevel;
int? levelVocabConstructs;
int? levelGrammarConstructs;
final String language;
final String textSummary;
final int writingConstructScore;
@ -21,6 +23,8 @@ class ConstructSummary {
ConstructSummary({
required this.upperLevel,
required this.lowerLevel,
this.levelVocabConstructs,
this.levelGrammarConstructs,
required this.language,
required this.textSummary,
required this.writingConstructScore,
@ -33,6 +37,8 @@ class ConstructSummary {
return {
'upper_level': upperLevel,
'lower_level': lowerLevel,
'level_grammar_constructs': levelGrammarConstructs,
'level_vocab_constructs': levelVocabConstructs,
'language': language,
'text_summary': textSummary,
'writing_construct_score': writingConstructScore,
@ -46,6 +52,8 @@ class ConstructSummary {
return ConstructSummary(
upperLevel: json['upper_level'],
lowerLevel: json['lower_level'],
levelGrammarConstructs: json['level_grammar_constructs'],
levelVocabConstructs: json['level_vocab_constructs'],
language: json['language'],
textSummary: json['text_summary'],
writingConstructScore: json['writing_construct_score'],

1
lib/utils/client_manager.dart
View file

@ -129,6 +129,7 @@ abstract class ClientManager {
PangeaEventTypes.userSetLemmaInfo,
EventTypes.RoomJoinRules,
PangeaEventTypes.activityPlan,
PangeaEventTypes.constructSummary,
// Pangea#
},
logLevel: kReleaseMode ? Level.warning : Level.verbose,

16
pubspec.lock
View file

@ -38,6 +38,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "5.3.0"
animated_flip_counter:
dependency: "direct main"
description:
name: animated_flip_counter
sha256: "73f852d84c461c3e4c1ddf320bee334dde8dba89441922ab11a8013be0b2fad1"
url: "https://pub.dev"
source: hosted
version: "0.3.4"
animations:
dependency: "direct main"
description:
@ -334,6 +342,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.0.0"
confetti:
dependency: "direct main"
description:
name: confetti
sha256: "79376a99648efbc3f23582f5784ced0fe239922bd1a0fb41f582051eba750751"
url: "https://pub.dev"
source: hosted
version: "0.8.0"
console:
dependency: transitive
description:

2
pubspec.yaml
View file

@ -21,6 +21,7 @@ dependencies:
chewie: ^1.11.3
collection: ^1.18.0
cross_file: ^0.3.4+2
confetti: ^0.8.0
cupertino_icons: any
# #Pangea
# desktop_drop: ^0.4.4
@ -135,6 +136,7 @@ dependencies:
text_to_speech:
git: https://github.com/pangeachat/text_to_speech.git
flutter_tts: ^4.2.0
animated_flip_counter: ^0.3.4
# Pangea#
dev_dependencies: