// elements in dom
const playerNameInput = document.getElementById('playerNameInput')
const playerGrid = document.getElementById('playerGrid')

const player = {
    name: localStorage.getItem('playerName') || '',
}

// init
playerNameInput.value = player.name
for (let i = 0; i < 100; i++) {
    const cell = document.createElement('span')
    cell.classList.add('cell')
    playerGrid.appendChild(cell)
}

function start() {
    const playerName = playerNameInput.value.trim()
    if (playerName === '') {
        alert('Please enter your name!')
        playerNameInput.value = player.name || ''
        playerNameInput.focus()
    } else {
        player.name = playerName
        localStorage.setItem('playerName', playerName)
        console.info(`player ${playerName} is starting a game`)
    }
}

for (let ship of document.querySelectorAll('.ship')) {
    ship.addEventListener('click', (e) => {
        e.preventDefault()
        console.log(e)
        e.target.classList.toggle("v")
    })
}