The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
Jun 12, 2022
Working Libraries
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!
Hello, Croquet!
Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-jsHello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an ArrayHello, PikasoHello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, JS-YAMLTesting bitECS for TempestHello jService!Hello, iro.jsHello, SplideHello, Cosmic JSHello, singuiKaboom JS TemplateHello, JSPDFHello, Awesome Dev JokesRandom DAD JokeHello, model-viewerThe OracleTarot UtilitiesHello, lokiJSHello, cash ( cash-dom )Hello, Dice RollerHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devHello, Melon JSHello Kontra
Also listed in…
Croquet
Tips and Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
C = require("@croquet/croquet@1.0").catch(e => window.Croquet)
Insert cell
class MyModel extends C.Model {
init() {
this.count = 0;
this.subscribe("counter", "reset", this.resetCounter);
this.future(1000).tick();
}

resetCounter() {
this.count = 0;
this.publish("counter", "changed");
}

tick() {
this.count++;
this.publish("counter", "changed");
this.future(1000).tick();
}
}
Insert cell
MyModel.register("MyModel");
Insert cell
class MyView extends C.View {
constructor(model) {
super(model);
this.model = model;
countDisplay.onclick = event => this.counterReset();
this.subscribe("counter", "changed", this.counterChanged);
this.counterChanged();
}

counterReset() {
this.publish("counter", "reset");
}

counterChanged() {
countDisplay.textContent = this.model.count;
}
}
Insert cell
appId = 'com.gmail.triptych.microverse';
Insert cell
name = C.App.autoSession();
Insert cell
password = C.App.autoPassword();
Insert cell
apiKey = "1rix6FFjJlghdFLbJN6p47xIu4e5NH4ooNPl6gKDA"
Insert cell
C.Session.join({
apiKey: apiKey,
appId,
name,
password,
model: MyModel, view: MyView});
Insert cell
countDisplay = html`<div class="cd"></div>`
Insert cell
html`<style>
.cd {
font: 64px sans-serif;
background-color: #fcfcfc;
height: 300px;
}

</style>`
Insert cell
Insert cell
import { embed } from "@jerryjappinen/embed"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more