Update to v1.1

css/style.css

@@ -1,31 +1,74 @@
+#prev-ids-show-more {
+  display: none;
+}
+#show-ids-label {
+  color: #777;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: normal;
+  padding-left: 15px;
+}
+#bm-ids-div {
+  display: none;
+  flex-wrap: wrap;
+  column-gap: 10px;
+  row-gap: 20px;
+  padding: 0px 15px 15px;
+  max-height: 250px;
+  overflow-y: scroll;
+  background-color: #151515;
+  color-scheme: dark;
+}
+#prev-id-title {
+  flex: auto;
+  position: sticky; top: 0;
+  width: 100%;
+  padding-top: 10px;
+  margin-bottom: -15px;
+  background-color: #151515;
+}
+.bm-ids-show-more {
+  display: flex !important;
+}
+.prev-id {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  min-width: 250px;
+  max-width: 350px;
+  height: 50px;
+  border-left: 2px solid #777;
+  padding-left: 8px;
+}
+.prev-id p {
+  margin: 0;
+} 
+
 #bm-hour-wrapper {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  color-scheme: dark;
 }
 #bm-hour-summary {
-    min-height: 300px;
-    width: 100%;
+  min-height: 300px;
+  width: 100%;
 }
 #bm-hour-summary * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.loading-summary {
+.loading-state {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0;
   background-color: #1C1C1C;
 }
-.loading-summary p {
+.loading-state p {
   font-size: 18px;
 }
 
-#hour-text {
-    padding-bottom: 15px;
-}
-
 /* Style the tab */
 .tab {
   float: left;
@@ -73,24 +116,73 @@
   background-color: #151515;
 }
 
+.past-weeks-hours {
+  display: flex;
+  align-items: baseline;
+}
+.past-weeks-hours select {
+  margin-left: 8px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid;
+  text-align: center;
+  background: #151515;
+}
+.past-weeks-hours select:required:invalid {
+  color: #777;
+  border-bottom: 1px solid white;
+}
+.past-weeks-hours .timeframe-estimation-text {
+  font-size: 11px;
+  font-style: italic;
+  color: #777;
+}
+
+/* Loading spinner */
+.past-weeks-hours .css-loader {
+  width: 11px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(farthest-side,#eeeeee 94%,#0000) top/4px 4px no-repeat,
+    conic-gradient(#0000 30%,#eeeeee);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
+  animation: l13 1s infinite linear;
+  display: inline-block;
+  margin-top: 3px;
+  padding-left: 3px;
+}
+@keyframes l13{
+  100%{transform: rotate(1turn)}
+}
+
 #show-more-label {
   color: #777;
   text-decoration: underline;
   cursor: pointer;
   font-weight: normal;
   padding-left: 45%;
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 .tabcontent input[type=checkbox] {
   display: none;
 }
 
 .server-playtimes {
-  max-height: 40%;
+  max-height: 50% !important;
   overflow-y: hidden;
 }
 
+#highest-playtime-header {
+  position: sticky;
+  top: 0;
+
+  background-color: #151515;
+  padding: 5px 0 8px 0;
+  margin: 0 auto;
+}
+
 /* Only show first 5 list elements by default */
 .server-playtimes li { display: none; }
 .server-playtimes li:nth-child(-n+5) { display: list-item; }
@@ -102,4 +194,4 @@
 
 .show-rest .server-playtimes {
   overflow-y: scroll;
-}
+}

manifest.json

@@ -1,8 +1,8 @@
 {
     "manifest_version": 3,
     "name": "BattleMetrics Hour Summary",
-    "description": "Summarizes hours on BattleMetrics",
-    "version": "1.0.1",
+    "description": "Summarizes player hours on BattleMetrics.",
+    "version": "1.1.0",
     "icons": {
       "48": "images/icon48.png",
       "128": "images/icon128.png"
@@ -14,8 +14,13 @@
     "content_scripts": [
         {
           "js": [
+            "static/constants.js",
             "static/game_name_mapping.js",
             "scripts/helpers.js",
+            "scripts/init-html.js",
+            "scripts/process-hours.js",
+            "scripts/process-sessions.js",
+            "scripts/past-ids.js",
             "scripts/generate-html.js",
             "scripts/content.js"
           ],
@@ -25,4 +30,4 @@
           ]
         }
     ]
-  }
+  }

popup/popup.html

@@ -19,12 +19,13 @@
   </style>
   <body>
     <p>Visit a players BattleMetrics page to view their hour summary.</p>
+    <p>If hour summary does not render, try refreshing the page.</p>
     <br>
     <div class="popup-footer-div">
       <a href="https://github.com/jxtt-dev/battlemetrics_hour_summary" class="popup-footer-item">
         Github
       </a>
-      <p id="popup-version-text" class="popup-footer-item">V1.0.1</p>
+      <p id="popup-version-text" class="popup-footer-item">V1.1.0</p>
     </div>
   </body>
-</html>
+</html>