PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Display a message when the user hits the max level

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-10-09 20:24:20 +02:00
parent 5c3603f595
commit ede271f604
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/Drawer.tsx
View File

@ -56,7 +56,16 @@ export default class Drawer extends React.Component<IProps> {
} }
render() { render() {
const level = userScoreToLevel(this.props.user.score); const { score } = this.props.user;
const level = userScoreToLevel(score);
// Determine whether we hit the maximum level
const maxLevel = score >= level.levelCap;
const scoreStr = maxLevel ? (
`${score}`
) : (
`${score} / ${level.levelCap}`
);
return ( return (
<div> <div>
@ -80,7 +89,7 @@ export default class Drawer extends React.Component<IProps> {
color="inherit" color="inherit"
buttonRef={node => this.scoreBtnRef = node} buttonRef={node => this.scoreBtnRef = node}
onClick={this.toggleScorePopover}> onClick={this.toggleScorePopover}>
{`${this.props.user.score} / ${level.levelCap}`} {scoreStr}
</Button> </Button>
) : undefined ) : undefined
} }
@ -98,9 +107,17 @@ export default class Drawer extends React.Component<IProps> {
onClose={this.closeScorePopover}> onClose={this.closeScorePopover}>
<div className="content"> <div className="content">
<Typography variant="headline">Du bist: {level.name}</Typography> <Typography variant="headline">Du bist: {level.name}</Typography>
{
maxLevel ? (
<Typography variant="subheading">
Veni Vidi Vici...
</Typography>
) : (
<Typography variant="subheading"> <Typography variant="subheading">
Dir fehlen noch <b>{level.levelCap - this.props.user.score}</b> Erfahrungspunkte bis zum nächsten Level Dir fehlen noch <b>{level.levelCap - this.props.user.score}</b> Erfahrungspunkte bis zum nächsten Level
</Typography> </Typography>
)
}
</div> </div>
</Popover> </Popover>
</Toolbar> </Toolbar>