[Socket Omok] 4. 플레이어 참가 기능 개발

Intro

 

기존에는 방을 만든 사람이 흑돌, 2번째로 들어온 사람이 백돌로 플레이하도록 하려 했지만,

플레이어가 흑돌 / 백돌 중 어떤 돌로 플레이 할지 선택할 수 있는 기능이 필요할것 같았다.

 

그래서 만약 흑돌 / 백돌에 플레이어가 참가중이지 않다면 '참가' 버튼을 표시하고,

플레이어가 참가중이라면 해당 플레이어의 ID를 표시하는 기능을 추가했다.

---

GamePanel 컴포넌트

const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => {
  const Player = ({ name, onClick }) => {
    return (
      <>
        {name !== "" ? <p>{name}</p> : <button onClick={onClick}>참가</button>}
      </>
    );
  };

  const blackPlayerCallback = () => {
    socket.emit("player_change", "black");
  };

  const whitePlayerCallback = () => {
    socket.emit("player_change", "white");
  };

  return (
    <div className="game-panel">
      <h3 className="game-panel__title">{roomname}</h3>
      <div className="game-panel__player">
        <div className="game-panel__blackplayer">
          <h4>Black</h4>
          <Player name={blackPlayer} onClick={blackPlayerCallback} />
        </div>
        <div className="game-panel__blackplayer">
          <h4>White</h4>
          <Player name={whitePlayer} onClick={whitePlayerCallback} />
        </div>
      </div>
    </div>
  );
};

 

부모로부터 방 이름, 흑돌 / 백돌 플레이어 정보를 받아 컴포넌트를 생성한다.

만약 참가중인 흑돌 / 백돌 플레이어가 있다면 해당 플레이어 정보를 보여주고, 없다면 '참가' 버튼을 보여준다.

'참가' 버튼을 누르면 서버에 참가 신호를 보내고, 응답이 오면 React에서 자동으로 렌더링을 해줘서 플레이어 정보가 업데이트 된다.

---

컴포넌트 사용

const GamingRoom = ({ publicRoom }) => {
  const [roomName, setRoomName] = React.useState(publicRoom.name);
  const [blackPlayer, setBlackPlayer] = React.useState(publicRoom.blackPlayer);
  const [whitePlayer, setWhitePlayer] = React.useState(publicRoom.whitePlayer);
  const [takes, setTakes] = React.useState(publicRoom.takes);

  console.log(publicRoom);

  React.useEffect(() => {
    socket.on("player_change", ({ blackPlayer, whitePlayer }) => {
      setBlackPlayer(blackPlayer);
      setWhitePlayer(whitePlayer);
    });
  }, []);

  return (
    <div className="gaming-room">
      <GamePanel
        roomname={roomName}
        blackPlayer={blackPlayer}
        whitePlayer={whitePlayer}
      />
      <button
        onClick={() => {
          socket.emit("room_leave");
        }}
      >
        방 나가기
      </button>
    </div>
  );
};

 

원래는 publicRoom 통째로 state에 넣었었는데, Object의 prop 값이 변하는걸로는 렌더링이 안돼서 각 요소를 다 분리시켰다. 플레이어 변경 이벤트를 받으면 GamePanel 컴포넌트가 다시 렌더링 되도록 설정해줬다.

---

동작 화면

UI는 나중에 꾸밀 예정이다.