diff --git a/lib/core/common.dart b/lib/core/common.dart index 4c02350..2db8d19 100644 --- a/lib/core/common.dart +++ b/lib/core/common.dart @@ -54,7 +54,7 @@ Color getColorFromGameColor(GameColor color) { case GameColor.green: return Colors.green; case GameColor.yellow: - return Colors.yellow; + return const Color(0xFFF7CA28); case GameColor.purple: return Colors.purple; case GameColor.orange: diff --git a/lib/presentation/views/main_menu/match_view/match_detail_view.dart b/lib/presentation/views/main_menu/match_view/match_detail_view.dart index 2117b77..a0f8760 100644 --- a/lib/presentation/views/main_menu/match_view/match_detail_view.dart +++ b/lib/presentation/views/main_menu/match_view/match_detail_view.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:fluttericon/rpg_awesome_icons.dart'; import 'package:intl/intl.dart'; import 'package:provider/provider.dart'; import 'package:tallee/core/adaptive_page_route.dart'; @@ -14,6 +15,7 @@ import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart'; import 'package:tallee/presentation/widgets/colored_icon_container.dart'; import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart'; import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; +import 'package:tallee/presentation/widgets/game_label.dart'; import 'package:tallee/presentation/widgets/tiles/info_tile.dart'; import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart'; @@ -102,6 +104,7 @@ class _MatchDetailViewState extends State { bottom: 100, ), children: [ + // Controller Icon const Center( child: ColoredIconContainer( icon: Icons.sports_esports, @@ -110,6 +113,8 @@ class _MatchDetailViewState extends State { ), ), const SizedBox(height: 10), + + // Match Name Text( match.name, style: const TextStyle( @@ -120,6 +125,8 @@ class _MatchDetailViewState extends State { textAlign: TextAlign.center, ), const SizedBox(height: 5), + + // Creation Date Text( '${loc.created_on} ${DateFormat.yMMMd(Localizations.localeOf(context).toString()).format(match.createdAt)}', style: const TextStyle( @@ -129,6 +136,8 @@ class _MatchDetailViewState extends State { textAlign: TextAlign.center, ), const SizedBox(height: 10), + + // Group Name if (match.group != null) ...[ Row( mainAxisAlignment: MainAxisAlignment.center, @@ -143,6 +152,8 @@ class _MatchDetailViewState extends State { ), const SizedBox(height: 20), ], + + // Players InfoTile( title: loc.players, icon: Icons.people, @@ -162,6 +173,30 @@ class _MatchDetailViewState extends State { ), ), const SizedBox(height: 15), + + // Game + InfoTile( + title: loc.game, + icon: RpgAwesome.clovers_card, + horizontalAlignment: CrossAxisAlignment.start, + content: Padding( + padding: const EdgeInsets.symmetric( + vertical: 4, + horizontal: 8, + ), + child: GameLabel( + title: match.game.name, + description: translateRulesetToString( + match.game.ruleset, + context, + ), + color: match.game.color, + ), + ), + ), + const SizedBox(height: 15), + + // Results InfoTile( title: loc.results, icon: Icons.emoji_events, diff --git a/lib/presentation/widgets/game_label.dart b/lib/presentation/widgets/game_label.dart new file mode 100644 index 0000000..553e637 --- /dev/null +++ b/lib/presentation/widgets/game_label.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; +import 'package:tallee/core/common.dart'; +import 'package:tallee/core/enums.dart'; + +class GameLabel extends StatelessWidget { + const GameLabel({ + super.key, + required this.title, + required this.description, + required this.color, + }); + + final String title; + final String description; + final GameColor color; + + @override + Widget build(BuildContext context) { + final backgroundColor = getColorFromGameColor(color); + final fontColor = backgroundColor.computeLuminance() > 0.5 + ? Colors.black + : Colors.white; + + return IntrinsicHeight( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + // Title + Container( + decoration: BoxDecoration( + color: backgroundColor.withAlpha(230), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(8), + bottomLeft: Radius.circular(8), + ), + ), + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + child: Text( + title, + style: TextStyle( + fontSize: 12, + color: fontColor, + fontWeight: FontWeight.bold, + ), + ), + ), + + // Description + Container( + decoration: BoxDecoration( + color: backgroundColor.withAlpha(140), + borderRadius: const BorderRadius.only( + topRight: Radius.circular(8), + bottomRight: Radius.circular(8), + ), + ), + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + child: Text( + description, + style: TextStyle( + fontSize: 12, + color: fontColor, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/presentation/widgets/tiles/match_tile.dart b/lib/presentation/widgets/tiles/match_tile.dart index f7585d6..f939601 100644 --- a/lib/presentation/widgets/tiles/match_tile.dart +++ b/lib/presentation/widgets/tiles/match_tile.dart @@ -7,6 +7,7 @@ import 'package:tallee/core/custom_theme.dart'; import 'package:tallee/core/enums.dart'; import 'package:tallee/data/models/match.dart'; import 'package:tallee/l10n/generated/app_localizations.dart'; +import 'package:tallee/presentation/widgets/game_label.dart'; import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart'; class MatchTile extends StatefulWidget { @@ -116,56 +117,13 @@ class _MatchTileState extends State { // Game + Ruleset Badge if (!widget.compact) - IntrinsicHeight( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - // Game - Container( - decoration: BoxDecoration( - color: CustomTheme.primaryColor.withAlpha(230), - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(8), - bottomLeft: Radius.circular(8), - ), - ), - padding: const EdgeInsets.symmetric( - vertical: 4, - horizontal: 8, - ), - child: Text( - match.game.name, - style: const TextStyle( - fontSize: 12, - color: Colors.white, - fontWeight: FontWeight.bold, - ), - ), - ), - // Ruleset - Container( - decoration: BoxDecoration( - color: CustomTheme.primaryColor.withAlpha(140), - borderRadius: const BorderRadius.only( - topRight: Radius.circular(8), - bottomRight: Radius.circular(8), - ), - ), - padding: const EdgeInsets.symmetric( - vertical: 4, - horizontal: 8, - ), - child: Text( - translateRulesetToString(match.game.ruleset, context), - style: const TextStyle( - fontSize: 12, - color: Colors.white, - fontWeight: FontWeight.bold, - ), - ), - ), - ], + GameLabel( + title: match.game.name, + description: translateRulesetToString( + match.game.ruleset, + context, ), + color: match.game.color, ), const SizedBox(height: 12),