Croquet Dice Rolling Example

This is a simple example of a Croquet application as used in their promotional video (link to be provided). – github



enlarge (`index.html`) to see the working example

**Frame**: `run-croquet.html`

**Note**: Our sandbox configuration (iframe) does not seem sufficient to run this application (see Croquet Fountain).

// document.getElementById("frame").sandbox = "allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts";

**Note**(*Croquet.Session*): Changed server configuration to use Websocket (proxyWebsockets = true;) > Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf blob:null/67967792-9e0f-4bf7-8e7a-597128d9025e festgestellt ("worker-src"). Ein CSP-Bericht wird gesendet.

> Uncaught (in promise) Error: Croquet: session name > 128 characters in Session.join()!

yoshiki — discord […] in addition there are a few other kinds of network traffic used. On the same socket the user events are sent, there are **tick** messages (30Hz for Fountain) sent from the reflector to advance the logical time. Snapshot is taken now and then and sent from one client to the server.


Below this pagefold we reveal the code which does the example in the **Frame**: `run-croquet.html` above.

class Dice extends Croquet.Model { init() { this.roll = 1; this.subscribe("dice", "roll", this.rollDice); } rollDice() { this.roll = Math.floor(Math.random() * 6) + 1; this.publish("dice", "changed"); } } Dice.register("Dice");

class Display extends Croquet.View { constructor(model) { super(model); diceRoll.textContent = model.roll; rollButton.onclick = (event) => { this.publish("dice", "roll"); }; this.subscribe("dice", "changed", () => { diceRoll.textContent = model.roll; }); } }

Croquet.Session.join({ apiKey: "18fIEcbGu1vlEAc4bnppPMtIccJ5xIn6J1dJGMeay", appId: "", name: Croquet.App.autoSession(), password: Croquet.App.autoPassword(), model: Dice, view: Display, });



We join a fountain session in progress. Press space bar to shoot more shapes into the simulation. croquet

> Our sandbox configuration isn't sufficient to run this app. We've extracted a working iframe from the Greenlight application. croquet