30:T65a,scene_main = async () => { console.log("main scene!") //await k.loadSprite("wall", await basicTiles.file("tile000.gif").url()) //await loadSprites(); console.log("wall", k.sprite("wall")) // k.add([ // k.sprite("wall"), // k.scale(k.width()/720, k.height()/720), // ]); const map = k.addLevel(levels[0], { width: 16, height: 16, pos: k.vec2(0,0), "#": () => [ k.sprite("wallside"), k.solid(), k.area() ], "w": () => [ k.sprite("walltop"), k.solid(), k.area() ], "t": () => [ k.sprite("walltopcorner"), k.solid(), k.area() ], "b": () => [ k.sprite("wallbottomcorner"), k.solid(), k.area() ], ".": () => [ k.sprite("floor"), k.area() ] }); // end map const player = k.add([ k.pos(map.getPos(2, 2)), k.sprite("player"), k.solid(), k.origin("center"), k.area({ width: 16, height: 16, offset: k.vec2(0, 8) }), "player" ]); // end player const SPEED = 220; const dirs = { "left": k.LEFT, "right": k.RIGHT, "up": k.UP, "down": k.DOWN, }; for (const dir in dirs) { // onKeyPress(dir, () => { // dialog.dismiss() // }) k.onKeyDown(dir, () => { player.move(dirs[dir].scale(SPEED)) console.log("player",player); console.log("player pos", player.pos); console.log("MyView:",MyView) const customEvent = new CustomEvent('playermove', { detail: { x: player.pos.x, y: player.pos.y } }); eventPipe.dispatchEvent(customEvent) }) } }31:Tdf9,class MyModel extends Croquet.Model { init() { this.views = new Map(); this.participants = 0; this.history = []; this.entity = { name: "entity", x: 4*16, y: 4*16 } // this.subscribe("entity", "move", this.moveEntity) this.subscribe("entity", "reset", this.resetEntity); this.subscribe(this.sessionId, "view-join", this.viewJoin); this.subscribe(this.sessionId, "view-exit", this.viewExit); this.subscribe("myChar", "updatePos", this.updatePos); this.future(1000).tick() }; updatePos(obj){ this.views.set(obj.id, { nickname: this.views.get(obj.id).nickname, x: obj.x, y: obj.y }); this.publish("viewInfo", "refresh"); } resetEntity() { this.entity.x = 4 * 16; this.entity.y = 4 * 16; this.publish("entity", "changed"); } tick() { this.entity.x += Math.floor(Math.random() * 10) - 5 if(this.entity.x < 0) { this.entity.x = 0 } this.entity.y += Math.floor(Math.random() * 10) - 5 if(this.entity.y < 0) { this.entity.y = 0 } this.publish("entity", "changed"); this.future(1000).tick() } viewJoin(viewId) { const existing = this.views.get(viewId); if (!existing) { const nickname = this.randomName(); this.views.set(viewId, { nickname, x: 16 * 4, y: 16 * 4 } ); } this.participants++; this.publish("viewInfo", "refresh"); } viewExit(viewId) { this.participants--; this.views.delete(viewId); this.publish("viewInfo", "refresh"); } randomName() { const names =["Acorn", "Allspice", "Almond", "Ancho", "Anise", "Aoli", "Apple", "Apricot", "Arrowroot", "Asparagus", "Avocado", "Baklava", "Balsamic", "Banana", "Barbecue", "Bacon", "Basil", "Bay Leaf", "Bergamot", "Blackberry", "Blueberry", "Broccoli", "Buttermilk", "Cabbage", "Camphor", "Canaloupe", "Cappuccino", "Caramel", "Caraway", "Cardamom", "Catnip", "Cauliflower", "Cayenne", "Celery", "Cherry", "Chervil", "Chives", "Chipotle", "Chocolate", "Coconut", "Cookie Dough", "Chamomile", "Chicory", "Chutney", "Cilantro", "Cinnamon", "Clove", "Coriander", "Cranberry", "Croissant", "Cucumber", "Cupcake", "Cumin", "Curry", "Dandelion", "Dill", "Durian", "Earl Grey", "Eclair", "Eggplant", "Espresso", "Felafel", "Fennel", "Fig", "Garlic", "Gelato", "Gumbo", "Halvah", "Honeydew", "Hummus", "Hyssop", "Ghost Pepper", "Ginger", "Ginseng", "Grapefruit", "Habanero", "Harissa", "Hazelnut", "Horseradish", "Jalepeno", "Juniper", "Ketchup", "Key Lime", "Kiwi", "Kohlrabi", "Kumquat", "Latte", "Lavender", "Lemon Grass", "Lemon Zest", "Licorice", "Macaron", "Mango", "Maple Syrup", "Marjoram", "Marshmallow", "Matcha", "Mayonnaise", "Mint", "Mulberry", "Mustard", "Natto", "Nectarine", "Nutmeg", "Oatmeal", "Olive Oil", "Orange Peel", "Oregano", "Papaya", "Paprika", "Parsley", "Parsnip", "Peach", "Peanut Butter", "Pecan", "Pennyroyal", "Peppercorn", "Persimmon", "Pineapple", "Pistachio", "Plum", "Pomegranate", "Poppy Seed", "Pumpkin", "Quince", "Raspberry", "Ratatouille", "Rosemary", "Rosewater", "Saffron", "Sage", "Sassafras", "Sea Salt", "Sesame Seed", "Shiitake", "Sorrel", "Soy Sauce", "Spearmint", "Strawberry", "Strudel", "Sunflower Seed", "Sriracha", "Tabasco", "Tahini", "Tamarind", "Tandoori", "Tangerine", "Tarragon", "Thyme", "Tofu", "Truffle", "Tumeric", "Valerian", "Vanilla", "Vinegar", "Wasabi", "Walnut", "Watercress", "Watermelon", "Wheatgrass", "Yarrow", "Yuzu", "Zucchini"]; return names[Math.floor(Math.random() * names.length)]; } }32:Taf2,class MyView extends Croquet.View { constructor(model) { super(model); this.model = model; this.subscribe("entity", "changed", this.entityChanged); document.getElementById('btn-entity-reset').addEventListener("click", (event)=> this.entityReset()) resetHtml.addEventListener("click", (event)=> { console.log("myview entity reset") this.entityReset(); }) eventPipe.addEventListener('playermove', (event) => { console.log("eventpipe event detail x", event.detail.x); console.log("eventpipe event detail y", event.detail.y); console.log(" eventpipe model", this.model) // this.model.views.set(this.viewId, { // nickname: this.model.views.get(this.viewId).nickname, // x: event.detail.x, // y: event.detail.y // }); // this.publish("viewInfo", "refresh") this.publish("myChar", "updatePos", { id: this.viewId, x: event.detail.x, y: event.detail.y }) }); // this.subscribe("history", "refresh", this.refreshHistory); this.subscribe("viewInfo", "refresh", this.refreshViewInfo); // kick things off this.refreshViewInfo(); this.entityChanged(); } entityReset() { this.publish('entity', 'reset') } entityChanged() { let localX = this.model.entity.x; let localY = this.model.entity.y document.getElementById('entity-x').textContent = localX document.getElementById('entity-y').textContent = localY if( mutable entity) { console.log("entity x, y", {localX, localY}) mutable entity.moveTo(localX, localY) } } refreshViewInfo() { let me = this.model.views.get(this.viewId) console.log( "me nickname:", me.nickname); console.log( "me x", me.x); console.log( "me y", me.y); console.log( "participants:", this.model.participants) if(this.model.participants > 1){ console.log("model.participants:", this.model.participants); console.log('mutable other', mutable other); if(!mutable other){ loadOther(); } for (const el of this.model.views) { if(el[0] == this.viewId){ console.log("viewId match, skip") } else { mutable other.moveTo(el[1].x, el[1].y) } } } // if(this.model.participants > 1){ // for( const el of this.model.views) { // console.log("el", el); // console.log("this.viewId", this.viewId) // if(el[0] != this.viewId){ // console.log("in other el") // if(!other) { // console.log('no other') // // loadOther(); // } // if(other) { // other.moveTo(el[1].x,el[1].y) // } // } // } // } } }33:[{"id":"e10f6b39bbf2e3f566b27df2d6515d2e2cb1e95309bcf793e19ece4fd25a3447c829aacb0a74e4ae0f482522b20631a2f3e6ffb2642e37bb8b3fb7df9cf057d2","href":"https://static.observableusercontent.com/files/e10f6b39bbf2e3f566b27df2d6515d2e2cb1e95309bcf793e19ece4fd25a3447c829aacb0a74e4ae0f482522b20631a2f3e6ffb2642e37bb8b3fb7df9cf057d2","name":"ezgif-4-bbb5424a18-png-16x16-sprite-gif.zip","type":"application/zip","lastModified":1655072227356.001,"size":25330},{"id":"05bd9b2e5379fd20738e334cbb5613bffe4d8aade710a1024121e5091f830773331208f117e2b887a17c390c283aecd7995f0d141a03a96d4589574a3e7a1cb0","href":"https://static.observableusercontent.com/files/05bd9b2e5379fd20738e334cbb5613bffe4d8aade710a1024121e5091f830773331208f117e2b887a17c390c283aecd7995f0d141a03a96d4589574a3e7a1cb0","name":"ezgif-4-96df7444d2-png-16x16-sprite-gif.zip","type":"application/zip","lastModified":1655072220068.283,"size":29640},{"id":"20f6540ef58c73ca702d903eaef2c483115688593188ed804e706d839bbd7905bf93c66ca73ae5aef98707e77962eae399f59edc6774f9240cd00cca1d39188f","href":"https://static.observableusercontent.com/files/20f6540ef58c73ca702d903eaef2c483115688593188ed804e706d839bbd7905bf93c66ca73ae5aef98707e77962eae399f59edc6774f9240cd00cca1d39188f","name":"ezgif-4-26b3cba000-png-16x16-sprite-gif.zip","type":"application/zip","lastModified":1655072224348.718,"size":26086}] 2e:{"title":"Oubliette","cells":[{"id":0,"value":"# Oubliette ","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"**Oubliette** is a tiny site where you and a friend can hang out and chat in a private context. Hang out in a randomly generated dungeon with a friend and chat about stuff.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"Create a unique room with a simple query parameter - either a random number like below or any keyword. Just add the query parameter `room=` and share that url with your friend.","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"viewof text = Inputs.text({\n label: \"Room Name\",\n value: Math.floor(Math.random() * 10000000)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"### View","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"view = html`\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"### Codes","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"k = kaboom({\n global: false, // kaboom only via singleton\n width: 160, // 640 / 4 for scale\n height: 128, // 480 / 4 for scale + fudge\n canvas:document.querySelector(\"#o-cnv\"), // can't use DOM.context2D for some reason\n scale: 4, // tiles are small let's zoom\n background: [256,0,256] // temporary background color\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"main = {\n // where the magic happens\n await loadSprites();\n k.scene('main', scene_main);\n\n\n k.go('main');\n\n // Croquet stuff\n MyModel.register(\"MyModel\");\n Croquet.Session.join({\n apiKey: \"1EfNtklMqmAIlv1FjA3bKdBzB4POms450Acc2g7FK\",\n appId: \"com.observablehq.triptych.oubliette\",\n name: \"unnamed\",\n password: \"secret\",\n model: MyModel,\n view: MyView\n }\n )\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"#### Scenes","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"#### Levels","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"levels = [\n [\n `twwwwwwwwt`,\n `#........#`,\n `#........#`, \n `#........#`, \n `#........#`, \n `#........#`, \n `#........#`, \n `bwwwwwwwwb`\n ]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"#### Methods\n","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"loadSprites = async () => {\n console.log(basicTiles);\n // load game sprites\n \n await k.loadSprite(\"walltop\", await stillMoreTiles.file(\"tile000.gif\").url())\n await k.loadSprite(\"wallside\", await stillMoreTiles.file(\"tile001.gif\").url())\n await k.loadSprite(\"walltopcorner\", await stillMoreTiles.file(\"tile003.gif\").url())\n await k.loadSprite(\"wallbottomcorner\", await stillMoreTiles.file(\"tile002.gif\").url())\n await k.loadSprite(\"floor\", await stillMoreTiles.file(\"tile008.gif\").url())\n\n await k.loadSprite(\"player\", await basicTiles.file(\"tile003.gif\").url())\n await k.loadSprite('entity', await basicTiles.file(\"tile001.gif\").url())\n \n console.log(k.sprite(\"wall\"))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"loadOther = async () => {\n console.log(\"loadOther called\");\n mutable other = k.add(\n [\n k.pos(k.vec2(16*6,16*6)),\n k.sprite(\"entity\"),\n k.solid(),\n\t k.origin(\"center\"),\n k.area({ width: 16, height: 16, offset: k.vec2(0, 8) }),\n \"other\" \n ]\n ) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"loadEntity = async () => {\n console.log(\"loadEntity called\")\n mutable entity = k.add(\n [\n k.pos(k.vec2(16*3,16*3)),\n k.sprite(\"entity\"),\n k.solid(),\n\t k.origin(\"center\"),\n k.area({ width: 16, height: 16, offset: k.vec2(0, 8) }),\n \"entity\"\n ]\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"#### Objects and Classes","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"basicTiles = FileAttachment(\"ezgif-4-26b3cba000-png-16x16-sprite-gif.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"moreTiles = FileAttachment(\"ezgif-4-bbb5424a18-png-16x16-sprite-gif.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"stillMoreTiles = FileAttachment(\"ezgif-4-96df7444d2-png-16x16-sprite-gif.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"kaboom = (await import('https://unpkg.com/kaboom@2000.2.9/dist/kaboom.mjs?module')).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"Images source https://opengameart.org/content/tiny-16-basic","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"Images cut up by https://ezgif.com/sprite-cutter","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"Kaboom ref: https://kaboomjs.com/play?demo=spriteatlas\n","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"Croquet = require(\"@croquet/croquet@1.0\").catch(e => window.Croquet)","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"RPG world based off https://kaboomjs.com/play?demo=rpg","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"Croquet Docs https://croquet.io/docs/croquet/tutorial-1_1_hello_world.html","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"### Version","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"- v 0.01 - nothing works yet, don't bother to visit\n- v 0.02 - (6/25/2022) got a basic room rendering. got a little character moving with collision!","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"### ScratchPad\n","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"{\nconsole.log(await basicTiles.file(\"tile000.gif\").url())\n\n //loadSprites()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"debugEntityView = html`

Entity: x:? y: ?

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof button = Inputs.button(\"Load Entity\", {\n reduce: () => {\n console.log(\"click load entity\")\n loadEntity(); \n }\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"resetEntity = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"{\n resetEntity.addEventListener('click', ()=> {\n console.log('resetEntity called')\n \n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"resetHtml = htl.html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"mutable entity = null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"mutable other = null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"eventPipe = html`

Event Pipe

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"{\n\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}