Step 2

지뢰 심고 테이블 꾸미기

reducer 함수에 액션으로 START_GAME이 날아왔을 경우

실행되는 plantMine함수를 정의 한다.

그전에 코드를 더 알아보기 쉽게 하기 위해 지뢰 상태 코드 먼저 작성해놓는다.

MineSearch.jsx

export const CODE = {
    MINE: -7, // 지뢰
    NORMAL: -1, // 일반
    QUESTION: -2, // 물음표
    FLAG: -3, // 깃발
    QUESTION_MINE: -4, // 지뢰 있는 칸의 물음표
    FLAG_MINE: -5, // 지뢰 있는 칸의 깃발
    CLICKED_MINE: -6, // 지뢰 클릭
    OPENED: 0 // 정상적으로 오픈한 칸 -> 0 이상이면 전부 오픈
};

const plantMine = (row, cell, mine) => {
    const data = [];
    const shuffle = [];
    // 난수 생성 후 셔플 리스트에 넣어주기
    let i = 0;
    while (i < mine) {
        const chosen = Math.floor(Math.random() * (row*cell))
        if (shuffle.includes(chosen) === false) {
            shuffle.push(chosen);
            i++;
        }
    }
    
    // 데이타 맵을 전부 노멀로 초기화
    for (let i = 0; i < row; i++) {
        const rowData = [];
        data.push(rowData);
        for (let j = 0; j < cell; j++) {
            rowData.push(CODE.NORMAL);
        }
    }

    // 가로 세로 계산해서 지뢰 심기
    for (let k = 0; k < shuffle.length; k++) {
        const ver = Math.floor(shuffle[k] / cell);
        const hor = shuffle[k] % cell;
        data[ver][hor] = CODE.MINE;
    }
    
    return data;
}

여기까지 하면

이런 식으로 찍힌다 -1은 일반이고 -7이 지뢰

이제 테이블을 좀 꾸며주겠다.

App.css

table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  width: 40px;
  height: 40px;
  text-align: center;
}

테이블 스타일에 이렇게 추가해주고

Td.jsx

const Td = ({ rowIndex, cellIndex }) => {
    const { tableData } = useContext(TableContext);
    
    return (
        <td
            style={getTdStyle(tableData[rowIndex][cellIndex])}
        >{getTdText(tableData[rowIndex][cellIndex])}
        </td>
    )

}

export default Td;

Td를 이렇게 변경해준다.

const getTdStyle = (code) => {
    switch (code) {
        case CODE.NORMAL:
        case CODE.MINE:
            return {
                background: '#444',
            };
        case CODE.OPENED:
            return {
                background: 'white',
            };
        default:
            return {
                background: 'white',
            };
    }
};

const getTdText = (code) => {
    switch (code) {
        case CODE.NORMAL:
            return ' ';
        case CODE.MINE:
            return 'X';
        default:
            return ' ';
    }

};

저 두 함수는 이와 같이 스위치문을 통해 스타일과 텍스트를 부여해준다.

여기까지 하면