Only show numerical rank and win totals on hover

danieldickison · Jan 1, 2024 · cc96c3c · cc96c3c
1 parent 4649d77
commit cc96c3c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/public/scss/index.scss b/public/scss/index.scss
@@ -145,24 +145,51 @@
                 }
 
                 &.rank-name-y {
-                    font-size: larger;
+                    font-size: x-large;
+                }
+                &.rank-name-o,
+                &.rank-name-s,
+                &.rank-name-k, {
+                    font-size: large;
                 }
                 &.rank-name-j {
-                    font-size: smaller;
+                    font-size: small;
+                }
+                &.rank-name-ms {
+                    font-size: x-small;
+                }
+                &.rank-name-sd,
+                &.rank-name-jd,
+                &.rank-name-jk {
+                    font-size: xx-small;
                 }
 
                 a {
                     color: inherit;
                 }
 
                 h3 {
-                    text-align: center;
+                    text-align: left;
                     margin: 1.5em 0 0.25em;
+
+                    > .hover {
+                        font-size: x-small;
+                        color: var(--color-fg-sub);
+                        opacity: 0;
+                    }
+                }
+                &:hover h3 > .hover {
+                    opacity: 1;
                 }
 
                 .players {
                     margin: 0;
                     padding: 0;
+                    display: flex;
+                    flex-flow: row wrap;
+                    align-items: baseline;
+                    column-gap: 1em;
+
                     > li {
                         list-style: none;
 
@@ -172,27 +199,6 @@
                         }
                     }
                 }
-
-                .wins {
-                    font-size: smaller;
-
-                    &::before {
-                        content: '(';
-                    }
-                    &::after {
-                        content: ')';
-                    }
-                }
-
-                .ord {
-                    font-size: smaller;
-                    display: inline-block;
-                    min-width: 3ex;
-
-                    &::before {
-                        content: '#';
-                    }
-                }
             }
         }
 

diff --git a/src/handlers/index.rs b/src/handlers/index.rs
@@ -21,10 +21,13 @@ pub struct IndexTemplate {
 }
 
 impl IndexTemplate {
-    fn leaders_by_rank(&self) -> Vec<(Rank, &[PlayerRanking])> {
+    fn leaders_by_rank(&self) -> Vec<(Rank, usize, u32, &[PlayerRanking])> {
         self.leaders
             .group_runs(|a, b| a.rank == b.rank)
-            .map(|group| (group.first().unwrap().rank, group))
+            .map(|group| {
+                let first = group.first().unwrap();
+                (first.rank, first.ord, first.wins, group)
+            })
             .collect()
     }
 

diff --git a/templates/index.html b/templates/index.html
@@ -75,23 +75,18 @@ <h2>
             </p>
             {% endif %}
             <div class="grid">
-            {% for (rank, players) in self.leaders_by_rank() %}
+            {% for (rank, ord, wins, players) in self.leaders_by_rank() %}
                 <div id="leaderboard-rank-{{rank}}"
                     class="group side-{{rank.side}} rank-name-{{rank.name|lower}}"
                 >
-                    <h3>{{"{:#}"|format(rank)}}</h3>
+                    <h3>
+                        {{"{:#}"|format(rank)}}
+                        <span class="hover">#{{ord}} ({{wins}} wins)</span>
+                    </h3>
                     <ol class="players">
                     {% for player in players %}
                         <li {% if self.is_self(player) %}class="self"{% endif %}>
-                            <span class="ord">
-                                {{-player.ord-}}
-                            </span>
-                            <span class="player">
-                                {{player.player.render().unwrap()|safe}}
-                            </span>
-                            <span class="wins">
-                                {{-player.wins-}}
-                            </span>
+                            {{player.player.render().unwrap()|safe}}
                         </li>
                     {% endfor %}
                     </ol>