55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import * as styles from './styles/StatDisplay.scss';
|
|
|
|
export interface IStartDisplayProps {
|
|
statLabel : string;
|
|
statValue : number | null;
|
|
statRank : number;
|
|
}
|
|
|
|
export class StatDisplay extends React.Component<IStartDisplayProps, object> {
|
|
|
|
public render() {
|
|
const {
|
|
statLabel,
|
|
statValue,
|
|
statRank,
|
|
} = this.props;
|
|
|
|
const progressStatCss = classNames(
|
|
'nes-progress',
|
|
{
|
|
'is-success': statRank > 66,
|
|
'is-warning': statRank >= 34 && statRank <= 66,
|
|
'is-error': statRank < 34,
|
|
}
|
|
);
|
|
|
|
let spacer = ' ';
|
|
let displayValue : number | string | null = statValue;
|
|
if (statValue === null) {
|
|
displayValue = '-';
|
|
spacer += String.fromCharCode(160) + String.fromCharCode(160);
|
|
} else if (statValue < 100) {
|
|
spacer += String.fromCharCode(160);
|
|
}
|
|
|
|
return (
|
|
<div className={ styles.baseStatRow }>
|
|
<span>{ statLabel }{ spacer }{ displayValue }</span>
|
|
<progress
|
|
className={ progressStatCss }
|
|
max={ 100 }
|
|
value={ statRank }
|
|
title={ `${statRank}%` }
|
|
>
|
|
{ statRank }%
|
|
</progress>
|
|
</div>
|
|
);
|
|
}
|
|
}
|