import { $, size_info } from './utils.js'


// 渲染棋盘
function render_checkerboard(mode) {
    const game = $('#game')
    const info = size_info[mode]

    game.className = mode
    game.style.width = (info.size - 1) * info.side + 'px'
    game.style.height = (info.size - 1) * info.side + 'px'
    game.innerHTML = '<div class="square"></div>'.repeat((info.size - 1) ** 2)
}

// 渲染所有棋子
function render_piece(row, col, side, color) {
    const game = $('#game')
    const div = document.createElement('div')
    let cls
    if (color === 1) cls = 'piece black'
    else cls = 'piece white'

    div.className = cls
    div.style.left = col * side - 0.5 * (side - 10) + 'px'
    div.style.top = row * side - 0.5 * (side - 10) + 'px'
    game.appendChild(div)

}

export { render_checkerboard, render_piece }