diff --git a/frontend/src/components/Drawer.tsx b/frontend/src/components/Drawer.tsx index 2717099..1d53edb 100644 --- a/frontend/src/components/Drawer.tsx +++ b/frontend/src/components/Drawer.tsx @@ -56,7 +56,16 @@ export default class Drawer extends React.Component { } 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 (
@@ -80,7 +89,7 @@ export default class Drawer extends React.Component { color="inherit" buttonRef={node => this.scoreBtnRef = node} onClick={this.toggleScorePopover}> - {`${this.props.user.score} / ${level.levelCap}`} + {scoreStr} ) : undefined } @@ -98,9 +107,17 @@ export default class Drawer extends React.Component { onClose={this.closeScorePopover}>
Du bist: {level.name} - - Dir fehlen noch {level.levelCap - this.props.user.score} Erfahrungspunkte bis zum nächsten Level - + { + maxLevel ? ( + + Veni Vidi Vici... + + ) : ( + + Dir fehlen noch {level.levelCap - this.props.user.score} Erfahrungspunkte bis zum nächsten Level + + ) + }
@@ -189,7 +206,7 @@ export default class Drawer extends React.Component { -
+ ); } };