diff --git a/src/components/MatchScore/MatchScore.tsx b/src/components/MatchScore/MatchScore.tsx index 5e825c513..4cc2cf36e 100644 --- a/src/components/MatchScore/MatchScore.tsx +++ b/src/components/MatchScore/MatchScore.tsx @@ -17,7 +17,14 @@ export const MatchScore: FC = React.forwardRef( ref: Ref ) => { const absTotal: number = Math.abs(total); + const absScore: number = Math.round(score); + const fullCircles: number = Math.trunc(Math.round(score * 2.0) / 2.0); + const halfCircle: number = Math.trunc( + Math.ceil(score - fullCircles - 0.25) + ); + const emptyCircles: number = total - fullCircles - halfCircle; const matchScoreLabelClasses = mergeClasses(styles.label, 'body2'); + return ( , HTMLDivElement> of="div" @@ -26,22 +33,22 @@ export const MatchScore: FC = React.forwardRef( classes={[classNames, styles.matchScoreContainer]} aria-label={ariaLabel} > - {getArrayOfSize(Math.min(Math.floor(score), absTotal)).map( - (_val, index) => ( - - ) - )} - {Math.floor(score) !== score && ( - - )} - {getArrayOfSize(Math.max(Math.floor(absTotal - score), 0)).map( - (_val, index) => ( - - ) - )} + {/* Full */} + {getArrayOfSize(fullCircles).map((_val, index) => ( + + ))} + + {/* Half */} + {!!halfCircle && } + + {/* Remaining empty circles */} + {getArrayOfSize(emptyCircles).map((_val, index) => ( + + ))} + {!hideLabel && (

- {score}/{absTotal} + {absScore}/{absTotal}

)}