From c3ed743f982574e6829106958aa9640768e909a1 Mon Sep 17 00:00:00 2001
From: RuiAlonso <rui.alonso@verygood.ventures>
Date: Tue, 15 Mar 2022 14:32:47 +0100
Subject: [PATCH] feat: leader board page

---
 lib/leaderboard/leader_board.dart           |   1 +
 lib/leaderboard/view/leader_board_page.dart | 193 ++++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 lib/leaderboard/leader_board.dart
 create mode 100644 lib/leaderboard/view/leader_board_page.dart

diff --git a/lib/leaderboard/leader_board.dart b/lib/leaderboard/leader_board.dart
new file mode 100644
index 00000000..aad1d059
--- /dev/null
+++ b/lib/leaderboard/leader_board.dart
@@ -0,0 +1 @@
+export 'view/leader_board_page.dart';
diff --git a/lib/leaderboard/view/leader_board_page.dart b/lib/leaderboard/view/leader_board_page.dart
new file mode 100644
index 00000000..aea894a6
--- /dev/null
+++ b/lib/leaderboard/view/leader_board_page.dart
@@ -0,0 +1,193 @@
+// ignore_for_file: public_member_api_docs
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:pinball/game/view/pinball_game_page.dart';
+import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball/theme/theme.dart';
+
+class LeaderBoardPage extends StatelessWidget {
+  const LeaderBoardPage({Key? key}) : super(key: key);
+
+  static Route route() {
+    return MaterialPageRoute<void>(
+      builder: (_) => const LeaderBoardPage(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => ThemeCubit(),
+      child: const LeaderBoardView(),
+    );
+  }
+}
+
+class LeaderBoardView extends StatelessWidget {
+  const LeaderBoardView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const SizedBox(height: 80),
+            Text(
+              l10n.leadersBoard,
+              style: Theme.of(context).textTheme.headline3,
+            ),
+            const SizedBox(height: 80),
+            const _LeaderBoardView(),
+            const SizedBox(height: 20),
+            TextButton(
+              onPressed: () => Navigator.of(context).push<void>(
+                PinballGamePage.route(
+                  theme: context.read<ThemeCubit>().state.theme,
+                ),
+              ),
+              child: Text(l10n.retry),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _LeaderBoardView extends StatelessWidget {
+  const _LeaderBoardView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(20),
+      child: SingleChildScrollView(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: const [
+            _LeaderBoardHeaders(),
+            _LeaderBoardList(),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _LeaderBoardHeaders extends StatelessWidget {
+  const _LeaderBoardHeaders({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        _LeaderBoardHeaderItem(title: l10n.rank),
+        _LeaderBoardHeaderItem(title: l10n.userName),
+        _LeaderBoardHeaderItem(title: l10n.score),
+      ],
+    );
+  }
+}
+
+class _LeaderBoardHeaderItem extends StatelessWidget {
+  const _LeaderBoardHeaderItem({Key? key, required this.title})
+      : super(key: key);
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color:
+              context.read<ThemeCubit>().state.theme.characterTheme.ballColor,
+        ),
+        child: Text(
+          title,
+          style: Theme.of(context).textTheme.headline5,
+        ),
+      ),
+    );
+  }
+}
+
+class _LeaderBoardList extends StatelessWidget {
+  const _LeaderBoardList({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      shrinkWrap: true,
+      itemBuilder: (_, index) => _LeaderBoardCompetitor(
+        competitor: Competitor(
+          rank: index,
+          userName: 'user$index',
+          score: 0,
+        ),
+      ),
+      itemCount: 10,
+    );
+  }
+}
+
+class _LeaderBoardCompetitor extends StatelessWidget {
+  const _LeaderBoardCompetitor({Key? key, required this.competitor})
+      : super(key: key);
+
+  final Competitor competitor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        _LeaderBoardCompetitorField(text: competitor.rank.toString()),
+        _LeaderBoardCompetitorField(text: competitor.userName),
+        _LeaderBoardCompetitorField(text: competitor.score.toString()),
+      ],
+    );
+  }
+}
+
+class _LeaderBoardCompetitorField extends StatelessWidget {
+  const _LeaderBoardCompetitorField({Key? key, required this.text})
+      : super(key: key);
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          border: Border.all(
+            color:
+                context.read<ThemeCubit>().state.theme.characterTheme.ballColor,
+            width: 2,
+          ),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.all(8),
+          child: Text(text),
+        ),
+      ),
+    );
+  }
+}
+
+class Competitor {
+  Competitor({required this.rank, required this.userName, required this.score});
+
+  final int rank;
+  final String userName;
+  final int score;
+}