feat: achievement improvements

- Added achievement notification
- Show locked achievements
- Fixed quote padding
- Fixed date picker layout

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

src/components/Elements/MainModal/scss/settings/_main.scss

@@ -51,6 +51,8 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
+    display: flex;
+    flex-flow: column;
 
     @include themed {
       background: t($modal-sidebar);

src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss

@@ -33,6 +33,12 @@
 }
 
 .achievements {
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}
+
+.achievementsGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 10px;

src/features/misc/sections/Stats.jsx

@@ -10,7 +10,7 @@ import { Header, CustomActions } from 'components/Layout/Settings';
 
 import { saveFile } from 'utils/saveFile';
 
-import { translations, achievements } from 'utils/achievements';
+import { getLocalisedAchievementData, achievements, checkAchievements } from 'utils/achievements';
 
 class Stats extends PureComponent {
   constructor() {
@@ -21,29 +21,10 @@ class Stats extends PureComponent {
     };
   }
 
-  getAchievements() {
+  updateAchievements() {
-    const achievements = this.state.achievements;
+    const achieved = checkAchievements(this.state.stats);
-    achievements.forEach((achievement) => {
-      switch (achievement.condition.type) {
-        case 'tabsOpened':
-          if (this.state.stats['tabs-opened'] >= achievement.condition.amount) {
-            achievement.achieved = true;
-          }
-          break;
-        case 'addonInstall':
-          if (this.state.stats.marketplace) {
-            if (this.state.stats.marketplace['install'] >= achievement.condition.amount) {
-              achievement.achieved = true;
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    });
-
     this.setState({
-      achievements,
+      achievements: achieved,
     });
   }
 
@@ -59,11 +40,13 @@ class Stats extends PureComponent {
 
   resetStats() {
     localStorage.setItem('statsData', JSON.stringify({}));
+    localStorage.setItem('achievements', JSON.stringify(achievements));
     this.setState({
       stats: {},
+      achievements,
     });
     toast(variables.getMessage('toasts.stats_reset'));
-    this.getAchievements();
+    this.updateAchievements();
     this.forceUpdate();
   }
 
@@ -75,31 +58,21 @@ class Stats extends PureComponent {
     saveFile(JSON.stringify(this.state.stats, null, 2), filename);
   }
 
-  getLocalisedAchievementData(id) {
-    const localised = translations[variables.languagecode][id] ||
-      translations.en_GB[id] || { name: id, description: '' };
-
-    return {
-      name: localised.name,
-      description: localised.description,
-    };
-  }
-
   componentDidMount() {
-    this.getAchievements();
+    this.updateAchievements();
     this.forceUpdate();
   }
 
   render() {
     const achievementElement = (key, id, achieved) => {
-      const { name, description } = this.getLocalisedAchievementData(id);
+      const { name, description } = getLocalisedAchievementData(id);
 
       return (
         <div className="achievement" key={key}>
           <FaTrophy />
           <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
             <span>{name}</span>
-            <span className="subtitle">{description}</span>
+            <span className="subtitle">{achieved ? description : '?????'}</span>
           </div>
         </div>
       );
@@ -213,11 +186,21 @@ class Stats extends PureComponent {
             </span>
           </div>
           <div className="achievements">
-            {this.state.achievements.map((achievement, index) => {
+            <div className="achievementsGrid">
-              if (achievement.achieved) {
+              {this.state.achievements.map((achievement, index) => {
-                return achievementElement(index, achievement.id, achievement.achieved);
+                if (achievement.achieved) {
-              }
+                  return achievementElement(index, achievement.id, achievement.achieved);
-            })}
+                }
+              })}
+            </div>
+            <span className="title">Locked</span>
+            <div className="achievementsGrid preferencesInactive">
+              {this.state.achievements.map((achievement, index) => {
+                if (!achievement.achieved) {
+                  return achievementElement(index, achievement.id, achievement.achieved);
+                }
+              })}
+            </div>
           </div>
         </div>
       </>

src/features/quote/Quote.jsx

@@ -493,22 +493,27 @@ class Quote extends PureComponent {
                   <span className="subtitle">loading</span>
                 </div>
               )}
-              <div className="quote-buttons">
+              {(this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null) ||
-                {this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null ? (
+              this.state.copy ||
-                  <Tooltip title={variables.getMessage('widgets.quote.link_tooltip')}>
+              this.state.share ||
-                    <a
+              this.state.favourited ? (
-                      href={this.state.authorlink}
+                <div className="quote-buttons">
-                      className="quoteAuthorLink"
+                  {this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null ? (
-                      target="_blank"
+                    <Tooltip title={variables.getMessage('widgets.quote.link_tooltip')}>
-                      rel="noopener noreferrer"
+                      <a
-                      aria-label="Learn about the author of the quote."
+                        href={this.state.authorlink}
-                    >
+                        className="quoteAuthorLink"
-                      <MdOpenInNew />
+                        target="_blank"
-                    </a>{' '}
+                        rel="noopener noreferrer"
-                  </Tooltip>
+                        aria-label="Learn about the author of the quote."
-                ) : null}
+                      >
-                {this.state.copy} {this.state.share} {this.state.favourited}
+                        <MdOpenInNew />
-              </div>
+                      </a>{' '}
+                    </Tooltip>
+                  ) : null}
+                  {this.state.copy} {this.state.share} {this.state.favourited}
+                </div>
+              ) : null}
             </div>
           </div>
         )}

src/i18n/locales/achievements/en_GB.json

@@ -47,4 +47,4 @@
     "name": "System Overload",
     "description": "Installed 50 add-ons"
   }
-}
+}

src/utils/achievements/condition.js

@@ -0,0 +1,50 @@
+import { achievements } from './index';
+
+export function checkAchievements(stats) {
+  achievements.forEach((achievement) => {
+    switch (achievement.condition.type) {
+      case 'tabsOpened':
+        if (stats['tabs-opened'] >= achievement.condition.amount) {
+          achievement.achieved = true;
+        }
+        break;
+      case 'addonInstall':
+        if (stats.marketplace) {
+          if (stats.marketplace['install'] >= achievement.condition.amount) {
+            achievement.achieved = true;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  });
+
+  return achievements;
+}
+
+export function newAchievements(stats) {
+  // calculate new achievements
+  const oldAchievements = JSON.parse(localStorage.getItem('achievements')) || [];
+  const checkedAchievements = checkAchievements(stats);
+  const newAchievements = [];
+
+  checkedAchievements.forEach((achievement) => {
+    if (achievement.achieved && !oldAchievements.includes(achievement.id)) {
+      newAchievements.push(achievement);
+    }
+  });
+
+  // add timestamp to new achievements
+  newAchievements.forEach((achievement) => {
+    achievement.timestamp = Date.now();
+  });
+
+  // save new achievements to local storage
+  localStorage.setItem(
+    'achievements',
+    JSON.stringify([...oldAchievements, ...newAchievements.map((achievement) => achievement.id)]),
+  );
+
+  return newAchievements;
+}

src/utils/achievements/index.js

@@ -1,3 +1,5 @@
+import variables from 'config/variables';
+
 import de_DE from 'i18n/locales/achievements/de_DE.json';
 import en_GB from 'i18n/locales/achievements/en_GB.json';
 import en_US from 'i18n/locales/achievements/en_US.json';
@@ -14,6 +16,8 @@ import pt_BR from 'i18n/locales/achievements/pt_BR.json';
 
 import achievements from 'utils/data/achievements.json';
 
+import { checkAchievements, newAchievements } from './condition';
+
 const translations = {
   de_DE,
   en_GB,
@@ -30,7 +34,15 @@ const translations = {
   pt_BR,
 };
 
-export {
+// todo: clean this up and condition.js too
-  achievements,
+function getLocalisedAchievementData(id) {
-  translations
+  const localised = translations[variables.languagecode][id] ||
-};
+    translations.en_GB[id] || { name: id, description: '' };
+
+  return {
+    name: localised.name,
+    description: localised.description,
+  };
+}
+
+export { achievements, checkAchievements, newAchievements, getLocalisedAchievementData };

src/utils/data/achievements.json

@@ -42,7 +42,7 @@
     }
   },
   {
-    "id": "808sandtabs",
+    "id": "808s",
     "condition": {
       "type": "tabsOpened",
       "amount": 808

src/utils/stats.js

@@ -1,4 +1,17 @@
+import { newAchievements, getLocalisedAchievementData } from './achievements';
+import { toast } from 'react-toastify';
+
 export default class Stats {
+  static async achievementTrigger(stats) {
+    const newAchievement = newAchievements(stats);
+    newAchievement.forEach((achievement) => {
+      if (achievement) {
+        const { name } = getLocalisedAchievementData(achievement.id);
+        toast(`Achievement Unlocked: ${name}`);
+      }
+    });
+  }
+
   /**
    * It takes two arguments, a type and a name, and then it increments the value of the name in the type
    * object in localStorage
@@ -24,6 +37,7 @@ export default class Stats {
       data[type][value] = data[type][value] + 1;
     }
     localStorage.setItem('statsData', JSON.stringify(data));
+    this.achievementTrigger(data);
   }
 
   /**
@@ -33,5 +47,6 @@ export default class Stats {
     const data = JSON.parse(localStorage.getItem('statsData'));
     data['tabs-opened'] = data['tabs-opened'] + 1 || 1;
     localStorage.setItem('statsData', JSON.stringify(data));
+    this.achievementTrigger(data);
   }
 }