30:T3e03,html``31:[] 2e:{"title":"Keyboard state","cells":[{"id":0,"value":"md`# Keyboard state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`Puts the keyboard state into a reactive object. You need to give focus to something that's not a code cell in order to try it. The keyboard depiction below is not complete, it works only for SPACE and the arrow keys.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof keys = keyboard()","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"keys","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`TBD: complete highlighting code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"keyboard = () => {\n let node = html`

Keyboard

`\n node.value = {}\n \n window.addEventListener('keydown', (e) => {\n node.value[e.key] = true\n node.dispatchEvent(new CustomEvent('input'))\n })\n \n window.addEventListener('keyup', (e) => {\n delete node.value[e.key]\n node.dispatchEvent(new CustomEvent('input'))\n })\n \n return node\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}