Merge pull request #881 from the-hideout/feature/better_acievements

Better acievements
the-hideout · Mar 14, 2024 · 99e6012 · 99e6012
2 parents 5dc4a81 + e0acc44
commit 99e6012
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 23 deletions.
diff --git a/src/features/achievements/do-fetch-achievements.mjs b/src/features/achievements/do-fetch-achievements.mjs
@@ -13,6 +13,8 @@ class AchievementsQuery extends APIQuery {
                 description
                 hidden
                 playersCompletedPercent
+                normalizedRarity
+                rarity
             }
         }`;
 

diff --git a/src/pages/achievements/index.css b/src/pages/achievements/index.css
@@ -0,0 +1,7 @@
+.rare {
+    color: #8c6edf;
+}
+
+.legendary {
+    color: #ffe084;
+}
diff --git a/src/pages/achievements/index.js b/src/pages/achievements/index.js
@@ -10,6 +10,14 @@ import DataTable from '../../components/data-table/index.js';
 
 import useAchievementsData from '../../features/achievements/index.js';
 
+import './index.css';
+
+const raritySort = {
+    "common": 0,
+    "rare": 1,
+    "legendary": 2
+}
+
 function Achievements() {
     const { t } = useTranslation();
 
@@ -23,21 +31,17 @@ function Achievements() {
         () => [
             {
                 Header: () => (
-                    <div
-                      style={{
-                        textAlign:'left'
-                      }}
-                    >{t('Name')}</div>),
+                    <div style={{textAlign:'left', paddingLeft:'10px'}}>
+                        {t('Name')}
+                    </div>),
                 id: 'name',
                 accessor: 'name',
             },
             {
                 Header: () => (
-                    <div
-                      style={{
-                        textAlign:'left'
-                      }}
-                    >{t('Description')}</div>),
+                    <div style={{textAlign:'left', paddingLeft:'10px'}}>
+                        {t('Description')}
+                    </div>),
                 id: 'description',
                 accessor: 'description',
             },
@@ -51,7 +55,12 @@ function Achievements() {
                     );
                 },
                 sortType: (rowA, rowB) => {
-                    return (+ rowA.values.hidden) - (+ rowB.values.hidden);
+                    let rowAhidden = rowA.original.hidden ? 1 : 0
+                    let rowBhidden = rowB.original.hidden ? 1 : 0
+                    if (rowAhidden === rowBhidden) {
+                        return rowB.original.playersCompletedPercent - rowA.original.playersCompletedPercent
+                    }
+                    return rowAhidden - rowBhidden;
                 },
             },
             {
@@ -66,6 +75,26 @@ function Achievements() {
                     );
                 },
             },
+            {
+                Header: t('Rarity'),
+                id: 'rarity',
+                accessor: 'rarity',
+                Cell: (props) => {
+                    return (
+                        <div className={`center-content ${props.row.original.normalizedRarity}`}>
+                            {props.value}
+                        </div>
+                    );
+                },
+                sortType: (rowA, rowB) => {
+                    let rowAr = raritySort[rowA.original.normalizedRarity];
+                    let rowBr = raritySort[rowB.original.normalizedRarity];
+                    if (rowAr === rowBr) {
+                        return rowB.original.playersCompletedPercent - rowA.original.playersCompletedPercent
+                    }
+                    return rowAr - rowBr;
+                },
+            }
         ],
         [t],
     );

diff --git a/src/pages/player/index.css b/src/pages/player/index.css
@@ -42,3 +42,11 @@ ul.favorite-item-list li {
     display: inline-block;
     padding-left: 2px;
 }
+
+.rare {
+    color: #8c6edf;
+}
+
+.legendary {
+    color: #ffe084;
+}
diff --git a/src/pages/player/index.js b/src/pages/player/index.js
@@ -49,6 +49,12 @@ function getDHMS(seconds) {
     }
 }
 
+const raritySort = {
+    "common": 0,
+    "rare": 1,
+    "legendary": 2
+}
+
 function Player() {
     const { t } = useTranslation();
     const params = useParams();
@@ -163,21 +169,17 @@ function Player() {
         () => [
             {
                 Header: () => (
-                    <div
-                      style={{
-                        textAlign:'left'
-                      }}
-                    >{t('Name')}</div>),
+                    <div style={{textAlign:'left', paddingLeft:'10px'}}>
+                        {t('Name')}
+                    </div>),
                 id: 'name',
                 accessor: 'name',
             },
             {
                 Header: () => (
-                    <div
-                      style={{
-                        textAlign:'left'
-                      }}
-                    >{t('Description')}</div>),
+                    <div style={{textAlign:'left', paddingLeft:'10px'}}>
+                        {t('Description')}
+                    </div>),
                 id: 'description',
                 accessor: 'description',
             },
@@ -205,6 +207,26 @@ function Player() {
                     );
                 },
             },
+            {
+                Header: t('Rarity'),
+                id: 'rarity',
+                accessor: 'rarity',
+                Cell: (props) => {
+                    return (
+                        <div className={`center-content ${props.row.original.normalizedRarity}`}>
+                            {props.value}
+                        </div>
+                    );
+                },
+                sortType: (rowA, rowB) => {
+                    let rowAr = raritySort[rowA.original.normalizedRarity];
+                    let rowBr = raritySort[rowB.original.normalizedRarity];
+                    if (rowAr === rowBr) {
+                        return rowB.original.playersCompletedPercent - rowA.original.playersCompletedPercent
+                    }
+                    return rowAr - rowBr;
+                },
+            },
         ],
         [t],
     );

diff --git a/src/pages/wipe-length/index.js b/src/pages/wipe-length/index.js
@@ -21,10 +21,12 @@ const WipeLength = (props) => {
         return [
             {
                 Header: t('Patch'),
+                id: 'name',
                 accessor: 'name',
             },
             {
                 Header: t('Wipe start'),
+                id: 'start',
                 accessor: ({ start }) => {
                     if (start) {
                         return dayjs(start).format('YYYY-MM-DD');
@@ -33,10 +35,10 @@ const WipeLength = (props) => {
                     return '';
                 },
                 Cell: CenterCell,
-                id: 'start',
             },
             {
                 Header: t('Wipe end'),
+                id: 'end',
                 accessor: ({ end, ongoing }) => {
                     if (ongoing) {
                         return t('Ongoing wipe');
@@ -47,10 +49,10 @@ const WipeLength = (props) => {
                     return '';
                 },
                 Cell: CenterCell,
-                id: 'end',
             },
             {
                 Header: t('Wipe length'),
+                id: 'wipeLength',
                 accessor: 'lengthDays',
                 Cell: (props) => {
                     const { value } = props;
@@ -104,6 +106,8 @@ const WipeLength = (props) => {
                 columns={columns}
                 data={data}
                 disableSortBy={false}
+                sortBy={'start'}
+                sortByDesc={true}
             />
             {}
         </div>