• Public

  • Public
  • Network
  • Groups
  • Featured
  • Popular
  • People

Screenshot of web page (detail, cont.): rows[data.rowIndex][data.columnIndex]++ if (rows[data.rowIndex][data.columnIndex] === colours.length) { rows[data.rowIndex][data.columnIndex] = 0 } page.everyone.send(kitten.html` <${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} /> `) }) } Listens for pixel updates, validates data, updates the grid, and sends the updated pixel state to everyone connected. Pixel component const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) => kitten.html` <button id='pixel-${rowIndex}-${columnIndex}' aria-label='pixel-${rowIndex}-${columnIndex}' name='pixel' style=' background-color: ${colours[pixelColourIndex]}; top: calc(5% * ${rowIndex}); left: calc(5% * ${columnIndex}); ' connect data='{rowIndex: ${rowIndex}, columnIndex: ${columnIndex}}' morph ></button> ` Defines a button element representing a pixel, styled according to