{"size": 915, "ext": "js", "max_stars_repo_path": "src/components/SketchGame/components/StatusCard/StatusCard.js", "max_stars_repo_name": "jvkdev/react-sketchgame", "max_stars_repo_stars_event_min_datetime": "2022-03-23T12:01:04.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-23T12:01:04.000Z", "max_issues_repo_path": "src/components/SketchGame/components/StatusCard/StatusCard.js", "max_issues_repo_name": "jv-k/react-sketchgame", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/SketchGame/components/StatusCard/StatusCard.js", "max_forks_repo_name": "jv-k/react-sketchgame", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.5161290323, "max_line_length": 109, "alphanum_fraction": 0.5551912568}
import React from "react";
import { useGameContext, useRoundContext } from "../../hooks";

export const StatusCard = () => {

  const gameState = useGameContext();
  const roundState = useRoundContext();
  
  const timeSize = 100 - Math.round((gameState.timeLimit - roundState.timeLeft) / gameState.timeLimit * 100);

  return(
    <div className="nes-container is-centered is-rounded mb-3">
      <p className="">Round { roundState.index + 1 } of { gameState.noRounds }</p>
      <progress 
        // make the progress bar red if timer > 80%  
        className={ 
          "m-0 nes-progress "
           + (() => {
              if (timeSize === 100) return "is-pattern is-faded"
              else if (timeSize < 20) return "is-error"
              else return "is-success"
           })()
        } 
        value={ timeSize } 
        max="100" 
        style={{ height: "28px" }}
      />
    </div>
  );
}
