diff --git a/frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx b/frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx index 88a19f6a1..9f0f20535 100644 --- a/frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx +++ b/frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx @@ -9,6 +9,8 @@ import WeaponSelector from "../common/WeaponSelector" import BuildStats from "./BuildStats" import EditableBuilds from "./EditableBuilds" import MyThemeContext from "../../themeContext" +import { FaWrench } from "react-icons/fa" +import Button from "../elements/Button" const defaultBuild: Partial = { weapon: "Splattershot Jr.", @@ -22,8 +24,11 @@ const BuildAnalyzerPage: React.FC = () => { const [build, setBuild] = useState>(defaultBuild) const [otherBuild, setOtherBuild] = useState>(defaultBuild) const [showOther, setShowOther] = useState(false) + const [showNotActualProgress, setShowNotActualProgress] = useState(false) + const [startChartsAtZero, setStartChartsAtZero] = useState(false) const [otherFocused, setOtherFocused] = useState(false) const [hideExtra, setHideExtra] = useState(true) + const [showSettings, setShowSettings] = useState(false) const explanations = useAbilityEffects(build) const otherExplanations = useAbilityEffects(otherBuild) @@ -57,21 +62,54 @@ const BuildAnalyzerPage: React.FC = () => { }} otherFocused={otherFocused} /> - - Hide stats at base value - setHideExtra(!hideExtra)} - /> - + + {showSettings && ( + + setHideExtra(!hideExtra)} + mr="0.5em" + /> + Hide stats at base value + + + setShowNotActualProgress(!showNotActualProgress)} + mr="0.5em" + /> + + Progress bars show progress to max value + + + + setStartChartsAtZero(!startChartsAtZero)} + mr="0.5em" + /> + + Start charts Y axis from zero + + + + )} diff --git a/frontend-react/src/components/analyzer/BuildStats.tsx b/frontend-react/src/components/analyzer/BuildStats.tsx index 740b8696c..169adbcf5 100644 --- a/frontend-react/src/components/analyzer/BuildStats.tsx +++ b/frontend-react/src/components/analyzer/BuildStats.tsx @@ -21,6 +21,8 @@ interface BuildStatsProps { otherExplanations?: Explanation[] build: Partial hideExtra: boolean + showNotActualProgress: boolean + startChartsAtZero: boolean } const BuildStats: React.FC = ({ @@ -28,6 +30,8 @@ const BuildStats: React.FC = ({ otherExplanations, build, hideExtra, + showNotActualProgress, + startChartsAtZero, }) => { const { colorMode } = useContext(MyThemeContext) const [expandedCharts, setExpandedCharts] = useState>(new Set()) @@ -157,6 +161,7 @@ const BuildStats: React.FC = ({ otherAp={otherAp} getEffect={getEffect} ability={ability} + startChartsAtZero={startChartsAtZero} /> )} @@ -187,12 +192,15 @@ const BuildStats: React.FC = ({ ability={explanation.ability} effect={explanation.effect} progressBarValue={ - explanation.effectFromMaxActual ?? explanation.effectFromMax + showNotActualProgress + ? explanation.effectFromMax + : explanation.effectFromMaxActual } otherEffect={otherExplanation?.effect} otherProgressBarValue={ - otherExplanation?.effectFromMaxActual ?? - otherExplanation?.effectFromMax + showNotActualProgress + ? otherExplanation?.effectFromMax + : otherExplanation?.effectFromMaxActual } getEffect={explanation.getEffect} info={explanation.info} diff --git a/frontend-react/src/components/analyzer/StatChart.tsx b/frontend-react/src/components/analyzer/StatChart.tsx index 73440b996..b9ce34bdd 100644 --- a/frontend-react/src/components/analyzer/StatChart.tsx +++ b/frontend-react/src/components/analyzer/StatChart.tsx @@ -19,6 +19,7 @@ interface StatChartProps { ap: number otherAp?: number ability: Ability + startChartsAtZero: boolean } const StatChart: React.FC = ({ @@ -27,6 +28,7 @@ const StatChart: React.FC = ({ otherAp, getEffect, ability, + startChartsAtZero, }) => { const { themeColorHex, darkerBgColor } = useContext(MyThemeContext) @@ -101,7 +103,9 @@ const StatChart: React.FC = ({ - + number + getEffect: (ap: number) => number ap: number } @@ -1363,6 +1363,7 @@ export default function useAbilityEffects(build: Partial) { }) setExplanations(newExplanations) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [build]) return explanations