[Socket Omok] 5. 바둑판, 바둑알 표시하기

바둑판 크기 계산하기

이제 가장 중요한 기능인 바둑판과 바둑알 표시 기능을 추가해야 한다.

개인적으로 이번 프로젝트에서 바둑알 착수 이벤트 감지에 이어 가장 어려운 부분이 아닐까 싶다.

 

우선 인터넷에서 바둑판 사진 하나를 다운로드해왔다.

 

그 후 픽셀 수를 통해 오프셋과 칸의 너비가 이미지의 몇% 정도 되는지 측정했다.

 

측정 결과 Offset은 3.62%, Width는 5.14%가 나왔다.

이 값을 통해 이제 바둑알의 위치를 정해줘야 한다.

---

바둑알 컴포넌트

const BOARD_OFFSET = 3.62; //%
const BOARD_SPACE = 5.14; //%

const stone = ({ white, x, y }) => {
  //console.log(`${white} (${x},${y})`);
  return (
    <div
      className="omokboard__stone"
      key={`${x}${y}`}
      style={{
        backgroundColor: white ? "white" : "black",
        left: `${x * BOARD_SPACE + BOARD_OFFSET}%`,
        top: `${y * BOARD_SPACE + BOARD_OFFSET}%`,
      }}
    ></div>
  );
};

const MemoriedStone = React.memo(stone);

바둑알 색, X좌표, Y좌표를 받아 바둑판에 퍼센트 기준으로 위치시킨다. 때문에 화면의 크기가 변해도 바둑판이 일그러지지 않는다.

바둑알이 추가될 때마다 모든 바둑알을 렌더링 하는 것을 방지하기 위해 React.memo로 메모이제이션 해줬다.

---

바둑판 컴포넌트

const OmokBoard = ({ takes }) => {
  return (
    <div className="omokboard">
      {takes.map((takes, index) => (
        <MemoriedStone white={index % 2 == 1} x={takes.x} y={takes.y} />
      ))}
    </div>
  );
};

 

이전에 뒀던 수 목록을 받아 MemoriedStone으로 매핑시켜 보여준다.

---

동작 확인

임의의 바둑알을 추가하는 코드를 작성하고 바둑알이 잘 생성되는지 확인해봤다.

const testTakes = [];
for (let i = 0; i < 19; i++) {
  testTakes.push({
    x: i,
    y: i,
  });
  testTakes.push({
    x: i,
    y: 18 - i,
  });
  testTakes.push({
    x: 0,
    y: i,
  });
}

const [takes, setTakes] = React.useState(testTakes);

 

 

잘 생성된다.