React

by brigand

HTML

<div id="app"></div>

CSS

section {
  display: grid;
  grid-template-columns: 5em 5em 5em;
  margin: 1em auto;
}

section > * {
  height: 5em;
}


section > empty{
  background: #c9c9c9;  
}
section > filled {
  background: #696969;
}

React

function Game() {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  
  return lines.map(line => {
  const board = Array.from({ length: 9}, (x, i) => line.includes(i) ? <filled /> : <empty />);
  
  return <section>{board}</section>
  })
}

ReactDOM.render(<Game />, document.querySelector("#app"))