hello/index.html at main · multisynq/hello · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
    <head>
        <title>Hello World</title>
        <style>
            body {
                display: flex;
                user-select: none;
                background: rgb(80, 255, 255);
            }
            #counter {
                margin: auto;
                font: 100px sans-serif;
            }
            #codelink {
                position: fixed; bottom: 10px; right: 10px; padding: .5em; border-radius: 30px;
                opacity: 50%; background: lightgray; box-shadow: 1px 1px 5px black;
                text-decoration: none; font-family: monospace; font-size: 1.5em; z-index: 1000;
            }
            #codelink:hover {
                opacity: 100%;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@croquet/croquet@2.0.0-20"></script>
    </head>
    <body>
        <div id="counter">0</div>
        <script type="module">

//------------------------------------------------------------------------------------------
// Define the synchronized model.
// MyModel has a tick method that executes once per second. It increments the counter.
// The model also listens for reset events from a view. If it receives one, it resets the counter.
//------------------------------------------------------------------------------------------

class MyModel extends Croquet.Model {

    init() { // Note that models are initialized with "init" instead of "constructor"!
        this.counter = 0;
        this.subscribe("counter", "reset", this.resetCounter);
        this.future(1000).tick();
    }

    resetCounter() {
        this.counter = 0;
    }

    tick() {
        this.counter++;
        this.future(1000).tick();
    }
}
// Register our model class with the serializer
MyModel.register("MyModel");

//------------------------------------------------------------------------------------------
// Define our view.
// MyView listens for click events on the window. If it receives one, it sends a reset event
// to the model.
// It also continuously updates the counter on the screen with the current count.
// Note that the view can read the model's state directly, but must not modify it.
//------------------------------------------------------------------------------------------

class MyView extends Croquet.View {

    constructor(model) { // The view gets a reference to the model when the session is joined.
        super(model);
        this.model = model;
        document.onclick = event => this.onclick(event);
    }

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

    update() {
        document.getElementById("counter").innerHTML = this.model.counter;
    }
}
// create the Multisynq widget at the bottom/left of the screen that includes a QR code and debug info
Croquet.App.makeWidgetDock();

// Join the Multisynq session and spawn our model and view.
Croquet.Session.join({
    apiKey: '2d0fPrsWoWQFrelRWB1TftMoNJLfOk4Ni6XkQvswX3',
    appId: "io.multisynq.hello",
    model: MyModel,
    view: MyView,
});

        </script>
        <a id="codelink" href="https://github.com/multisynq/hello/blob/main/index.html"
        title="View source code on GitHub" target="_blank">{...}</a>
    </body>
</html>