Back

Alt text for third image (code listing) is here to due to arbitrary character limit on alt text in Mastodon:

Source code of Reaction.fragment.js:

/**
Simple Reactions control.
*/
// @ts-check
import kitten from '@small-web/kitten'

// Initialise database if necessary.
if (kitten.db.reactions === undefined) { kitten.db.reactions = {} }
if (kitten.db.reactions.Heart === undefined) { kitten.db.reactions.Heart = 0 }
if (kitten.db.reactions.Confetti === undefined) { kitten.db.reactions.Confetti = 0 }
if (kitten.db.reactions.Smiley === undefined) { kitten.db.reactions.Smiley = 0 }

export default class Reactions extends kitten.Page {
html () {
return kitten.html`
<div id='reactions' morph>
<page css>
<${Button.connectedTo(this, {Icon: kitten.icons.h.Heart})} />
<${Button.connectedTo(this, {Icon: kitten.icons.c.Confetti})} />
<${Button.connectedTo(this, {Icon: kitten.icons.s.Smiley})} />
<style>
button { background: var(--background-alt); }
button:hover { background: var(--background); }
#reactions { display: flex; }
.reaction { display: flex; flex-direction: column; align-items: center; font-size: 2em;}
</style>
</div>
`
}

/** @param {{ type: string }} data */
onReaction (data) {
kitten.db.reactions[data.type]++
this.update()
}
}

class Button extends kitten.Component {
html ({ Icon }) {
const iconName = this.data.Icon.name
return kitten.html`
<div class='reaction'>
<button
name='reaction'
data='type:"${iconName}"'
connect
>
<${this.data.Icon}
weight=duotone
alt=${iconName}
colour=deeppink
>
<title>${iconName}</title>
</>
</button>
${kitten.db.reactions[iconName]}
</div>
`
}
}