Add achievement for completing week challenges

src/components/AchievementBadge.vue

@@ -22,6 +22,20 @@ type AchievementProps = Record<
 >;
 
 const achievementProps: AchievementProps = {
+  challengeAccepted: {
+    [AchievementLevel.Bronze]: {
+      textProps: [5],
+      emoji: '🛴',
+    },
+    [AchievementLevel.Silver]: {
+      textProps: [10],
+      emoji: '🛵',
+    },
+    [AchievementLevel.Gold]: {
+      textProps: [20],
+      emoji: '🚀',
+    },
+  },
   committed: {
     [AchievementLevel.Bronze]: {
       textProps: [3],
@@ -43,7 +57,7 @@ const achievementProps: AchievementProps = {
     },
     [AchievementLevel.Silver]: {
       textProps: [80],
-      emoji: '🐥',
+      emoji: '🐧',
     },
     [AchievementLevel.Gold]: {
       textProps: [150],

src/components/AchievementList.vue

@@ -28,6 +28,26 @@ const {achievements} = storeToRefs(useAppStateStore());
         />
       </div>
     </div>
+    <div>
+      <p class="achievement-list__label">{{ $t('achievements.challengeAccepted.title') }}</p>
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Bronze"
+          :level="AchievementLevel.Bronze"
+          achievement="challengeAccepted"
+        />
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Silver"
+          :level="AchievementLevel.Silver"
+          achievement="challengeAccepted"
+        />
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="challengeAccepted"
+        />
+      </div>
+    </div>
     <div>
       <p class="achievement-list__label">{{ $t('achievements.committed.title') }}</p>
       <div class="achievement-list__badge-container">

src/components/__tests__/AchievementList.spec.ts

@@ -16,7 +16,7 @@ describe('AchievementList', () => {
   it('renders', () => {
     const wrapper = mount(AchievementList);
     expect(wrapper.html()).toMatchSnapshot();
-    expect(wrapper.findAll('.badge[aria-disabled="true"]').length).toBe(15);
+    expect(wrapper.findAll('.badge[aria-disabled="true"]').length).toBe(18);
   });
 
   it('renders with badges enabled', () => {
@@ -36,6 +36,6 @@ describe('AchievementList', () => {
 
     const wrapper = mount(AchievementList);
     expect(wrapper.html()).toMatchSnapshot();
-    expect(wrapper.findAll('.badge[aria-disabled="true"]').length).toBe(7);
+    expect(wrapper.findAll('.badge[aria-disabled="true"]').length).toBe(10);
   });
 });

src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap

@@ -13,7 +13,7 @@ exports[`AchievementList > renders 1`] = `
       </div>
       <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-          <div data-v-06381b3c="" class="badge__emoji">🐥</div>
+          <div data-v-06381b3c="" class="badge__emoji">🐧</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
@@ -25,6 +25,29 @@ exports[`AchievementList > renders 1`] = `
       </div>
     </div>
   </div>
+  <div data-v-1c120264="">
+    <p data-v-1c120264="" class="achievement-list__label">Challenge Accepted</p>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🛴</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🛵</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚀</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
+      </div>
+    </div>
+  </div>
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Committed</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
@@ -128,7 +151,7 @@ exports[`AchievementList > renders with badges enabled 1`] = `
       </div>
       <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-          <div data-v-06381b3c="" class="badge__emoji">🐥</div>
+          <div data-v-06381b3c="" class="badge__emoji">🐧</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
@@ -140,6 +163,29 @@ exports[`AchievementList > renders with badges enabled 1`] = `
       </div>
     </div>
   </div>
+  <div data-v-1c120264="">
+    <p data-v-1c120264="" class="achievement-list__label">Challenge Accepted</p>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🛴</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🛵</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚀</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
+      </div>
+    </div>
+  </div>
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Committed</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">

src/components/__tests__/achievements.spec.ts

@@ -17,6 +17,7 @@ const withSetup = <T>(hook: () => T) =>
   });
 
 const defaultAchievements: Achievements = {
+  challengeAccepted: AchievementLevel.NoAchievement,
   committed: AchievementLevel.NoAchievement,
   completionist: AchievementLevel.NoAchievement,
   hotStreak: AchievementLevel.NoAchievement,
@@ -36,110 +37,123 @@ describe('achievements', () => {
 
   it('advances completionist', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements([...Array(39)], 0, 0);
+    advanceAchievements([...Array(39)], 0, 0, 0);
     expect(achievements.value.completionist).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements([...Array(40)], 0, 0);
+    advanceAchievements([...Array(40)], 0, 0, 0);
     expect(achievements.value.completionist).toBe(AchievementLevel.Bronze);
-    advanceAchievements([...Array(80)], 0, 0);
+    advanceAchievements([...Array(80)], 0, 0, 0);
     expect(achievements.value.completionist).toBe(AchievementLevel.Silver);
-    advanceAchievements([...Array(150)], 0, 0);
+    advanceAchievements([...Array(150)], 0, 0, 0);
     expect(achievements.value.completionist).toBe(AchievementLevel.Gold);
   });
 
   it('goes straight to silver', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements([...Array(80)], 0, 0);
+    advanceAchievements([...Array(80)], 0, 0, 0);
     expect(achievements.value.completionist).toBe(AchievementLevel.Silver);
   });
 
   it('goes straight to gold', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements([...Array(150)], 0, 0);
+    advanceAchievements([...Array(150)], 0, 0, 0);
     expect(achievements.value.completionist).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterFruit', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(FRUITS, 14), 0, 0);
+    advanceAchievements(take(FRUITS, 14), 0, 0, 0);
     expect(achievements.value.experimenterFruit).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(FRUITS, 15), 0, 0);
+    advanceAchievements(take(FRUITS, 15), 0, 0, 0);
     expect(achievements.value.experimenterFruit).toBe(AchievementLevel.Gold);
   });
 
   it('goes straight to gold', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(FRUITS, 15), 0, 0);
+    advanceAchievements(take(FRUITS, 15), 0, 0, 0);
     expect(achievements.value.experimenterFruit).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterVegetable', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(VEGETABLES, 14), 0, 0);
+    advanceAchievements(take(VEGETABLES, 14), 0, 0, 0);
     expect(achievements.value.experimenterVegetable).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(VEGETABLES, 15), 0, 0);
+    advanceAchievements(take(VEGETABLES, 15), 0, 0, 0);
     expect(achievements.value.experimenterVegetable).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterLeafy', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(LEAFIES, 14), 0, 0);
+    advanceAchievements(take(LEAFIES, 14), 0, 0, 0);
     expect(achievements.value.experimenterLeafy).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(LEAFIES, 15), 0, 0);
+    advanceAchievements(take(LEAFIES, 15), 0, 0, 0);
     expect(achievements.value.experimenterLeafy).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterBean', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(BEANS, 14), 0, 0);
+    advanceAchievements(take(BEANS, 14), 0, 0, 0);
     expect(achievements.value.experimenterBean).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(BEANS, 15), 0, 0);
+    advanceAchievements(take(BEANS, 15), 0, 0, 0);
     expect(achievements.value.experimenterBean).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterRoot', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(ROOTS, 14), 0, 0);
+    advanceAchievements(take(ROOTS, 14), 0, 0, 0);
     expect(achievements.value.experimenterRoot).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(ROOTS, 15), 0, 0);
+    advanceAchievements(take(ROOTS, 15), 0, 0, 0);
     expect(achievements.value.experimenterRoot).toBe(AchievementLevel.Gold);
   });
 
   it('advances experimenterGrain', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements(take(GRAINS, 14), 0, 0);
+    advanceAchievements(take(GRAINS, 14), 0, 0, 0);
     expect(achievements.value.experimenterGrain).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements(take(GRAINS, 15), 0, 0);
+    advanceAchievements(take(GRAINS, 15), 0, 0, 0);
     expect(achievements.value.experimenterGrain).toBe(AchievementLevel.Gold);
   });
 
   it('advances hot streak', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements([], 4, 0);
+    advanceAchievements([], 4, 0, 0);
     expect(achievements.value.hotStreak).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements([], 5, 0);
+    advanceAchievements([], 5, 0, 0);
     expect(achievements.value.hotStreak).toEqual(AchievementLevel.Bronze);
-    advanceAchievements([], 10, 0);
+    advanceAchievements([], 10, 0, 0);
     expect(achievements.value.hotStreak).toEqual(AchievementLevel.Silver);
-    advanceAchievements([], 20, 0);
+    advanceAchievements([], 20, 0, 0);
     expect(achievements.value.hotStreak).toEqual(AchievementLevel.Gold);
   });
 
   it('advances committed', async () => {
     const {advanceAchievements, achievements} = await withSetup(useAchievements);
-    advanceAchievements([], 0, 11);
+    advanceAchievements([], 0, 11, 0);
     expect(achievements.value.committed).toEqual(AchievementLevel.NoAchievement);
-    advanceAchievements([], 0, 12);
+    advanceAchievements([], 0, 12, 0);
     expect(achievements.value.committed).toEqual(AchievementLevel.Bronze);
-    advanceAchievements([], 0, 26);
+    advanceAchievements([], 0, 26, 0);
     expect(achievements.value.committed).toEqual(AchievementLevel.Silver);
-    advanceAchievements([], 0, 52);
+    advanceAchievements([], 0, 52, 0);
     expect(achievements.value.committed).toEqual(AchievementLevel.Gold);
   });
 
+  it('advances challengeAccepted', async () => {
+    const {advanceAchievements, achievements} = await withSetup(useAchievements);
+    advanceAchievements([], 0, 0, 4);
+    expect(achievements.value.challengeAccepted).toEqual(AchievementLevel.NoAchievement);
+    advanceAchievements([], 0, 0, 5);
+    expect(achievements.value.challengeAccepted).toEqual(AchievementLevel.Bronze);
+    advanceAchievements([], 0, 0, 10);
+    expect(achievements.value.challengeAccepted).toEqual(AchievementLevel.Silver);
+    advanceAchievements([], 0, 0, 20);
+    expect(achievements.value.challengeAccepted).toEqual(AchievementLevel.Gold);
+  });
+
   it('resets achievements', async () => {
     const {advanceAchievements, achievements, resetAchievements} = await withSetup(useAchievements);
-    advanceAchievements(ALL_VEGGIES, 30, 52);
+    advanceAchievements(ALL_VEGGIES, 30, 52, 20);
     expect(achievements.value).toEqual({
+      challengeAccepted: 3,
       committed: 3,
       completionist: 3,
       experimenterBean: 3,

src/components/__tests__/activityStore.spec.ts

@@ -81,6 +81,40 @@ describe('activityStore', () => {
     expect(activityStore.currentVeggies).toEqual(['cucumber', 'tomato']);
   });
 
+  it('returns completed challenges', () => {
+    activityStore.startDate = twoWeeksAgo;
+    activityStore.weeks.push(
+      {
+        startDate: twoWeeksAgo,
+        veggies: ['cucumber'],
+      },
+      {
+        startDate: lastWeek,
+        veggies: ['wheat', 'rye', 'strawberry'],
+      },
+      {
+        startDate: thisWeek,
+        veggies: ['rice', 'leek'],
+      },
+    );
+    activityStore.challenges.push(
+      {
+        startDate: twoWeeksAgo,
+        veggie: 'cucumber',
+      },
+      {
+        startDate: lastWeek,
+        veggie: 'leek',
+      },
+      {
+        startDate: thisWeek,
+        veggie: 'rice',
+      },
+    );
+
+    expect(activityStore.completedChallenges).toEqual(2);
+  });
+
   // it("sets this week's veggies", () => {
   //   activityStore.startDate = lastWeek;
   //   activityStore.weeks.push(