feat: updating stat customization sidebar display (#871)

* feat: updating stat customization sidebar display

* feat: color tweaks

* feat: shadow

public/locales/en_US/charactersTab.yaml

@@ -59,6 +59,7 @@ CharacterPreview:
     NoSelectedCharacter: No selected character
   ScoreHeader:
     Title: Combat Sim
+    TitleBenchmark: "{{spd}} SPD Benchmark"
     Score: "DPS Score {{score}}% {{grade}}"
   AlgorithmSlider:
     Title: "Scoring algorithm:"
@@ -71,6 +72,7 @@ CharacterPreview:
     Title: "Combat score details:"
     Labels:
       CombatStats: Combat Stats
+      SubDpsCombatStats: Combat Stats (Sub DPS)
       DMGUpgrades: Damage Upgrades
   DMGUpgrades: Damage Upgrades
   SubstatUpgradeComparisons:

src/lib/characterPreview/CharacterPreviewComponents.tsx

@@ -22,7 +22,7 @@ function isMobileOrSafari() {
 }
 
 // Mobile/Safari shadows don't render correctly on the Y axis
-export const showcaseShadow = isMobileOrSafari() ? 'rgb(0, 0, 0) 1px 0px 5px' : 'rgb(0, 0, 0) 1px 1px 5px'
+export const showcaseShadow = isMobileOrSafari() ? 'rgb(0, 0, 0) 1px 0px 6px' : 'rgb(0, 0, 0) 1px 1px 6px'
 export const showcaseOutline = 'rgba(255, 255, 255, 0.4) solid 1px'
 export const showcaseButtonStyle: CSSProperties = {
   flex: 'auto',

src/lib/characterPreview/CharacterScoringSummary.tsx

@@ -534,6 +534,7 @@ export function CharacterCardCombatStats(props: {
   addOnHitStats(result)
 
   const { t } = useTranslation('common')
+  const { t: tCharactersTab } = useTranslation('charactersTab')
   const preciseSpd = window.store((s) => s.savedSession[SavedSessionKeys.showcasePreciseSpd])
 
   const originalSimulationMetadata = result.characterMetadata.scoringMetadata.simulation
@@ -583,11 +584,15 @@ export function CharacterCardCombatStats(props: {
     )
   }
 
+  const titleRender = result.simulationForm.deprioritizeBuffs
+    ? tCharactersTab('CharacterPreview.DetailsSlider.Labels.SubDpsCombatStats')
+    : tCharactersTab('CharacterPreview.DetailsSlider.Labels.CombatStats')
+
   return (
     <Flex vertical gap={1} align='center' style={{ paddingLeft: 4, paddingRight: 6, marginBottom: 1 }}>
       <Flex vertical align='center'>
         <HeaderText style={{ fontSize: 16 }}>
-          {t('CombatStats')/* Combat Stats */}
+          {titleRender}
         </HeaderText>
       </Flex>
       {rows}

src/lib/characterPreview/ShowcaseCustomizationSidebar.tsx

@@ -269,7 +269,12 @@ export const ShowcaseCustomizationSidebar = forwardRef<ShowcaseCustomizationSide
                 controls={false}
                 style={{ width: '100%' }}
                 value={nonZeroOrUndefined(window.store.getState().showcaseTemporaryOptions[characterId]?.spdBenchmark)}
-                addonAfter={<SelectSpdPresets onShowcaseSpdBenchmarkChange={onShowcaseSpdBenchmarkChange}/>}
+                addonAfter={<SelectSpdPresets
+                  spdFilter={simScoringResult?.originalSpd}
+                  onShowcaseSpdBenchmarkChange={onShowcaseSpdBenchmarkChange}
+                  characterId={characterId}
+                  simScoringResult={simScoringResult}
+                />}
                 min={0}
                 onBlur={onShowcaseSpdBenchmarkChangeEvent}
                 onPressEnter={onShowcaseSpdBenchmarkChangeEvent}
@@ -282,13 +287,13 @@ export const ShowcaseCustomizationSidebar = forwardRef<ShowcaseCustomizationSide
               <HorizontalDivider/>
 
               <HeaderText style={{ textAlign: 'center', marginBottom: 2 }}>
-                Targeted buffs
+                Buff priority
               </HeaderText>
 
               <Segmented
                 options={[
-                  { value: false, label: 'Yes' },
-                  { value: true, label: 'No' },
+                  { value: false, label: 'High' },
+                  { value: true, label: 'Low' },
                 ]}
                 block
                 value={deprioritizeBuffs}
@@ -378,11 +383,24 @@ export const ShowcaseCustomizationSidebar = forwardRef<ShowcaseCustomizationSide
 )
 
 function SelectSpdPresets(props: {
+  characterId: string,
   onShowcaseSpdBenchmarkChange: (n: number) => void
+  simScoringResult: SimulationScore | null,
+  spdFilter?: number,
 }) {
   const { t } = useTranslation('optimizerTab', { keyPrefix: 'Presets' })
 
+  const presets = useMemo(() => {
+    return Object.values(TsUtils.clone(generateSpdPresets(t))).slice(1)
+  }, [t])
+
   const spdPresetOptions = useMemo(() => {
+    if (props.spdFilter != null) {
+      presets.map(preset => {
+        preset.disabled = preset.value != null && preset.value > props.spdFilter!
+      })
+    }
+
     return [
       {
         label: <span>Benchmark options</span>,
@@ -393,18 +411,18 @@ function SelectSpdPresets(props: {
             value: -1,
           },
           {
-            label: <span>Base SPD - The benchmark will target a zero SPD build</span>,
+            label: <span>Base SPD - The benchmark will target a minimal SPD build</span>,
             value: 0,
           },
         ],
       },
       {
-        label: <span>Common SPD breakpoint presets</span>,
+        label: <span>Common SPD breakpoint presets (SPD buffs considered separately)</span>,
         title: 'presets',
-        options: Object.values(generateSpdPresets(t)).slice(1),
+        options: presets,
       },
     ]
-  }, [t])
+  }, [props.spdFilter, props.characterId, props.simScoringResult])
 
   return (
     <Select
@@ -414,6 +432,7 @@ function SelectSpdPresets(props: {
       options={spdPresetOptions}
       placement='bottomRight'
       listHeight={800}
+      value={null}
       onChange={props.onShowcaseSpdBenchmarkChange}
     />
   )
@@ -434,7 +453,7 @@ function nonZeroOrUndefined(n?: number) {
 
 const shadow = 'rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset'
 
-const STANDARD_COLOR = '#628ae9'
+const STANDARD_COLOR = '#799ef4'
 
 export function standardShowcasePreferences() {
   return {
@@ -546,7 +565,7 @@ export function getDefaultColor(characterId: string, portraitUrl: string, colorM
     8005: ['#8d7abc'], // trailblazerharmony
     8006: ['#8d7abc'], // trailblazerharmony
 
-    1401: ['#7336ed'], // the herta
+    1401: ['#8e5eef'], // the herta
     1402: ['#8cb7e7'], // aglaea
     8007: ['#f0a4fa'], // trailblazerremembrance
     8008: ['#f0a4fa'], // trailblazerremembrance

src/lib/characterPreview/ShowcaseDpsScore.tsx

@@ -10,7 +10,8 @@ import { SingleRelicByPart } from 'lib/gpu/webgpuTypes'
 import { Message } from 'lib/interactions/message'
 import CharacterModal from 'lib/overlays/modals/CharacterModal'
 import { Assets } from 'lib/rendering/assets'
-import { getSimScoreGrade, SimulationScore } from 'lib/scoring/characterScorer'
+import { getSimScoreGrade } from 'lib/scoring/characterScorer'
+import { SimulationScore } from 'lib/scoring/simScoringUtils'
 import DB from 'lib/state/db'
 import { HeaderText } from 'lib/ui/HeaderText'
 import { Utils } from 'lib/utils/utils'
@@ -194,10 +195,14 @@ export function ShowcaseDpsScoreHeader(props: {
     whiteSpace: 'nowrap',
   }
 
+  const titleRender = result.spdBenchmark == null
+    ? t('CharacterPreview.ScoreHeader.Title') // Combat Sim
+    : t('CharacterPreview.ScoreHeader.TitleBenchmark', { spd: formatSpd(result.spdBenchmark) }) // Benchmark vs {{spd}} SPD
+
   const textDisplay = (
     <Flex align='center' vertical style={{ marginBottom: 4, paddingTop: 3, paddingBottom: 3 }}>
       <StatText style={textStyle}>
-        {t('CharacterPreview.ScoreHeader.Title')/* Combat Sim */}
+        {titleRender}
       </StatText>
       <StatText style={textStyle}>
         {
@@ -221,6 +226,10 @@ export function ShowcaseDpsScoreHeader(props: {
   )
 }
 
+function formatSpd(n: number) {
+  return Utils.truncate10ths(n).toFixed(1)
+}
+
 function ShowcaseTeamSelectPanel(props: {
   characterId: string
   teamSelection: string

src/lib/scoring/characterScorer.ts

@@ -409,6 +409,7 @@ export function scoreCharacterSimulation(
     simulationMetadata: metadata,
     characterMetadata: characterMetadata,
 
+    originalSpd: originalSpd,
     spdBenchmark: spdBenchmark,
     simulationFlags: simulationFlags,
   }

src/lib/scoring/simScoringUtils.ts

@@ -66,6 +66,7 @@ export type SimulationScore = {
   simulationMetadata: SimulationMetadata
   characterMetadata: CharacterMetadata
 
+  originalSpd: number
   spdBenchmark: number | null
   simulationFlags: SimulationFlags
 }

src/lib/tabs/tabOptimizer/optimizerForm/components/RecommendedPresetsButton.tsx

@@ -116,6 +116,7 @@ export type SpdPresets = Record<string, {
   key: string
   label: string | ReactElement
   value: number | undefined
+  disabled?: boolean
 }>
 
 export function generateSpdPresets(t: TFunction<'optimizerTab', 'Presets'>) {

src/types/resources.d.ts

@@ -76,6 +76,7 @@ interface Resources {
       },
       "ScoreHeader": {
         "Title": "Combat Sim",
+        "TitleBenchmark": "Benchmark vs {{spd}} SPD",
         "Score": "DPS Score {{score}}% {{grade}}"
       },
       "AlgorithmSlider": {
@@ -91,6 +92,7 @@ interface Resources {
         "Title": "Combat score details:",
         "Labels": {
           "CombatStats": "Combat Stats",
+          "SubDpsCombatStats": "Combat Stats (Sub DPS)",
           "DMGUpgrades": "Damage Upgrades"
         }
       },