I made separate buttons so that the button xml and function was not mixed up with something else.

```
..
\${kitten.db.Data.CardSpread.map(card => kitten.html`
    <button name='reveal' connect data=\${'{value: '+card.index+'}'}>
    Choose \${card.index}
    </button>
`)}
..
```

that unfortunate `<div />` is probably apocryphal but at some point it made my page load during development. Unfortunately, in my local environment I have to reload the browser to see the changes. Three steps forward, one step back as they say. My browser says `response.replace is not a function` and I do not know what it wants from me. Reloading the page still updates it, and the application database updates correctly ;_;.

On that note, that weird looking button named `reveal` *xml* parameterization implies this function exists to perform the update and send sanitized updated html back:

```
export function onReveal (data) {
    let idx = data.value - 1;
    let cur1 = kitten.db.Data.cursors[0];
    let cur2 = kitten.db.Data.cursors[1];

    if (! (cur1 == 'nothing'))
    { if (! (cur2 == 'nothing'))
      { if (! (kitten.db.Data.CardSpread[cur1].front
	       == kitten.db.Data.CardSpread[cur2].front))
	{ kitten.db.Data.CardSpread[cur1].visible = 'no';
	  kitten.db.Data.CardSpread[cur2].visible = 'no';
	}}}

    if (cur1 == 'nothing') { kitten.db.Data.cursors[0] = idx;
			   } else { if (cur2 == 'nothing')
				    { kitten.db.Data.cursors[1] = idx; }
				    else { kitten.db.Data.cursors[0] = idx;
					   kitten.db.Data.cursors[1] = 'nothing';}}
    
    kitten.db.Data.CardSpread[idx].visible = 'yes';

    this.send(kitten.html`<\${MemoryCards} />`);
}
```