TIL 98. 2024-05-21

Task TODOLIST

• 서버에서 전송받는 죽은 player의 정보를 배열형식의 전역state로 관리
• 캠클릭 이벤트 비활성화
• 미디어(화면, 비디오) 비활성화
• palyer가 방 나갈 시 pin 유지하기

✨ 개발 내용

  //NOTE - 투표 시간, 직업별 캠 클릭 활성화
  useEffect(() => {
    const isDiedPlayer = diedPlayerId.find((playerId) => localPlayerId === playerId);

    //NOTE - 죽은 player일 경우 or 특정 시간이 아닐 경우 캠클릭 비활성화
    if (isDiedPlayer || !inSelect) {
      setIsOverlay(false);
      return;
    }

    //NOTE - 해당 player의 직업
    const localJob = getPlayerJob(role, localPlayerId);

    //NOTE - 투표 시간이면서, 모든 player 캠 클릭 이벤트 활성화
    if (inSelect.includes("vote")) {
      console.log("투표 중입니다!");
      setIsOverlay(true);
    }
    //NOTE - 마피아 시간이면서, 마피아인 player만 캠 클릭 이벤트 활성화
    if (inSelect.includes("mafia") && localJob === "mafia") {
      console.log("마피아 시간입니다.!");
      setIsRemoteOverlay(true);
    }
    //NOTE - 의사 시간이면서, 의사인 player만 캠 클릭 이벤트 활성화
    if (inSelect.includes("doctor") && localJob === "doctor") {
      console.log("의사 시간입니다.!");
      setIsOverlay(true);
    }
    //NOTE - 경찰 시간이면서, 경찰인 player만 캠 클릭 이벤트 활성화
    if (inSelect.includes("police") && localJob === "police") {
      console.log("경찰 시간입니다.!");
      setIsRemoteOverlay(true);
    }
  }, [inSelect, diedPlayerId]);

  //NOTE - 미디어 관리
  useEffect(() => {
    //NOTE - 죽은 player일 경우 캠클릭 비활성화
    const isDiedPlayer = diedPlayerId.find((playerId) => localPlayerId === playerId);

    if (isDiedPlayer) {
      localParticipant.localParticipant.setCameraEnabled(false);
      localParticipant.localParticipant.setMicrophoneEnabled(false);
      return;
    }
                                                  ...

기존) palyer가 방 나갈 시 pin의 위치가 없어지는 현상 발생
이유) 각각의 user별 Track이라는 데이터가 제공된다. 하지만 방을 나갈 시에는 개인 Track이 사라지면서 pin에 사용되는 Track의 data가 없어져 발생하는 에러였다.
해결) 게임 시작 후 track에 대한 정보를 state 값에 저장하여 별도로 관리하여 방을 나가더라도 Track에 대한 정보를 유지

const [remoteTracks, setRemoteTracks] = useState<TrackReferenceOrPlaceholder[]>([]);

  //NOTE -  게임 시작 전까지 track에 대한 정보를 state 값에 저장
  useEffect(() => {
    // 게임 시작 이후부터는 state값을 유지
    if (isStart) {
      return;
    }

    const filteredTracks = tracks.filter(
      (track) => track.source === "camera" && track.participant.sid !== localParticipant.sid
    );
    setRemoteTracks(filteredTracks);
  }, [tracks, isStart]);