Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update stats page with links to user profiles and leaderboard page #14

Merged
merged 2 commits into from
Jun 18, 2024
Merged

update stats page with links to user profiles and leaderboard page #14

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c5888f
update stats page with links to user profiles and leaderboard page
ellielle Jun 18, 2024
d191046
fix update interval
ellielle Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 69 additions & 21 deletions frontend/src/components/content/Stats.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
TopDailyLearners,
GlobalStats,
} from "../../../wailsjs/go/main/App.js";
import { User } from "../../stores/user.js";
import { prevent_default } from "svelte/internal";

// Holds the top 30 discord karma leaderboard users
let archons = [];
Expand All @@ -13,21 +15,6 @@
// 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",
Expand Down Expand Up @@ -56,10 +43,24 @@
GlobalStats().then((result) => (stats = result));
}

function openBrowserLink(url) {
//@ts-ignore
window.runtime.BrowserOpenURL(url);
}

onMount(() => {
getTopDailyStats();
getTopCommunity();
getGlobalStats();

const refreshInterval = setInterval(() => {
getTopDailyStats();
getGlobalStats();
}, 30000);

return () => {
clearInterval(refreshInterval);
};
});

// TODO: split arcanum stats and leaderboard stats into their own components with refresh timers
Expand All @@ -68,7 +69,16 @@
<main>
<div class="grid grid-cols-3">
<ul class="list grid">
<h2 class="text-primary-500">Arcanum Stats</h2>
<a
href="https://www.boot.dev/leaderboard"
target="_blank"
on:click={(e) => {
e.preventDefault();
openBrowserLink("https://www.boot.dev/leaderboard");
}}
>
<h2 class="text-primary-500">Arcanum Stats</h2>
</a>
{#each Object.entries(stats) as stat}
<li>
<span>
Expand All @@ -79,22 +89,60 @@
</ul>

<div>
<h2 class="pb-5 text-primary-500">Archon Leaderboard</h2>
<a
href="https://www.boot.dev/leaderboard"
target="_blank"
on:click={(e) => {
e.preventDefault();
openBrowserLink("https://www.boot.dev/leaderboard");
}}
>
<h2 class="pb-5 text-primary-500">Archon Leaderboard</h2>
</a>
<ul class="list">
{#each archons as sage, index}
<div class="list text-warning-{skeletonUINum[index]}">
{sage?.Handle}
<div class="list">
<a
href="https://www.boot.dev/u/{sage?.Handle}"
target="_blank"
on:click={(e) => {
e.preventDefault();
openBrowserLink("https://www.boot.dev/u/{sage?.Handle}");
}}>{sage?.Handle}</a
>
</div>
{/each}
</ul>
</div>

<div>
<h2 class="pb-5 text-primary-500">Daily Leaderboard</h2>
<a
href="https://www.boot.dev/leaderboard"
target="_blank"
on:click={(e) => {
e.preventDefault();
openBrowserLink("https://www.boot.dev/leaderboard");
}}
>
<h2 class="pb-5 text-primary-500">Daily Leaderboard</h2>
</a>
<ul class="list">
{#each leaders as lead}
<div>
{lead?.Handle}
<a
href="https://www.boot.dev/u/{lead?.Handle}"
target="_blank"
on:click={(e) => {
e.preventDefault();
openBrowserLink("https://www.boot.dev/u/{lead?.Handle}");
}}
>
<span
style={lead.Handle === $User.userData.Handle
? "color: text-warning-500"
: "color: text-primary-500"}>{lead?.Handle}</span
>
</a>
</div>
{/each}
</ul>
Expand Down
Loading