Gamificación

This commit is contained in:
2026-05-09 17:24:46 +02:00
parent dcecee805b
commit e2cebafdbb
29 changed files with 877 additions and 58 deletions

View File

@@ -3,6 +3,7 @@ import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../modelos/gamificacion_usuario.dart';
import 'tema_app.dart';
class FondoFarolero extends StatelessWidget {
@@ -272,6 +273,8 @@ class AvatarFarolero extends StatelessWidget {
final String? assetPath;
final Color color;
final double size;
final int fuego;
final List<String> medallas;
const AvatarFarolero({
super.key,
@@ -279,43 +282,172 @@ class AvatarFarolero extends StatelessWidget {
this.assetPath,
this.color = TemaApp.colorNaranja,
this.size = 40,
this.fuego = 0,
this.medallas = const [],
});
@override
Widget build(BuildContext context) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [color.withValues(alpha: 0.9), TemaApp.colorSuperficie],
),
border: Border.all(color: TemaApp.colorDorado, width: 2),
),
child: Center(
child: assetPath == null
? Text(
texto,
style: TextStyle(
color: TemaApp.colorTexto,
fontWeight: FontWeight.bold,
fontSize: size * 0.36,
),
)
: ClipOval(
child: Image.asset(
assetPath!,
width: size,
height: size,
fit: BoxFit.cover,
),
),
final lienzo = size + 10;
return SizedBox(
width: lienzo,
height: lienzo,
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
CustomPaint(
size: Size(lienzo, lienzo),
painter: _FuegoAvatarPainter(fuego: fuego),
),
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [color.withValues(alpha: 0.9), TemaApp.colorSuperficie],
),
border: Border.all(color: TemaApp.colorDorado, width: 2),
),
child: Center(
child: assetPath == null
? Text(
texto,
style: TextStyle(
color: TemaApp.colorTexto,
fontWeight: FontWeight.bold,
fontSize: size * 0.36,
),
)
: ClipOval(
child: Image.asset(
assetPath!,
width: size,
height: size,
fit: BoxFit.cover,
),
),
),
),
if (medallas.isNotEmpty)
Positioned(
right: -2,
bottom: -4,
child: _MiniMedalla(id: medallas.first),
),
],
),
);
}
}
class MedallasCompactasFarolero extends StatelessWidget {
final List<String> ids;
final int max;
const MedallasCompactasFarolero({
super.key,
required this.ids,
this.max = 3,
});
@override
Widget build(BuildContext context) {
final visibles = ids.take(max).toList();
if (visibles.isEmpty) return const SizedBox.shrink();
return Wrap(
spacing: 4,
runSpacing: 4,
children: [
for (final id in visibles) _MiniMedalla(id: id),
],
);
}
}
class _MiniMedalla extends StatelessWidget {
final String id;
const _MiniMedalla({required this.id});
@override
Widget build(BuildContext context) {
final medalla = EstadisticasPerfilUsuario.catalogoMedallas[id];
if (medalla == null) return const SizedBox.shrink();
return Tooltip(
message: '${medalla.nombre}: ${medalla.descripcion}',
child: Container(
width: 26,
height: 26,
alignment: Alignment.center,
decoration: BoxDecoration(
color: TemaApp.colorSuperficie.withValues(alpha: 0.92),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.32),
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
child: Image.asset(
medalla.assetPath,
width: 26,
height: 26,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) =>
Text(medalla.emoji, style: const TextStyle(fontSize: 12)),
),
),
);
}
}
class _FuegoAvatarPainter extends CustomPainter {
final int fuego;
const _FuegoAvatarPainter({required this.fuego});
@override
void paint(Canvas canvas, Size size) {
final porcentaje = fuego.clamp(0, 100) / 100;
final rect = Offset.zero & size;
final centro = rect.center;
final radio = math.min(size.width, size.height) / 2 - 3;
final base = Paint()
..isAntiAlias = true
..style = PaintingStyle.stroke
..strokeWidth = 4
..strokeCap = StrokeCap.round
..color = Colors.black.withValues(alpha: 0.28);
canvas.drawCircle(centro, radio, base);
if (porcentaje <= 0) return;
final fuegoPaint = Paint()
..isAntiAlias = true
..style = PaintingStyle.stroke
..strokeWidth = 4
..strokeCap = StrokeCap.round
..shader = const SweepGradient(
colors: [Color(0xFFFFC247), Color(0xFFFF7A1A), Color(0xFFE53935)],
).createShader(Rect.fromCircle(center: centro, radius: radio));
canvas.drawArc(
Rect.fromCircle(center: centro, radius: radio),
-math.pi / 2,
math.pi * 2 * porcentaje,
false,
fuegoPaint,
);
}
@override
bool shouldRepaint(covariant _FuegoAvatarPainter oldDelegate) {
return oldDelegate.fuego != fuego;
}
}
class _FondoFaroleroPainter extends CustomPainter {
final bool intenso;