File size: 4,878 Bytes
9328e91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
var UIManager = pc.createScript('uiManager');

UIManager.attributes.add('descriptionElement', { type: 'entity' });
UIManager.attributes.add('choicesContainer', { type: 'entity' });
UIManager.attributes.add('choiceButtonPrefab', { type: 'asset', assetType: 'template' });
UIManager.attributes.add('buttonSpacing', { type: 'number', default: 10 });
UIManager.attributes.add('buttonWidth', { type: 'number', default: 200 });
UIManager.attributes.add('buttonHeight', { type: 'number', default: 50 });

UIManager.prototype.initialize = function() {
    console.log('Initializing UIManager');
    this.app.on('story:display', this.onStoryDisplay, this);
    
    this.validateSetup();
    
    testsituation = {
            description: 'Test description',
            choices: ['Choice 1', 'Choice 2', 'Choice 3']
        }


    configstart = {
        "singingCompetition": {
            "arrival": {
                "description": "You arrive at the grand auditorium, the stage illuminated and buzzing with excitement. Contestants and spectators alike fill the hall, eager for the night's performances.",
                "events": [],
                "choices": ["register for the competition", "explore the backstage area", "sit in the audience"],
                "transitions": {
                    "register for the competition": "registration",
                    "explore the backstage area": "backstage",
                    "sit in the audience": "audienceSeat"
                },
                "media": [],
                "developernotes": []
            },
        },
    }

    // Test event (remove in production)
    setTimeout(() => {
        this.app.fire('story:display', configstart["singingCompetition"]["arrival"]); //, testsituation);
        }, 2000);
    };

UIManager.prototype.validateSetup = function() {
    if (!this.descriptionElement) {
        console.error('Description Element is not assigned');
    }
    if (!this.choicesContainer) {
        console.error('Choices Container is not assigned');
    }
    if (!this.choiceButtonPrefab) {
        console.error('Choice Button Prefab is not assigned');
    } else if (this.choiceButtonPrefab.type !== 'template') {
        console.error('Choice Button Prefab must be a template asset');
    }
};

UIManager.prototype.onStoryDisplay = function(data) {
    console.log('UIManager received story:display event:', data);
    
    // if (!data || !data.description || !Array.isArray(data.choices)) {
    //     console.error('Invalid data received in story:display event');
    //     return;
    // }

    this.updateDescription(data.description);
    this.updateChoices(data.choices);
};

UIManager.prototype.updateDescription = function(description) {
    if (this.descriptionElement && this.descriptionElement.element) {
        this.descriptionElement.element.text = description;
        console.log('Description updated');
    } else {
        console.warn('Unable to update description: Invalid Description Element');
    }
};

UIManager.prototype.updateChoices = function(choices) {
    if (!this.choicesContainer || !this.choiceButtonPrefab) {
        console.error('Unable to update choices: Missing Choices Container or Choice Button Prefab');
        return;
    }

    // Clear previous choices
    while (this.choicesContainer.children.length > 0) {
        this.choicesContainer.children[0].destroy();
    }

    if (choices.length === 0) {
        console.log('No choices available for this state.');
        // Optionally, display a "Restart" or "Exit" button
        return;
    }

    // Calculate total width of all buttons plus spacing
    var totalWidth = choices.length * this.buttonWidth + (choices.length - 1) * this.buttonSpacing;
    
    // Create new choice buttons
    choices.forEach((choice, index) => {
        var button = this.choiceButtonPrefab.resource.instantiate();
        this.choicesContainer.addChild(button);

        // Set button size
        if (button.element) {
            button.element.width = this.buttonWidth;
            button.element.height = this.buttonHeight;
        }

        // Position the button
        var xPosition = (index * (this.buttonWidth + this.buttonSpacing)) - (totalWidth / 2) + (this.buttonWidth / 2);
        button.setLocalPosition(xPosition, 0, 0);

        var buttonText = button.findByName('ButtonText');
        if (buttonText && buttonText.element) {
            buttonText.element.text = choice;
        }

        var buttonComponent = button.button;
        if (buttonComponent) {
            buttonComponent.on('click', () => {
                console.log('Choice selected:', choice);
                this.app.fire('ui:choiceSelected', choice);
            });
        } else {
            console.warn(`Button component missing for choice: ${choice}`);
        }
    });

    console.log('Choices updated');
};