FOxGlove webGL

import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

//B - bomb
//
//E - 
//N - adjacent squares 


let turn = 0

let board = new Array(9).fill(9).map(function (d, col) {
  return  new Array(9).fill(9).map((d, row)=> {
    return {
      contents: Math.random() > .1 ? 'E' : 'B', //or B
      revealed: false,
      col: row,
      row: col
    }
  })
})


board.forEach((stuff,row) => {
  stuff.forEach((cell, col) => {
    cell.neighbors = getNeighbors(row, col).filter(d => { return d.contents === 'B'}).length
  })
}) 

console.log(board)
function handleClick(cell, col, row) {
  cell.revealed = true 
  if (cell.contents === 'B') return console.log ('you lose')
  //if (cell.contents === 5) return 

  //reveal contentes of neigborings cells or number
  let neighbors = getNeighbors(col, row)
  console.log(neighbors)
  cell.contents = cell.neighbors
  //if (cell.contents === 0) cell.contents = 'E'
  
  neighbors.forEach(floodFill)
}

//function (cell) {
//   if (cell.contents ==='B')return;
//   cell.contents = cell.neighbors

//   if (cell.neighbors === 0) cell.contents = '';
//   cell.revealed = true 
//  if (cell.neighbors === 0) floodFill(cell)
// }

function floodFill(cell) {

    if (cell.contents ==='B')return cell.contents = 'B'
    if (cell.neighbors > 0)  cell.contents = cell.neighbors
    if (cell.revealed) return
    cell.revealed = true

    if (cell.neighbors === 0) cell.contents = '';

    if (cell.neighbors === 0) getNeighbors(cell.row, cell.col).forEach(floodFill)
    //if (cell.neighbors === 0) floodFill(cell)
  //getNeighbors(cell.row, cell.col).forEach()
}


function getNeighbors (row, col) {
  let list = []
  let stuff = 0
 
  for (var i = -1; i < 2; i++) {
    for (var j = -1; j < 2; j++) {
      if (!i && ! j) continue
      list.push(board[row+i]?.[col+j])
      //console.log(i, j)
      stuff++
    }
  }
  console.log(list.length)
  return list.filter(d => d)
}


function makeBoard (n, nextTurn) {



const hello = board.map((row, i) => {
  return row.map((cell, j) => {
    let style = {'position': 'absolute',
              'top': `${i * 25}px`,
              'left': `${j  * 25}px`
      };
      return (<div 
        style={style}
      
      onClick={ () => {handleClick(cell, i, j);nextTurn(turn++)  ; } }>
        {cell.revealed ? cell.contents : 'U'}
      </div>)
    })
  })
  return (<div>{hello}
  </div>)
}

function App() {
  let [turn, nextTurn] = useState(0)
  console.log('board update', turn)
  return (
    <div className="App">
      {makeBoard(9, nextTurn)}
    </div>
  );
}

export default App;