[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (3)

 

[ 오늘의 작업 과정 ]

post 형식으로 아래와 같은 게임 전체 진행 상황 및 정보 데이터를 서버로 보내기

{
    color : "1"      // 돌의 색 정보 (1이면 흑, 2이면 백)
    location : "4,6"    // 돌의 좌표 (왼쪽 위에 칸 좌표 = "0,0" 기준 )
    situation : "00000000000/00000001000/000000200/....." // 현재 게임 상황 (오목판 전체)
}

---

 axios를 사용했고 아직은 서버 url을 만들지 않아 임시서버를 사용해 보낸 데이터를 확인하기로 했다.

color 값은 현재 놓여진 돌의 색이 검정이면 '1', 흰색이면 '2'를 보내야 한다. 여기서 처음에 newColor가 아닌 color가 검정색일 때 '2'가 나오고 흰색일 때는 '1'이 이런식으로 반대로 나왔는데 이를 newColor로 바꾸니 잘 적용되었다.

location 또한 왼쪽 위에 칸 0,0 기준으로 좌표값이 잘 나온다.

const handleCellClick = (i,j) => {
    setClickedCell([...clickedCell, {i,j}])
    const newColor = color === 'black' ? 'white' : 'black';
    document.getElementById(`cell-${i}-${j}`).style.background = newColor;
    setColor(newColor);

    // post로 데이터 보내기
    axios.post("https://jsonplaceholder.typicode.com/posts", { // 임시서버
      color : newColor === 'black' ? '1' : '2',
      location : (i - 1) + "," + (j - 1)
    })
    .then((res) => {
      console.log(res.data);
    })
    .catch((err) => {
      console.log('실패');
    })
  }

[ Trouble - Shooting ]

- 문제 : situation 값을 구현해내는 데 어려움을 겪었다 

 게임 전체 상황은  "00000000000/00000001000/000000200/....." 이런 형식으로 보내줘야 한다. 0이 아무 돌도 놓이지 않았았을 때이다. 코드가 길어질 것 같아 따로 encodeGameBoard() 함수를 만들어서 코딩했다. 

 전에 오목돌을 흑/백 번갈아 둘 때랑 비슷한 로직으로 행의 수를 담은 배열 col에 중첩으로 map함수를 돌려서 오목판 칸의 각각의 위치를 i와 j에 담았고, 앞서만들었던 클릭한 칸의 좌표를 담은 state인 clickedCell에 some함수를 적용해 state안에 칸의 좌표값과 현재 오목칸의 위치가 같으면 돌의 색이 바뀌도록 코딩했다.

    const encodeGameBoard = () => {
        return col.map((i) => {
           return col.map((j) => {
              return clickedCell.some((e) => e.i === i && e.j === j)
                ? color === 'black' ? '1' : '2' : '0';
        }).join("")}).join("/");
    }

    // post로 데이터 보내기
    axios.post("https://jsonplaceholder.typicode.com/posts", { // 임시 서버
...생략
      situation : encodeGameBoard(),
    })
 ...생략

 아래는 결과값인데 첫번째문제로 situation 값만 한타임 늦게 동작한다. 사진처럼 처음 흑돌을 뒀을 때 situation에 10000../ 식으로 찍혀야하는데 그 결과값은 두번째부터 차례로 나오고 있다. 두번째 문제로는 돌을 둘 때마다 전체 오목판 돌의 색에 영향을 미친다.

 두번째 문제는 각각의 클릭한 돌의 좌표를 인식하지 못해 생기는 문제이다. 위 코드에서 삼항 연산자 부분의 color값을 앞서 흑/백으로 번갈아 바꿀 때  domSelector을 사용해 짰던 코드를 그대로 넣었더니 색은 정상적으로 바뀌었다ㅎㅎ 아래 코드이다.

return clickedCell.some((e) => e.i === i && e.j === j)
                ? document.getElementById(`cell-${i}-${j}`).style.background === 'black' ? '1' : '2' : '0';

 

 첫번째 문제때문에 사실 엄청 많은 시간을 들여서 계속 코드를 짰었다.. ㅠㅜ 드디어 해결했는데 답은 생각보다 간단하게 구현 가능한 문제였다는..  일단 위 코드에서 굳이 clickedCell state 조건식 부분이 필요하지 않다는 걸 알게되 생략하고 삼항 연산자 조건식을 if문 조건식으로 바꿨더니 정상적으로 동작했다 ㅎㅎ 아래는 완성 코드!

    const encodeGameBoard = () => {
        return col.map((i) => {
           return col.map((j) => {
              {
                if(document.getElementById(`cell-${i}-${j}`).style.background == 'black' ){
                  return '1'
                }else if(document.getElementById(`cell-${i}-${j}`).style.background == 'white'){
                  return '2'
                }else{
                  return '0'
                }
              }
        }).join("")}).join("/");
    }

 

아래는 정상적으로 클릭한 셀에 따라서 오목판 상황이 출력되는 화면이다. gif는 잘 안보여서 아래 동영상 첨부했다