Skip to content

Commit

Permalink
add basic styling, preliminary layout with data
Browse files Browse the repository at this point in the history
  • Loading branch information
ellielle committed May 31, 2024
1 parent 9d91985 commit d15862d
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 119 deletions.
File renamed without changes.
62 changes: 7 additions & 55 deletions frontend/src/App.svelte
Original file line number Diff line number Diff line change
@@ -1,49 +1,30 @@
<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 = [];
// Information about the user
//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>

Expand All @@ -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>
Expand Down
54 changes: 26 additions & 28 deletions frontend/src/components/Login.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
15 changes: 11 additions & 4 deletions frontend/src/components/UI/Tabs.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
Expand All @@ -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 />
Expand Down
31 changes: 1 addition & 30 deletions frontend/src/components/content/General.svelte
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 67 additions & 0 deletions frontend/src/components/content/Stats.svelte
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion frontend/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion main.go
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down

0 comments on commit d15862d

Please sign in to comment.