From 77641ed67facb4d48c9bf1d7e2394485228faafb Mon Sep 17 00:00:00 2001
From: Timo Schwarzer <timo@schwarzer.dev>
Date: Tue, 16 Jul 2024 19:45:09 +0200
Subject: [PATCH] Visualize compensation points better

---
 components/League/PointsView.vue   |  2 +-
 pages/league/seasons/_seasonId.vue | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/League/PointsView.vue b/components/League/PointsView.vue
index 8fd8275..3d09445 100644
--- a/components/League/PointsView.vue
+++ b/components/League/PointsView.vue
@@ -31,7 +31,7 @@
         This game does not count towards the leaderboard.
       </template>
     </div>
-    <span v-else>Worst race gets discarded</span>
+    <span v-else>Worst game gets discarded over time</span>
   </v-tooltip>
 </template>
 
diff --git a/pages/league/seasons/_seasonId.vue b/pages/league/seasons/_seasonId.vue
index 6379b65..9aaa01d 100644
--- a/pages/league/seasons/_seasonId.vue
+++ b/pages/league/seasons/_seasonId.vue
@@ -106,6 +106,20 @@
                     Submitted to current game
                   </v-tooltip>
                 </template>
+                <template #item.points="{ item }">
+                  <v-tooltip left open-delay="500" :disabled="item.rankingCompensationPoints === 0">
+                    <template #activator="{ on }">
+                      <span :class="{'compensating-points': item.rankingCompensationPoints > 0}" v-on="on">
+                        {{ item.points }}
+                      </span>
+                    </template>
+                    <div class="text-right">
+                      Includes {{ item.rankingCompensationPoints }} {{ item.rankingCompensationPoints === 1 ? 'point' : 'points' }} to compensate<br>
+                      missed or unusually bad games. These points<br>
+                      disappear over time until the end of the season.
+                    </div>
+                  </v-tooltip>
+                </template>
 
                 <!-- no data -->
                 <template #no-data>
@@ -689,4 +703,13 @@
     margin-right: 0.5em;
     margin-left: -0.5em;
   }
+
+  .compensating-points {
+    &::before {
+      content: '℮';
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    cursor: help;
+  }
 </style>