Merge pull request #11062 from bdach/catch-miss-display-fix

Fix inconsistency in displayed miss count between stable & lazer catch scores

Author: nanaya

resources/css/bem/beatmap-scoreboard-table.less

@@ -75,7 +75,7 @@
       white-space: nowrap;
     }
 
-    &--hitstat-count_miss {
+    &--hitstat-miss {
       width: 50px;
     }
 

resources/js/beatmapsets-show/scoreboard/table-row.tsx

@@ -16,7 +16,7 @@ import PpValue from 'scores/pp-value';
 import { classWithModifiers, Modifiers } from 'utils/css';
 import { formatNumber } from 'utils/html';
 import { trans } from 'utils/lang';
-import { accuracy, filterMods, hasMenu, isPerfectCombo, modeAttributesMap, rank, scoreUrl, totalScore } from 'utils/score-helper';
+import { accuracy, filterMods, hasMenu, isPerfectCombo, attributeDisplayTotals, rank, scoreUrl, totalScore } from 'utils/score-helper';
 
 const bn = 'beatmap-scoreboard-table';
 
@@ -128,13 +128,13 @@ export default class ScoreboardTableRow extends React.Component<Props> {
           {`${formatNumber(score.max_combo)}x`}
         </TdLink>
 
-        {modeAttributesMap[this.props.beatmap.mode].map((stat) => (
+        {attributeDisplayTotals(this.props.beatmap.mode, score).map((stat) => (
           <TdLink
-            key={stat.attribute}
+            key={stat.key}
             href={this.scoreUrl}
-            modifiers={{ zero: (score.statistics[stat.attribute] ?? 0) === 0 }}
+            modifiers={{ zero: stat.total === 0 }}
           >
-            {formatNumber(score.statistics[stat.attribute] ?? 0)}
+            {formatNumber(stat.total)}
           </TdLink>
         ))}
 

resources/js/beatmapsets-show/scoreboard/table.tsx

@@ -64,8 +64,8 @@ export default class Table extends React.Component<Props> {
                 </th>
                 {modeAttributesMap[this.props.controller.beatmap.mode].map((stat) => (
                   <th
-                    key={stat.attribute}
-                    className={classWithModifiers(`${bn}__header`, ['hitstat', `hitstat-${stat.attribute}`])}
+                    key={stat.key}
+                    className={classWithModifiers(`${bn}__header`, ['hitstat', `hitstat-${stat.key}`])}
                   >
                     {stat.label}
                   </th>

resources/js/beatmapsets-show/scoreboard/top-card.tsx

@@ -19,7 +19,7 @@ import { rulesetName, shouldShowPp } from 'utils/beatmap-helper';
 import { classWithModifiers, Modifiers } from 'utils/css';
 import { formatNumber } from 'utils/html';
 import { trans } from 'utils/lang';
-import { accuracy, filterMods, isPerfectCombo, modeAttributesMap, rank, scoreUrl, totalScore } from 'utils/score-helper';
+import { accuracy, filterMods, isPerfectCombo, attributeDisplayTotals, rank, scoreUrl, totalScore } from 'utils/score-helper';
 
 interface Props {
   beatmap: BeatmapJson;
@@ -147,13 +147,13 @@ export default class TopCard extends React.PureComponent<Props> {
             </div>
 
             <div className='beatmap-score-top__stats beatmap-score-top__stats--wrappable'>
-              {modeAttributesMap[ruleset].map((attr) => (
-                <div key={attr.attribute} className='beatmap-score-top__stat'>
+              {attributeDisplayTotals(ruleset, this.props.score).map((attr) => (
+                <div key={attr.key} className='beatmap-score-top__stat'>
                   <div className='beatmap-score-top__stat-header'>
                     {attr.label}
                   </div>
                   <div className='beatmap-score-top__stat-value beatmap-score-top__stat-value--smaller'>
-                    {formatNumber(this.props.score.statistics[attr.attribute] ?? 0)}
+                    {formatNumber(attr.total)}
                   </div>
                 </div>
               ))}

resources/js/scores-show/stats.tsx

@@ -10,7 +10,7 @@ import { rulesetName, shouldShowPp } from 'utils/beatmap-helper';
 import { classWithModifiers } from 'utils/css';
 import { formatNumber } from 'utils/html';
 import { trans } from 'utils/lang';
-import { accuracy, isPerfectCombo, modeAttributesMap } from 'utils/score-helper';
+import { accuracy, isPerfectCombo, attributeDisplayTotals } from 'utils/score-helper';
 
 interface Props {
   beatmap: BeatmapJson;
@@ -58,13 +58,13 @@ export default function Stats(props: Props) {
           )}
         </div>
         <div className='score-stats__group-row'>
-          {modeAttributesMap[rulesetName(props.score.ruleset_id)].map((attr) => (
-            <div key={attr.attribute} className='score-stats__stat'>
+          {attributeDisplayTotals(rulesetName(props.score.ruleset_id), props.score).map((attr) => (
+            <div key={attr.key} className='score-stats__stat'>
               <div className='score-stats__stat-row score-stats__stat-row--label'>
                 {attr.label}
               </div>
               <div className='score-stats__stat-row'>
-                {formatNumber(props.score.statistics[attr.attribute] ?? 0)}
+                {formatNumber(attr.total)}
               </div>
             </div>
           ))}

resources/js/utils/score-helper.ts

@@ -48,41 +48,57 @@ export function isPerfectCombo(score: SoloScoreJson) {
     : score.is_perfect_combo;
 }
 
-interface AttributeData {
-  attribute: SoloScoreStatisticsAttribute;
+interface AttributeDisplayMapping {
+  attributes: SoloScoreStatisticsAttribute[];
+  key: string;
   label: string;
 }
 
+interface AttributeDisplayTotal {
+  key: string;
+  label: string;
+  total: number;
+}
+
 const labelMiss = trans('beatmapsets.show.scoreboard.headers.miss');
 
-export const modeAttributesMap: Record<GameMode, AttributeData[]> = {
+export const modeAttributesMap: Record<GameMode, AttributeDisplayMapping[]> = {
   fruits: [
-    { attribute: 'great', label: 'fruits' },
-    { attribute: 'large_tick_hit', label: 'ticks' },
-    { attribute: 'small_tick_miss', label: 'drp miss' },
-    { attribute: 'miss', label: labelMiss },
+    { attributes: ['great'], key: 'great', label: 'fruits' },
+    { attributes: ['large_tick_hit'], key: 'ticks', label: 'ticks' },
+    { attributes: ['small_tick_miss'], key: 'drp_miss', label: 'drp miss' },
+    // legacy/stable scores merge miss and large_tick_miss into one number
+    { attributes: ['miss', 'large_tick_miss'], key: 'miss', label: labelMiss },
   ],
   mania: [
-    { attribute: 'perfect', label: 'max' },
-    { attribute: 'great', label: '300' },
-    { attribute: 'good', label: '200' },
-    { attribute: 'ok', label: '100' },
-    { attribute: 'meh', label: '50' },
-    { attribute: 'miss', label: labelMiss },
+    { attributes: ['perfect'], key: 'perfect', label: 'max' },
+    { attributes: ['great'], key: 'great', label: '300' },
+    { attributes: ['good'], key: 'good', label: '200' },
+    { attributes: ['ok'], key: 'ok', label: '100' },
+    { attributes: ['meh'], key: 'meh', label: '50' },
+    { attributes: ['miss'], key: 'miss', label: labelMiss },
   ],
   osu: [
-    { attribute: 'great', label: '300' },
-    { attribute: 'ok', label: '100' },
-    { attribute: 'meh', label: '50' },
-    { attribute: 'miss', label: labelMiss },
+    { attributes: ['great'], key: 'great', label: '300' },
+    { attributes: ['ok'], key: 'ok', label: '100' },
+    { attributes: ['meh'], key: 'meh', label: '50' },
+    { attributes: ['miss'], key: 'miss', label: labelMiss },
   ],
   taiko: [
-    { attribute: 'great', label: 'great' },
-    { attribute: 'ok', label: 'good' },
-    { attribute: 'miss', label: labelMiss },
+    { attributes: ['great'], key: 'great', label: 'great' },
+    { attributes: ['ok'], key: 'ok', label: 'good' },
+    { attributes: ['miss'], key: 'miss', label: labelMiss },
   ],
 };
 
+export function attributeDisplayTotals(ruleset: GameMode, score: SoloScoreJson): AttributeDisplayTotal[] {
+  return modeAttributesMap[ruleset].map((mapping) => ({
+    key: mapping.key,
+    label: mapping.label,
+    total: mapping.attributes.reduce((sum, attribute) => sum + (score.statistics[attribute] ?? 0), 0),
+  }));
+}
+
 export function rank(score: SoloScoreJson) {
   return shouldReturnLegacyValue(score)
     ? legacyAccuracyAndRank(score).rank