add boss tracking

app.go

@@ -53,13 +53,3 @@ func (a *App) UserData() (bootdevapi.UserData, error) {
 
 	return userData, nil
 }
-
-// BossBattle retrieves the current / most recent boss battle data
-func (a *App) BossBattle() (bootdevapi.BossBattle, error) {
-	bossData, err := bootdevapi.BossBattleStats(a.cache, a.tokens.AccessToken)
-	if err != nil {
-		return bootdevapi.BossBattle{}, nil
-	}
-
-	return bossData, nil
-}

boss.go

@@ -0,0 +1,16 @@
+package main
+
+import (
+	"github.com/ellielle/bootdev-buddy/internal/bootdevapi"
+)
+
+// BossBattle retrieves the current / most recent boss battle data
+func (a *App) BossBattle() (bootdevapi.BossBattle, error) {
+	bossData, err := bootdevapi.BossBattleStats(a.cache, a.tokens.AccessToken)
+
+	if err != nil {
+		return bootdevapi.BossBattle{}, err
+	}
+
+	return bossData, nil
+}

frontend/src/components/content/BossBattle.svelte

@@ -6,11 +6,13 @@
   let promise = BossBattle().then((result) => (boss = result));
 </script>
 
-<main>
+<main class="flex flex-col mx-auto">
   {#await promise}
     <p>Loading...</p>
   {:then battle}
-    {#if new Date(battle.Event.ExpiresAt) > new Date(Date.now()) || new Date(battle.Event.DefeatedAt) < new Date(Date.now())}
+    <!-- FIXME: fix condition that checks for a boss defeat || new Date(battle.Event.DefeatedAt) < new Date(Date.now())-->
+    {#if new Date(battle.Event.ExpiresAt) < new Date(Date.now())}
+      <!-- boss is inactive, show stats -->
       <a
         href="https://www.boot.dev/lore/{battle.Event.Boss.LoreSlug}"
         class="text-primary-500"
@@ -25,7 +27,71 @@
           battle.Event.DefeatedAt,
         ).toLocaleDateString()}.
       </p>
-      <!-- TODO: Add active boss battle stats -->
+    {:else}
+      <!-- boss is active, show a slowed feed and stats -->
+      <div>
+        <img
+          src={battle.Event.Boss.ImageURL}
+          alt="Boss fight"
+          height="auto"
+          width="100%"
+        />
+      </div>
+      <h1 class="text-xl my-4 text-center">{battle.Event.Boss.Name}</h1>
+      <p>
+        {battle.Event.Boss.Description}
+      </p>
+      <h2 class="mt-8 mb-4 text-center">
+        The battle against {battle.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 -
+              (battle.XPTotal / battle.Event.Boss.HealthPoints) * 100}%;"
+          >
+            <div class="xp-text align-center justify-center mb-12">
+              {(
+                100 -
+                (battle.XPTotal / battle.Event.Boss.HealthPoints) * 100
+              ).toFixed(0)}%
+            </div>
+          </div>
+        </div>
+      </section>
+
+      Reward 1: {battle.Event.Boss.Rewards[0].UnlockedAt}
+      <section>
+        <div>
+          Damage dealt by the arcanum: {battle.XPTotal}
+        </div>
+        <div>
+          Damage dealt by you: {battle.XPUser} / 5000 xp
+        </div>
+        {#each battle.Event.Boss.Rewards as reward (reward.UUID)}
+          <div>
+            Reward: {reward.UnlockedAt} : {battle.XPTotal > reward.UnlockedAt
+              ? "🟢"
+              : "❌"}
+          </div>
+        {/each}
+      </section>
     {/if}
   {/await}
 </main>
+
+<style>
+  .boss-bar {
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    font-weight: 600;
+  }
+  .boss-background-div {
+    border-radius: 0.5rem;
+  }
+  .boss-foreground-div {
+    border-radius: 0.5rem;
+  }
+</style>

frontend/src/components/content/Courses.svelte

@@ -95,6 +95,11 @@
     console.log("progress: ", progress.Progress);
   }
 
+  function openBrowserLink(url) {
+    // @ts-ignore
+    window.runtime.BrowserOpenURL(url);
+  }
+
   onMount(() => {
     Courses().then((result) => (courses = [...result]));
     CoursesProgress().then((result) => (progress = result));
@@ -107,9 +112,14 @@
   {:else}
     {#each sortedCourses as course (course.UUID)}
       <div>
+        <!-- TODO: cursor change on hover fix it -->
         <a
           href="https://www.boot.dev/lessons/{course.slug}"
-          class="text-primary-500"
+          class="text-primary-500 cursor-pointer"
+          on:click={(e) => {
+            e.preventDefault();
+            openBrowserLink(`https://www.boot.dev/learn/${course.Slug}`);
+          }}
         >
           {course.Title}:
         </a>

internal/bootdevapi/api_remap_structs.go

@@ -134,10 +134,10 @@ type BossBattle struct {
 		AnnouncementSentAt time.Time  `json:"AnnouncementSentAt"`
 		DefeatedAt         time.Time  `json:"DefeatedAt"`
 	} `json:"Event"`
-	XPBonus        int `json:"XPBonus"`
-	XPTotal        int `json:"XPTotal"`
-	XPUser         int `json:"XPUser"`
-	NumActiveUsers int `json:"NumActiveUsers"`
+	XPBonus        float64 `json:"XPBonus"`
+	XPTotal        int     `json:"XPTotal"`
+	XPUser         int     `json:"XPUser"`
+	NumActiveUsers int     `json:"NumActiveUsers"`
 }
 
 // Full course response from courses endpoint

internal/bootdevapi/boss.go

@@ -11,7 +11,6 @@ import (
 // BossBattleStats retrieves stats from the current / most recent boss
 // battle happening. Since this is rapidly updating in real time, the
 // cache isn't checked before requesting new data.
-// It does save to the cache, however, in case it's needed
 func BossBattleStats(c cache.Cache, token string) (BossBattle, error) {
 	// boss battle leaderboard URL
 	bossBattleURL, err := BootDevAPIMap("boss")
@@ -43,14 +42,5 @@ func BossBattleStats(c cache.Cache, token string) (BossBattle, error) {
 		return BossBattle{}, err
 	}
 
-	bossData, err := json.Marshal(resp.Body)
-	if err != nil {
-		return BossBattle{}, err
-	}
-
-	// add to cache just in case the data is needed sooner than it is
-	// fetched again.
-	c.Add(bossBattleURL, &bossData)
-
 	return boss, nil
 }