2c:null 2d:["$","title",null,{"children":"Multiplayer Cursors | Tom Larkworthy | Observable"}] 32:T49a,md`# Multiplayer Cursors I love the shared cursor thing Miro has. This is kind of similar except it doesn't work at the document level as their is no consistency between layouts across devices. Miro works because it has a fixed layout (with independent zoom levels). Still, it is a very cool effect and combined with [@tomlarkworthy/shareview](https://observablehq.com/@tomlarkworthy/shareview) that allows controls to be synchronized between viewers you can kind of figure out what the other person is doing. ### Conclusion Database overhead peaked at 11% with 10 concurrent users. We should maybe try to be a little more effecient (max publish rate). No-pne cursors line up becuase layouts differ, so some kinda of relative positioning might be better if we want to stick with a general solution. Cursers that are backgrounded for a while get flooded with updates when going back online, the full history is replayed which seems suboptimal. Ideally we should disconnect the server and reconnect. (the person is not really there) We were suffering from zombie cursers due to https://github.com/firebase/firebase-js-sdk/issues/174 but that seems to be fixed 2022-08-11 `33:[] 30:{"id":"53eb7f99b9612b54","slug":"multiplayer-cursors","title":"Multiplayer Cursors","thumbnail":"d5056e6fa8ed3e34ec19b1a6054029c8278f2eef77ab28a7fe8d0164e5f43e9d","access_level":"public","create_time":"$D2021-05-14T10:16:32.800Z","update_time":"$D2022-08-12T05:39:40.612Z","view_time":null,"first_public_time":"$D2021-05-14T20:20:10.976Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","bio":"Tech Lead at Taktile.\nFormerly Firebase, Google"},"version":601,"publish_version":601,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"bio":"Tech Lead at Taktile. ex Firebase, Google.\n🦋 larkworthy.bsky.social"}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[{"id":"3c2c6abddb8c75e6","reply_to_id":null,"content":"I'm getting a parentNode error from this cell...","create_time":"$D2021-05-14T20:36:14.740Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"7fa1af5a7b2e16eb","reply_to_id":"3c2c6abddb8c75e6","content":"in Safari and Chrome.","create_time":"$D2021-05-14T20:36:23.290Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"aaa7a1b8983bf685","reply_to_id":null,"content":"hue range is 0..360 (not 255), and you can safely use higher values","create_time":"$D2021-05-15T10:20:40.239Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"08dd309e97364cea","reply_to_id":"aaa7a1b8983bf685","content":"Done!","create_time":"$D2021-05-15T10:42:51.996Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d00b7aa83811f066","slug":"ui","title":"ui","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"titling":"auto","title":"Multiplayer Cursors","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html`

Online now

\n${entry.device}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`## Try some controls out!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`Normal controls can be interacted with bot the other people all have different views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"Range([0, 100], { label: \"unshared control\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`If we use [@tomlarkworthy/shareview](https://observablehq.com/@tomlarkworthy/shareview) this control we update for everybody`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof shared = Range([0, 100], { label: \"shared control\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"share(\"shared\", viewof shared)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"online = listen(onlineRef, {\n includeId: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"mutable devices = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"syncDevices = {\n const current = online.map(r => r._id);\n if (!_.isEqualWith(devices, current)) {\n mutable devices = current;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"onlineRef = db.ref(\n `/shareinput/${FKEY.encode(html``.href.split('?')[0])}/online`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"meRef = {\n if (!devices.includes(device)) {\n const meRef = onlineRef.child(device);\n meRef.onDisconnect().set(null);\n meRef.set({\n device\n });\n }\n return onlineRef.child(device);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"syncPointers = {\n online.forEach((player) => {\n if (pointers[player.device]) {\n const rect = pointers[player.device].parentNode.getBoundingClientRect();\n pointers[player.device].style.left = player.x;\n pointers[player.device].style.top = player.y;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"updateMyMouse = {\n const pointermoved = e => {\n const rect = pointers[device].parentNode.getBoundingClientRect();\n meRef.set({\n device,\n x: e.clientX - rect.left,\n y: e.clientY - rect.top\n });\n };\n document.addEventListener(\"pointermove\", pointermoved);\n invalidation.then(() => {\n document.removeEventListener(\"pointermove\", pointermoved);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"enableLogging = firebase.firebase_.database.enableLogging(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`### Graphics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof pointers = {\n const svgs = devices.reduce((acc, device) => {\n acc[device] = pointer(device);\n return acc;\n }, {});\n\n const ui = html`