개인 프로젝트 3

 

환경 변수 설정에서 통신 에러는 오타가 있었습니다...

역시 푹 쉬면서 해야 사소한 게 보이나 봅니다. (─‿─)

 

 

영웅 선택 및 카드 데이터 호출

 

다음과 같이 선택된 영웅의 카드들을 저장할 변수를 만들고 영웅 변경 시 데이터를 변경할 함수를 내려줍니다.

 

  const [currentHeroCard, setCurrentHeroCard] = useState<CardStructure[]>([]);

  const currentHeroCardHandler = (card: CardStructure[]) => {
    setCurrentHeroCard(card);
  };
  
  return (
    <>
      {heroData.map((el) => {
        return <HeroSelectButton key={el.class} heros={el} currentHeroCardHandler={currentHeroCardHandler}/>;
      })}
    </>
  );

 

import { CardStructure } from "../card.model";

// Props 구조 정의
type HeroProps = {
  heros: { class: string; name: string; image: string };
  currentHeroCardHandler: (card: CardStructure[]) => void;
};

const HeroSelectButton: React.FC<HeroProps> = (props) => {
  // 영웅 직업 버튼 클릭시 카드 데이터 호출할 함수
  const fetchCardHandler = (hero: string): any => {
    fetch(
      `https://us.api.blizzard.com/hearthstone/cards?locale=ko_KR&gameMode=arena&pageSize=333&class=${hero},neutral`,
      {
        headers: {
          Authorization:
            "Bearer " + localStorage.getItem("ACCESS_TOKEN")!.toString(),
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        props.currentHeroCardHandler(data.cards);
      });
  };

  return (
    <button
      type="button"
      onClick={() => fetchCardHandler(props.heros.class)}
      style={{ width: "8%", height: "10vh", margin: "2px" }}
    >
      <img
        src={props.heros.image}
        alt={props.heros.class}
        style={{ width: "60%" }}
      />
    </button>
  );
};

export default HeroSelectButton;

 

여기서 onClick 안에 이벤트 즉 함수를 실행하는 코드를 넣어줘야 하는데 함수 실행이 아닌 함수 그대로만 넣어서 페이지가 로드될 때만 실행되고 클릭해도 실행이 되지 않았었습니다. 

 

 

이제 직업에 따른 카드 목록을 확인할 수 있습니다 !

 

 

카드 희귀도 분류

 

하스스톤에서 카드는 희귀도에 따라 일반, 희귀, 영웅, 전설 4가지로 분류됩니다.

카드 데이터에서 rarityId로 1, 3, 4, 5로 나눠지며 이에 맞게 나눴습니다.

 

import { CardStructure } from "../card.model";

import Card from "./Card";

// 카드 데이터 구조 정의
interface CardsProps {
  currentHeroCard: CardStructure[];
}

const CardContainer: React.FC<CardsProps> = (props) => {
  return (
    <>
      <h2 style={{ display: "flex", justifyContent: "center" }}>일반</h2>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {props.currentHeroCard
          .filter((card) => card.rarityId === 1)
          .map((card) => {
            return <Card card={card} />;
          })}
      </div>
      <h2 style={{ display: "flex", justifyContent: "center" }}>희귀</h2>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {props.currentHeroCard
          .filter((card) => card.rarityId === 3)
          .map((card) => {
            return <Card card={card} />;
          })}
      </div>
      <h2 style={{ display: "flex", justifyContent: "center" }}>영웅</h2>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {props.currentHeroCard
          .filter((card) => card.rarityId === 4)
          .map((card) => {
            return <Card card={card} />;
          })}
      </div>
      <h2 style={{ display: "flex", justifyContent: "center" }}>전설</h2>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {props.currentHeroCard
          .filter((card) => card.rarityId === 5)
          .map((card) => {
            return <Card card={card} />;
          })}
      </div>
    </>
  );
};

export default CardContainer;

 

 

카드 이름과 이미지

 

카드 이름을 클릭하면 이미지가 호버 되게 간단히 구현을 했습니다.

 

 

 

해야 할 것

 

우선 전체적인 스타일을 기존 게임에서 많이 이용하는 색감에 맞춰 정리할 겁니다.

 

그리고 검색창 만들고 카드 이름의 일부만 입력되어도 그 카드 이름이 톤업되게 하고 쉼표를 통해 여러 개 검색을 시도해 보렵니다.

 

마지막으로 카드의 승률, 픽률을 이용해 점수를 부과해 정렬하고 싶은데 가능할지 더 찾아보겠습니다.