All files / components ExperienceBar.tsx

100% Statements 3/3

100% Branches 0/0

100% Functions 1/1

100% Lines 3/3

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  
 
 
 
 
 
4x
 
 
4x
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useContext } from "react";
import { ChallengeContext } from "../contexts/ChallengeContext";
import styles from "../styles/components/ExperienceBar.module.css";
 
export function ExperienceBar(props) {
  const { currentExperience, experienceToNextLevel } =
    useContext(ChallengeContext);
 
  const percentToNextLevel =
    Math.round(currentExperience * 100) / experienceToNextLevel;
 
  return (
    <header className={styles.experienceBar}>
      <span>xp</span>
      <div>
        <div style={{ width: `${percentToNextLevel}%` }}></div>
        <span
          className={styles.currentExperience}
          style={{ left: `${percentToNextLevel}%` }}
        >
          {currentExperience} xp
        </span>
      </div>
      <span>{experienceToNextLevel} xp</span>
    </header>
  );
}