imsc-script-js/tests/browser.html at main · ImStocker/imsc-script-js · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>

<head>
    <script src="../dist-browser/index.iife.js"></script>

</head>

<body>

    <script>
        const player = new ImscScript.ImscScriptPlayer({
            "id": "my_dialog",
            "blocks": [
                {
                    "id": "block1",
                    "type": "script",
                    "name": "content",
                    "computed": {
                        "start": "greeting",
                        "nodes": {
                            "greeting": {
                                "type": "speech",
                                "values": {
                                    "character": "Guard",
                                    "text": "Hello!"
                                },
                                "next": "ask"
                            },
                            "ask": {
                                "type": "speech",
                                "values": {
                                    "character": "Guard",
                                    "text": "What do you want?"
                                },
                                "options": [
                                    { "values": { "text": "I seek adventure." }, "next": "adventure" },
                                    { "values": { "text": "I want to trade." }, "next": "trade" },
                                    { "values": { "text": "Nothing, goodbye." }, "next": "end" }
                                ]
                            },
                            "trade": {
                                "type": "trigger",
                                "subject": "trade",
                                "next": "ask"
                            },
                            "adventure": {
                                "type": "speech",
                                "values": {
                                    "character": "Guard",
                                    "text": "Then go east, brave soul!"
                                },
                                "next": "end"
                            },
                            "end": { "id": "end", "type": "end" }
                        }
                    }
                }
            ]
        }, {
            blockName: 'content',  // optional, uses first script block if omitted
            events: {
                onSpeech: (content) => {
                    console.log("Speech bubble", content)
                    if (content.options.length > 0) {
                        // Ask user to choose one of option
                        let choice = -1
                        while (choice < 0 || choice >= content.options.length || isNaN(choice)) {
                            choice = parseInt(
                                prompt([
                                    `${content.character}:`,
                                    content.text,
                                    '',
                                    ...content.options.map((opt, index) => {
                                        return `${index + 1}. ${opt.text}`
                                    }),
                                ].join("\n"))
                            ) - 1
                        }
                        player.continue(choice)

                    }
                    else {
                        alert([
                            `${content.character}:`,
                            content.text
                        ].join("\n"))
                        // No options just continue
                        player.continue()
                    }
                },
                onChoice: (optionIndex, option) => {
                    console.log(`Player chosen option ${optionIndex}`);
                },
                onTrigger: async (subject, inputs, node) => {
                    console.log(`Trigger: ${subject}`, inputs);
                    // Handle game logic
                    if (subject === 'trade') {
                        alert('Here is trading screen...')
                    }
                    // Return outputs that can be bound later
                    return { success: true };
                },
                onEnd: () => {
                    console.log('Dialog finished');
                }
            }
        });

        // Start the dialog
        player.play();
    </script>
</body>

</html>