난이도 설정

지금 화면을 정리 하자면
1. 첫 시작 화면 : 난이도 추가, 익명로그인추가
2. 닉네임 입력 화면 : 닉네임,
3. 게임 화면 : 아이템 클릭시 문제 사항 수정
4. 랭킹 화면 : 구현 해야함

App컴포넌트

const [stepValue, setStepValue] =  useState<number>(0);
const steps = (index: number)=> {
    setStepValue(index)
  };
const contextValue = {
   sigAanonymous //파이어베이스 익명 로그인
   steps, //난이도 함수
   stepValue, //난이도 숫자
};
<gameBgmContext.Provider value={contextValue}>  

steps를 상태관리를 통해 사용 할 수 있게 함

StartPage

const { sigAanonymous, steps } = useContext(gameBgmContext);

const handleSignInAnonymous = (e:any)=>{
  const buttonId = e.target.id;  
  if("bFood" === buttonId){
  sigAanonymous();
  steps(8);
  }else if("yFood" === buttonId){
  sigAanonymous();
  steps(5);
  }else{
  sigAanonymous();
  steps(3);
}
navigation(`/login`);
}

 <button id="bFood" onClick={handleSignInAnonymous}>파란 츄르</button>
 <button id="yFood" onClick={handleSignInAnonymous}>노란츄르</button>
 <button id="rFood" onClick={handleSignInAnonymous}>빨강츄르</button>

버튼에 따라 steps에 들어 가는 파라미터 값이 다름
들어간 값이 다시 App컴포넌트로 가서 stepValue로 stepValue 값은 상태관리로 다른 컴포넌트로 이동

로그인 화면을 지나 게임 화면으로 이동

MainPage

 const { stepValue } = useContext(gameBgmContext);
 
 const startAnimation = () => {
    imgUrl.forEach((i, index) => {
      const ramdom = Math.floor(Math.random() * 5);
      const keyframes = [
        { opacity: 0.9, transform: `translateX(${ramdom * 10}px)` },
        { opacity: 1, transform: `translate(${ramdom * 10}px, 500px)` },
      ];

      const options: AnimationType = {
        delay: 1000 * (ramdom + 1), //몇초동안 대기 후 시작
        duration: 1000 * stepValue, //몇초동안 지속
        easing: "ease-in", //감속 조절
        iterations: 1, //반복 횟수
      };

      animateImage(index, keyframes, options);
    });
  };

css 애니메이션에 stepValue 값으로 아이템 속도 조정

쉬운 난이도

여러운 난이도