Merge pull request #3080 from codecrafters-io/pk-branch-4

feat(leaderboard): show accurate stage counts and add header explanations

Author: rohitpaulk

app/components/leaderboard-page/entries-table.hbs

@@ -3,23 +3,7 @@
     <div>
       <table class="min-w-full bg-white">
         <thead>
-          <tr>
-            <LeaderboardPage::EntriesTable::HeaderRowCell @title="Rank" @alignment="left" />
-            <LeaderboardPage::EntriesTable::HeaderRowCell @title="User" @alignment="left" />
-
-            <LeaderboardPage::EntriesTable::HeaderRowCell
-              @title="Stages Completed"
-              @alignment="right"
-              class="hidden md:table-cell"
-              @explanationMarkdown={{this.explanationMarkdownForStagesCompleted}}
-            />
-
-            <LeaderboardPage::EntriesTable::HeaderRowCell
-              @title="Score"
-              @alignment="right"
-              @explanationMarkdown={{this.explanationMarkdownForScore}}
-            />
-          </tr>
+          <LeaderboardPage::EntriesTable::HeaderRow @language={{@language}} />
         </thead>
         <tbody>
           {{#each this.sortedTopEntries as |entry index|}}

app/components/leaderboard-page/entries-table.ts

@@ -32,18 +32,6 @@ export default class LeaderboardPageEntriesTable extends Component<Signature> {
     }
   }
 
-  get explanationMarkdownForScore() {
-    return `
-The highest possible score for this track is ${this.args.language.leaderboard!.highestPossibleScore}.
-
-Harder stages have higher scores assigned to them.
-`.trim();
-  }
-
-  get explanationMarkdownForStagesCompleted() {
-    return `There are ${this.args.language.stagesCount} stages available in this track.`;
-  }
-
   get hasEntries() {
     return this.args.topEntries.length > 0;
   }

app/components/leaderboard-page/entries-table/header-row.hbs

@@ -0,0 +1,13 @@
+<tr ...attributes>
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="Rank" @alignment="left" />
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="User" @alignment="left" />
+
+  <LeaderboardPage::EntriesTable::HeaderRowCell
+    @title="Stages Completed"
+    @alignment="right"
+    class="hidden md:table-cell"
+    @explanationMarkdown={{this.explanationMarkdownForStagesCompleted}}
+  />
+
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="Score" @alignment="right" @explanationMarkdown={{this.explanationMarkdownForScore}} />
+</tr>

app/components/leaderboard-page/entries-table/header-row.ts

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import type LanguageModel from 'codecrafters-frontend/models/language';
+
+interface Signature {
+  Element: HTMLTableRowElement;
+
+  Args: {
+    language: LanguageModel;
+  };
+}
+
+export default class LeaderboardPageEntriesTableHeaderRow extends Component<Signature> {
+  get explanationMarkdownForScore() {
+    return `
+The highest possible score for this track is ${this.args.language.leaderboard!.highestPossibleScore}.
+
+Harder stages have higher scores assigned to them.
+`.trim();
+  }
+
+  get explanationMarkdownForStagesCompleted() {
+    return `There are ${this.args.language.liveOrBetaStagesCount} stages available in this track.`;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'LeaderboardPage::EntriesTable::HeaderRow': typeof LeaderboardPageEntriesTableHeaderRow;
+  }
+}

app/components/leaderboard-page/header.ts

@@ -21,7 +21,7 @@ export default class LeaderboardPageHeader extends Component<Signature> {
     return this.store
       .peekAll('language')
       .sortBy('sortPositionForTrack')
-      .filter((language) => language.stagesCount > 0);
+      .filter((language) => language.liveOrBetaStagesCount > 0);
   }
 
   @action

app/components/track-page/header/index.hbs

@@ -27,7 +27,7 @@
         {{/if}}
       {{/if}}
 
-      <TrackPage::Header::Statistic @description="{{format-number @language.stagesCount}} exercises" @icon="terminal" class="shrink-0" />
+      <TrackPage::Header::Statistic @description="{{format-number @language.liveOrBetaStagesCount}} exercises" @icon="terminal" class="shrink-0" />
     </div>
 
     {{#if (has-block "cta")}}

app/components/tracks-page/track-card/index.hbs

@@ -28,11 +28,11 @@
   {{! Footer }}
   <div class="flex items-center justify-between">
     {{#if this.currentUserHasStartedTrack}}
-      <TracksPage::TrackCard::ProgressBar @completedStagesCount={{this.completedStagesCount}} @stagesCount={{this.stagesCount}} />
+      <TracksPage::TrackCard::ProgressBar @completedStagesCount={{this.completedStagesCount}} @stagesCount={{@language.liveOrBetaStagesCount}} />
     {{else}}
       <div class="flex items-center">
         {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
-        <span class="text-xs text-gray-500">{{this.stagesCount}} stages</span>
+        <span class="text-xs text-gray-500">{{@language.liveOrBetaStagesCount}} stages</span>
       </div>
     {{/if}}
 

app/components/tracks-page/track-card/index.ts

@@ -39,16 +39,6 @@ export default class TrackCard extends Component<Signature> {
     }
   }
 
-  get stagesCount() {
-    return this.store
-      .peekAll('course')
-      .rejectBy('releaseStatusIsAlpha')
-      .rejectBy('releaseStatusIsDeprecated')
-      .filter((course) => course.betaOrLiveLanguages.includes(this.args.language))
-      .mapBy('stages.length')
-      .reduce((a, b) => a + b, 0);
-  }
-
   @action
   async navigateToTrack() {
     await this.router.transitionTo('track', this.args.language.slug);

app/controllers/leaderboard.ts

@@ -13,6 +13,6 @@ export default class LeaderboardController extends Controller {
     return this.store
       .peekAll('language')
       .sortBy('sortPositionForTrack')
-      .filter((language) => language.stagesCount > 0);
+      .filter((language) => language.liveOrBetaStagesCount > 0);
   }
 }

app/models/language.ts

@@ -152,6 +152,15 @@ export default class LanguageModel extends Model {
     return this.slug === 'go';
   }
 
+  get liveOrBetaStagesCount() {
+    return this.store
+      .peekAll('course')
+      .filter((course) => course.releaseStatusIsLive || course.releaseStatusIsBeta)
+      .filter((course) => course.betaOrLiveLanguages.includes(this))
+      .map((course) => course.stages.length)
+      .reduce((a, b) => a + b, 0);
+  }
+
   get sortPositionForTrack() {
     return [
       // Popular tracks, sorted by usage
@@ -164,14 +173,6 @@ export default class LanguageModel extends Model {
     ].join('');
   }
 
-  get stagesCount() {
-    return this.store
-      .peekAll('course')
-      .filter((course) => course.betaOrLiveLanguages.includes(this))
-      .map((course) => course.stages.length)
-      .reduce((a, b) => a + b, 0);
-  }
-
   get tealLogoUrl() {
     return {
       c: tealLogoC,