visual tournament progress on homepage

gkioumis · Dec 21, 2024 · 0278335 · 0278335
1 parent ceea64c
commit 0278335
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/modules/tournament/src/main/Tournament.scala b/modules/tournament/src/main/Tournament.scala
@@ -76,6 +76,14 @@ case class Tournament(
 
   def secondsToFinish = (finishesAt.toSeconds - nowSeconds).toInt.atLeast(0)
 
+  def progressPercent: Int =
+    if isCreated then 0
+    else if isFinished then 100
+    else
+      val total     = minutes * 60
+      val remaining = secondsToFinish
+      100 - (remaining * 100 / total)
+
   def pairingsClosed = secondsToFinish < math.max(30, math.min(clock.limitSeconds.value / 2, 120))
 
   def isStillWorthEntering =

diff --git a/modules/tournament/src/main/ui/TournamentUi.scala b/modules/tournament/src/main/ui/TournamentUi.scala
@@ -62,13 +62,18 @@ final class TournamentUi(helpers: Helpers)(getTourName: GetTourName):
       tours.map: tour =>
         val visiblePlayers = (tour.nbPlayers >= 10).option(tour.nbPlayers)
         tr(
-          td(cls := "name")(
+          td(
             a(cls := "text", dataIcon := tournamentIcon(tour), href := routes.Tournament.show(tour.id)):
               tour.name(full = false)
           ),
-          td(
-            if tour.isStarted then timeRemaining(tour.finishesAt)
-            else momentFromNow(tour.schedule.fold(tour.startsAt)(_.atInstant))
+          td(cls := "progress-td")(
+            span(cls := "progress")(
+              (
+                if tour.isStarted then timeRemaining(tour.finishesAt)
+                else momentFromNow(tour.schedule.fold(tour.startsAt)(_.atInstant))
+              ) (cls   := "progress__text"),
+              span(cls := "progress__bar", st.style := s"width:${tour.progressPercent}%")
+            )
           ),
           td(tour.durationString),
           tour.conditions.teamMember match

diff --git a/ui/lobby/css/_box.scss b/ui/lobby/css/_box.scss
@@ -69,4 +69,39 @@
   &__blog .lobby__box__top {
     border-bottom: $border;
   }
+
+  .progress-td {
+    padding: 0.3em 0.4em;
+  }
+  .progress {
+    border-radius: 2em;
+    display: block;
+    position: relative;
+    width: 30ch;
+    height: 1.25em;
+
+    background: $m-bg-page--fade-40;
+    @include if-light {
+      background: $m-shade--fade-40;
+    }
+    @include if-transp {
+      background: $m-bg--fade-40;
+    }
+    overflow: hidden;
+  }
+  .progress__bar {
+    border-radius: 2em;
+    display: block;
+    height: 100%;
+    background: $m-primary_bg-page__mix-20--fade-70;
+  }
+  .progress__text {
+    position: absolute;
+    color: $c-font;
+    font-size: 0.9em;
+    top: 0;
+    width: 100%;
+    @include inline-start(1.5ch);
+    z-index: 3;
+  }
 }