analyzer working edition

components/analyzer/BuildStats.tsx

@@ -91,7 +91,7 @@ const BuildStats: React.FC<BuildStatsProps> = ({
         <Flex justifyContent="space-between">
           <Flex fontWeight="bold" mr="1em" mb="0.5em" alignItems="center">
             <Box minW="30px">
-              <AbilityIcon ability={ability} size="TINY" />
+              <AbilityIcon ability={ability} size="TINY" loading="eager" />
             </Box>
             <IconButton
               aria-label="Show chart for the stat"

components/analyzer/EditableBuilds.tsx

@@ -163,7 +163,7 @@ const EditableBuilds: React.FC<EditableBuildsProps> = ({
       </Flex>
       <Box mt="1em">
         <AbilitiesSelector
-          abilities={showOther ? otherBuild : build}
+          abilities={otherFocused ? otherBuild : build}
           setAbilities={(newAbilities) => setBuild(newAbilities)}
         />
       </Box>

components/common/AbilityIcon.tsx

@@ -14,9 +14,14 @@ interface AbilityIconProps {
   // TODO: use enum from generated/graphql.tsx
   ability: string | "EMPTY";
   size: "MAIN" | "SUB" | "TINY" | "SUBTINY";
+  loading?: "eager";
 }
 
-const AbilityIcon: React.FC<AbilityIconProps> = ({ ability, size }) => {
+const AbilityIcon: React.FC<AbilityIconProps> = ({
+  ability,
+  size,
+  loading,
+}) => {
   const sizeNumber = sizeMap[size];
 
   return (
@@ -41,6 +46,7 @@ const AbilityIcon: React.FC<AbilityIconProps> = ({ ability, size }) => {
         width={sizeNumber}
         height={sizeNumber}
         alt={ability}
+        loading={loading ?? "lazy"}
       />
     </Box>
   );

components/u/AbilitiesSelector.tsx

@@ -12,6 +12,8 @@ interface Props {
   setAbilities: (newAbilities: ViewSlotsAbilities) => void;
 }
 
+// TODO: draggable abilities
+
 const AbilitiesSelector: React.FC<Props> = ({ abilities, setAbilities }) => {
   const getModifiedAbilities = (
     newAbility: string,

lib/useAbilityEffects/index.ts

@@ -572,7 +572,7 @@ export default function useAbilityEffects({
     return [
       {
         title: t`Points to special`,
-        effect: `${Math.ceil(points / effect[0])}${t`pointShort`} (${parseFloat(
+        effect: `${Math.ceil(points / effect[0])}${t`p`} (${parseFloat(
           (effect[0] * 100).toFixed(2)
         )}% ${t`speed`})`,
         effectFromMax: effect[1],

pages/analyzer.tsx

@@ -11,6 +11,7 @@ import { t, Trans } from "@lingui/macro";
 import BuildStats from "components/analyzer/BuildStats";
 import EditableBuilds from "components/analyzer/EditableBuilds";
 import { ViewSlotsAbilities } from "components/builds/ViewSlots";
+import Breadcrumbs from "components/common/Breadcrumbs";
 import WeaponSelector from "components/common/WeaponSelector";
 import { AbilityOrUnknown } from "lib/types";
 import useAbilityEffects from "lib/useAbilityEffects";
@@ -97,6 +98,7 @@ const BuildAnalyzerPage = () => {
 
   return (
     <>
+      <Breadcrumbs pages={[{ name: t`Build Analyzer` }]} />
       <Flex justifyContent="space-between">
         <Badge>
           <Trans>Patch {CURRENT_PATCH}</Trans>