playcanvas/uiManager.js

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');
};