Step 2

地雷を植えてテーブルを飾る

START GAMEが動作としてreduce関数に飛び込んだ場合
実行する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 ' ';
    }

};

この2つの関数は、スイッチドアを介してスタイルとテキストを付与します.
ここまで言うと.