IceCraft - 폭죽효과 넣기

↓↓↓↓↓ 이전 포스팅 ↓↓↓↓↓

폭죽효과 넣기 - js-confetti 라이브러리

 

 

 

이전 포스팅에서 폭죽효과 라이브러리를 적용해보는 예제를 만들어 보았다.

이제 본격적으로 우리 프로젝트에 적용해보기로 했다✨

 

 

 

마피아 게임 - 승리 모달창에 폭죽효과 추가하기

import { useCountDown } from "@/hooks/useCountDown";
import { useGameActions } from "@/store/game-store";
import { useModalActions, useModalIsOpen, useModalTimer } from "@/store/show-modal-store";
import JSConfetti from "js-confetti";
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";

const ModalConfetti = ({
  title,
  setVictoryPlayerNickname
}: {
  title: string;
  setVictoryPlayerNickname: Dispatch<SetStateAction<string[]>>;
}) => {
  const timer = useModalTimer();
  const isModal = useModalIsOpen();
  const [count, setCount] = useState(timer);

  const { setIsOpen } = useModalActions();
  const { setIsGameState } = useGameActions();

  // 타이머 및 폭죽 효과
  useCountDown(() => setCount((prevCount) => prevCount - 1), 1000, isModal);

  const jsConfetti = new JSConfetti();

  jsConfetti.addConfetti({
    confettiColors: ["#5C5BAD", "#FFFFFF", "#EB7FEC", "#E72424"],
    confettiRadius: 5,
    confettiNumber: 300
  });

  //NOTE - 모달창 종료 및 폭죽 clear
  useEffect(() => {
    if (count <= 0 && isModal) {
      setIsOpen(false);
      jsConfetti.clearCanvas();
      setVictoryPlayerNickname([]);
      setIsGameState("gameEnd");
    }
  }, [count]);

  return <h1>{title} 승리!</h1>;
};

export default ModalConfetti;

 

먼저 전체코드 내용이다!

 

 

 

 

코드 설명

const ModalConfetti = ({
  title,
  setVictoryPlayerNickname
}: {
  title: string;
  setVictoryPlayerNickname: Dispatch<SetStateAction<string[]>>;
}) => {
  const timer = useModalTimer();
  const isModal = useModalIsOpen();
  const [count, setCount] = useState(timer);

  const { setIsOpen } = useModalActions();
  const { setIsGameState } = useGameActions();

 

먼저 부모에서 두개의 내용을 프롭으로 받아왔다.

소켓에서 받아오는 title과 이긴 플레이어 유저들의 nickname을 받아온다.

그리고 이후에 모달과 관련된 상태, 커스텀 훅을 가져왔다!

 

 

 

 

 

폭죽효과 넣기

  // 타이머 및 폭죽 효과
  useCountDown(() => setCount((prevCount) => prevCount - 1), 1000, isModal);

  const jsConfetti = new JSConfetti();

  jsConfetti.addConfetti({
    confettiColors: ["#5C5BAD", "#FFFFFF", "#EB7FEC", "#E72424"],
    confettiRadius: 5,
    confettiNumber: 300
  });

 

기존 예제에서 공부했던 내용대로 폭죽효과를 넣는다.

그리고 useCountDown은 1초마다 count 값을 1씩 줄이는 타이머 역할을 한다.

타이머는 isModal이 true일 때 동작한다.

 

 

 

 

 

모달창 종료 및 폭죽효과 넣기

  //NOTE - 모달창 종료 및 폭죽 clear
  useEffect(() => {
    if (count <= 0 && isModal) {
      setIsOpen(false);
      jsConfetti.clearCanvas();
      setVictoryPlayerNickname([]);
      setIsGameState("gameEnd");
    }
  }, [count]);

 

컴포넌트가 마운트되고 나서 count 가 0이 되면 

모달을 닫고, 폭죽효과를 종료한다.

 

 

적용하고 나서 우리 프로젝트에 잘 적용이 되어있는 모습을 알 수 있다😏

 

 

 

끝!