Prepare for the Stage 2 Solutions experiment [percy]

app/components/course-page/course-stage-step/second-stage-instructions-card.hbs

@@ -26,6 +26,7 @@
           @courseStage={{@courseStage}}
           @isComplete={{this.implementSolutionStepIsComplete}}
           @shouldRecommendLanguageGuide={{@shouldRecommendLanguageGuide}}
+          @shouldShowSolution={{@shouldShowSolution}}
         />
       {{else if (eq stepList.expandedStep.id "run-tests")}}
         <CoursePage::CourseStageStep::SecondStageInstructionsCard::RunTestsStep

app/components/course-page/course-stage-step/second-stage-instructions-card.ts

@@ -14,6 +14,7 @@ interface Signature {
     repository: RepositoryModel;
     courseStage: CourseStageModel;
     shouldRecommendLanguageGuide: boolean;
+    shouldShowSolution: boolean;
   };
 }
 

app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs

@@ -2,6 +2,7 @@
   <p>
     Head over to your editor / IDE and implement your solution.
   </p>
+
   <p>
     {{#if @shouldRecommendLanguageGuide}}
       If you want a quick look at what functions to use or how to structure your code, we recommend looking at
@@ -15,4 +16,36 @@
       tab.
     {{/if}}
   </p>
-</div>
+</div>
+
+{{#if (and @shouldShowSolution this.solution)}}
+  <BlurredOverlay @isBlurred={{this.solutionIsBlurred}}>
+    <:content>
+      <div class="flex flex-col gap-4 my-3">
+        {{#each this.solution.changedFiles as |changedFile|}}
+          {{! Extra if condition convinces typescript that solution isn't null }}
+          {{#if this.solution}}
+            <FileDiffCard @filename={{changedFile.filename}} @code={{changedFile.diff}} @language={{this.solution.language.slug}} />
+          {{/if}}
+        {{/each}}
+      </div>
+
+      {{#if @shouldRecommendLanguageGuide}}
+        <p class="prose dark:prose-invert prose-compact">
+          For a more detailed explanation on how this solution works, view the
+          <a href="#language-guide-card">{{@repository.language.name}} Guide</a>
+          card.
+        </p>
+      {{/if}}
+    </:content>
+
+    <:overlay>
+      <PrimaryButton {{on "click" this.toggleSolution}} class="self-center">
+        <div class="flex items-center gap-2">
+          {{svg-jar "eye" class="size-6"}}
+          <span>Reveal Solution</span>
+        </div>
+      </PrimaryButton>
+    </:overlay>
+  </BlurredOverlay>
+{{/if}}

app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.ts

@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
 import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -10,10 +12,26 @@ interface Signature {
     courseStage: CourseStageModel;
     isComplete: boolean;
     shouldRecommendLanguageGuide: boolean;
+    shouldShowSolution: boolean;
   };
 }
 
-export default class ImplementSolutionStepComponent extends Component<Signature> {}
+export default class ImplementSolutionStepComponent extends Component<Signature> {
+  @tracked solutionIsBlurred = true;
+
+  get solution() {
+    return this.args.repository.secondStageSolution;
+  }
+
+  @action
+  toggleSolution() {
+    if (this.solutionIsBlurred) {
+      this.solution?.createView();
+    }
+
+    this.solutionIsBlurred = !this.solutionIsBlurred;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

app/controllers/course/stage/instructions.ts

@@ -54,13 +54,17 @@ export default class CourseStageInstructionsController extends Controller {
   }
 
   get shouldShowLanguageGuide() {
-    return !this.model.courseStage.isFirst && !!this.languageGuide && this.featureFlags.canSeeLanguageGuidesForStage2;
+    return !this.model.courseStage.isFirst && !!this.languageGuide;
   }
 
   get shouldShowPrerequisites() {
     return !!this.prerequisiteInstructionsMarkdown;
   }
 
+  get shouldShowSolution() {
+    return this.featureFlags.canSeeSolutionsForStage2;
+  }
+
   get shouldShowTestRunnerCard() {
     return this.isCurrentStage && this.currentStep.status !== 'complete';
   }

app/models/course-stage-solution.ts

@@ -1,8 +1,13 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
+import { service } from '@ember/service';
+import ViewableMixin from 'codecrafters-frontend/mixins/viewable'; // eslint-disable-line ember/no-mixins
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
 import type LanguageModel from 'codecrafters-frontend/models/language';
 
-export default class CourseStageSolutionModel extends Model {
+export default class CourseStageSolutionModel extends Model.extend(ViewableMixin) {
+  @service declare authenticator: AuthenticatorService;
+
   @attr() declare authorDetails: { [key: string]: string }; // free-form JSON
   @attr() declare changedFiles: { diff: string; filename: string }[]; // free-form JSON
   @attr('string') declare explanationMarkdown: string;

app/models/repository.ts

@@ -200,6 +200,14 @@ export default class RepositoryModel extends Model {
     return buildPreChallengeAssessmentSectionList(this);
   }
 
+  get secondStageSolution(): CourseStageSolutionModel | null {
+    if (!this.course.secondStage) {
+      return null;
+    }
+
+    return this.course.secondStage.solutions.find((solution) => solution.language === this.language) || null;
+  }
+
   courseStageCompletionFor(courseStage: CourseStageModel) {
     return this.courseStageCompletions.filterBy('courseStage', courseStage).sortBy('completedAt')[0];
   }

app/services/feature-flags.js

@@ -14,8 +14,8 @@ export default class FeatureFlagsService extends Service {
     return this.currentUser && (this.currentUser.isStaff || this.currentUser.isConceptAuthor);
   }
 
-  get canSeeLanguageGuidesForStage2() {
-    return this.getFeatureFlagValue('can-see-language-guides-for-stage-2') === 'test' || this.currentUser?.isStaff;
+  get canSeeSolutionsForStage2() {
+    return this.getFeatureFlagValue('can-see-solutions-for-stage-2') === 'test' || this.currentUser?.isStaff;
   }
 
   get currentUser() {

app/templates/course/stage/instructions.hbs

@@ -41,6 +41,7 @@
         @repository={{@model.activeRepository}}
         @courseStage={{@model.courseStage}}
         @shouldRecommendLanguageGuide={{this.shouldShowLanguageGuide}}
+        @shouldShowSolution={{this.shouldShowSolution}}
         class="mb-6"
       />
     {{/if}}