feat: Formulas page

Author: Morta1

components/account/Worlds/World5/Gaming/General.js

@@ -8,8 +8,10 @@ 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';
+import { getBitsMulti } from '@parsers/gaming';
+import { CardWithBreakdown } from '@components/account/Worlds/World5/Hole/commons';
 
-const General = ({ account, lastUpdated }) => {
+const General = ({ account, characters, lastUpdated }) => {
   const {
     bits,
     availableSprouts,
@@ -22,10 +24,12 @@ const General = ({ account, lastUpdated }) => {
     logBook
   } = account?.gaming;
   const ownedLogBooks = logBook?.reduce((sum, { unlocked }) => sum + (unlocked ? 1 : 0), 0);
+  const bitMulti = getBitsMulti(account, characters);
 
   return <>
     <Stack direction={'row'} gap={2} flexWrap={'wrap'}>
       <CardTitleAndValue title={'Bits'} value={notateNumber(bits, 'bits')} icon={`etc/Bits_${getBitIndex(bits)}.png`}/>
+      <CardWithBreakdown title={'Bit Multi'} value={`${notateNumber(bitMulti?.value)}x`} breakdown={bitMulti?.breakdown} notation={'MultiplierInfo'}/>
       <CardTitleAndValue title={'Sprouts'} value={`${availableSprouts} / ${sproutsCapacity ?? 0}`}
                          icon={'etc/Sprouts.png'}/>
       <CardTitleAndValue title={'Best Nugget'} icon={'etc/GamingNugget.png'}

components/common/Highlighter.jsx

@@ -0,0 +1,11 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import atomDark from 'react-syntax-highlighter/dist/esm/styles/prism/atom-dark';
+import React from 'react';
+
+const Highlighter = ({ children }) => {
+  return <SyntaxHighlighter language="javascript" style={atomDark} wrapLines>
+    {children}
+  </SyntaxHighlighter>
+};
+
+export default Highlighter;

components/constants.jsx

@@ -213,6 +213,9 @@ export const PAGES = {
     'samplingCompanion': {
       icon: 'data/EquipmentHats69'
     },
+    'formulas': {
+      icon: 'data/EquipmentStatues29'
+    },
     'activeExpCalculator': {
       icon: 'data/StatusExp'
     },