chore: make construct notification border gold and show confetti on construct notification (#2540)
This commit is contained in:
ggurdin
GitHub
parent
03a5bed450
commit
a3c74692c9
2 changed files with 173 additions and 170 deletions
|
|
@ -9,11 +9,13 @@ import 'package:fluffychat/widgets/matrix.dart';
|
|||
class PointsGainedAnimation extends StatefulWidget {
|
||||
final int points;
|
||||
final String targetID;
|
||||
final bool invert;
|
||||
|
||||
const PointsGainedAnimation({
|
||||
super.key,
|
||||
required this.points,
|
||||
required this.targetID,
|
||||
this.invert = false,
|
||||
});
|
||||
|
||||
@override
|
||||
|
|
@ -26,17 +28,15 @@ class PointsGainedAnimationState extends State<PointsGainedAnimation>
|
|||
final Color? loseColor = Colors.red;
|
||||
|
||||
AnimationController? _controller;
|
||||
Animation<double>? _offsetAnimation;
|
||||
Animation<double>? _fadeAnimation;
|
||||
final List<Animation<double>> _swayAnimation = [];
|
||||
final List<Offset> _initialVelocities = [];
|
||||
Animation<double>? _progressAnimation;
|
||||
|
||||
final List<Offset> _trajectories = [];
|
||||
final Random _random = Random();
|
||||
|
||||
static const double _particleSpeed = 50; // Base speed for particles.
|
||||
static const double gravity = 15; // Gravity constant for the animation.
|
||||
static const int duration =
|
||||
2000; // Duration of the animation in milliseconds.
|
||||
static const double _particleSpeed = 50;
|
||||
static const double gravity = 15;
|
||||
static const int duration = 2000;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
|
|
@ -48,7 +48,7 @@ class PointsGainedAnimationState extends State<PointsGainedAnimation>
|
|||
vsync: this,
|
||||
);
|
||||
|
||||
_offsetAnimation = Tween<double>(
|
||||
_progressAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 3.0,
|
||||
).animate(
|
||||
|
|
@ -68,40 +68,31 @@ class PointsGainedAnimationState extends State<PointsGainedAnimation>
|
|||
),
|
||||
);
|
||||
|
||||
_showPointsGained();
|
||||
initParticleTrajectories();
|
||||
_controller?.forward().then(
|
||||
(_) {
|
||||
if (!mounted) return;
|
||||
MatrixState.pAnyState.closeOverlay("${widget.targetID}_points");
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void initParticleTrajectories() {
|
||||
_initialVelocities.clear();
|
||||
for (int i = 0; i < widget.points.abs(); i++) {
|
||||
final angle =
|
||||
(i - widget.points.abs() / 2) / widget.points.abs() * (pi / 3) +
|
||||
(_random.nextDouble() - 0.5) * pi / 6 +
|
||||
pi / 2;
|
||||
|
||||
final speedMultiplier =
|
||||
0.75 + _random.nextDouble() / 4; // Random speed multiplier.
|
||||
final speed = _particleSpeed *
|
||||
speedMultiplier *
|
||||
(widget.points > 0 ? 2 : 1); // Exponential speed.
|
||||
_initialVelocities.add(Offset(speed * cos(angle), -speed * sin(angle)));
|
||||
}
|
||||
}
|
||||
|
||||
void initSwayAnimations() {
|
||||
if (_controller == null) return;
|
||||
_swayAnimation.clear();
|
||||
initParticleTrajectories();
|
||||
|
||||
for (int i = 0; i < widget.points; i++) {
|
||||
_swayAnimation.add(
|
||||
Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 2 * pi,
|
||||
).animate(
|
||||
CurvedAnimation(
|
||||
parent: _controller!,
|
||||
curve: Curves.linear,
|
||||
),
|
||||
_trajectories.add(
|
||||
Offset(
|
||||
speed * cos(angle) * (widget.invert ? -1 : 1),
|
||||
-speed * sin(angle) * (widget.invert ? -1 : 1),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
@ -113,23 +104,12 @@ class PointsGainedAnimationState extends State<PointsGainedAnimation>
|
|||
super.dispose();
|
||||
}
|
||||
|
||||
void _showPointsGained() {
|
||||
initSwayAnimations();
|
||||
_controller?.reset();
|
||||
_controller?.forward().then(
|
||||
(_) {
|
||||
if (!mounted) return;
|
||||
MatrixState.pAnyState.closeOverlay("${widget.targetID}_points");
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.points == 0 ||
|
||||
_controller == null ||
|
||||
_fadeAnimation == null ||
|
||||
_offsetAnimation == null) {
|
||||
_progressAnimation == null) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) {
|
||||
MatrixState.pAnyState.closeOverlay("${widget.targetID}_points");
|
||||
|
|
@ -163,8 +143,8 @@ class PointsGainedAnimationState extends State<PointsGainedAnimation>
|
|||
return AnimatedBuilder(
|
||||
animation: _controller!,
|
||||
builder: (context, child) {
|
||||
final progress = _offsetAnimation!.value;
|
||||
final trajectory = _initialVelocities[index];
|
||||
final progress = _progressAnimation!.value;
|
||||
final trajectory = _trajectories[index];
|
||||
return Transform.translate(
|
||||
offset: Offset(
|
||||
trajectory.dx * progress,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import 'package:fluffychat/config/app_config.dart';
|
|||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/pangea/analytics_details_popup/analytics_details_popup.dart';
|
||||
import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
|
||||
import 'package:fluffychat/pangea/analytics_misc/gain_points_animation.dart';
|
||||
import 'package:fluffychat/pangea/common/utils/overlay.dart';
|
||||
import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
|
||||
import 'package:fluffychat/pangea/morphs/get_grammar_copy.dart';
|
||||
|
|
@ -110,6 +111,21 @@ class ConstructNotificationOverlayState
|
|||
);
|
||||
|
||||
_controller!.forward().then((_) {
|
||||
OverlayUtil.showOverlay(
|
||||
overlayKey: "${widget.construct.string}_points",
|
||||
followerAnchor: Alignment.topCenter,
|
||||
targetAnchor: Alignment.topCenter,
|
||||
context: context,
|
||||
child: PointsGainedAnimation(
|
||||
points: 50,
|
||||
targetID: "${widget.construct.string}_notification",
|
||||
invert: true,
|
||||
),
|
||||
transformTargetId: "${widget.construct.string}_notification",
|
||||
closePrevOverlay: false,
|
||||
backDropToDismiss: false,
|
||||
ignorePointer: true,
|
||||
);
|
||||
Future.delayed(const Duration(seconds: 15), () {
|
||||
if (mounted) _close();
|
||||
});
|
||||
|
|
@ -145,144 +161,151 @@ class ConstructNotificationOverlayState
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isColumnMode = FluffyThemes.isColumnMode(context);
|
||||
return SafeArea(
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: SizeTransition(
|
||||
sizeFactor: _animation!,
|
||||
axisAlignment: -1.0,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return GestureDetector(
|
||||
onPanUpdate: (details) {
|
||||
if (details.delta.dy < -10) _close();
|
||||
},
|
||||
onTap: _showDetails,
|
||||
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: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurface
|
||||
.withAlpha(50),
|
||||
return CompositedTransformTarget(
|
||||
link: MatrixState.pAnyState
|
||||
.layerLinkAndKey("${widget.construct.string}_notification")
|
||||
.link,
|
||||
child: SafeArea(
|
||||
key: MatrixState.pAnyState
|
||||
.layerLinkAndKey("${widget.construct.string}_notification")
|
||||
.key,
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: SizeTransition(
|
||||
sizeFactor: _animation!,
|
||||
axisAlignment: -1.0,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return GestureDetector(
|
||||
onPanUpdate: (details) {
|
||||
if (details.delta.dy < -10) _close();
|
||||
},
|
||||
onTap: _showDetails,
|
||||
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),
|
||||
),
|
||||
),
|
||||
borderRadius: const BorderRadius.only(
|
||||
bottomLeft: Radius.circular(AppConfig.borderRadius),
|
||||
bottomRight: Radius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: isColumnMode ? 16.0 : 8.0,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
|
||||
),
|
||||
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(
|
||||
widget.copy ?? widget.construct.lemma,
|
||||
style: TextStyle(
|
||||
fontSize: FluffyThemes.isColumnMode(context)
|
||||
? 32.0
|
||||
: 16.0,
|
||||
color: AppConfig.gold,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
MorphIcon(
|
||||
size: isColumnMode
|
||||
? null
|
||||
: const Size(24.0, 24.0),
|
||||
morphFeature:
|
||||
MorphFeaturesEnumExtension.fromString(
|
||||
widget.construct.category,
|
||||
),
|
||||
morphTag: widget.construct.lemma,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Wrap(
|
||||
spacing: 16.0,
|
||||
alignment: WrapAlignment.center,
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
),
|
||||
SizedBox(
|
||||
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
widget.copy ?? widget.construct.lemma,
|
||||
style: TextStyle(
|
||||
fontSize: FluffyThemes.isColumnMode(context)
|
||||
? 32.0
|
||||
: 16.0,
|
||||
color: AppConfig.gold,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
Tooltip(
|
||||
message: L10n.of(context).details,
|
||||
child: constraints.maxWidth >= 600
|
||||
? ElevatedButton(
|
||||
style: IconButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 4.0,
|
||||
horizontal: 16.0,
|
||||
),
|
||||
),
|
||||
onPressed: _showDetails,
|
||||
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: _showDetails,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
MorphIcon(
|
||||
size: isColumnMode
|
||||
? null
|
||||
: const Size(24.0, 24.0),
|
||||
morphFeature:
|
||||
MorphFeaturesEnumExtension.fromString(
|
||||
widget.construct.category,
|
||||
SizedBox(
|
||||
width: 32.0,
|
||||
height: 32.0,
|
||||
child: Center(
|
||||
child: Tooltip(
|
||||
message: L10n.of(context).close,
|
||||
child: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.close,
|
||||
),
|
||||
style: IconButton.styleFrom(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
),
|
||||
onPressed: _close,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
),
|
||||
),
|
||||
morphTag: widget.construct.lemma,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: constraints.maxWidth >= 600 ? 120.0 : 65.0,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: L10n.of(context).details,
|
||||
child: constraints.maxWidth >= 600
|
||||
? ElevatedButton(
|
||||
style: IconButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 4.0,
|
||||
horizontal: 16.0,
|
||||
),
|
||||
),
|
||||
onPressed: _showDetails,
|
||||
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: _showDetails,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 32.0,
|
||||
height: 32.0,
|
||||
child: Center(
|
||||
child: Tooltip(
|
||||
message: L10n.of(context).close,
|
||||
child: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.close,
|
||||
),
|
||||
style: IconButton.styleFrom(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
),
|
||||
onPressed: _close,
|
||||
constraints: const BoxConstraints(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue