feat: Display a message when the user hits the max level
This commit is contained in:
parent
5c3603f595
commit
ede271f604
@ -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>
|
||||||
<Typography variant="subheading">
|
{
|
||||||
Dir fehlen noch <b>{level.levelCap - this.props.user.score}</b> Erfahrungspunkte bis zum nächsten Level
|
maxLevel ? (
|
||||||
</Typography>
|
<Typography variant="subheading">
|
||||||
|
Veni Vidi Vici...
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
<Typography variant="subheading">
|
||||||
|
Dir fehlen noch <b>{level.levelCap - this.props.user.score}</b> Erfahrungspunkte bis zum nächsten Level
|
||||||
|
</Typography>
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
@ -189,7 +206,7 @@ export default class Drawer extends React.Component<IProps> {
|
|||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
</SwipeableDrawer>
|
</SwipeableDrawer>
|
||||||
</div>
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user