Croquet Dice Rolling Example

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

**Assets**:

pages/croquet-dice-rolling-example

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

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

https://wiki.ralfbarkow.ch/assets/pages/croquet-dice-rolling-example/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: "io.croquet.video-example", name: Croquet.App.autoSession(), password: Croquet.App.autoPassword(), model: Dice, view: Display, });

Croquet.App.makeWidgetDock();

.

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