Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 1x 1x 8x 8x 14x 5x 9x 9x 9x 6x 3x 3x 3x 3x 3x 10x 1x | /**
* @module Client.Game.Infos
* Endurance bar
*/
import { IStateFrontend } from '@client/reducers';
import { getSelectedCharacter } from '@client/selector';
import { CharacterFrontend } from '@models';
import * as React from 'react';
import { connect } from 'react-redux';
export interface EnduranceProps {
character: CharacterFrontend;
}
export interface EnduranceState {
currentDate: Date;
}
export class EnduranceComponent extends React.Component<EnduranceProps, EnduranceState> {
constructor(props: EnduranceProps) {
super(props);
this.state = { currentDate: new Date() };
}
public render() {
if (this.props.character === undefined) {
return null;
}
const { minutes } = this.props.character;
const { currentDate } = this.state;
if (minutes === undefined) {
return (
<div className="Infos__Endurance">
<div
className="progress-bar bg-success"
role="progressbar"
style={{ width: '100%' }}
aria-valuenow={100}
aria-valuemin={0}
aria-valuemax={100}
/>
</div>
);
}
let dateDiff = minutes - currentDate.getMinutes();
Iif (dateDiff <= 0) {
dateDiff += 60;
}
const valuenow = 60 - dateDiff;
const percent = Math.round((valuenow / 60) * 100);
return (
<div className="Infos__Endurance progress">
<div
className="progress-bar progress-bar-striped"
role="progressbar"
style={{ width: `${percent}%` }}
aria-valuenow={valuenow}
aria-valuemin={1}
aria-valuemax={60}
>
{dateDiff} minutes
</div>
</div>
);
}
}
const mapStateToProps = (state: IStateFrontend) => ({
character: getSelectedCharacter(state),
});
export const Endurance = connect(
mapStateToProps,
)(EnduranceComponent);
|