Merge pull request #13 from ellielle/stats-page

re-enable stats page, with stats even!
ellielle · Jun 14, 2024 · f3f5fcf · f3f5fcf
2 parents 2d276fc + 7ecf1aa
commit f3f5fcf
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 78 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,7 +7,7 @@
     <title>Boot.dev Buddy</title>
 </head>
 
-<body style="--wails-draggable:drag" data-theme="bootdev">
+<body style="--wails-draggable:drag" data-theme="gold-nouveau">
     <div id="app"></div>
     <script src="./src/main.js" type="module"></script>
 </body>

diff --git a/frontend/src/components/content/BossBattle.svelte b/frontend/src/components/content/BossBattle.svelte
@@ -4,6 +4,9 @@
 
   let boss = {};
 
+  // The boss's defeat date is encoded as the zero date in ISO 8601 format
+  const undefeated = new Date("0001-01-01T00:00:00Z");
+
   function fetchBossUpdate() {
     BossBattle().then((result) => (boss = result));
   }
@@ -23,11 +26,18 @@
 <main class="flex flex-col mx-auto">
   {#if Object.keys(boss).length === 0}
     <p>Loading...</p>
-  {:else}
-    <!-- FIXME: fix condition that checks for a boss defeat -->
-    {#if new Date(boss.Event.ExpiresAt) < new Date(Date.now())}
-      <!-- boss is inactive, show stats -->
-      <div>
+  {:else if new Date(boss.Event.DefeatedAt) > undefeated}
+    <!-- boss is defeated, show stats -->
+    <div>
+      <img
+        src={boss.Event.Boss.ImageURL}
+        alt="Boss fight"
+        height="auto"
+        width="100%"
+      />
+    </div>
+    <div>
+      <h1 class="text-xl my-4 text-center">
         <a
           href="https://www.boot.dev/lore/{boss.Event.Boss.LoreSlug}"
           class="text-primary-500"
@@ -36,64 +46,97 @@
           {boss.Event.Boss.Name}
         </a>
         has been defeated!
-      </div>
+      </h1>
+    </div>
+
+    <div class="text-center">
       <p>You gained {boss.XPUser} XP during the fight.</p>
       <p>
         The final blow was dealt on {new Date(
           boss.Event.DefeatedAt,
         ).toLocaleDateString()}.
       </p>
-    {:else}
-      <!-- boss is active, show a slowed feed and stats -->
-      <div>
-        <img
-          src={boss.Event.Boss.ImageURL}
-          alt="Boss fight"
-          height="auto"
-          width="100%"
-        />
-      </div>
-      <h1 class="text-xl my-4 text-center">{boss.Event.Boss.Name}</h1>
+    </div>
+  {:else if new Date(boss.Event.ExpiresAt) < new Date(Date.now())}
+    <!-- boss is inactive, show stats -->
+    <div>
+      <img
+        src={boss.Event.Boss.ImageURL}
+        alt="Boss fight"
+        height="auto"
+        width="100%"
+      />
+    </div>
+    <div>
+      <h1 class="text-xl my-4 text-center">
+        <a
+          href="https://www.boot.dev/lore/{boss.Event.Boss.LoreSlug}"
+          class="text-primary-500"
+          target="_blank"
+        >
+          {boss.Event.Boss.Name}
+        </a>
+        has escaped!
+      </h1>
+    </div>
+    <div class="text-center">
+      <p>You gained {boss.XPUser} XP during the fight.</p>
       <p>
-        {boss.Event.Boss.Description}
+        They managed to escape the Arcanum on {new Date(
+          boss.Event.DefeatedAt,
+        ).toLocaleDateString()}.
       </p>
-      <h2 class="mt-8 mb-4 text-center">
-        The battle against {boss.Event.Boss.Name} has begun!
-      </h2>
-      <section class="boss-bar">
-        <div class="boss-background-div">
-          <div
-            class="boss-foreground-div bg-error-500"
-            style="width: {100 -
-              (boss.XPTotal / boss.Event.Boss.HealthPoints) * 100}%;"
-          >
-            <div class="xp-text align-center justify-center mb-12">
-              {(
-                100 -
-                (boss.XPTotal / boss.Event.Boss.HealthPoints) * 100
-              ).toFixed(0)}%
-            </div>
+    </div>
+  {:else}
+    <!-- boss is active, show a slowed feed and stats -->
+    <div>
+      <img
+        src={boss.Event.Boss.ImageURL}
+        alt="Boss fight"
+        height="auto"
+        width="100%"
+      />
+    </div>
+    <h1 class="text-xl my-4 text-center">{boss.Event.Boss.Name}</h1>
+    <p>
+      {boss.Event.Boss.Description}
+    </p>
+    <h2 class="mt-8 mb-4 text-center">
+      The battle against {boss.Event.Boss.Name} has begun!
+    </h2>
+    <section class="boss-bar">
+      <div class="boss-background-div">
+        <div
+          class="boss-foreground-div bg-error-500"
+          style="width: {100 -
+            (boss.XPTotal / boss.Event.Boss.HealthPoints) * 100}%;"
+        >
+          <div class="xp-text align-center justify-center mb-12">
+            {(
+              100 -
+              (boss.XPTotal / boss.Event.Boss.HealthPoints) * 100
+            ).toFixed(0)}%
           </div>
         </div>
-      </section>
+      </div>
+    </section>
 
-      <section>
-        <div>
-          Damage dealt by the arcanum: {boss.XPTotal}
-        </div>
+    <section>
+      <div>
+        Damage dealt by the arcanum: {boss.XPTotal}
+      </div>
+      <div>
+        Damage dealt by you: {boss.XPUser} / 5000 required to qualify.
+      </div>
+      {#each boss.Event.Boss.Rewards as reward (reward.UUID)}
         <div>
-          Damage dealt by you: {boss.XPUser} / 5000 required to qualify.
+          Reward at {reward.UnlockedAt} damage: {boss.XPTotal >
+          reward.UnlockedAt
+            ? "✓"
+            : "✗"}
         </div>
-        {#each boss.Event.Boss.Rewards as reward (reward.UUID)}
-          <div>
-            Reward at {reward.UnlockedAt} damage: {boss.XPTotal >
-            reward.UnlockedAt
-              ? "✓"
-              : "✗"}
-          </div>
-        {/each}
-      </section>
-    {/if}
+      {/each}
+    </section>
   {/if}
 </main>
 

diff --git a/frontend/src/components/content/Courses.svelte b/frontend/src/components/content/Courses.svelte
@@ -112,6 +112,8 @@
   {#if !init}
     Loading...
   {:else}
+    <h2>Course List:</h2>
+    <sub class="mb-4">(clicking will take you to where you left off)</sub>
     {#each sortedCourses as course (course.UUID)}
       <div>
         <!-- TODO: cursor change on hover fix it -->

diff --git a/frontend/src/components/content/Stats.svelte b/frontend/src/components/content/Stats.svelte
@@ -13,6 +13,21 @@
   // Holds the top 30 leaderboard users
   let leaders = [];
 
+  // skeletonUI color palette numbers, reversed so I don't have to do anything
+  // funky in the HTML
+  const skeletonUINum = [
+    "900",
+    "800",
+    "700",
+    "600",
+    "500",
+    "400",
+    "300",
+    "200",
+    "100",
+    "50",
+  ];
+
   // Because separating the keys with regex is worse
   const generalStats = {
     LessonCompletions: "Lessons Completed",
@@ -46,26 +61,43 @@
     getTopCommunity();
     getGlobalStats();
   });
+
+  // TODO: split arcanum stats and leaderboard stats into their own components with refresh timers
 </script>
 
 <main>
-  {#if false}
-    {#each Object.entries(stats) as stat}
-      <div>
-        {generalStats[stat[0]] + ": " + stat[1]}
-      </div>
-    {/each}
-    {#each archons as sage}
-      <div>
-        {sage?.Handle}
-      </div>
-    {/each}
-    {#each leaders as lead}
-      <div>
-        {lead?.Handle}
-      </div>
-    {/each}
-  {:else}
-    Under work
-  {/if}
+  <div class="grid grid-cols-3">
+    <ul class="list grid">
+      <h2 class="text-primary-500">Arcanum Stats</h2>
+      {#each Object.entries(stats) as stat}
+        <li>
+          <span>
+            {generalStats[stat[0]] + ": " + stat[1]}
+          </span>
+        </li>
+      {/each}
+    </ul>
+
+    <div>
+      <h2 class="pb-5 text-primary-500">Archon Leaderboard</h2>
+      <ul class="list">
+        {#each archons as sage, index}
+          <div class="list text-warning-{skeletonUINum[index]}">
+            {sage?.Handle}
+          </div>
+        {/each}
+      </ul>
+    </div>
+
+    <div>
+      <h2 class="pb-5 text-primary-500">Daily Leaderboard</h2>
+      <ul class="list">
+        {#each leaders as lead}
+          <div>
+            {lead?.Handle}
+          </div>
+        {/each}
+      </ul>
+    </div>
+  </div>
 </main>
diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -1,6 +1,5 @@
 html,
 body {
-    background-color: rgba(31, 31, 35, 1);
     color: white;
     margin: 0;
     padding: 0;
@@ -25,3 +24,7 @@ body {
 #app {
     height: 100%;
 }
+
+.dark body {
+    background-color: white;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -24,7 +24,7 @@ export default {
     // 4. Append the Skeleton plugin (after other plugins)
     skeleton({
       themes: {
-        preset: ["crimson"],
+        preset: [{ name: "gold-nouveau", enhancements: true }],
         custom: [bootDevTheme],
       },
     }),

diff --git a/internal/bootdevapi/bootdevapi.go b/internal/bootdevapi/bootdevapi.go
@@ -11,9 +11,9 @@ func BootDevAPIMap(URL string) (string, error) {
 	// general global stats endpoint
 	api["stats"] = "https://api.boot.dev/v1/leaderboard_stats"
 	// daily stats endpoint
-	api["daily"] = "https://api.boot.dev/v1/leaderboard_xp/day?limit=30"
+	api["daily"] = "https://api.boot.dev/v1/leaderboard_xp/day?limit=10"
 	// discord / community karma endpoint
-	api["karma"] = "https://api.boot.dev/v1/leaderboard_karma/alltime?limit=30"
+	api["karma"] = "https://api.boot.dev/v1/leaderboard_karma/alltime?limit=10"
 	// live course finish feed
 	api["feed"] = "https://api.boot.dev/v1/lesson_completion_feed"
 	// user data endpoint

diff --git a/internal/bootdevapi/bootdevapi_test.go b/internal/bootdevapi/bootdevapi_test.go
@@ -6,8 +6,6 @@ import (
 	"github.com/google/go-cmp/cmp"
 )
 
-// TODO: add more tests as API develops
-
 // Tests that the proper url is returned
 // and that the function works itself
 func TestMain(t *testing.T) {
@@ -17,8 +15,8 @@ func TestMain(t *testing.T) {
 	}{
 		"archmage":         {input: "archmage", want: "https://api.boot.dev/v1/leaderboard_archmage"},
 		"stats":            {input: "stats", want: "https://api.boot.dev/v1/leaderboard_stats"},
-		"daily":            {input: "daily", want: "https://api.boot.dev/v1/leaderboard_xp/day?limit=30"},
-		"karma":            {input: "karma", want: "https://api.boot.dev/v1/leaderboard_karma/alltime?limit=30"},
+		"daily":            {input: "daily", want: "https://api.boot.dev/v1/leaderboard_xp/day?limit=10"},
+		"karma":            {input: "karma", want: "https://api.boot.dev/v1/leaderboard_karma/alltime?limit=10"},
 		"user":             {input: "user", want: "https://api.boot.dev/v1/users"},
 		"achievements":     {input: "achievements", want: "https://api.boot.dev/v1/users/achievements"},
 		"feed":             {input: "feed", want: "https://api.boot.dev/v1/lesson_completion_feed"},