30:[] 2e:{"title":"Martien’s Timer","cells":[{"id":461,"value":"md`# Martien’s Timer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`\n\n

${seconds.toLocaleString()}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"{\n let e = html``;\n let lastKeyTimeStamp = 0;\n e.addEventListener(\"keyup\", event => {\n let gap = new Date().getTime() - lastKeyTimeStamp;\n let isDigit = (event.key.match(/[0-9]/) != null);\n let sameNumber = (isDigit && gap < 500);\n if (isDigit) {\n mutable number *= sameNumber ? 10 : 0;\n mutable number += +event.key;\n } else switch (event.key) {\n case \" \": mutable running = !mutable running; break;\n case \"m\": mutable scalar = 60; break;\n case \"s\": mutable scalar = 1; break;\n case \"r\": mutable number += 0; break; // 's' and 'm' have same effect since they change variable scalar\n case \"Escape\": e.value = \"\"; break;\n }\n lastKeyTimeStamp = new Date().getTime();\n });\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`Very simple timer to timebox activities during workshops.\n\n**To control the timer, make sure the text field has the input focus.**\n\n|Key | Action |\n|---------|--------------------------|\n| [0-9]+ | set timeout |\n| m | input timeout in minutes |\n| s | input timeout in seconds |\n| *space* | pause/resume timer |\n| r | restart |\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof fontsize = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`Play around with some fonts. Please note that these fonts need to be present on your device in order to display correctly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof font = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`# Kudos\nKudos for helpful suggestions and making things flow again to:\n* [Tom MacWright](https://beta.observablehq.com/@tmcw) for [getting and parsing keyboard input](https://beta.observablehq.com/d/2d2ade48826ccc88).\n* [Kelly van Evert](https://talk.observablehq.com/u/kelleyvanevert)’s reply on [A bit confused about ‘mutable’, etc](https://talk.observablehq.com/t/a-bit-confused-about-mutable-etc/721) about using \\`\\`mutable\\`\\` to not re-evaluate cells which now keeps the \\`\\`DOM.input()\\`\\` current.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"md`## Developer notes\nPlease see [Keyboard input](https://beta.observablehq.com/@martien/keyboard-input) about some quirks and gotchas I ran into while trying to create a very simple keyboard input parser.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"md`# Engine Room`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"mutable running = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"mutable number = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"mutable scalar = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"mutable seconds = number * scalar","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"ticktock = {\n yield seconds;\n while (running && seconds > 0) {\n yield Promises.tick(1000).then(() => seconds);\n mutable seconds--;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}