add buff count and timer for xp potions

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Noelle L'Amour 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -49,7 +49,6 @@ Access tokens are only valid for 60 minutes. Once invalid, the app will attempt
 - [x] View other mages' profiles on leaderboard by click
 - [ ] Fancier and more formatted stats
 - [ ] Buff timers
-- [ ] More(?)
 
 ## Live Development
 
@@ -74,6 +73,6 @@ func main() {
 
 To build a redistributable, production mode package, use `wails build`.
 
-## Why?
+## Motivation
 
 I'm a fan of monitoring software, making it look nice, and making it easy to get the information you want at a glance. I thought having a buddy app to the [Boot.dev](https://boot.dev) curriculum that could give a student more sense of community, while also monitoring your own progress, would be fun.

app.go

@@ -49,7 +49,7 @@ func (a *App) startup(ctx context.Context) {
 func (a *App) UserData() (bootdevapi.UserData, error) {
 	userData, err := bootdevapi.UserInfo(a.cache, a.tokens.AccessToken)
 	if err != nil {
-		return bootdevapi.UserData{}, nil
+		return bootdevapi.UserData{}, err
 	}
 
 	return userData, nil

frontend/src/App.svelte

@@ -10,19 +10,21 @@
     UserData().then((result) => ($User.userData = result));
   }
 
-  // FIXME: doesn't run update function
-
-  onMount(() => {
+  // FIXME: i'm bad at svelte reactivity
+  onMount(async () => {
     // Attempt to log the user on mount by refreshing their
     // access token
     LoginUserWithToken().then((result) => ($User.isLoggedIn = result));
-    UserData().then((result) => ($User.userData = result));
+    UserData()
+      .then((result) => ($User.userData = result))
+      .catch((e) => console.log(e));
+
     // Update user data every 60 seconds
     const refreshInterval = setInterval(() => {
       if ($User.isLoggedIn) {
         updateUserData();
       }
-    }, 60000);
+    }, 30000);
 
     return () => {
       clearInterval(refreshInterval);
@@ -31,13 +33,16 @@
 </script>
 
 <main>
-  {#if $User.isLoggedIn}
+  {#if $User.isLoggedIn && $User.userData.Handle !== ""}
     <Tabs />
+  {:else if $User.isLoggedIn}
+    <p>Loading data...</p>
+    <p>Data not loading? Please restart the app!</p>
   {:else}
     <div class="container-buddy">
       <div class="menu-container">
         <!-- show user login button if automatic sign in fails -->
-        <Login bind:loggedIn={$User.isLoggedIn} />
+        <Login />
       </div>
     </div>
   {/if}

frontend/src/components/Login.svelte

@@ -1,6 +1,6 @@
 <script>
   import { LoginUserWithOTP } from "../../wailsjs/go/main/App.js";
-  export let loggedIn;
+  import { User } from "../stores/user.js";
 
   // Empty field initially for the one-time password
   let otpField = "";
@@ -17,7 +17,7 @@
   // is saved for futher use, and marks the user as logged in
   function loginUser() {
     LoginUserWithOTP(otpField)
-      .then((result) => (loggedIn = result))
+      .then((result) => ($User.isLoggedIn = result))
       .catch(() => (error = "Invalid or expired OTP"));
   }
 </script>

frontend/src/components/UI/Inventory.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { onMount } from "svelte";
+  import { User } from "../../stores/user";
+  import {
+    SeerStones,
+    BakedSalmon,
+    XPPotion,
+    FrozenFlames,
+  } from "../../../wailsjs/go/main/App.js";
+
+  function calculateXPTimer() {
+    let endsAt = new Date(endTime);
+    // @ts-ignore
+    let timeLeft = endsAt - new Date(Date.now());
+
+    let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+    let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+    timer = `${minutes}:${seconds}`;
+  }
+
+  let timer = null;
+  let endTime;
+
+  onMount(() => {
+    // Call all inventory-related functions and load it up
+    SeerStones().then((result) => ($User.seerStones = result));
+    BakedSalmon().then((result) => ($User.bakedSalmon = result));
+    XPPotion().then((result) => {
+      // Using ts-ignore here as my IDE doesn't like the properties on result
+      // @ts-ignore
+      $User.xpPotion = result.NumUnusedXPPotion;
+      // @ts-ignore
+      // last entry holds the "newest" xp potion, which has
+      // the ExpiresAt for when the buff drops off
+      const timerLen = result.ActiveXPPotions.length - 1;
+      endTime = result.ActiveXPPotions[timerLen].ExpiresAt;
+      // @ts-ignore
+      $User.xpTimer = calculateXPTimer();
+    });
+    FrozenFlames().then((result) => ($User.frozenFlame = result));
+
+    // If there is a buff timer, display the countdown
+    const interval = setInterval(calculateXPTimer, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+</script>
+
+<main>
+  <div class="flex items-center">
+    <div id="timer">{timer !== null ? timer : "00:00"}</div>
+    <div class="mx-4 flex">
+      <img
+        src="src/assets/images/xppotion.webp"
+        alt="XP Potions"
+        style="width:25px;height:auto"
+      />
+      {$User.xpPotion}
+    </div>
+    <div class="mr-4 flex">
+      <img
+        src="src/assets/images/seerstone.webp"
+        alt="Seer Stone"
+        style="width:25px;height:auto"
+      />
+      {$User.seerStones}
+    </div>
+    <div class="mr-4 flex">
+      <img
+        src="src/assets/images/salmon.webp"
+        alt="Baked Salmon"
+        style="width:25px;height:auto"
+      />
+      {$User.bakedSalmon}
+    </div>
+    <div class="mr-4 flex">
+      <img
+        src="src/assets/images/flame.png"
+        alt="XP Potions"
+        style="width:25px;height:auto"
+      />
+      {$User.frozenFlame}
+    </div>
+  </div>
+</main>

frontend/src/components/UI/Tabs.svelte

@@ -6,6 +6,7 @@
   import Avatar from "../UI/Avatar.svelte";
   import Stats from "../content/Stats.svelte";
   import Courses from "../content/Courses.svelte";
+  import Inventory from "./Inventory.svelte";
   import { Tab, TabGroup } from "@skeletonlabs/skeleton";
   import { User } from "../../stores/user";
   import { LogoutUser, CloseApp } from "../../../wailsjs/go/main/App.js";
@@ -60,6 +61,13 @@
       {/if}
     </svelte:fragment>
 
+    <!-- timer for potions, if they exist -->
+
+    <!-- user inventory -->
+    <div class="flex ml-auto">
+      <Inventory />
+    </div>
+
     <!-- user profile and level -->
     <div class="flex ml-auto">
       {#if $User.isLoggedIn}

frontend/src/components/UI/Timers.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

frontend/src/components/content/Courses.svelte

@@ -92,8 +92,6 @@
 
   $: if (Object.keys(progress).length > 0) {
     init = true;
-
-    console.log("progress: ", progress.Progress);
   }
 
   // handles launching URLs outside of the app

frontend/src/stores/user.js

@@ -1,50 +1,58 @@
 import { writable } from "svelte/store";
 
 /**
- * @typedef {Object} UserData 
- * @property {string} DiscordUserHandle      
- * @property {string | null} SyncedGoogleID         
- * @property {number} SyncedGithubID         
- * @property {Date} ManualProSubExpiresAt  
+ * @typedef {Object} UserData
+ * @property {string} DiscordUserHandle
+ * @property {string | null} SyncedGoogleID
+ * @property {number} SyncedGithubID
+ * @property {Date} ManualProSubExpiresAt
  * @property {Date | null} LifetimeProSubCreatedAt
- * @property {Date} MembershipExpiresAt    
- * @property {string} Email                  
- * @property {string} Currency               
- * @property {number} Xp                     
- * @property {number} Level                  
- * @property {number} XPForLevel             
- * @property {number} XPTotalForLevel        
- * @property {string} Role                   
- * @property {number} Gems                   
- * @property {number} Armor                  
- * @property {Date} CreatedAt              
- * @property {Date} UpdatedAt              
- * @property {string} FirstName              
- * @property {string} LastName               
- * @property {string} Handle                 
- * @property {string} Bio                    
- * @property {string} JobTitle               
- * @property {string} Location               
- * @property {string} City                   
- * @property {string} Country                
- * @property {string} GithubHandle           
- * @property {string} WebsiteURL             
- * @property {string} ProfileImageURL        
- * @property {boolean} IsSubscribed           
- * @property {boolean} GithubSynced           
- * 
+ * @property {Date} MembershipExpiresAt
+ * @property {string} Email
+ * @property {string} Currency
+ * @property {number} Xp
+ * @property {number} Level
+ * @property {number} XPForLevel
+ * @property {number} XPTotalForLevel
+ * @property {string} Role
+ * @property {number} Gems
+ * @property {number} Armor
+ * @property {Date} CreatedAt
+ * @property {Date} UpdatedAt
+ * @property {string} FirstName
+ * @property {string} LastName
+ * @property {string} Handle
+ * @property {string} Bio
+ * @property {string} JobTitle
+ * @property {string} Location
+ * @property {string} City
+ * @property {string} Country
+ * @property {string} GithubHandle
+ * @property {string} WebsiteURL
+ * @property {string} ProfileImageURL
+ * @property {boolean} IsSubscribed
+ * @property {boolean} GithubSynced
+ *
  */
 
 /**
  * @typedef {Object} User
  * @property {boolean} isArchmage
  * @property {boolean} isLoggedIn
+ * @property {number} seerStones
+ * @property {number} bakedSalmon
+ * @property {number} xpPotion
+ * @property {Date|null} xpTimer
+ * @property {number} frozenFlame
  * @property {UserData} userData
  */
 export const User = writable({
   isArchmage: false,
   isLoggedIn: false,
-  userData: {}
-})
-
-
+  seerStones: 0,
+  bakedSalmon: 0,
+  xpPotion: 0,
+  xpTimer: null,
+  frozenFlame: 0,
+  userData: {},
+});

internal/bootdevapi/api_remap_structs.go

@@ -199,3 +199,30 @@ type ProgressDetail struct {
 	NumMax               int    `json:"NumMax"`
 	LastViewedLessonUUID string `json:"LastViewedLessonUUID"`
 }
+
+// List of potions user has in effect / unused
+type PotionList struct {
+	ActiveXPPotions   []XPPotion `json:"ActiveXPPotions"`
+	NumUnusedXPPotion int        `json:"NumUnusedXPPotion"`
+}
+
+// XP Potion information
+type XPPotion struct {
+	ID        string    `json:"ID"`
+	CreatedAt time.Time `json:"CreatedAt"`
+	UpdatedAt time.Time `json:"UpdatedAt"`
+	UserUUID  string    `json:"UserUUID"`
+	ExpiresAt time.Time `json:"ExpiresAt"`
+	UsedAt    time.Time `json:"UsedAt"`
+	SoldAt    any       `json:"SoldAt"`
+}
+
+// Frozen flame data. Included since it seems it will
+// be used in the future
+type FrozenFlame struct {
+	UUID      string    `json:"UUID"`
+	UserUUID  string    `json:"UserUUID"`
+	CreatedAt time.Time `json:"CreatedAt"`
+	UsedAt    any       `json:"UsedAt"`
+	SoldAt    any       `json:"SoldAt"`
+}