30:[] 2e:{"title":"Hello, Croquet!","cells":[{"id":0,"value":"# Hello, Croquet!","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"Docs https://croquet.io/docs/croquet/tutorial-1_1_hello_world.html","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"Inspired by https://twitter.com/codefrau/status/1526618716602937345","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"embed(`

My company @CroquetIO announced #MicroverseBuilder today.

Each microverse is "just" a static web page that you can deploy anywhere, but it is fully 3D multiplayer, and can be live-coded. Portals show and link to other developer's worlds.
1/https://t.co/IDtBTN7VH4
— Vanessa🦩hiring JS DevRel (@codefrau) May 17, 2022

`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"You must get your own apiKey and use Observable's [Secrets](https://observablehq.com/@observablehq/secrets) to use it. Fork this Notebook and add a secret called \"apiKey\". You can get a key here --> https://croquet.io/keys/","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"C = require(\"@croquet/croquet@1.0\").catch(e => window.Croquet)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"class MyModel extends C.Model {\n init() {\n this.count = 0;\n this.subscribe(\"counter\", \"reset\", this.resetCounter);\n this.future(1000).tick();\n }\n\n resetCounter() {\n this.count = 0;\n this.publish(\"counter\", \"changed\");\n }\n\n tick() {\n this.count++;\n this.publish(\"counter\", \"changed\");\n this.future(1000).tick();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"MyModel.register(\"MyModel\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"class MyView extends C.View {\n constructor(model) {\n super(model);\n this.model = model;\n countDisplay.onclick = event => this.counterReset();\n this.subscribe(\"counter\", \"changed\", this.counterChanged);\n this.counterChanged();\n }\n\n counterReset() {\n this.publish(\"counter\", \"reset\");\n }\n\n counterChanged() {\n countDisplay.textContent = this.model.count;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"appId = 'com.gmail.triptych.microverse';","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"name = C.App.autoSession();","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"password = C.App.autoPassword();","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"apiKey = \"1rix6FFjJlghdFLbJN6p47xIu4e5NH4ooNPl6gKDA\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"C.Session.join({\n apiKey: apiKey, \n appId, \n name, \n password, \n model: MyModel, view: MyView});","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"countDisplay = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"## Scripts","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"import { embed } from \"@jerryjappinen/embed\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}