lde slider

frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx

@@ -29,13 +29,20 @@ const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
   const [otherFocused, setOtherFocused] = useState(false)
   const [hideExtra, setHideExtra] = useState(true)
   const [showSettings, setShowSettings] = useState(false)
+
   const [bonusAp, setBonusAp] = useState<Partial<Record<Ability, boolean>>>({})
   const [otherBonusAp, setOtherBonusAp] = useState<
     Partial<Record<Ability, boolean>>
   >({})
+  const [lde, setLde] = useState(0)
+  const [otherLde, setOtherLde] = useState(0)
 
-  const explanations = useAbilityEffects(build, bonusAp)
-  const otherExplanations = useAbilityEffects(otherBuild, otherBonusAp)
+  const explanations = useAbilityEffects(build, bonusAp, lde)
+  const otherExplanations = useAbilityEffects(
+    otherBuild,
+    otherBonusAp,
+    otherLde
+  )
 
   return (
     <>
@@ -76,6 +83,10 @@ const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
           setBonusAp={setBonusAp}
           otherBonusAp={otherBonusAp}
           setOtherBonusAp={setOtherBonusAp}
+          lde={lde}
+          setLde={setLde}
+          otherLde={otherLde}
+          setOtherLde={setOtherLde}
         />
       )}
       <Button

frontend-react/src/components/analyzer/EditableBuilds.tsx

@@ -18,6 +18,7 @@ import {
 import Button from "../elements/Button"
 import { FaPlus, FaMinus } from "react-icons/fa"
 import HeadOnlyToggle from "./HeadOnlyToggle"
+import LdeSlider from "./LdeSlider"
 
 interface EditableBuildsProps {
   build: Partial<Build>
@@ -35,6 +36,10 @@ interface EditableBuildsProps {
   setOtherBonusAp: React.Dispatch<
     React.SetStateAction<Partial<Record<Ability, boolean>>>
   >
+  lde: number
+  otherLde: number
+  setLde: React.Dispatch<React.SetStateAction<number>>
+  setOtherLde: React.Dispatch<React.SetStateAction<number>>
 }
 
 const EditableBuilds: React.FC<EditableBuildsProps> = ({
@@ -49,6 +54,10 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
   setBonusAp,
   otherBonusAp,
   setOtherBonusAp,
+  lde,
+  otherLde,
+  setLde,
+  setOtherLde,
 }) => {
   const buildToEdit = otherFocused ? otherBuild : build
   const handleChange = (value: Object) => setBuild({ ...buildToEdit, ...value })
@@ -186,6 +195,12 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
               }
             />
           )}
+          {headAbility === "LDE" && (
+            <LdeSlider
+              value={lde}
+              setValue={(value: number) => setLde(value)}
+            />
+          )}
         </Flex>
         {showOther && (
           <Flex flexDirection="column">
@@ -216,6 +231,12 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
                 }
               />
             )}
+            {otherHeadAbility === "LDE" && (
+              <LdeSlider
+                value={otherLde}
+                setValue={(value: number) => setOtherLde(value)}
+              />
+            )}
           </Flex>
         )}
       </Flex>

frontend-react/src/components/analyzer/LdeSlider.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from "react"
+import MyThemeContext from "../../themeContext"
+import {
+  Flex,
+  Box,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from "@chakra-ui/core"
+import AbilityIcon from "../builds/AbilityIcon"
+
+interface LdeSliderProps {
+  value: number
+  setValue: (value: number) => void
+}
+
+const LdeSlider: React.FC<LdeSliderProps> = ({ value, setValue }) => {
+  const { themeColor, themeColorWithShade } = useContext(MyThemeContext)
+  const bonusAp = Math.floor((24 / 21) * value)
+  return (
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      mb="1em"
+    >
+      <Slider
+        value={value}
+        onChange={(value: number) => setValue(value)}
+        max={21}
+      >
+        <SliderTrack bg={`${themeColor}.100`} />
+        <SliderFilledTrack bg={themeColorWithShade} />
+        <SliderThumb size={6}>
+          <Box minW="30px">
+            <AbilityIcon ability="LDE" size="TINY" />
+          </Box>
+        </SliderThumb>
+      </Slider>
+      {value > 1 && (
+        <Box color={themeColorWithShade} fontWeight="bold" mt="1em">
+          +{bonusAp}AP{" "}
+          {["ISM", "ISS", "REC"].map((ability) => (
+            <Box as="span" mx="0.2em" key={ability}>
+              <AbilityIcon ability={ability as any} size="SUBTINY" />
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Flex>
+  )
+}
+
+export default LdeSlider

frontend-react/src/hooks/useAbilityEffects.ts

@@ -19,7 +19,8 @@ const MAX_AP = 57
 
 function buildToAP(
   build: Partial<Build>,
-  bonusAp: Partial<Record<Ability, boolean>>
+  bonusAp: Partial<Record<Ability, boolean>>,
+  lde: number
 ) {
   const AP: Partial<Record<Ability, number>> = {}
 
@@ -40,6 +41,14 @@ function buildToAP(
             AP[a] = existing + 10
           }
         }
+        if (ability === "LDE" && lde > 0) {
+          for (const ability of ["ISM", "ISS", "REC"]) {
+            const a = ability as Ability
+            const existing = AP[a] ?? 0
+            const toAdd = Math.floor((24 / 21) * lde)
+            AP[a] = existing + toAdd
+          }
+        }
         const existing = AP[ability] ?? 0
         const toAdd = index === 0 ? 10 : 3
         AP[ability] = existing + toAdd
@@ -75,7 +84,8 @@ function buildToAP(
 
 export default function useAbilityEffects(
   build: Partial<Build>,
-  bonusAp: Partial<Record<Ability, boolean>>
+  bonusAp: Partial<Record<Ability, boolean>>,
+  lde: number
 ) {
   const [explanations, setExplanations] = useState<Explanation[]>([])
   const weaponData: Record<Weapon | SubWeapon | SpecialWeapon, any> = weaponJson
@@ -2136,7 +2146,7 @@ export default function useAbilityEffects(
 
   useEffect(() => {
     if (!build.weapon) return
-    const AP = buildToAP(build, bonusAp)
+    const AP = buildToAP(build, bonusAp, lde)
 
     let newExplanations: Explanation[] = []
     Object.keys(abilityFunctions).forEach((ability) => {
@@ -2148,7 +2158,7 @@ export default function useAbilityEffects(
 
     setExplanations(newExplanations)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [build, bonusAp])
+  }, [build, bonusAp, lde])
 
   return explanations
 }