Add support for tinting segmented control with party element

components/PartySegmentedControl/index.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import './index.scss'
 
+import PartyContext from '~context/PartyContext'
+
 import SegmentedControl from '~components/SegmentedControl'
 import Segment from '~components/Segment'
 import ToggleSwitch from '~components/ToggleSwitch'
@@ -22,6 +24,19 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
+    const { element } = useContext(PartyContext)
+
+    function getElement() {
+        switch(element) {
+            case 1: return "wind"; break
+            case 2: return "fire"; break
+            case 3: return "water"; break
+            case 4: return "earth"; break
+            case 5: return "dark"; break
+            case 6: return "light"; break
+        }
+    }
+
     const extraToggle =
         <div className="ExtraSwitch">
             Extra
@@ -35,7 +50,7 @@ const PartySegmentedControl = (props: Props) => {
 
     return (
         <div className="PartyNavigation">
-            <SegmentedControl>
+            <SegmentedControl elementClass={getElement()}>
                 <Segment
                     groupName="grid"
                     name="class"

components/SegmentedControl/index.tsx

@@ -2,12 +2,14 @@ import React from 'react'
 
 import './index.scss'
 
-interface Props {}
+interface Props {
+    elementClass?: string
+}
 
-const SegmentedControl: React.FC<Props> = ({ children }) => {
+const SegmentedControl: React.FC<Props> = ({ elementClass, children }) => {
     return (
         <div className="SegmentedControlWrapper">
-            <div className="SegmentedControl">
+            <div className={`SegmentedControl ${(elementClass) ? elementClass : ''}`}>
                 {children}
             </div>
         </div>

components/WeaponGrid/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useModal as useModal } from '~utils/useModal'
 
 import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
+import PartyContext from '~context/PartyContext'
+
 import SearchModal from '~components/SearchModal'
 import WeaponUnit from '~components/WeaponUnit'
 import ExtraWeapons from '~components/ExtraWeapons'
@@ -47,6 +49,9 @@ const WeaponGrid = (props: Props) => {
     // Set up state for party
     const [partyId, setPartyId] = useState('')
 
+    // Set up the party context
+    const { setElement } = useContext(PartyContext)
+
     // Set up states for Grid data
     const [weapons, setWeapons] = useState<GridArray<GridWeapon>>({})
     const [mainWeapon, setMainWeapon] = useState<GridWeapon>()
@@ -76,6 +81,10 @@ const WeaponGrid = (props: Props) => {
         setPreviousUncapValues(initialPreviousUncapValues)
     }, [props])
 
+    useEffect(() => {
+        if (mainWeapon) setElement(mainWeapon.weapon.element)
+    }, [mainWeapon])
+
     // Update search grid whenever weapons or the mainhand are updated
     useEffect(() => {
         let newSearchGrid = Object.values(weapons).map((o) => o.weapon)

context/PartyContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+import { TeamElement } from '~utils/enums'
+
+const PartyContext = createContext({
+    element: TeamElement.Any,
+    setElement: (element: TeamElement) => {}
+})
+
+export default PartyContext

pages/_app.tsx

@@ -5,18 +5,24 @@ import { CookiesProvider } from 'react-cookie'
 
 import Layout from '~components/Layout'
 import AppContext from '~context/AppContext'
+import PartyContext from '~context/PartyContext'
 
 import type { AppProps } from 'next/app'
+import { TeamElement } from '~utils/enums'
 
 function MyApp({ Component, pageProps }: AppProps) {
     const [authenticated, setAuthenticated] = useState(false)
     const [editable, setEditable] = useState(false)
+    const [element, setElement] = useState<TeamElement>(TeamElement.Any)
+
     return (
         <CookiesProvider>
             <AppContext.Provider value={{ authenticated, setAuthenticated, editable, setEditable }}>
-                <Layout>
+                <PartyContext.Provider value={{ element, setElement }}>
-                    <Component {...pageProps} />
+                    <Layout>
-                </Layout>
+                        <Component {...pageProps} />
+                    </Layout>
+                </PartyContext.Provider>
             </AppContext.Provider>
         </CookiesProvider>
     )

utils/enums.tsx

@@ -0,0 +1,9 @@
+export enum TeamElement {
+    Any,
+    Wind,
+    Fire,
+    Water,
+    Earth,
+    Dark,
+    Light
+}