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

Add rain confetti and animated flip counter

Browse source 
Change continuous blast of confetti to one blast with rain and a new animation type, and changed skills names for cleaner skills table look
This commit is contained in:
avashilling 2025-06-18 14:13:53 -04:00
parent d5a157db5e
commit 64aba1d6e4
3 changed files with 168 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
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",
@ -5016,6 +5016,6 @@
"groupChat": "Group Chat",
"directMessage": "Direct Message",
"newDirectMessage": "New direct message",
"speakingExercisesTooltip": "Speaking practice",
"speakingExercisesTooltip": "Speaking",
"noChatsFoundHereYet": "No chats found here yet"
}

86
lib/pangea/analytics_misc/level_up/level_up_popup.dart
View file

@ -1,12 +1,15 @@
import 'dart:async';
import 'dart:math';
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: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';
@ -15,7 +18,6 @@ import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:matrix/matrix_api_lite/generated/model.dart';
@ -43,8 +45,8 @@ class LevelUpPopup extends StatelessWidget {
: null,
),
body: LevelUpPopupContent(
prevLevel: LevelUpManager.instance.prevLevel ?? 0,
level: LevelUpManager.instance.level ?? 0,
prevLevel: LevelUpManager.instance.prevLevel,
level: LevelUpManager.instance.level,
),
),
);
@ -80,12 +82,11 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
int displayedLevel = -1;
bool _hasBlastedConfetti = false;
static final int _startGrammar = LevelUpManager.instance.prevGrammar ?? 0;
static final int _startVocab = LevelUpManager.instance.prevVocab ?? 0;
static final ConstructSummary? _constructSummary =
LevelUpManager.instance.constructSummary;
static final String? _error = LevelUpManager.instance.error;
static final String language = LevelUpManager.instance.userL2Code ?? "N/A";
final int _startGrammar = LevelUpManager.instance.prevGrammar;
final int _startVocab = LevelUpManager.instance.prevVocab;
late ConstructSummary? _constructSummary;
final String? _error = LevelUpManager.instance.error;
String language = LevelUpManager.instance.userL2Code ?? "N/A";
static const Duration _animationDuration = Duration(seconds: 5);
@ -96,11 +97,12 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
displayedLevel = widget.prevLevel;
_confettiController =
ConfettiController(duration: const Duration(seconds: 3));
ConfettiController(duration: const Duration(seconds: 1));
// Use LevelUpManager stats instead of fetching separately
_endGrammar = LevelUpManager.instance.nextGrammar ?? 0;
_endVocab = LevelUpManager.instance.nextVocab ?? 0;
_endGrammar = LevelUpManager.instance.nextGrammar;
_endVocab = LevelUpManager.instance.nextVocab;
_constructSummary = LevelUpManager.instance.constructSummary;
final client = Matrix.of(context).client;
client.fetchOwnProfile().then((profile) {
@ -124,9 +126,10 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
});
_controller.addListener(() {
if (_controller.value >= 0.4 && !_hasBlastedConfetti) {
_confettiController.play();
if (_controller.value >= 0.5 && !_hasBlastedConfetti) {
//_confettiController.play();
_hasBlastedConfetti = true;
rainConfetti(context);
}
});
@ -153,6 +156,7 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
_controller.dispose();
_confettiController.dispose();
LevelUpManager.instance.reset();
stopConfetti();
super.dispose();
}
@ -217,7 +221,12 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
Padding(
padding: const EdgeInsets.all(24.0),
child: avatarUrl == null
? const CircularProgressIndicator()
? MxcImage(
client: Matrix.of(context).client,
fit: BoxFit.cover,
width: 150 * shrinkMultiplier.value,
height: 150 * shrinkMultiplier.value,
)
: ClipOval(
child: MxcImage(
uri: avatarUrl,
@ -255,7 +264,7 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
totalWidth: constraints.maxWidth *
progressAnimation.value,
height: 20,
borderColor: colorScheme.surface,
borderColor: colorScheme.primary,
),
);
},
@ -263,11 +272,23 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
),
const SizedBox(width: 8),
Text(
"⭐ $displayedLevel",
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
color: AppConfig.goldLight,
),
"⭐",
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,
),
),
],
),
@ -388,35 +409,16 @@ class _LevelUpPopupContentState extends State<LevelUpPopupContent>
],
),
),
// Confetti overlay
Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
confettiController: _confettiController,
blastDirectionality: BlastDirectionality
.explosive, // don't specify a direction, blast randomly
shouldLoop:
true, // start again as soon as the animation is finished
emissionFrequency: 0.2,
numberOfParticles: 15,
gravity: 0.1,
colors: const [
AppConfig.goldLight,
AppConfig.gold,
], // manually specify the colors to be used
createParticlePath: drawStar, // define a custom shape/path.
),
),
],
);
}
Widget _buildSkillsTable(BuildContext context) {
final visibleSkills = LearningSkillsEnum.values
.where((skill) => _getSkillXP(skill) > -1)
.where((skill) => (_getSkillXP(skill) > -1) && skill.isVisible)
.toList();
const itemsPerRow = 3;
const itemsPerRow = 4;
// chunk into rows of up to 3
final rows = <List<LearningSkillsEnum>>[
for (var i = 0; i < visibleSkills.length; i += itemsPerRow)

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

@ -0,0 +1,120 @@
import 'dart:math';
import 'package:confetti/confetti.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:flutter/material.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 screenHeight = MediaQuery.of(context).size.height;
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;
}