• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

Screenshot of web page (detail, cont.): its colour and position. Canvas component const Canvas = () => kitten.html`${ rows.map((row, rowIndex) => row.map((pixelColourIndex, columnIndex) => kitten.html` <${Pixel} rowIndex=${rowIndex} columnIndex=${columnIndex} pixelColourIndex=${pixelColourIndex} /> `)) }` Renders the entire grid by mapping over each row and column, creating Pixel components. Styles component const Styles = () => kitten.css` [name='pixel'] { position: fixed; width: 5%; height: 5%; border: 0; } ` Applies CSS styles to the pixel buttons to size and position them correctly. Main export export default () => kitten.html` <page title='Draw Together'>