From d15862d9afe4eaaedca55865fac40dce04f5c1c0 Mon Sep 17 00:00:00 2001
From: ellielle <40385743+ellielle@users.noreply.github.com>
Date: Fri, 31 May 2024 15:12:31 -0400
Subject: [PATCH] add basic styling, preliminary layout with data

---
 bootdevtheme.js => frontend/bootdevtheme.js   |  0
 frontend/src/App.svelte                       | 62 ++---------------
 frontend/src/components/Login.svelte          | 54 +++++++--------
 frontend/src/components/UI/Tabs.svelte        | 15 +++--
 .../src/components/content/General.svelte     | 31 +--------
 frontend/src/components/content/Stats.svelte  | 67 +++++++++++++++++++
 frontend/tailwind.config.js                   |  2 +-
 main.go                                       |  2 +-
 8 files changed, 114 insertions(+), 119 deletions(-)
 rename bootdevtheme.js => frontend/bootdevtheme.js (100%)
 create mode 100644 frontend/src/components/content/Stats.svelte

diff --git a/bootdevtheme.js b/frontend/bootdevtheme.js
similarity index 100%
rename from bootdevtheme.js
rename to frontend/bootdevtheme.js
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c71b42d..c295ec8 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,19 +1,12 @@
 <script>
   import "./app.css";
   import { onMount } from "svelte";
-  import {
-    TopDailyLearners,
-    TopCommunity,
-    UserData,
-    LoginUserWithToken,
-  } from "../wailsjs/go/main/App.js";
+  import { UserData, LoginUserWithToken } from "../wailsjs/go/main/App.js";
   import Login from "./components/Login.svelte";
   import Tabs from "./components/UI/Tabs.svelte";
 
   // Holds all Archmages and their publicly available data
   let archmages = [];
-  // Holds the top 30 discord karma leaderboard users
-  let archons = [];
   // Holds the top 30 leaderboard users
   let leaders = [];
 
@@ -21,29 +14,17 @@
   //TODO: archmage, loggedin, and possibly more need to be in a store probably(?)
   export let isArchmage = false;
   export let isLoggedIn = false;
-
-  // getTopLearners returns the 30 highest XP earners in the last
-  // 24 hour period, sliced down to 10 to fit
-  function getTopLearners() {
-    TopDailyLearners().then((result) => (leaders = result.slice(0, 10)));
-  }
-
-  // getTopCommunity returns the top 30 users with the highest karma,
-  // a stat earned by being active in the Discord channel
-  function getTopCommunity() {
-    TopCommunity().then((result) => (archons = result.slice(0, 10)));
-  }
+  export let userData;
 
   // getUserData returns the user's Boot.Dev data, including courses
   // completed, current xp and to next level xp, and much more.
-  function getUserData() {
-    UserData().then((result) => console.log(result));
-  }
+  function getUserData() {}
 
   // Attempt to log the user on mount by refreshing their
   // access token
   onMount(() => {
     LoginUserWithToken().then((result) => (isLoggedIn = result));
+    UserData().then((result) => (userData = result));
   });
 </script>
 
@@ -53,38 +34,9 @@
   <div class="container-buddy">
     <div class="menu-container">
       <!-- show user login button if automatic sign in fails -->
-      <Login loggedIn={isLoggedIn} />
-
-      <div class="menu-item">
-        <button class="btn" on:click={getTopLearners}
-          >Show Learning Leaders!</button
-        >
-        {#each leaders as lead}
-          <div>
-            {lead?.Handle}
-          </div>
-        {/each}
-      </div>
-
-      <div class="menu-item">
-        <button class="btn" on:click={getTopCommunity}
-          >Show Discord Leaders!</button
-        >
-        {#each archons as sage}
-          <div>
-            {sage?.Handle}
-          </div>
-        {/each}
-      </div>
-
-      <div class="menu-item">
-        <button class="btn" on:click={getUserData}>Get User Data</button>
-        {#each archons as sage}
-          <div>
-            {sage?.Handle}
-          </div>
-        {/each}
-      </div>
+      {#if !isLoggedIn || typeof isLoggedIn != "boolean"}
+        <Login loggedIn={isLoggedIn} />
+      {/if}
     </div>
   </div>
   <div class="container-data"></div>
diff --git a/frontend/src/components/Login.svelte b/frontend/src/components/Login.svelte
index 790f6d5..48ca5b1 100644
--- a/frontend/src/components/Login.svelte
+++ b/frontend/src/components/Login.svelte
@@ -13,36 +13,34 @@
 
 <main>
   <section>
-    {#if !loggedIn || typeof loggedIn != "boolean"}
-      <div class="menu-item btn-login">
-        <div>
-          You aren't currently logged in! You will only have limited
-          functionality.
-        </div>
-        <div>
-          Please
-          <a
-            href="https://www.boot.dev/cli/login?redirect=/cli/login"
-            target="_blank">click here</a
-          >
-          to login.
-        </div>
-        The login instructions can&nbsp;<a
-          href="https://github.com/ellielle/bootdev-buddy#logging-in"
-          target="_blank"
-        >
-          be found here</a
-        >.
+    <div class="menu-item btn-login">
+      <div>
+        You aren't currently logged in! You will only have limited
+        functionality.
       </div>
-      <div class="menu-item">
-        <input
-          type="text"
-          placeholder="Boot.Dev CLI Code"
-          bind:value={otpField}
-        />
-        <button on:click={loginUser}>Sign in</button>
+      <div>
+        Please
+        <a
+          href="https://www.boot.dev/cli/login?redirect=/cli/login"
+          target="_blank">click here</a
+        >
+        to login.
       </div>
-    {/if}
+      The login instructions can&nbsp;<a
+        href="https://github.com/ellielle/bootdev-buddy#logging-in"
+        target="_blank"
+      >
+        be found here</a
+      >.
+    </div>
+    <div class="menu-item">
+      <input
+        type="text"
+        placeholder="Boot.Dev CLI Code"
+        bind:value={otpField}
+      />
+      <button on:click={loginUser}>Sign in</button>
+    </div>
   </section>
 </main>
 
diff --git a/frontend/src/components/UI/Tabs.svelte b/frontend/src/components/UI/Tabs.svelte
index aa5e408..8b7bf79 100644
--- a/frontend/src/components/UI/Tabs.svelte
+++ b/frontend/src/components/UI/Tabs.svelte
@@ -2,6 +2,7 @@
   import Archmages from "../content/Archmages.svelte";
   import General from "../content/General.svelte";
   import { Tab, TabGroup, TabAnchor } from "@skeletonlabs/skeleton";
+  import Stats from "../content/Stats.svelte";
 
   /** @type number */
   let tabSet = 0;
@@ -16,7 +17,13 @@
 <main>
   <TabGroup>
     {#each tabs as option, index}
-      <Tab bind:group={tabSet} name={option} value={index}>
+      <Tab
+        bind:group={tabSet}
+        name={option}
+        value={index}
+        active="border-b-2 border-r-2 border-primary-400-500-token"
+        rounded=""
+      >
         <span>{option}</span>
       </Tab>
     {/each}
@@ -27,13 +34,13 @@
         <General />
       {/if}
       {#if tabSet === 1}
-        <Archmages />
+        <!-- <Courses /> -->
       {/if}
       {#if tabSet === 2}
-        <Archmages />
+        <Stats />
       {/if}
       {#if tabSet === 3}
-        <Archmages />
+        <!-- <BossBattle /> -->
       {/if}
       {#if tabSet === 4}
         <Archmages />
diff --git a/frontend/src/components/content/General.svelte b/frontend/src/components/content/General.svelte
index 65e1736..e36edd0 100644
--- a/frontend/src/components/content/General.svelte
+++ b/frontend/src/components/content/General.svelte
@@ -1,33 +1,4 @@
 <script>
-  import { onMount } from "svelte";
-  import { GlobalStats } from "../../../wailsjs/go/main/App.js";
-
-  // Holds the general global leaderboard stats
-  let stats = {};
-  // Because separating the keys with regex is worse
-  const generalStats = {
-    LessonCompletions: "Lessons Completed",
-    XPEarned: "XP Earned",
-    BootsChats: "Chats with Boots",
-    SolutionsPeeked: "Solutions Peeked",
-    DiscordMessagesSent: "Discord Messages",
-    RegisteredUsersAlltime: "Registered Users",
-  };
-
-  // getGlobalStats returns the current global leaderboard stats
-  // The stats are shaped like [name,value]
-  function getGlobalStats() {
-    GlobalStats().then((result) => (stats = result));
-  }
-  onMount(() => {
-    getGlobalStats();
-  });
 </script>
 
-<main>
-  {#each Object.entries(stats) as stat}
-    <div>
-      {generalStats[stat[0]] + ": " + stat[1]}
-    </div>
-  {/each}
-</main>
+<main>Welcome to Boot.dev Buddy!</main>
diff --git a/frontend/src/components/content/Stats.svelte b/frontend/src/components/content/Stats.svelte
new file mode 100644
index 0000000..65d505f
--- /dev/null
+++ b/frontend/src/components/content/Stats.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { onMount } from "svelte";
+  import {
+    TopCommunity,
+    TopDailyLearners,
+    GlobalStats,
+  } from "../../../wailsjs/go/main/App.js";
+
+  // Holds the top 30 discord karma leaderboard users
+  let archons = [];
+  // Holds the general global leaderboard stats
+  let stats = {};
+  // Holds the top 30 leaderboard users
+  let leaders = [];
+
+  // Because separating the keys with regex is worse
+  const generalStats = {
+    LessonCompletions: "Lessons Completed",
+    XPEarned: "XP Earned",
+    BootsChats: "Chats with Boots",
+    SolutionsPeeked: "Solutions Peeked",
+    DiscordMessagesSent: "Discord Messages",
+    RegisteredUsersAlltime: "Registered Users",
+  };
+
+  // getGlobalStats returns the current global leaderboard stats
+  // The stats are shaped like [name,value]
+  function getTopDailyStats() {
+    TopDailyLearners().then((result) => (leaders = result));
+  }
+
+  // getTopCommunity returns the top 30 users with the highest karma,
+  // a stat earned by being active in the Discord channel
+  function getTopCommunity() {
+    TopCommunity().then((result) => (archons = result));
+  }
+
+  // getGlobalStats returns the current global leaderboard stats
+  // The stats are shaped like [name,value]
+  function getGlobalStats() {
+    GlobalStats().then((result) => (stats = result));
+  }
+
+  onMount(() => {
+    getTopDailyStats();
+    getTopCommunity();
+    getGlobalStats();
+  });
+</script>
+
+<main>
+  {#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}
+</main>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index e09545a..3796d33 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,7 +3,7 @@
 import { join } from "path";
 
 import { skeleton } from "@skeletonlabs/tw-plugin";
-import { bootDevTheme } from "../bootdevtheme.js";
+import { bootDevTheme } from "./bootdevtheme.js";
 
 /** @type {import('tailwindcss').Config} */
 export default {
diff --git a/main.go b/main.go
index 1e3091c..a6d5226 100644
--- a/main.go
+++ b/main.go
@@ -21,7 +21,7 @@ func main() {
 		Title:       "Boot.dev Buddy",
 		Width:       1024,
 		Height:      768,
-		StartHidden: false,
+		StartHidden: true,
 		// Set to true to remove border
 		Frameless: true,
 		AssetServer: &assetserver.Options{