Merge pull request #165 from Morta1/design-facelift

Design facelift
Morta1 · Mar 4, 2025 · d465858 · d465858
2 parents b7e071a + 4de00f6
commit d465858
Show file tree

Hide file tree

Showing 46 changed files with 376 additions and 149 deletions.
diff --git a/components/account/Guild/GuildMembers.jsx b/components/account/Guild/GuildMembers.jsx
@@ -18,16 +18,18 @@ const GuildMembers = ({ members, saves }) => {
   const [localMembers, setLocalMembers] = useState();
   const [order, setOrder] = useState('desc');
   const [orderBy, setOrderBy] = useState('gpEarned')
+  const sortedSaves = saves?.slice().sort((a, b) => b.timestamp - a.timestamp);
 
   useEffect(() => {
     setLocalMembers(getSortedMembers(members, orderBy, order))
   }, [members])
 
   const getSortedMembers = (arr, orderByKey, wantedOrder) => {
-    return arr?.sort((a, b) => {
-      return wantedOrder === 'asc' ? a?.[orderByKey] - b?.[orderByKey] : b?.[orderByKey] - a?.[orderByKey]
-    })
-  }
+    return [...(arr || [])].sort((a, b) =>
+      wantedOrder === 'asc' ? a?.[orderByKey] - b?.[orderByKey] : b?.[orderByKey] - a?.[orderByKey]
+    );
+  };
+
 
   const handleSort = (orderKey, newOrder) => {
     setOrder(newOrder);
@@ -56,11 +58,11 @@ const GuildMembers = ({ members, saves }) => {
           </TableCell>
           <TableCell>Wanted Bonus</TableCell>
         </TableRow>
-        {saves?.length > 0 ? <TableRow>
+        {sortedSaves?.length > 0 ? <TableRow>
           <TableCell colSpan={2}/>
-          {saves?.map((save, index) => {
+          {sortedSaves?.map((save, index) => {
             if (save) {
-              return <TableCell key={save?.timestamp + index}>
+              return <TableCell key={'save' + index}>
                 {format(save?.timestamp, 'dd/MM/yyyy HH:mm:ss')}
               </TableCell>
             }

diff --git a/components/account/Misc/Dungeons/RngItems.js b/components/account/Misc/Dungeons/RngItems.js
@@ -1,4 +1,4 @@
-import { Card, CardContent, Stack, Typography, } from '@mui/material';
+import { Card, CardContent, Stack, Typography } from '@mui/material';
 import { cleanUnderscore, notateNumber, prefix } from '../../../../utility/helpers';
 import Tooltip from '@components/Tooltip';
 import React from 'react';

diff --git a/components/account/Misc/StarSigns.js b/components/account/Misc/StarSigns.js
@@ -1,8 +1,9 @@
 import React, { useMemo, useState } from 'react';
 import { Box, Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
-import { cleanUnderscore, prefix } from 'utility/helpers';
+import { cleanUnderscore, getTabs, prefix } from 'utility/helpers';
 import Tabber from '../../common/Tabber';
+import { PAGES } from '@components/constants';
 
 const StarSigns = ({ starSigns, infiniteStars }) => {
   const [selectedTab, setSelectedTab] = useState(0);
@@ -14,7 +15,7 @@ const StarSigns = ({ starSigns, infiniteStars }) => {
 
   return (
     <>
-      <Tabber queryKey={'nt'} tabs={['chronus', 'hydron', 'seraph']} onTabChange={(selected) => setSelectedTab(selected)}>
+      <Tabber queryKey={'nt'} tabs={getTabs(PAGES.ACCOUNT.misc.categories, 'constellations', 'Star Signs')} onTabChange={(selected) => setSelectedTab(selected)}>
         <Stack gap={3}>
           <Grid container>
             <Grid item md={4} sx={{ display: { sm: 'none', md: 'block' } }}>Name</Grid>

diff --git a/components/account/Worlds/World4/Meals.jsx b/components/account/Worlds/World4/Meals.jsx
@@ -36,14 +36,13 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
   const [mealMaxLevel, setMealMaxLevel] = useState(DEFAULT_MEAL_MAX_LEVEL);
   const [mealSpeed, setMealSpeed] = useState(totalMealSpeed);
   const [sortBy, setSortBy] = useState(breakpoints[0]);
-  const [foodLust, setFoodLust] = useState(equinoxUpgrades.find(({ name }) => name === 'Food_Lust')?.bonus)
-  const [localEquinoxUpgrades, setLocalEquinoxUpgrades] = useState(equinoxUpgrades);
-  const spelunkerObolMulti = getLabBonus(lab.labBonuses, 8); // gem multi
+  const [foodLust, setFoodLust] = useState(account?.equinox?.upgrades?.find(({ name }) => name === 'Food_Lust')?.bonus)
+  const [localEquinoxUpgrades, setLocalEquinoxUpgrades] = useState(account?.equinox?.upgrades);
+  const spelunkerObolMulti = getLabBonus(lab?.labBonuses, 8); // gem multi
   const blackDiamondRhinestone = getJewelBonus(lab?.jewels, 16, spelunkerObolMulti);
-  const allPurpleActive = lab.jewels?.slice(0, 3)?.every(({ active }) => active) ? 2 : 1;
-  const realAmethystRhinestone = getJewelBonus(lab.jewels, 0, spelunkerObolMulti) * allPurpleActive;
+  const allPurpleActive = lab?.jewels?.slice(0, 3)?.every(({ active }) => active) ? 2 : 1;
+  const realAmethystRhinestone = getJewelBonus(lab?.jewels, 0, spelunkerObolMulti) * allPurpleActive;
   const amethystRhinestone = 4.5;
-
   const getNoMealLeftBehind = (baseMeals, mealMaxLevel, returnArray) => {
     const bonusActivated = isJadeBonusUnlocked(account, 'No_Meal_Left_Behind');
     if (bonusActivated) {
@@ -66,7 +65,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
 
   const getHighestOverflowingLadle = () => {
     const bloodBerserkers = characters?.filter((character) => checkCharClass(character?.class,'Blood_Berserker'));
-    return bloodBerserkers.reduce((res, { talents, name }) => {
+    return bloodBerserkers?.reduce((res, { talents, name }) => {
       const overflowingLadle = talents?.[3]?.orderedTalents.find((talent) => talent?.name === 'OVERFLOWING_LADLE');
       const lv = overflowingLadle?.level > overflowingLadle?.maxLevel
         ? overflowingLadle?.level
@@ -83,10 +82,10 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
     return meals?.map((meal) => {
       if (!meal) return null;
       const { amount, level, cookReq } = meal;
-      const levelCost = getMealLevelCost(level, achievements, localEquinoxUpgrades, account);
+      const levelCost = getMealLevelCost(level, achievements, account, localEquinoxUpgrades);
       let timeTillNextLevel = amount >= levelCost ? '0' : calcTimeToNextLevel(levelCost - amount, cookReq, mealSpeed);
       if (overflow) {
-        timeTillNextLevel = timeTillNextLevel / (1 + overflowingLadleBonus.value / 100);
+        timeTillNextLevel = timeTillNextLevel / (1 + overflowingLadleBonus?.value / 100);
       }
 
       const breakpointTimes = breakpoints.map((breakpoint) => {
@@ -97,13 +96,13 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
           return {
             bpCost: levelCost,
             bpLevel: breakpoint,
-            timeToBp: overflow ? timeTillNextLevel / (1 + overflowingLadleBonus.value / 100) : timeTillNextLevel
+            timeToBp: overflow ? timeTillNextLevel / (1 + overflowingLadleBonus?.value / 100) : timeTillNextLevel
           };
         }
         const bpCost = (breakpoint - level) * levelCost;
         let timeToBp = calcMealTime(breakpoint, meal, mealSpeed, achievements, localEquinoxUpgrades, account);
         if (overflow) {
-          timeToBp = timeToBp / (1 + overflowingLadleBonus.value / 100)
+          timeToBp = timeToBp / (1 + overflowingLadleBonus?.value / 100)
         }
         return { bpCost, timeToBp, bpLevel: breakpoint };
       })
@@ -118,7 +117,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
   const defaultMeals = useMemo(() => calcMeals(meals), [meals, mealSpeed, localEquinoxUpgrades]);
 
   useEffect(() => {
-    const tempFoodLust = equinoxUpgrades.find(({ name }) => name === 'Food_Lust')?.bonus;
+    const tempFoodLust = equinoxUpgrades?.find(({ name }) => name === 'Food_Lust')?.bonus;
     setFoodLust(tempFoodLust);
   }, [characters])
 
@@ -160,7 +159,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
       })
     }
     if (filters.includes('overflow')) {
-      tempMeals = calcMeals(tempMeals || meals, overflowingLadleBonus.value)
+      tempMeals = calcMeals(tempMeals || meals, overflowingLadleBonus?.value)
     }
     if (filters.includes('hide')) {
       tempMeals = tempMeals.filter((meal) => meal?.level < mealMaxLevel);
@@ -255,7 +254,7 @@ const Meals = ({ account, characters, meals, totalMealSpeed, achievements, artif
           <Stack direction={'row'} gap={1}>
             <Typography>Overflowing Ladle</Typography>
             <Tooltip
-              title={`Blood Berserker Talent: Ladles gives ${kFormatter(overflowingLadleBonus.value, 2)}% more afk time (using ${overflowingLadleBonus.character})`}>
+              title={`Blood Berserker Talent: Ladles gives ${kFormatter(overflowingLadleBonus?.value, 2)}% more afk time (using ${overflowingLadleBonus?.character})`}>
               <InfoIcon/>
             </Tooltip>
           </Stack>

diff --git a/components/account/Worlds/World5/Gaming/General.js b/components/account/Worlds/World5/Gaming/General.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Card, CardContent, Stack, Typography } from '@mui/material';
-import { cleanUnderscore, getBitIndex, notateNumber, numberWithCommas, prefix } from '@utility/helpers';
+import { cleanUnderscore, getBitIndex, getTabs, notateNumber, numberWithCommas, prefix } from '@utility/helpers';
 import { CardTitleAndValue } from '@components/common/styles';
 import Tabber from '@components/common/Tabber';
 import Imports from './Imports';
 import Mutations from './Mutations';
 import LogBook from '@components/account/Worlds/World5/Gaming/LogBook';
 import Superbits from '@components/account/Worlds/World5/Gaming/Superbits';
+import { PAGES } from '@components/constants';
 
 const General = ({ account, lastUpdated }) => {
   const {
@@ -50,7 +51,7 @@ const General = ({ account, lastUpdated }) => {
         </Card>
       })}
     </Stack>
-    <Tabber tabs={['Imports', 'Superbits', 'Mutations', 'Log book']}>
+    <Tabber tabs={getTabs(PAGES.ACCOUNT['world 5'].categories, 'gaming')}>
       <Imports account={account} lastUpdated={lastUpdated}/>
       <Superbits superbits={superbitsUpgrades}/>
       <Mutations account={account} lastUpdated={lastUpdated}/>

diff --git a/components/account/Worlds/World5/Hole/Caverns/Justice.jsx b/components/account/Worlds/World5/Hole/Caverns/Justice.jsx
@@ -1,4 +1,4 @@
-import { Breakdown, CardTitleAndValue } from '@components/common/styles';
+import { CardTitleAndValue } from '@components/common/styles';
 import { Card, CardContent, Divider, Stack, Typography } from '@mui/material';
 import { cleanUnderscore, commaNotation, msToDate, notateNumber } from '@utility/helpers';
 import React from 'react';

diff --git a/components/account/Worlds/World5/Hole/Explore.jsx b/components/account/Worlds/World5/Hole/Explore.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Divider, Stack } from '@mui/material';
 import { CardTitleAndValue } from '@components/common/styles';
-import { commaNotation, fillArrayToLength, msToDate } from '@utility/helpers';
+import { commaNotation, fillArrayToLength, getTabs, msToDate } from '@utility/helpers';
 import Tabber from '@components/common/Tabber';
-import { cavernNames } from '@parsers/world-5/hole';
 import TheWell from '@components/account/Worlds/World5/Hole/Caverns/TheWell';
 import Motherlode from '@components/account/Worlds/World5/Hole/Caverns/Motherlode';
 import TheDen from '@components/account/Worlds/World5/Hole/Caverns/TheDen';
@@ -14,6 +13,7 @@ import TheLamp from '@components/account/Worlds/World5/Hole/Caverns/TheLamp';
 import TheHive from '@components/account/Worlds/World5/Hole/Caverns/TheHive';
 import Grotto from '@components/account/Worlds/World5/Hole/Caverns/Grotto';
 import Justice from '@components/account/Worlds/World5/Hole/Caverns/Justice';
+import { PAGES } from '@components/constants';
 
 const Explore = ({ hole }) => {
   const [explore] = hole?.villagers || [];
@@ -32,7 +32,7 @@ const Explore = ({ hole }) => {
     <Tabber
       queryKey={'nt'}
       iconsOnly
-      tabs={cavernNames}
+      tabs={getTabs(PAGES.ACCOUNT['world 5'].categories, 'hole', 'Explore')}
       icons={caverns.map((a, index) => `etc/Cavern_${index}`)}
     >
       <TheWell hole={hole}/>

diff --git a/components/account/Worlds/World6/farming/RankDatabase.jsx b/components/account/Worlds/World6/farming/RankDatabase.jsx
@@ -1,5 +1,5 @@
 import { Card, CardContent, Stack, Typography } from '@mui/material';
-import { cleanUnderscore, notateNumber, prefix } from '@utility/helpers';
+import { cleanUnderscore, prefix } from '@utility/helpers';
 import React from 'react';
 
 const RankDatabase = ({ ranks }) => {

diff --git a/components/common/DownloadButton.jsx b/components/common/DownloadButton.jsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import Button from '@mui/material/Button';
 import { tryToParse } from '@utility/helpers';
-import { IconFileImport } from "@tabler/icons-react";
+import { IconFileImport } from '@tabler/icons-react';
 
 const FileUploadButton = ({ children, onFileUpload }) => {
   const fileInputRef = useRef(null);

diff --git a/components/common/Logins/EmailLogin.jsx b/components/common/Logins/EmailLogin.jsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Paper, Stack, TextField, Typography } from '@mui/material';
+import { Card, CardContent, Stack, TextField, Typography } from '@mui/material';
 import React, { useContext, useState } from 'react';
 import { signInWithEmailPassword } from '../../../firebase';
 import { AppContext } from '../context/AppProvider';

diff --git a/components/common/NavBar/AppDrawer/CharactersDrawer.jsx b/components/common/NavBar/AppDrawer/CharactersDrawer.jsx
@@ -1,15 +1,4 @@
-import {
-  Checkbox,
-  Chip,
-  chipClasses,
-  Divider,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Stack,
-  Typography
-} from '@mui/material';
+import { Checkbox, Chip, Divider, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
 import React, { useContext, useMemo, useState } from 'react';
 import { AppContext } from '../../context/AppProvider';
 import { prefix, sections } from 'utility/helpers';

diff --git a/components/common/NavBar/UserMenu.jsx b/components/common/NavBar/UserMenu.jsx
@@ -1,4 +1,4 @@
-import { IconClipboard, IconLogout2, IconUserCircle } from '@tabler/icons-react';
+import { IconLogout2, IconSun, IconUserCircle } from '@tabler/icons-react';
 import IconButton from '@mui/material/IconButton';
 import {
   Divider,
@@ -8,20 +8,21 @@ import {
   ListSubheader,
   Menu,
   Stack,
-  Typography
+  Typography,
+  useColorScheme
 } from '@mui/material';
 import MenuItem from '@mui/material/MenuItem';
 import React, { useContext, useEffect, useState } from 'react';
 import { AppContext } from '@components/common/context/AppProvider';
 import { format } from 'date-fns';
 import LoginDialog from '@components/common/NavBar/LoginDialog';
-import { handleLoadJson, isProd } from '@utility/helpers';
 
 const UserMenu = () => {
   const { state, logout } = useContext(AppContext);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const { mode, setMode } = useColorScheme();
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -78,7 +79,10 @@ const UserMenu = () => {
         </Stack>
       </ListSubheader>
       <Divider sx={{ mb: 1 }}/>
-      {/*<MenuItem onClick={handleClose}>*/}
+      {/*<MenuItem onClick={() => {*/}
+      {/*  console.log('\'dark\'')*/}
+      {/*  setMode('dark');*/}
+      {/*}}>*/}
       {/*  <ListItemIcon>*/}
       {/*    <IconSun/>*/}
       {/*  </ListItemIcon>*/}

diff --git a/components/common/QuickSearch.jsx b/components/common/QuickSearch.jsx
@@ -36,6 +36,19 @@ const QuickSearch = () => {
   const router = useRouter();
   const { t, nt, ...updateQuery } = router?.query || {};
 
+  // Format label to add spaces between words
+  const formatLabel = (str) => {
+    return str
+      // Add space between lowercase and uppercase letters
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      // Add space between uppercase letters that are followed by lowercase letters
+      .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')
+      // Capitalize first letter of each word
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
   // Generate kebab case for URL parts
   const toKebabCase = (str) => {
     return str
@@ -60,15 +73,46 @@ const QuickSearch = () => {
     });
 
     if (state?.signedIn || state?.profile) {
-      // Process ACCOUNT pages
       Object.keys(PAGES.ACCOUNT).forEach(category => {
         PAGES.ACCOUNT[category].categories.forEach(subCategory => {
+          // Base URL for the page
+          const baseUrl = `/account/${toKebabCase(category)}/${toKebabCase(subCategory.label)}`;
+
+          // Add the main page
           items.push({
-            label: subCategory.label.split(/(?=[A-Z])/).join(' ').capitalize(),
-            url: `/account/${toKebabCase(category)}/${toKebabCase(subCategory.label)}`,
-            section: category.replace(/-/g, ' ').split(/(?=[A-Z])/).join(' ').capitalizeAllWords(),
+            label: formatLabel(subCategory.label),
+            url: baseUrl,
+            section: formatLabel(category),
             icon: subCategory.icon || PAGES.ACCOUNT[category].icon || 'default-icon'
           });
+
+          // Add tabs if they exist
+          if (subCategory.tabs && subCategory.tabs.length > 0) {
+            subCategory.tabs.forEach(tab => {
+              items.push({
+                label: `${formatLabel(subCategory.label)} - ${tab}`,
+                url: baseUrl,
+                queryParams: { t: tab },
+                section: `${formatLabel(category)} - Tabs`,
+                icon: subCategory.icon || PAGES.ACCOUNT[category].icon || 'default-icon',
+                isTab: true
+              });
+            });
+          }
+
+          // Add nested tabs if they exist
+          if (subCategory.nestedTabs && subCategory.nestedTabs.length > 0) {
+            subCategory.nestedTabs.forEach(({ tab, nestedTab }) => {
+              items.push({
+                label: `${formatLabel(subCategory.label)} - ${tab} - ${nestedTab}`,
+                url: baseUrl,
+                queryParams: { t: tab, nt: nestedTab },
+                section: `${formatLabel(category)} - Nested Tabs`,
+                icon: subCategory.icon || PAGES.ACCOUNT[category].icon || 'default-icon',
+                isNestedTab: true
+              });
+            });
+          }
         });
       });
     }
@@ -96,7 +140,7 @@ const QuickSearch = () => {
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
       e.preventDefault();
     } else if (e.key === 'Enter' && selectedIndex >= 0) {
-      handleNavigate(searchResults[selectedIndex].url);
+      handleNavigate(searchResults[selectedIndex].url, searchResults[selectedIndex].queryParams);
     }
   };
 
@@ -116,8 +160,8 @@ const QuickSearch = () => {
   }, [searchTerm, allSearchItems]);
 
   // Handle navigation
-  const handleNavigate = (url) => {
-    router.push({ pathname: url, query: updateQuery });
+  const handleNavigate = (url, params) => {
+    router.push({ pathname: url, query: { ...updateQuery, ...params } });
     setSearchOpen(false);
     setSearchTerm('');
   };
@@ -206,7 +250,7 @@ const QuickSearch = () => {
               <ListItemButton
                 key={index}
                 selected={index === selectedIndex}
-                onClick={() => handleNavigate(result.url)}
+                onClick={() => handleNavigate(result.url, result.queryParams)}
                 sx={{
                   borderRadius: '8px',
                   backgroundColor: index === selectedIndex ? 'rgba(0, 0, 0, .2)' : 'transparent',