diff --git a/app/routes/analyzer.tsx b/app/routes/analyzer.tsx index 363b55b9f..b0e482e9d 100644 --- a/app/routes/analyzer.tsx +++ b/app/routes/analyzer.tsx @@ -8,7 +8,12 @@ import { Main } from "~/components/Main"; import { useSetTitle } from "~/hooks/useSetTitle"; import type { AnalyzedBuild, Stat } from "~/modules/analyzer"; import { useAnalyzeBuild } from "~/modules/analyzer"; -import type { MainWeaponId, SubWeaponId } from "~/modules/in-game-lists"; +import type { AbilityPoints } from "~/modules/analyzer/types"; +import { + abilities, + type MainWeaponId, + type SubWeaponId, +} from "~/modules/in-game-lists"; import styles from "~/styles/analyzer.css"; import { makeTitle } from "~/utils/strings"; import { specialWeaponImageUrl, subWeaponImageUrl } from "~/utils/urls"; @@ -32,7 +37,8 @@ export const handle = { export default function BuildAnalyzerPage() { const { t } = useTranslation(["analyzer", "common"]); useSetTitle(t("common:pages.buildAnalyzer")); - const { build, mainWeaponId, handleChange, analyzed } = useAnalyzeBuild(); + const { build, mainWeaponId, handleChange, analyzed, abilityPoints } = + useAnalyzeBuild(); // xxx: remove before prod if (process.env.NODE_ENV === "production") return
Coming soon :)
; @@ -62,6 +68,7 @@ export default function BuildAnalyzerPage() { selectedAbilities={build} onChange={(newBuild) => handleChange({ newBuild })} /> +
{t("analyzer:patch")} {CURRENT_PATCH}
@@ -226,6 +233,35 @@ function WeaponInfoBadges({ analyzed }: { analyzed: AnalyzedBuild }) { ); } +function AbilityPointsDetails({ + abilityPoints, +}: { + abilityPoints: AbilityPoints; +}) { + const { t } = useTranslation("analyzer"); + + return ( +
+ {t("abilityPoints")} +
+ {abilities + .filter((a) => (abilityPoints.get(a.name) ?? 0) > 0) + .sort((a, b) => { + return abilityPoints.get(b.name)! - abilityPoints.get(a.name)!; + }) + .map((a) => ( +
+ +
+ {abilityPoints.get(a.name)} +
+
+ ))} +
+
+ ); +} + function StatCategory({ title, children, diff --git a/app/styles/analyzer.css b/app/styles/analyzer.css index 6ada04825..f8179d1ad 100644 --- a/app/styles/analyzer.css +++ b/app/styles/analyzer.css @@ -34,6 +34,22 @@ padding-inline: var(--s-1-5); } +.analyzer__ap-summary { + background-color: var(--bg-lighter); + border-radius: var(--rounded); + font-size: var(--fonts-xxs); + font-weight: var(--semi-bold); + width: 100%; + padding-block: var(--s-1); + padding-inline: var(--s-2); +} + +.analyzer__ap-text { + font-size: var(--fonts-xxs); + color: var(--text-lighter); + font-weight: var(--semi-bold); +} + .analyzer__summary { background-color: var(--bg-lighter); border-radius: var(--rounded); diff --git a/public/locales/en/analyzer.json b/public/locales/en/analyzer.json index 1caf1cb89..a8e9c8880 100644 --- a/public/locales/en/analyzer.json +++ b/public/locales/en/analyzer.json @@ -53,5 +53,6 @@ "value": "Value", "build": "Build", "patch": "Patch:", + "abilityPoints": "Ability points", "consumptionExplanation": "This chart shows the amount of actions left to perform with main weapon after using sub 0-{{maxSubsToUse}} times. Max amount of consecutive subs to use with full ink tank is {{maxSubsToUse}}." }