TIL 103. 2024-05-28

Task TODOLIST

• players에게 play 번호 할당

✨ 개발 내용

• 정렬 로직을 zustand 내부에서 처리
• 이유: 정렬한 상태값은 전역 state로 관리해야하며, 컴포넌트 내부에서 아래의 로직을 처리하기에는 가독성이 떨어진다고 판단하여, 컴포넌트 내부에서는 해당 배열의 값만 매개변수로 전달하여 zustand 내부 action에서 처리

const gamePlayers = useGamePlayers();
const { setGamePlayers } = useGameActions();
const [localPlayerNumber, setLocalPlayerNumber] = useState<number | undefined>();
...

   setGamePlayers: (participants) => {
      // NOTE 입장 시간으로 정렬
      const gamePlayerName = participants.sort((a, b) => {
        if (!a.joinedAt || !b.joinedAt) {
          return 1; // 존재 하지 않을 시 뒤로 이동
        }
        return new Date(a.joinedAt).getTime() - new Date(b.joinedAt).getTime();
      });

      // NOTE - gamePlayers 요소: playerName, playerJoinAt, playerNumber
      const gamePlayers = gamePlayerName.map((player, index) => ({
        playerName: player.name,
        playerJoinAt: player.joinedAt,
        playerNumber: index + 1
      }));

      //NOTE - gamePlayersInfo 저장
      set({ gamePlayersInfo: gamePlayers });
    }

 //NOTE - 게임 시작 이벤트 핸들러
  const startHandler = () => {
     ...

    // 게임 시작시 player Number 부여
    setGamePlayers(participants);

  };

  //NOTE -  "gamePlayers" 값이 존재(게임 시작 시) 작동
  useEffect(() => {
    const localNumber = gamePlayers.find((player) => localParticipant.name === player.playerName);

    if (localNumber) {
      setLocalPlayerNumber(localNumber.playerNumber);
    }
  }, [gamePlayers]);

TroubleShotting

처음 정렬 조건을 닉네임을 기준으로 정렬하였다.
이유는 어느 조건의 정렬이든 상관없이 전체 게임 방 players가 동일하게 정렬만 되면 문제가 없었기 때문이다.

문제 발생

• 게임 시작시 모든 players의 local 환경에 정상적으로 플레이어 번호가 UI에 표시되었지만 번호 순서는 뒤죽박죽으로 표시되는 걸 볼 수 있었다.
• 해결 과정: 게임 시작 시 Track( 캠, 오디오) 데이터를 앞서 정렬한 순서대로 다시 UI에 보여지게 TrackLoop하였다.
• 해결한 줄 알았던 부분의 또 다른 문제는 게임 시작시 가장 먼저 실행되어야하는 모든 players의 캠 및 오디오 off 로직이 정상적으로 작동되지 않는 걸 볼 수 있었다.
• 로직 순서가 꼬여 모든 players의 캠 및 오디오 off 할 시기에 다시 players의 캠 및 오디오 데이터의 반복문을 돌려 재실행하기에 문제가 발생하였다.

해결방법

• 간단하였다. 과정은 어려웠지만 ㅎ...
  방에 처음 입장 시 LiveKit에서는 입장 시간을 기준으로 자동으로 정렬되기에 캠의 위치를 다시 정렬할 필요없이 입장 시간의 값만 얻을 수 있다면 문제 해결이었다. 그래서 Livekit의 여러 hooks 중 LiveKit에서 제공하는 useParticipants hooks 요소에서 joinAt이라는 player의 입장 시간을 hooks 요소로 전달해주는 걸 확인

해결: 입장 순으로 정렬 후 번호를 부여하여 캠의 재조정 없이 UI에 표현

그리고 헷갈릴 수 있는 부분인

"useParticipants" 훅의 배열 순서는 Local을 기준으로 정렬되기에 시간순으로 다시 정렬해줘야한다.