extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
alexsparkes 2024-03-16 23:28:35 +00:00
parent 59357357bb
commit 86f64dfc98
9 changed files with 137 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Elements/MainModal/scss/settings/_main.scss
View File

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

6
src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss
View File

@ -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;

67
src/features/misc/sections/Stats.jsx
View File

@ -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() {
const achievements = this.state.achievements;
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;
}
});
updateAchievements() {
const achieved = checkAchievements(this.state.stats);
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) => {
if (achievement.achieved) {
return achievementElement(index, achievement.id, achievement.achieved);
}
})}
<div className="achievementsGrid">
{this.state.achievements.map((achievement, index) => {
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>
</>

37
src/features/quote/Quote.jsx
View File

@ -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 ? (
<Tooltip title={variables.getMessage('widgets.quote.link_tooltip')}>
<a
href={this.state.authorlink}
className="quoteAuthorLink"
target="_blank"
rel="noopener noreferrer"
aria-label="Learn about the author of the quote."
>
<MdOpenInNew />
</a>{' '}
</Tooltip>
) : null}
{this.state.copy} {this.state.share} {this.state.favourited}
</div>
{(this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null) ||
this.state.copy ||
this.state.share ||
this.state.favourited ? (
<div className="quote-buttons">
{this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== null ? (
<Tooltip title={variables.getMessage('widgets.quote.link_tooltip')}>
<a
href={this.state.authorlink}
className="quoteAuthorLink"
target="_blank"
rel="noopener noreferrer"
aria-label="Learn about the author of the quote."
>
<MdOpenInNew />
</a>{' '}
</Tooltip>
) : null}
{this.state.copy} {this.state.share} {this.state.favourited}
</div>
) : null}
</div>
</div>
)}

2
src/i18n/locales/achievements/en_GB.json
View File

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

50
src/utils/achievements/condition.js Normal file
View File

@ -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;
}

20
src/utils/achievements/index.js
View File

@ -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 {
achievements,
translations
};
// todo: clean this up and condition.js too
function getLocalisedAchievementData(id) {
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 };

2
src/utils/data/achievements.json
View File

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

15
src/utils/stats.js
View File

@ -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);
}
}