Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:
https://ar.al/2024/03/26/draw-together/
Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
(The full source and explanations fit the four screenshots on this post.)
¹ https://draw-together.small-web.org
² https://kitten.small-web.org
#Kitten #DrawTogether #web #design #dev #SmallWeb #WebSockets #StreamingHTML
![Screenshot of web page (detail, start of Source Code section) at URL https://ar.al/2024/03/26/draw-together/:
Source code
The code sets up a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
Here’s a breakdown of the entire source code, detailing what each section does:
Create 20×20 pixel grid
const rows = new Array(20).fill().map(row => new Array(20).fill(0))
const colours = ['white', 'black']
Creates a 20x20 grid initialized with zeros. Each cell will store an index corresponding to the colours array.
Validation function
const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1
Checks if the data object has valid rowIndex and columnIndex within grid bounds.
Handle connections and pixel updates
export function onConnect ({ page }) {
page.on('pixel', data => {
if (!isValid(data)) return](https://friendica.hellquist.eu/photo/preview/640/3301105 "Screenshot of web page (detail, start of Source Code section) at URL https://ar.al/2024/03/26/draw-together/:
Source code
The code sets up a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
Here’s a breakdown of the entire source code, detailing what each section does:
Create 20×20 pixel grid
const rows = new Array(20).fill().map(row => new Array(20).fill(0))
const colours = ['white', 'black']
Creates a 20x20 grid initialized with zeros. Each cell will store an index corresponding to the colours array.
Validation function
const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1
Checks if the data object has valid rowIndex and columnIndex within grid bounds.
Handle connections and pixel updates
export function onConnect ({ page }) {
page.on('pixel', data => {
if (!isValid(data)) return")
![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](https://friendica.hellquist.eu/photo/preview/640/3301107 "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")
![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'>](https://friendica.hellquist.eu/photo/preview/640/3301109 "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'>")
Draw Together
Join me as I take you through building Draw Together – a little collaborative drawing toy I made and released over the weekend – from scratch.Aral Balkan
Alan Levine
in reply to Aral Balkan • • •Aral Balkan
in reply to Alan Levine • • •In memory.
Although it could if I wanted to using the integrated JSDB in Kitten :)
https://kitten.small-web.org/tutorials/persistence/
Alan Levine
in reply to Aral Balkan • • •