closes #114 analyzer drop roller

components/analyzer/EditableBuilds.tsx

@@ -68,6 +68,11 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
     ? otherBuild.headAbilities[0]
     : "SSU";
 
+  const shoesAbility = build.shoesAbilities ? build.shoesAbilities[0] : "SSU";
+  const otherShoesAbility = otherBuild.shoesAbilities
+    ? otherBuild.shoesAbilities[0]
+    : "SSU";
+
   return (
     <>
       <Button
@@ -80,6 +85,8 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
         }}
         mt="1em"
         mb="2em"
+        size="sm"
+        variant="outline"
       >
         {showOther ? t`Stop comparing` : t`Compare`}
       </Button>
@@ -120,6 +127,18 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
               setValue={(value: number) => setLde(value)}
             />
           )}
+          {shoesAbility === "DR" && (
+            <HeadOnlyToggle
+              ability={shoesAbility}
+              active={bonusAp[shoesAbility] ?? false}
+              setActive={() =>
+                setBonusAp({
+                  ...bonusAp,
+                  [shoesAbility]: !bonusAp[shoesAbility],
+                })
+              }
+            />
+          )}
         </Flex>
         {showOther && (
           <Flex flexDirection="column">
@@ -158,6 +177,18 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
                 setValue={(value: number) => setOtherLde(value)}
               />
             )}
+            {otherShoesAbility === "DR" && (
+              <HeadOnlyToggle
+                ability={otherShoesAbility}
+                active={otherBonusAp[otherShoesAbility] ?? false}
+                setActive={() =>
+                  setOtherBonusAp({
+                    ...otherBonusAp,
+                    [otherShoesAbility]: !otherBonusAp[otherShoesAbility],
+                  })
+                }
+              />
+            )}
           </Flex>
         )}
       </Flex>

components/analyzer/HeadOnlyToggle.tsx

@@ -5,7 +5,7 @@ import { useMyTheme } from "hooks/common";
 import React from "react";
 
 interface HeadOnlyToggleProps {
-  ability: "OG" | "CB";
+  ability: "OG" | "CB" | "DR";
   active: boolean;
   setActive: () => void;
 }
@@ -30,13 +30,14 @@ const HeadOnlyToggle: React.FC<HeadOnlyToggleProps> = ({
           isChecked={active}
           onChange={() => setActive()}
           mr="0.5em"
+          mb={4}
         />
         <FormLabel htmlFor="show-all">
           <AbilityIcon ability={ability} size="TINY" />
         </FormLabel>
       </Box>
       {active && ability === "OG" && (
-        <Box color={themeColorShade} fontWeight="bold" mt="1em">
+        <Box color={themeColorShade} fontWeight="bold">
           +15{t`AP`}{" "}
           {["SSU", "RSU", "RES"].map((ability) => (
             <Box as="span" mx="0.2em" key={ability}>
@@ -46,7 +47,7 @@ const HeadOnlyToggle: React.FC<HeadOnlyToggleProps> = ({
         </Box>
       )}
       {active && ability === "CB" && (
-        <Box color={themeColorShade} fontWeight="bold" mt="1em">
+        <Box color={themeColorShade} fontWeight="bold">
           +10{t`AP`}{" "}
           {["ISM", "ISS", "REC", "RSU", "SSU", "SCU"].map((ability) => (
             <Box as="span" mx="0.2em" key={ability}>
@@ -55,6 +56,16 @@ const HeadOnlyToggle: React.FC<HeadOnlyToggleProps> = ({
           ))}
         </Box>
       )}
+      {active && ability === "DR" && (
+        <Box color={themeColorShade} fontWeight="bold">
+          +10{t`AP`}{" "}
+          {["RSU", "SSU", "RES"].map((ability) => (
+            <Box as="span" mx="0.2em" key={ability}>
+              <AbilityIcon ability={ability as any} size="SUBTINY" />
+            </Box>
+          ))}
+        </Box>
+      )}
     </Flex>
   );
 };

hooks/useAbilityEffects/index.ts

@@ -104,6 +104,14 @@ function buildToAP(
     }
   });
 
+  if (build.shoesAbilities[0] === "DR" && bonusAp["DR"]) {
+    for (const ability of ["RSU", "SSU", "RES"]) {
+      const a = ability as Ability;
+      const existing = AP[a] ?? 0;
+      AP[a] = existing + 10;
+    }
+  }
+
   let subWorth = 3;
 
   build.clothingAbilities.forEach((ability, index) => {

pages/analyzer.tsx

@@ -117,6 +117,8 @@ const BuildAnalyzerPage = () => {
             leftIcon={<FiSettings />}
             onClick={() => setShowSettings(!showSettings)}
             my="1rem"
+            size="sm"
+            variant="outline"
           >
             {showSettings ? t`Hide settings` : t`Show settings`}
           </Button>