redesign progress

lib/main.dart

@@ -30,7 +30,7 @@ ThemeData theme = ThemeData(
   colorScheme: const ColorScheme.dark(
     primary: Colors.cyanAccent,
     surface: Color.fromARGB(255, 10, 10, 10),
-    secondary: Colors.white,
+    secondary: Color(0xFF00838F),
   ),
   cardTheme: const CardTheme(surfaceTintColor: Color.fromARGB(255, 10, 10, 10)),
   drawerTheme: const DrawerThemeData(surfaceTintColor: Color.fromARGB(255, 10, 10, 10)),
@@ -39,6 +39,17 @@ ThemeData theme = ThemeData(
     shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(left: Radius.circular(12.0), right: Radius.circular(12.0)))),
     elevation: WidgetStatePropertyAll(8.0)
   ),
+  chipTheme: ChipThemeData(
+    side: BorderSide(color: Colors.transparent),
+  ),
+  segmentedButtonTheme: SegmentedButtonThemeData(
+    style: ButtonStyle(
+      side: WidgetStatePropertyAll(BorderSide(color: Colors.transparent)),
+      surfaceTintColor: WidgetStatePropertyAll(Colors.cyanAccent),
+      iconColor: WidgetStatePropertyAll(Colors.cyanAccent),
+      shadowColor: WidgetStatePropertyAll(Colors.cyanAccent.shade200),
+    )
+  ),
   scaffoldBackgroundColor: Colors.black
 );
 

lib/views/main_view_tiles.dart

@@ -9,9 +9,13 @@ import 'package:tetra_stats/gen/strings.g.dart';
 import 'package:tetra_stats/utils/numers_formats.dart';
 import 'package:tetra_stats/utils/relative_timestamps.dart';
 import 'package:tetra_stats/utils/text_shadow.dart';
+import 'package:tetra_stats/views/tl_match_view.dart';
+import 'package:tetra_stats/widgets/list_tile_trailing_stats.dart';
+import 'package:tetra_stats/widgets/stat_sell_num.dart';
 import 'package:tetra_stats/widgets/text_timestamp.dart';
 import 'package:tetra_stats/data_objects/tetrio.dart';
 import 'package:tetra_stats/main.dart';
+import 'package:tetra_stats/widgets/tl_progress_bar.dart';
 import 'package:tetra_stats/widgets/tl_rating_thingy.dart';
 import 'package:tetra_stats/widgets/user_thingy.dart';
 
@@ -26,7 +30,9 @@ class MainView extends StatefulWidget {
   State<MainView> createState() => _MainState();
 }
 
+enum Page {home, leaderboards, leagueAverages, calculator, settings}
 enum Cards {overview, tetraLeague, quickPlay, quickPlayExpert, sprint, blitz, other}
+enum CardMod {info, recent}
 Map<Cards, String> cardsTitles = {
   Cards.overview: "Overview",
   Cards.tetraLeague: t.tetraLeague,
@@ -75,12 +81,15 @@ TetrioPlayer testPlayer = TetrioPlayer(
     rating: 23500.6194,
     glicko: 3847.2134,
     rd: 61.95383,
+    apm: 62.48,
+    pps: 1.85,
+    vs: 134.32,
     rank: "x",
     percentileRank: "x",
     percentile: 0.00,
     standing: 1,
     standingLocal: 1,
-    nextAt: -1,
+    nextAt: 1,
     prevAt: 500
   ),
   //distinguishment: Distinguishment(type: "twc", detail: "2023"),
@@ -95,6 +104,7 @@ late ScrollController controller;
 
 class _MainState extends State<MainView> with TickerProviderStateMixin {
   String _searchFor = "6098518e3d5155e6ec429cdc";
+  Cards rightCard = Cards.tetraLeague;
   final TextEditingController _searchController = TextEditingController();
 
   @override
@@ -263,48 +273,66 @@ class _MainState extends State<MainView> with TickerProviderStateMixin {
                       ),
                       TetraLeagueThingy(league: testPlayer.tlSeason1!),
                       //const Card(),
+                      SegmentedButton<CardMod>(
+                        showSelectedIcon: false,
+                        selected: <CardMod>{CardMod.info},
+                        segments: <ButtonSegment<CardMod>>[
+                          ButtonSegment<CardMod>(
+                              value: CardMod.info,
+                              label: Text('PB'),
+                              //icon: Icon(Icons.calendar_view_day)
+                            ),
+                          ButtonSegment<CardMod>(
+                              value: CardMod.recent,
+                              label: Text('Recent'),
+                              //icon: Icon(Icons.calendar_view_day)
+                            ),
+                        ]
+                      ),
                       SegmentedButton<Cards>(
-                        segments: const <ButtonSegment<Cards>>[
+                        showSelectedIcon: false,
+                        segments: <ButtonSegment<Cards>>[
                           ButtonSegment<Cards>(
                               value: Cards.overview,
-                              label: Text('Overview'),
+                              //label: Text('Overview'),
                               icon: Icon(Icons.calendar_view_day)),
                           ButtonSegment<Cards>(
                               value: Cards.tetraLeague,
-                              label: Text('Tetra League'),
+                              //label: Text('Tetra League'),
-                              icon: Icon(Icons.calendar_view_week)),
+                              icon: SvgPicture.asset("res/icons/league.svg", height: 16, colorFilter: ColorFilter.mode(theme.colorScheme.primary, BlendMode.modulate))),
                           ButtonSegment<Cards>(
                               value: Cards.quickPlay,
-                              label: Text('Quick Play'),
+                              //label: Text('Quick Play'),
-                              icon: Icon(Icons.calendar_view_month)),
+                              icon: SvgPicture.asset("res/icons/qp.svg", height: 16, colorFilter: ColorFilter.mode(theme.colorScheme.primary, BlendMode.modulate))),
                           // ButtonSegment<Cards>(
                           //     value: Cards.quickPlayExpert,
                           //     label: Text('QP Expert'),
                           //     icon: Icon(Icons.calendar_today)),
                           ButtonSegment<Cards>(
                               value: Cards.sprint,
-                              label: Text('40 Lines'),
+                              //label: Text('40 Lines'),
-                              icon: Icon(Icons.calendar_today)),
+                              icon: SvgPicture.asset("res/icons/40l.svg", height: 16, colorFilter: ColorFilter.mode(theme.colorScheme.primary, BlendMode.modulate))),
                           ButtonSegment<Cards>(
                               value: Cards.blitz,
-                              label: Text('Blitz'),
+                              //label: Text('Blitz'),
-                              icon: Icon(Icons.calendar_today)),
+                              icon: SvgPicture.asset("res/icons/blitz.svg", height: 16, colorFilter: ColorFilter.mode(theme.colorScheme.primary, BlendMode.modulate))),
                           // ButtonSegment<Cards>(
                           //     value: Cards.other,
                           //     label: Text('Other'),
                           //     icon: Icon(Icons.calendar_today)),
                         ],
-                        selected: const <Cards>{Cards.tetraLeague},
+                        selected: <Cards>{rightCard},
                         onSelectionChanged: (Set<Cards> newSelection) {
                           setState(() {
-                            // By default there is only a single segment that can be
+                            rightCard = newSelection.first;
-                            // selected at one time, so its value is always the first
-                            // item in the selected set.
-                            //calendarView = newSelection.first;
                           });})
                     ],
                   ),
                 ),
+                // SizedBox(
+                //     width: 450,
+                //     child: _TLRecords(userID: "snapshot.data![0].userId", changePlayer: changePlayer, data: [], wasActiveInTL: true, oldMathcesHere: false, separateScrollController: true)
+                // )
                 ],
               ),
           ],
@@ -815,11 +843,11 @@ class NewUserThingy extends StatelessWidget {
                       text: TextSpan(
                         style: const TextStyle(fontFamily: "Eurostile Round"),
                         children: [
-                          TextSpan(text: "Level ${intf.format(player.level.floor())}", recognizer: TapGestureRecognizer()..onTap = (){
+                          TextSpan(text: "Level ${intf.format(player.level.floor())}", style: TextStyle(decoration: TextDecoration.underline, decorationColor: Colors.white70, decorationStyle: TextDecorationStyle.dotted), recognizer: TapGestureRecognizer()..onTap = (){
                             showDialog(
                               context: context,
                               builder: (BuildContext context) => AlertDialog(
-                                title: Text("Level ${intf.format(player.level.floor())}"),  
+                                title: Text("Level ${intf.format(player.level.floor())}", textAlign: TextAlign.center),  
                                 content: SingleChildScrollView(
                                   child: ListBody(children: [
                                     Text(
@@ -855,18 +883,25 @@ class NewUserThingy extends StatelessWidget {
                             );
                           }),
                           const TextSpan(text:"\n"),
-                          TextSpan(text: player.gameTime.isNegative ? "-h --m" : playtime(player.gameTime), style: TextStyle(color: player.gameTime.isNegative ? Colors.grey : Colors.white), recognizer: !player.gameTime.isNegative ? (TapGestureRecognizer()..onTap = (){
+                          TextSpan(text: player.gameTime.isNegative ? "-h --m" : playtime(player.gameTime), style: TextStyle(color: player.gameTime.isNegative ? Colors.grey : Colors.white, decoration: player.gameTime.isNegative ? null : TextDecoration.underline, decorationColor: Colors.white70, decorationStyle: TextDecorationStyle.dotted), recognizer: !player.gameTime.isNegative ? (TapGestureRecognizer()..onTap = (){
                             showDialog(
                               context: context,
                               builder: (BuildContext context) => AlertDialog(
-                                title: Text(t.exactGametime),  
+                                title: Text(t.exactGametime, textAlign: TextAlign.center),  
                                 content: SingleChildScrollView(
                                   child: ListBody(children: [
                                     Text(
-                                      //"${intf.format(testPlayer.gameTime.inDays)} d\n${nonsecs.format(testPlayer.gameTime.inHours%24)} h\n${nonsecs.format(testPlayer.gameTime.inMinutes%60)} m\n${nonsecs.format(testPlayer.gameTime.inSeconds%60)} s\n${nonsecs3.format(testPlayer.gameTime.inMilliseconds%1000)} ms\n${nonsecs.format(testPlayer.gameTime.inMicroseconds%1000)} μs",
                                       "${intf.format(player.gameTime.inDays)}d ${nonsecs.format(player.gameTime.inHours%24)}h ${nonsecs.format(player.gameTime.inMinutes%60)}m ${nonsecs.format(player.gameTime.inSeconds%60)}s ${nonsecs3.format(player.gameTime.inMilliseconds%1000)}ms ${nonsecs3.format(player.gameTime.inMicroseconds%1000)}μs",
                                       style: const TextStyle(fontFamily: "Eurostile Round", fontSize: 24)
                                       ),
+                                    Padding(
+                                      padding: const EdgeInsets.only(top: 8.0),
+                                      child: Text("It's ${f4.format(player.gameTime.inSeconds/31536000)} years,"),
+                                    ),
+                                    Text("${f4.format(player.gameTime.inSeconds/2628000)} monts,"),
+                                    Text("${f4.format(player.gameTime.inSeconds/3600)} hours,"),
+                                    Text("${f2.format(player.gameTime.inMilliseconds/60000)} minutes,"),
+                                    Text("${intf.format(player.gameTime.inSeconds)} seconds"),
                                     ]
                                     ),
                                 ),
@@ -984,29 +1019,176 @@ class TetraLeagueThingy extends StatelessWidget{
     return Card(
       child: Column(
         children: [
-          TLRatingThingy(userID: "w", tlData: league)
+          TLRatingThingy(userID: "w", tlData: league),
-          // SfRadialGauge(
+          TLProgress(tlData: league,),
-          //   axes: [
+          Wrap(
-          //     RadialAxis(
+            spacing: 25.0,
-          //       radiusFactor: 0.7,
+            alignment: WrapAlignment.spaceAround,
-          //       showTicks: false,
+            crossAxisAlignment: WrapCrossAlignment.center,
-          //       showLabels: false,
+            children: [
-          //       annotations: [
+              Table(
-          //         GaugeAnnotation(widget: Container(height: 196, child:
+                defaultColumnWidth:IntrinsicColumnWidth(),
-          //         Image.asset("res/tetrio_tl_alpha_ranks/${league.rank}.png")),
+                children: [
-          //         angle: 270,positionFactor: 0.05
+                  TableRow(children: [
-          //         ),
+                    Text("APM: ", style: TextStyle(fontSize: 21)),
+                    Text(league.apm != null ? f2.format(league.apm) : "---", textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                    //Text(" APM", style: TextStyle(fontSize: 21))
+                  ]),
+                  TableRow(children: [
+                    Text("PPS: ", style: TextStyle(fontSize: 21)),
+                    Text(league.apm != null ? f2.format(league.pps) : "---", textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                    //Text(" PPS", style: TextStyle(fontSize: 21))
+                  ]),
+                  TableRow(children: [
+                    Text("VS: ", style: TextStyle(fontSize: 21)),
+                    Text(league.apm != null ? f2.format(league.vs) : "---", textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                   // Text(" VS", style: TextStyle(fontSize: 21))
+                  ])
+                ],
+              ),
+              SizedBox(
+                height: 128.0,
+                width: 128.0,
+                child: SfRadialGauge(
+                  axes: [
+                    RadialAxis(
+                      // startAngle: 180,
+                      // endAngle: 0,
+                      minimum: 0.4,
+                      maximum: 0.6,
+                      //radiusFactor: 1.5,
+                      showTicks: true,
+                      showLabels: false,
+                      interval: 0.1,
+                      //labelsPosition: ElementsPosition.outside,
+                      ranges:[
+                        GaugeRange(startValue: 0, endValue: league.winrate, color: theme.colorScheme.primary)
+                      ],
+                      annotations: [
+                        GaugeAnnotation(widget: Container(child:
+                        Text('${f2l.format(league.winrate*100)}%\nWR', textAlign: TextAlign.center, style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
+                        angle: 90,positionFactor: 0.1
+                        ),
                         // GaugeAnnotation(widget: Container(child:
-          //         Text('24803.7921 TR',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
+                        // Text('50.03%\nWR', textAlign: TextAlign.center, style: TextStyle(fontFamily: "Eurostile Round Extended", fontSize: 22))),
-          //         angle: 90,positionFactor: 0.9
+                        // angle: 90,positionFactor: 0.5
                         // )
-          //       ],
+                      ],
-          //     )
+                    )
-          //   ],
+                  ]
-          //   enableLoadingAnimation: true,
+                ),
+              ),
+              Table(
+                defaultColumnWidth:IntrinsicColumnWidth(),
+                children: [
+                  TableRow(children: [
+                    //Text("APM: ", style: TextStyle(fontSize: 21)),
+                    Text(intf.format(league.gamesPlayed), textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                    Text(" GP", style: TextStyle(fontSize: 21))
+                  ]),
+                  TableRow(children: [
+                    //Text("PPS: ", style: TextStyle(fontSize: 21)),
+                    Text(intf.format(league.gamesWon), textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                    Text(" GW", style: TextStyle(fontSize: 21))
+                  ]),
+                  TableRow(children: [
+                    //Text("VS: ", style: TextStyle(fontSize: 21)),
+                    Text("№ ${intf.format(league.standingLocal)}", textAlign: TextAlign.right, style: TextStyle(fontSize: 21)),
+                    Text(" in BY", style: TextStyle(fontSize: 21))
+                  ])
+                ],
+              ),
+              // RichText(
+              //   textAlign: TextAlign.right,
+              //   text: TextSpan(
+              //     style: const TextStyle(color: Colors.white, fontFamily: "Eurostile Round", fontSize: 12),
+              //     children: [
+              //       TextSpan(text: "${league.apm != null ? f2.format(league.apm) : "---"} APM"),
+              //       const TextSpan(text: "\n"),
+              //       TextSpan(text: "${league.pps != null ? f2.format(league.pps) : "---"} PPS"),
+              //       const TextSpan(text: "\n"),
+              //       TextSpan(text: "${league.vs != null ? f2.format(league.vs) : "---"} VS"),
+              //     ]
               //   )
+              // ),
+              // StatCellNum(playerStat: league.apm??0.00, fractionDigits: 2, playerStatLabel: "APM", isScreenBig: true, higherIsBetter: true),
+              // StatCellNum(playerStat: league.pps??0.00, fractionDigits: 2, playerStatLabel: "PPS", isScreenBig: true, higherIsBetter: true),
+              // StatCellNum(playerStat: league.vs??0.00, fractionDigits: 2, playerStatLabel: "VS", isScreenBig: true, higherIsBetter: true),
+              
+            ],
+          )
         ],
       ),
     );
   }
 }
+
+class _TLRecords extends StatelessWidget {
+  final String userID;
+  final Function changePlayer;
+  final List<BetaRecord> data;
+  final bool wasActiveInTL;
+  final bool oldMathcesHere;
+  final bool separateScrollController;
+
+  /// Widget, that displays Tetra League records.
+  /// Accepts list of TL records ([data]) and [userID] of player from the view
+  const _TLRecords({required this.userID, required this.changePlayer, required this.data, required this.wasActiveInTL, required this.oldMathcesHere, this.separateScrollController = false});
+
+  @override
+  Widget build(BuildContext context) {
+    if (data.isEmpty) {
+      return Center(child: Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(t.noRecords, style: const TextStyle(fontFamily: "Eurostile Round", fontSize: 28)),
+        if (wasActiveInTL) Text(t.errors.actionSuggestion),
+        if (wasActiveInTL) TextButton(onPressed: (){changePlayer(userID, fetchTLmatches: true);}, child: Text(t.fetchAndSaveOldTLmatches))
+      ],
+    ));
+    }
+    bool bigScreen = MediaQuery.of(context).size.width >= 768;
+    int length = data.length;
+    return ListView.builder(
+      physics: const AlwaysScrollableScrollPhysics(),
+      controller: separateScrollController ? ScrollController() : null,
+      itemCount: oldMathcesHere ? length : length + 1,
+      itemBuilder: (BuildContext context, int index) {
+        if (index == length) {
+          return Center(child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(t.noOldRecords(n: length), style: const TextStyle(fontFamily: "Eurostile Round", fontSize: 28)),
+            if (wasActiveInTL) Text(t.errors.actionSuggestion),
+            if (wasActiveInTL) TextButton(onPressed: (){changePlayer(userID, fetchTLmatches: true);}, child: Text(t.fetchAndSaveOldTLmatches))
+          ],
+        ));
+        }
+
+        var accentColor = data[index].results.leaderboard.firstWhere((element) => element.id == userID).wins > data[index].results.leaderboard.firstWhere((element) => element.id != userID).wins ? Colors.green : Colors.red;
+      return Container(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            stops: const [0, 0.05],
+            colors: [accentColor, Colors.transparent]
+          )
+        ),
+        child: ListTile(
+          leading: Text("${data[index].results.leaderboard.firstWhere((element) => element.id == userID).wins} : ${data[index].results.leaderboard.firstWhere((element) => element.id != userID).wins}",
+          style: bigScreen ? const TextStyle(fontFamily: "Eurostile Round Extended", fontSize: 28, shadows: textShadow) : const TextStyle(fontSize: 28, shadows: textShadow)),
+          title: Text("vs. ${data[index].results.leaderboard.firstWhere((element) => element.id != userID).username}"),
+          subtitle: Text(timestamp(data[index].ts), style: const TextStyle(color: Colors.grey)),
+          trailing: TrailingStats(
+            data[index].results.leaderboard.firstWhere((element) => element.id == userID).stats.apm,
+            data[index].results.leaderboard.firstWhere((element) => element.id == userID).stats.pps,
+            data[index].results.leaderboard.firstWhere((element) => element.id == userID).stats.vs,
+            data[index].results.leaderboard.firstWhere((element) => element.id != userID).stats.apm,
+            data[index].results.leaderboard.firstWhere((element) => element.id != userID).stats.pps,
+            data[index].results.leaderboard.firstWhere((element) => element.id != userID).stats.vs,
+            ),
+          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => TlMatchResultView(record: data[index], initPlayerId: userID))) //Navigator.push(context, MaterialPageRoute(builder: (context) => TlMatchResultView(record: data[index], initPlayerId: userID))),
+        ),
+      );
+    });
+  }
+}

lib/widgets/tl_progress_bar.dart

@@ -10,8 +10,6 @@ import 'package:tetra_stats/utils/numers_formats.dart';
 
 class TLProgress extends StatelessWidget{
   final TetraLeagueAlpha tlData;
-  final String? nextRank;
-  final String? previousRank;
   final double? nextRankTRcutoff;
   final double? previousRankTRcutoff;
   final double? nextRankGlickoCutoff;
@@ -19,7 +17,7 @@ class TLProgress extends StatelessWidget{
   final double? nextRankTRcutoffTarget;
   final double? previousRankTRcutoffTarget;
 
-  const TLProgress({super.key, required this.tlData, this.nextRank, this.previousRank, this.nextRankTRcutoff, this.previousRankTRcutoff, this.nextRankGlickoCutoff, this.previousGlickoCutoff, this.nextRankTRcutoffTarget, this.previousRankTRcutoffTarget});
+  const TLProgress({super.key, required this.tlData, this.nextRankTRcutoff, this.previousRankTRcutoff, this.nextRankGlickoCutoff, this.previousGlickoCutoff, this.nextRankTRcutoffTarget, this.previousRankTRcutoffTarget});
 
   double getBarPosition(){
     return min(max(0, 1 - (tlData.standing - tlData.nextAt)/(tlData.prevAt - tlData.nextAt)), 1);
@@ -31,22 +29,16 @@ class TLProgress extends StatelessWidget{
 
   @override
   Widget build(BuildContext context) {
-    if (nextRank == null && previousRank == null && nextRankTRcutoff == null && previousRankTRcutoff == null && nextRankGlickoCutoff == null && previousGlickoCutoff == null && nextRankTRcutoffTarget == null && previousRankTRcutoffTarget == null) return Container();
+    if (tlData.prevAt < 0 && tlData.nextAt < 0 && nextRankTRcutoff == null && previousRankTRcutoff == null && nextRankGlickoCutoff == null && previousGlickoCutoff == null && nextRankTRcutoffTarget == null && previousRankTRcutoffTarget == null) return Container();
     final glickoForWin = rate(tlData.glicko!, tlData.rd!, 0.06, [[tlData.glicko!, tlData.rd!, 1]], {})[0]-tlData.glicko!;
     return Padding(
       padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          SizedBox(
+          Row(
-            width: MediaQuery.of(context).size.width,
-            height: 48,
-            child: Stack(
-              alignment: AlignmentDirectional.bottomCenter,
-              fit: StackFit.expand,
             children: [
-              Positioned(left: 0, 
+              RichText(
-                child: RichText(
                 textAlign: TextAlign.left,
                 text: TextSpan(
                   style: const TextStyle(color: Colors.white, fontFamily: "Eurostile Round", fontSize: 12),
@@ -59,9 +51,8 @@ class TLProgress extends StatelessWidget{
                   ]
                 )
               ),
-              ),
+              Spacer(),
-              Positioned(right: 0,
+              RichText(
-                child: RichText(
                 textAlign: TextAlign.right,
                 text: TextSpan(
                   style: const TextStyle(color: Colors.white, fontFamily: "Eurostile Round", fontSize: 12),
@@ -73,9 +64,8 @@ class TLProgress extends StatelessWidget{
                     if (nextRankGlickoCutoff != null) TextSpan(text: (tlData.standing < tlData.nextAt || ((nextRankGlickoCutoff!-tlData.glicko!)/glickoForWin < 0.5 && ((tlData.rank != "x" && tlData.rank != "z") || tlData.percentileRank != "x"))) ? t.promotionOnNextWin : t.numOfVictories(wins: f2.format((nextRankGlickoCutoff!-tlData.glicko!)/glickoForWin)), style: TextStyle(color: (tlData.standing < tlData.nextAt || ((nextRankGlickoCutoff!-tlData.glicko!)/glickoForWin < 0.5 && tlData.percentileRank != "x")) ? Colors.greenAccent : null))
                   ]
                 )
-                ),
               )
-            ],),
+            ],
           ),
           SfLinearGauge(
             minimum: 0,

lib/widgets/tl_thingy.dart

@@ -165,12 +165,10 @@ class _TLThingyState extends State<TLThingy> with TickerProviderStateMixin {
                 tlData: currentTl,
                 previousRankTRcutoff: widget.thatRankCutoff,
                 previousGlickoCutoff: widget.thatRankCutoffGlicko,
-                previousRank: widget.tl.prevRank,
                 previousRankTRcutoffTarget: widget.thatRankTarget,
                 nextRankTRcutoff: widget.nextRankCutoff,
                 nextRankGlickoCutoff: widget.nextRankCutoffGlicko,
                 nextRankTRcutoffTarget: widget.nextRankTarget,
-                nextRank: widget.tl.nextRank
               ),
               if (currentTl.gamesPlayed < 10)
                 Text(t.gamesUntilRanked(left: 10 - currentTl.gamesPlayed),

res/icons/40l.svg

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="360mm"
+   height="150mm"
+   viewBox="0 0 360 150"
+   version="1.1"
+   id="svg95853"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="40l.svg">
+  <defs
+     id="defs95847" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.5"
+     inkscape:cx="469.93678"
+     inkscape:cy="-94.189212"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1676"
+     inkscape:window-y="-4"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata95850">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,3.0000027)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0,87 H 60.000002 V 57 H 30.000001 V -3.0000027 H 0 Z"
+       id="path100330-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.7962963;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347"
+       width="120"
+       height="30"
+       x="27"
+       y="-90"
+       transform="rotate(90)" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 120,-3 h 60 v 30 h -30 v 60 h -30 z"
+       id="path100330-0"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.6712963;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 120,147 V 87 h 30 v 30 h 60 v 30 z"
+       id="path100330-0-8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.83333331;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-6"
+       width="120"
+       height="30.000002"
+       x="-117"
+       y="180"
+       transform="rotate(-90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9"
+       width="120"
+       height="30.000002"
+       x="-117"
+       y="240"
+       transform="rotate(-90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.8287037;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9-9"
+       width="120"
+       height="30.000002"
+       x="240"
+       y="117" />
+  </g>
+</svg>

res/icons/blitz.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="390mm"
+   height="150.00002mm"
+   viewBox="0 0 390 150.00002"
+   version="1.1"
+   id="svg95853"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="blitz.svg">
+  <defs
+     id="defs95847" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35355339"
+     inkscape:cx="560.53089"
+     inkscape:cy="314.22402"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1676"
+     inkscape:window-y="-4"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata95850">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(1e-6,3.0000076)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M -1e-6,-3.000002 H 59.999998 V 26.999999 H 29.999999 v 60 h -30 z"
+       id="path100330-0-8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9"
+       width="120"
+       height="30.000002"
+       x="-116.99999"
+       y="120"
+       transform="rotate(-90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.81944442;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9-9"
+       width="120"
+       height="30.000002"
+       x="120"
+       y="116.99999" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.7962963;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 89.999986,26.999997 -29.999988,2e-6 -10e-6,30 h -30 v 29.999999 l 30.000001,10e-7 V 117 h 30.000007 z"
+       id="path100330-7-0"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.6712963;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M -1e-6,147 V 86.999999 h 30 V 117 h 60.000003 v 30 z"
+       id="path100330-0-8-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 360,-3.0000057 V 56.999997 H 330 V 26.999994 H 270 V -3.0000057 Z"
+       id="path100330-0-8-49"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.81018519;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 270,56.999997 V 117 h 29.99999 V 86.999995 H 360 V 56.999997 Z"
+       id="path100330-7-8-9"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.64351851;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9-9-0"
+       width="120"
+       height="30.000002"
+       x="270"
+       y="117" />
+  </g>
+</svg>

res/icons/league.svg

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="420mm"
+   height="150mm"
+   viewBox="0 0 420 150"
+   version="1.1"
+   id="svg95853"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="league.svg">
+  <defs
+     id="defs95847" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.25"
+     inkscape:cx="259.85326"
+     inkscape:cy="119.35595"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1676"
+     inkscape:window-y="-4"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata95850">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(1e-6,3.0000076)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.82407409;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9"
+       width="120"
+       height="30.000002"
+       x="-3.0000076"
+       y="-119.99999"
+       transform="rotate(90)" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 300.00001,-2.9999986 V 57.000001 H 330 v -30 h 60 V -2.9999986 Z"
+       id="path100330-7-8-9"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M -1e-6,56.999992 V -3.000006 h 29.99998 v 29.999998 h 60.00001 v 30 z"
+       id="path100330-7-8-9-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9-1"
+       width="120"
+       height="30.000002"
+       x="-2.9999986"
+       y="-180"
+       transform="rotate(90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.81018519;stroke:none;stroke-width:1.88264012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect100347-9-1-2"
+       width="120"
+       height="30.000002"
+       x="-270"
+       y="-147"
+       transform="scale(-1)" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.8287037;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 300.00001,146.99999 h 60 V 117 h -30 V 57.000001 h -30 z"
+       id="path100330-7-8-9-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:0.63425928;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 420,146.99998 H 358 V 117 h 32 V 56.999985 h 30 z"
+       id="path100330-7-8-9-2-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>

res/icons/qp.svg

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="390mm"
+   height="150.00002mm"
+   viewBox="0 0 390 150.00002"
+   version="1.1"
+   id="svg95853"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   sodipodi:docname="qp.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs95847" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.32485136"
+     inkscape:cx="763.42609"
+     inkscape:cy="427.88801"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1732"
+     inkscape:window-height="1052"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" />
+  <metadata
+     id="metadata95850">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,3.000003)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0,86.999997 h 60 v -30 H 30 V -3.0000027 H 0 Z"
+       id="path100330-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.796078;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 120,-3.0000027 V 56.999996 H 90 V 26.999997 H 30 V -3.0000027 Z"
+       id="path100330-7-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 390,-3.000003 V 57 H 360 V 26.999997 h -60 v -30 z"
+       id="path100330-0-8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.796078;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 300,117 V 57 h 30 v 30.000003 h 60 V 117 Z"
+       id="path100330-0-8-5"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.671296;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 120,56.999996 H 59.999997 v 30 H 90.000002 V 147.00001 H 120 Z"
+       id="path100330-0-8-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.670588;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 270,86.999998 h -60 v -30 h 30 V -3.0000027 h 30 z"
+       id="path100330-7-0"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 150,-3.0000027 V 56.999998 h 30 v -30 h 60 V -3.0000027 Z"
+       id="path100330-7-3-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.796078;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 150,56.999998 h 60 v 30 h -30 v 60.000012 h -30 z"
+       id="path100330-0-8-2-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>