Skip to content

feat(ui): add Rust leaderboard rank alert to course completion #3102

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(ui): add Rust leaderboard rank alert to course completion #3102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 13 additions & 3 deletions app/components/course-page/current-step-complete-modal.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,25 @@
🎉
</div>

<div class="mb-1 font-bold text-2xl text-gray-700 dark:text-gray-100">
<div class="mb-5 font-bold text-2xl text-gray-700 dark:text-gray-100">
{{if (eq this.currentStep.type "CourseStageStep") "Stage Completed!" "Step Completed!"}}
</div>

<div class="prose dark:prose-invert mb-5" data-test-completion-message>
{{!-- <div class="prose dark:prose-invert mb-5" data-test-completion-message>
<p>
{{this.currentStep.completionNoticeMessage}}
</p>
</div>
</div> --}}

{{! <AlertWithIcon @icon="presentation-chart-line" @type="success" class="mb-5">
Your leaderboard rank is now
<b>#1456</b>.
</AlertWithIcon> }}

<RoadmapInfoAlert @heading="Rust leaderboard" class="mb-5">
Your leaderboard rank is now
<b>#1456</b>.
</RoadmapInfoAlert>

<PrimaryLinkButton
@route={{this.stepForNextOrActiveStepButton.routeParams.route}}
Expand Down
37 changes: 24 additions & 13 deletions app/components/roadmap-info-alert.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
<Alert @color="blue" class="p-5" ...attributes>
<div class="prose prose-sm dark:prose-invert prose-blue prose-compact">
<h4>
<div class="flex items-center gap-1">
{{svg-jar "information-circle" class="w-5 h-5 fill-current text-blue-500/80"}}
<span>
{{@heading}}
</span>
<div
class="relative p-5 pb-6 w-full max-w-xs group cursor-pointer bg-teal-100/20 hover:bg-teal-100/30 dark:bg-teal-900/20 border-teal-500/60 dark:border-teal-500/40 border rounded-sm transition-colors duration-100"
...attributes
>
<div class="flex flex-col items-center">
{{svg-jar "presentation-chart-line" class="w-8 h-8 fill-current text-teal-500/90 mb-2"}}

<span class="text-teal-700 text-xs mb-0.5 text-center">
Your Rust leaderboard rank is
</span>

<AnimatedContainer>
<div class="flex items-center w-full justify-center">
{{#animated-if (eq this.rank null) use=this.transition duration=300}}
<b class="text-2xl text-teal-600 border-b border-teal-600 group-hover:text-teal-500 border-dashed animate-pulse">
# ⋯
</b>
{{else}}
<b class="text-2xl text-teal-600 border-b border-teal-600 group-hover:text-teal-500 border-dashed">
#{{format-number this.rank}}
</b>
{{/animated-if}}
</div>
</h4>
<p>
{{yield}}
</p>
</AnimatedContainer>
</div>
</Alert>
</div>
16 changes: 15 additions & 1 deletion app/components/roadmap-info-alert.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import fade from 'ember-animated/transitions/fade';

interface Signature {
Element: HTMLDivElement;
Expand All @@ -10,7 +12,19 @@ interface Signature {
};
}

export default class RoadmapInfoAlert extends Component<Signature> {}
export default class RoadmapInfoAlert extends Component<Signature> {
transition = fade;

@tracked rank: number | null = null;

constructor(owner: unknown, args: Signature['Args']) {
super(owner, args);

setTimeout(() => {
this.rank = 15578;
}, 1350);
}
}

declare module '@glint/environment-ember-loose/registry' {
export default interface Registry {
Expand Down
Loading