import React from 'react';
import './style.scss';


function Round({num,color,name}) {
  return(
    <div className={"annulusBasics"}>
      <div className={"centerCircle"} style={{color:`${color}`}}>
        <span><span className="score">{num}</span>分</span>
        <span>{name}</span>
      </div>
      <div className={"annulusOuter"} style={{border:`7px solid ${color}`}}></div>
      {num > 50 ?
        <div className={"leftRectangle"} style={{ transform: `rotate(${180/50 *(num - 50)}deg)` }}></div> 
        :
        <div className={"leftRectangle"} ></div>
      }
      {num < 50 ?
        <div className={"rightRectangle"} style={{ transform: `rotate(${180/50 * num}deg)` }}></div>
        : 
        <div className={"rightRectangle"} style={{ background: color }}></div>
      }
    </div>
  )
}
export default Round;