From bd265d36debd4a89e75580ad887ad780c1465dcd Mon Sep 17 00:00:00 2001
From: David Burhans <david.burhans@gmail.com>
Date: Mon, 15 Jun 2020 23:49:55 -0500
Subject: [PATCH] add pin indicator to stats page so users have an indication
 of why lower rate shapes may be at the top

---
 src/css/ingame_hud/statistics.scss         | 28 ++++++++++++++++++++++
 src/js/game/hud/parts/statistics_handle.js |  6 ++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss
index e53a80d1..595861e2 100644
--- a/src/css/ingame_hud/statistics.scss
+++ b/src/css/ingame_hud/statistics.scss
@@ -80,6 +80,7 @@
             background: #f4f4f4;
             @include S(margin-bottom, 4px);
             display: grid;
+            position: relative;
 
             @include DarkThemeOverride {
                 background: #222428;
@@ -103,6 +104,19 @@
 
                 @include S(padding, 0, 3px);
             }
+
+            div.pin {
+                @include S(width, 12px);
+                @include S(height, 12px);
+                @include S(padding, 0px);
+                background: uiResource("icons/pin.png") center center / 95% no-repeat;
+                position: absolute;
+
+                opacity: 0.6;
+                transition: opacity 0.12s ease-in-out;
+
+                @include DarkThemeInvert;
+            }
         }
     }
 
@@ -135,6 +149,13 @@
                     background: rgba(0, 10, 20, 0.05);
                     justify-self: end;
                 }
+
+                .pin {
+                    grid-column: 2 / 2;
+                    grid-row: 1 / 3;
+                    @include S(top, 4px);
+                    @include S(right, 8px);
+                }
             }
         }
         &[data-displaymode="detailed"] .content.hasEntries {
@@ -153,6 +174,13 @@
                     color: #55595a;
                 }
 
+                .pin {
+                    grid-column: 1 / 2;
+                    grid-row: 1 / 3;
+                    @include S(top, 4px);
+                    @include S(left, 40px);
+                }
+
                 canvas.graph {
                     @include S(width, 270px);
                     @include S(height, 40px);
diff --git a/src/js/game/hud/parts/statistics_handle.js b/src/js/game/hud/parts/statistics_handle.js
index d3612d92..c684a896 100644
--- a/src/js/game/hud/parts/statistics_handle.js
+++ b/src/js/game/hud/parts/statistics_handle.js
@@ -32,7 +32,11 @@ export class HUDShapeStatisticsHandle {
     initElement() {
         this.element = document.createElement("div");
         this.element.setAttribute("data-shape-key", this.definition.getHash());
-
+        if (this.root.hud.parts.pinnedShapes.isShapePinned(this.definition.getHash())) {
+            const pinButton = document.createElement("div");
+            pinButton.classList.add("pin");
+            this.element.appendChild(pinButton);
+        }
         this.counter = document.createElement("span");
         this.counter.classList.add("counter");
         this.element.appendChild(this.counter);