2e:null 2f:["$","title",null,{"children":"Gamepad API | senritsu | Observable"}] 34:[] 32:{"id":"1f192b0643bef88c","slug":"gamepad-api","title":"Gamepad API","thumbnail":"be60d592465cd92e3edd455eef69d99c6011caebc9f63d723105d900c5e33c6a","access_level":"public","create_time":"$D2022-06-07T05:19:05.404Z","update_time":"$D2022-06-07T07:04:30.108Z","view_time":null,"first_public_time":"$D2022-06-07T07:03:46.058Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":109,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"83e62ed18587ec1b","slug":"library","title":"Library","owner":{"id":"c62aba2ac21021cb","login":"senritsu","name":""}},"type":"notebook","body":{"title":"Gamepad API","cells":[{"id":0,"value":"# Gamepad API\n\nPress a button or move an axis on a controller to allow the page to discover connected gamepads.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"gamepads = Generators.observe(change => {\n const gamepads = {}\n\n const setup = () => {\n window.addEventListener('gamepadconnected', onConnected)\n window.addEventListener('gamepaddisconnected', onDisconnected)\n }\n\n const onConnected = event => {\n const {id, index, buttons, axes} = event.gamepad\n gamepads[event.gamepad.index] = {id, index, buttonCount: buttons.length, axisCount: axes.length}\n change(gamepads)\n }\n\n const onDisconnected = event => {\n delete gamepads[event.gamepad.index]\n change(gamepads)\n }\n\n const cleanup = () => {\n window.removeEventListener('gamepadconnected', onConnected)\n window.removeEventListener('gamepaddisconnected', onDisconnected)\n }\n\n change(gamepads)\n setup()\n \n return cleanup\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"reactiveButtons = {\n let liveGamepads\n const getButtonInformationReducer = (lookup, [index, gamepad]) => {\n lookup[index] = liveGamepads[index].buttons\n return lookup\n }\n \n while (true) {\n liveGamepads = navigator.getGamepads()\n const info = Object.entries(gamepads).reduce(getButtonInformationReducer, {})\n yield info\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"function getButtonPressed(gamepadIndex, buttonIndex) {\n return !!(reactiveButtons[gamepadIndex] && reactiveButtons[gamepadIndex][buttonIndex]?.pressed)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"htl.html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"visualizedButtons = {\n const rows = Object.keys(gamepads).length + 1\n const columns = Math.max(...Object.values(reactiveButtons).map(x => x.length)) + 1\n\n const renderHeader = () => Array.from({length: columns}).map((_, i) => htl.html.fragment`${i || ''}`)\n const renderButton = button => htl.html.fragment`${button.pressed ? '⚫' : '⚪'}`\n const renderButtonStates = (index) => reactiveButtons[index].map(renderButton)\n\n const renderGamepadRow = gamepad => htl.html.fragment`\n[${gamepad.index}] ${gamepad.id}\n${renderButtonStates(gamepad.index)}\n`\n const renderGamepads = () => Object.values(gamepads).map(renderGamepadRow)\n \n return htl.html`\n

\n${renderHeader()}\n${renderGamepads()}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n const play = async (index, duration) => {\n const gamepad = navigator.getGamepads()[index]\n\n if (!gamepad) return\n \n gamepad.vibrationActuator.playEffect(gamepad.vibrationActuator.type, {\n startDelay: 0,\n duration,\n strongMagnitude: 1,\n weakMagnitude: 1\n })\n \n return new Promise(resolve => setTimeout(resolve, duration))\n }\n\n const pause = (duration) => new Promise(resolve => setTimeout(resolve, duration))\n \n const playSequence = index => async () => {\n for (let i = 0; i < 10; ++i) {\n await play(index, 30)\n await pause(30)\n }\n for (let i = 0; i < 5; ++i) {\n await play(index, 90)\n await pause(30)\n }\n\n for (let i = 0; i < 5; ++i) {\n await play(index, 40)\n await pause(80)\n }\n }\n \n return htl.html`${Object.keys(gamepads).map(index => htl.html``)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"