2b:null 2c:["$","title",null,{"children":"State Machine - Traffic Lights | Yiyi Sun | Observable"}] 31:[] 2f:{"id":"7127b1cbb344bd35","slug":"state-machine-traffic-lights","title":"State Machine - Traffic Lights","thumbnail":"7b513fee733896b05944c4978f4b4644555bb4ad86079d7bf4575125b5fd6eab","access_level":"public","create_time":"$D2020-03-15T19:55:14.204Z","update_time":"$D2021-05-27T12:42:17.881Z","view_time":null,"first_public_time":"$D2020-03-15T22:02:37.950Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":"starter_2024"},"version":128,"publish_version":128,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null}],"members":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"State Machine - Traffic Lights","cells":[{"id":0,"value":"md`# State Machine - Traffic Lights`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"{\n window.setInterval(() => { app.run('next_step') }, 1000);\n const element = document.createElement('div');\n app.start(element, state, view, {next_step});\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"state_machine = ({\n red: ['green1', 10000],\n green1: ['yellow1', 3000],\n yellow1: ['green', 10000],\n green: ['yellow2', 5000],\n yellow2: ['red', 15000],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"state = ({\n sm_state: 'red',\n start: new Date().getTime(),\n delta: 10000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"view = jsx`\n\n({sm_state, start, delta }) => <>\n \n

{((delta - new Date() + start) / 1000).toFixed(0)}

\n;\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"next_step = state => {\n let {sm_state, start, delta } = state;\n if ((new Date().getTime() - start) < delta) return state;\n const transition = state_machine[sm_state];\n if (transition) {\n sm_state = transition[0];\n start = new Date().getTime();\n delta = transition[1];\n return {sm_state, start, delta}\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"import {app, jsx} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"