games.js

     */
    inventory_has_empty_slot() {
        const { columns, rows } = this.game_ui_options.inventory;
        return this.state.inventory.size < columns * rows;
    }

    /**
     * Take a game object as argument and removes its reference from the inventory state.
     * @param {MtlGameObject} obj 
     */
    remove_object_from_inventory(obj) {
        this.state.inventory.delete(obj);
    }

    /**
     * Takes a game object as argument, removes the reference from inventory 7
     * and delete the object from the scene it's defined into.
     * @param {MtlGameObject} obj 
     */
    consume_game_object(obj) {
        this.remove_object_from_inventory(obj);
        for (const s of this.scenes) {
            const found_obj = s.game_objects.find(o => o === obj);
            if (found_obj) {
                s.game_objects.splice(s.game_objects.indexOf(found_obj), 1);
                break;
            }
        }
    }

    /**
     * Returns true if the number of scenes having finished to load their loadable resources is equal to the total number of scenes.
     * @returns {Boolean}
     */
    all_resources_loaded() {
        return this.load_state.loadable_elements === this.load_state.loaded_elements;
    }

    /**
     * Returns a concatenation of all game objects of all scenes.
     * @returns {Array<MtlGameObject>}
     */
    get_game_objects() {
        return this.scenes.reduce((acc, scene) => acc.concat(scene.game_objects), []);
    }

    /**
     * Populates the instance with a litteral game desriptor.
     * The expected data format is identical to what's exported from the Mentalo app editor,
     * or what's returned from the Mentalo API database.
     * @param {Object} data 
     */
    load_data(data) {
        this.name = data.name;

        this.starting_scene_index = data.starting_scene_index || 0;
        this.state.scene = this.starting_scene_index;

        this.scenes = data.scenes.map(scene => {
            const scene_instance = new MtlScene();
            scene_instance.load_data(scene);
            scene_instance.on_load_group_complete(() => {
                this.load_state.loaded_scenes++;
                if (this.load_state.loaded_scenes === this.scenes.length) {
                    this.on_load_resources_callback && this.on_load_resources_callback();
                }
            })
            return scene_instance;
        });

        this.game_ui_options = Object.assign(data.game_ui_options, {
            general: {
                background_color: data.game_ui_options.general.background_color,
                animation_canvas_dimensions: Object.assign(data.game_ui_options.general.animation_canvas_dimensions, {
                    height: function () {
                        const split_ratio = this.ratio.split(":").map(n => parseInt(n));
                        const factor = split_ratio[1] / split_ratio[0];
                        return Number((this.width * factor).toFixed());
                    },
                }),
            }
        });
    }

    /**
     * Sets the callback to call when all resources of all scenes are fully loaded.
     * @param {Function} callback 
     */
    on_load_resources(callback) {
        this.on_load_resources_callback = callback;
    }
}

module.exports = MtlGame;
},{"./scene":17,"./scene-types":16}],14:[function(require,module,exports){
"use strict";

/**
 * A structure to manage a group of object that extends from the ./Loadable class.
 * For each handled loadable, increments a loadable_elements state, and once the loadable has finished 
 * to load whatever it needs to load, the loaded_elements state is incremented.
 */
class LoadableGroup {
    constructor() {
        this.loadable_elements = 0;
        this.loaded_elements = 0;
    }

    /**
     * Attaches a on_load callback to the Loadable object given as argument.
     * Increments the loadable_elements state.
     * @param {Loadable} object Any object that extends the Loadable class
     */
    add_loadable(object) {
        this.loadable_elements++;
        /**
         * The callback that will be call by the Loadable object when it will have finished to load what it needs to load.
         */
        object.on_load(() => {
            this.loaded_elements++;
            if (this.loadable_elements === this.loaded_elements && this.on_load_group_complete_custom_callback) {
                this.on_load_group_complete_custom_callback();
            }
        });
    }

    /**
     * Defines a custom callback to call when all handled loadable objects have finished loading.
     * @param {Function} callback 
     */
    on_load_group_complete(callback) {
        this.on_load_group_complete_custom_callback = callback;
    }
}

module.exports = LoadableGroup;
},{}],15:[function(require,module,exports){
"use strict";

/**
 * An abstract type that must be inherited by any object that have a resource to load.
 * Can be an image or a sound.
 */
class Loadable {
    /**
     * Initialization of the actual loadable element.
     * @param {HTMLElement} loadable_element Image() or Audio() for example
     * @param {String} field_name the name of the field that references the loadable element in the instance.
     * @param {String} event_name the name of the event that is dispatched by the loadable 
     *                            html element when it has loaded a resource ("load" or "loadeddata")
     */
    constructor(loadable_element, field_name, event_name) {
        this.loaded = false;
        this.init_loadable_element(loadable_element, field_name, event_name);
    }

    /**
     * Initializes event listeners for the registered loadable_element.
     * @param {HTMLElement} loadable_element 
     * @param {String} field_name the name of the field that references the element
     * @param {String} event_name the event to use for resource loading (images uses onload, audio uses onloadeddata ...)
     */
    init_loadable_element(loadable_element, field_name, event_name) {
        this[field_name] = loadable_element;

        this.load_listener = () => {
            this.loaded = true;
            this.on_load_callback();
            this.clear();
        };

        this[field_name].addEventListener(event_name, this.load_listener);

        this.clear = () => {
            this[field_name].removeEventListener(event_name, this.load_listener);
        }
    }

    /**
     * Sets a callback to call when the loadable_element has finished to load its resource.
     * @param {Function} callback 
     */
    on_load(callback) {
        this.on_load_custom_callback = callback;
    }

    /**
     * The callback that's called when the loadable element as finished loading its resource
     */
    on_load_callback() {
        this.loaded = true;
        this.on_load_custom_callback && this.on_load_custom_callback();
    }
}

module.exports = Loadable;
},{}],16:[function(require,module,exports){
/**
 * An enum like object to describe the 2 possible type that can have a MtlScene
 */

module.exports = {
    PLAYABLE: "Playable",
    CINEMATIC: "Cinematic",
};
},{}],17:[function(require,module,exports){
"use strict";

const SCENE_TYPES = require("./scene-types");
const MtlAnimation = require("./animation");
const MtlSoundTrack = require("./sound-track");
const MtlChoice = require("./choice");
const MtlGameObject = require("./game-object");
const LoadableGroup = require("./loadable-group");

/**
 * The type used for the scenes of a MtlGame.
 * Extends the LoadableGroup class because it manages multiple objects of the class Loadable.
 */
class MtlScene extends LoadableGroup {
    /**
     * Initializes the instance with default empty data.
     */
    constructor() {
        super();
        const default_data = {
            name: "",
            _type: SCENE_TYPES.PLAYABLE,
            animation: new MtlAnimation(),
            sound_track: new MtlSoundTrack(),
            choices: [],
            text_box: "",
            game_objects: [],
            cinematic_duration: 0,
            end_cinematic_options: {
                destination_scene_index: -1,
                quit: false,
            }
        };

        this.name = default_data.name;
        this._type = default_data._type;
        this.animation = default_data.animation;
        this.sound_track = default_data.sound_track;

        this.choices = default_data.choices;
        this.text_box = default_data.text_box;
        this.game_objects = default_data.game_objects;

        this.cinematic_duration = default_data.cinematic_duration || 0;
        this.end_cinematic_options = default_data.end_cinematic_options;
    }

    /**
     * Populates the instance from a litteral descriptor.
     * Creates and populates the instances of Animation, Soundtrack and GameObjects
     * @param {Object} data 
     */
    load_data(data) {
        this.name = data.name;
        this._type = data._type;

        const animation = new MtlAnimation();
        animation.init(data.animation);
        this.animation.clear();
        this.animation = animation;
        this.animation.image.src && this.add_loadable(this.animation);

        const sound_track = new MtlSoundTrack();
        sound_track.init(data.sound_track);
        this.sound_track.clear();
        this.sound_track = sound_track;
        this.sound_track.src && this.add_loadable(this.sound_track);

        this.choices = data.choices.map(c => new MtlChoice(c));
        this.text_box = data.text_box;
        this.cinematic_duration = data.cinematic_duration || 0;

        this.game_objects = data.game_objects.map(gob => {
            const inst = new MtlGameObject();
            inst.load_data(gob);
            this.add_loadable(inst);
            return inst;
        });

        this.end_cinematic_options = data.end_cinematic_options;
    }
}

module.exports = MtlScene;
},{"./animation":10,"./choice":11,"./game-object":12,"./loadable-group":14,"./scene-types":16,"./sound-track":18}],18:[function(require,module,exports){
"use strict";

const Loadable = require("./loadable");

/**
 * The data type used to represent and manage the soundtrack of a scene
 */
class MtlSoundTrack extends Loadable {
    constructor() {
        super(new Audio(), "audio", "loadeddata");
        this.name = "";
        this.initialized = false;
    }

    /**
     * Reset the instance to empty values.
     */
    reset() {
        this.init_loadable_element(new Audio(), "audio", "loadeddata");
        this.name = "";
        this.initialized = false;
    }

    /**
     * Populates the instance from a litteral descriptor
     * @param {Object} data 
     */
    init(data) {
        this.empty = data.src === "";
        this.audio.src = data.src;
        this.name = data.name;
        this.audio.loop = data._loop;
        this.initialized = true;
    }

    /**
     * Plays the audio resource.
     */
    play() {
        this.audio.play();
    }

    /**
     * Stops the audio player.
     */
    stop() {
        this.audio.pause();
        this.audio.currentTime = 0;
    }

    /**
     * Returns the state of the inner audio element
     * @returns {Boolean}
     */
    is_playing() {
        return !this.audio.paused
    }
}

module.exports = MtlSoundTrack;
},{"./loadable":15}],19:[function(require,module,exports){
"use strict";

const FrameRateController = require("../lib/frame-rate-controller");
const { get_optimal_visible_foreground_color } = require("../lib/color-tools");
const { get_canvas_font, get_canvas_char_size } = require("../lib/font-tools");
const SCENE_TYPES = require("../model/scene-types");
const ChoiceCpt = require("../ui-components/choice-cpt");
const ChoicesPanelCpt = require("../ui-components/choices-panel-cpt");
const ClosingIconCpt = require("../ui-components/closing-icon-cpt");
const GameObjectCpt = require("../ui-components/game-object-cpt");
const InventoryCpt = require("../ui-components/inventory-cpt");
const InventoryObjectCpt = require("../ui-components/inventory-object-cpt");
const InventorySlotCpt = require("../ui-components/inventory-slot-cpt");
const SceneAnimationCpt = require("../ui-components/scene-animation-cpt");
const TextBoxCpt = require("../ui-components/text-box-cpt");
const UserErrorPopup = require("../ui-components/user-error-popup");

/**
 * The class that handles all interactions with the canvas 2D drawing context to draw the game.
 */
class MtlRender {
    constructor(params) {
        this.params = params;
        const frame_rate = this.params.frame_rate || 30;
        this.fps_controller = new FrameRateController(frame_rate);

        this.params.container.style.backgroundColor = this.params.get_game_settings("general").background_color;
        this.canvas = document.createElement("canvas");
        this.canvas.style.backgroundColor = "black";

        window.mentalo_drawing_context = this.canvas.getContext("2d");

        this.canvas_dimensions = {};
        this.canvas_zones = {};
        this.event_listeners = {
            game_objects: [],
            inventory: [],
            text_box: [],
        };

        this.state = {
            user_error_popup: { is_set: false, text: "", on_close: function () { } }
        };

        this.loading_frame = 0;
    }

    /**
     * Initializes the rendering of the game, creates the components, the canvas zones and requests full screen.
     */
    init() {
        if (this.params.fullscreen) {
            this.set_full_screen();
        }

        this.set_canvas_dimensions();
        this.create_canvas_zones();

        this.params.container.appendChild(this.canvas);

        const ctx = window.mentalo_drawing_context;

        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;

        this.create_components();
    }

    /**
     * Removes the event listeners attached to the components.
     */
    clear_event_listeners() {
        Object.values(this.components).forEach(cpt => {
            cpt.clear_event_listeners();
        });
    }

    /**
     * Removes the elements rendered as children of the rendering components 
     * (Example a TextBoxCpt is a child the scene_animation component)
     * @param {Object} options can defined a set of constructor names to exclude from clean up
     */
    clear_children(options = { exclude: [] }) {
        Object.values(this.components).forEach(cpt => {
            cpt.clear_children(options);
        });
    }

    /**
     * Reset the scene text box visibility state to true.
     * The text box visibility state is controlled by the scene_animation component and not directly by the text box component.
     */
    reset_text_box_visibility() {
        this.components.scene_animation.set_text_box_visibility(true)
    }

    /**
     * Tries to enable the window fullscreen mode.
     */
    set_full_screen() {
        const body = document.body;
        body.requestFullScreen = body.requestFullScreen
            || body.webkitRequestFullScreen
            || body.msRequestFullscreen
            || body.mozRequestFullScreen;
        try {
            body.requestFullScreen();
        } catch (err) {
            console.error(err.message)
        }
    }

    /**
     * Exits the window fullscreen mode
     */
    exit_fullscreen() {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }
    }

    /**
     * Updates the error popup state with new values given as argument.
     * @param {Object} params Must have a text<String> entry and a on_close<Function> entry.
     */
    set_user_error_popup(params) {
        this.state.user_error_popup = {
            is_set: true,
            text: params.text,
            on_close: function () {
                params.on_close && params.on_close();
            },
        };
        this.clear_event_listeners();
        // Clears children excluding everything but errorpopup
        this.clear_children({ exclude: ["TextBoxCpt", "InventoryCpt", "ChoicesPanelCpt", "GameObjectCpt"] });
    }

    /**
     * Unsets error popup
     */
    clear_user_error_popup() {
        this.reset_user_error_popup();
        this.clear_event_listeners();
        this.clear_children({ exclude: ["TextBoxCpt", "InventoryCpt", "ChoicesPanelCpt", "GameObjectCpt"] });
    }

    /**
     * Sets error popup to empty values
     */
    reset_user_error_popup() {
        this.state.user_error_popup = {
            is_set: false,
            text: "",
            on_close: function () { }
        };
    }

    /**
     * Callback called when error popup is closed
     */
    on_close_user_error_popup() {
        this.state.user_error_popup.on_close();
        this.clear_user_error_popup();
    }

    /**
     * Parses game data and calculates optimal dimensions for the canvas.
     */
    set_canvas_dimensions() {
        const { get_game_settings } = this.params;

        const screen_dim = {
            width: window.screen.width,
            height: window.screen.height,
        };

        const choices_panel_settings = get_game_settings("choices_panel")
        const ctx = this.canvas.getContext("2d");

        this.canvas_dimensions = (() => {
            const image_h = get_game_settings("general").animation_canvas_dimensions.height();
            const image_w = get_game_settings("general").animation_canvas_dimensions.width;

            const inventory_w = this.get_inventory_base_width();

            const base_w = image_w + inventory_w;

            const choices_panel_h = (() => {

                ctx.save();
                ctx.font = get_canvas_font(choices_panel_settings);
                const max_lines_per_row = this.get_choices_max_lines_per_row();
                const char_size = get_canvas_char_size(ctx);
                const text_line_h = char_size.text_line_height;
                ctx.restore();

                return (max_lines_per_row[0] * text_line_h + (2 * choices_panel_settings.choice_padding * char_size.width))
                    + (max_lines_per_row[1] > 0
                        ? (max_lines_per_row[1] * text_line_h + (2 * choices_panel_settings.choice_padding * char_size.width))
                        : 0)
                    + (2 * choices_panel_settings.container_padding * char_size.width);
            })();

            const max_playground_width = screen_dim.width - 200;
            const max_playground_height = screen_dim.height - 200;

            const base_h = image_h + choices_panel_h;
            const screen_ratio = screen_dim.width / screen_dim.height;
            const playground_ratio = base_w / base_h;

            const result = {
                width: 0,
                height: 0,
                image: { width: 0, height: 0 },
                inventory: { width: 0, height: 0 },
                choices_panel: { width: 0, height: 0 },
                scale_ratio: 1,
            };

            if (screen_ratio > playground_ratio) {
                // Screen is more panoramic than game canvas so we scale game canvas to maximum height
                const scaled_w = max_playground_height * playground_ratio
                result.width = scaled_w <= max_playground_width ? scaled_w : max_playground_width;
            } else {
                // Image is more panoramic so its scaled to the maximum width
                const scaled_h = max_playground_width * (base_h / base_w)
                result.height = scaled_h <= max_playground_height ? scaled_h : max_playground_height;
                result.width = result.height * playground_ratio;
            }

            result.scale_ratio = result.width / base_w;

            result.image = {
                width: image_w * result.scale_ratio,
                height: image_h * result.scale_ratio,
            };
            result.inventory = {
                width: inventory_w * result.scale_ratio,
                height: result.image.height,
            };
            result.choices_panel = {
                width: result.width,
                height: choices_panel_h * result.scale_ratio,
            };
            result.height = result.image.height + result.choices_panel.height;

            return result;
        })();

        this.canvas.width = this.canvas_dimensions.width;
        this.canvas.height = this.canvas_dimensions.height;
    }

    /**
     * @returns {Integer} The maximum number of rows that the choices_panel can have in the loaded game.
     */
    get_max_choices_row_per_scene() {
        let choices_max_row_nb = 1;
        if (Math.max(...this.params.get_game_scenes().map(s => s.choices.length)) > 2) {
            choices_max_row_nb = 2
        }
        return choices_max_row_nb;
    }

    /**
     * @returns {Integer} The maximum number of text rows that a choice can have in the loaded game
     */
    get_choices_max_lines_per_row() {
        const choices_max_row_nb = this.get_max_choices_row_per_scene();
        const formatted_choices_scenes = this.get_scenes_formatted_choices();

        // get the largest number un text lines per choice row
        const max_lines_per_row = [0, 0];
        Array.from({ length: choices_max_row_nb }).forEach((_row, i) => {
            const slice_index = i === 0 ? [0, 2] : [2, 4];
            const largest = formatted_choices_scenes
                .map(s_choices => Math.max(...s_choices
                    .slice(...slice_index)
                    .map(c => c.text_lines.length)))
                .reduce((res, nb) => Math.max(res, nb), 0);
            max_lines_per_row[i] = largest;
        });

        return max_lines_per_row;
    }

    /**
     * The width of the inventory panel
     * @returns {Integer}
     */
    get_inventory_base_width() {
        const { get_game_settings } = this.params;
        const image_h = get_game_settings("general").animation_canvas_dimensions.height();
        const inventory_style = get_game_settings("inventory");
        const gap = inventory_style.gap;
        const h = image_h - (2 * inventory_style.padding);
        const gap_h = (inventory_style.rows - 1) * gap;
        const gap_w = (inventory_style.columns - 1) * gap
        const slot_side = (h - gap_h) / inventory_style.rows;
        return (inventory_style.columns * slot_side)
            + (2 * inventory_style.padding)
            + gap_w;
    }

    /**
     * Parses the raw text of each choices in each scene and returns them with 
     * an additional text_lines field with the text split into lines ready to be rendered in canvas.
     * @returns {Array<{...MtlChoice, text_lines<Array<String>>}}
     */
    get_scenes_formatted_choices() {
        const scenes = this.params.get_game_scenes();
        const { get_game_settings } = this.params;
        const settings = this.params.get_game_settings("choices_panel");

        const ctx = window.mentalo_drawing_context;
        ctx.save();
        ctx.font = get_canvas_font(settings);
        const char_size = get_canvas_char_size(ctx);
        ctx.restore();

        const container_padding = settings.container_padding * char_size.width;
        const choice_padding = settings.choice_padding * char_size.width;
        const container_width = get_game_settings("general").animation_canvas_dimensions.width
            + this.get_inventory_base_width()
            - (2 * container_padding);
        const choice_max_width = ((container_width / 2) - (2 * choice_padding)) * .9; // width * .9 is an error offset
        const max_chars_per_row = choice_max_width / char_size.width;

        return scenes.map(s => s.choices.map(c => {
            const words = c.text.split(" ");
            const lines = [""];
            let line_i = 0;

            words.forEach(w => {
                if ((lines[line_i] + w).length >= max_chars_per_row) {
                    line_i++;
                    lines.push("");
                }
                lines[line_i] = `${lines[line_i]}${lines[line_i] === "" ? "" : " "}${w}`;
            });
            return Object.assign({ ...c }, { text_lines: lines });
        }));
    }

    /**
     * Precalculates the bounding boxes for each canvas zone.
     */
    create_canvas_zones() {
        const metrics = this.canvas_dimensions;
        const { get_game_settings } = this.params;
        this.canvas_zones = {
            root: {
                left: 0, top: 0,
                right: metrics.width, bottom: metrics.height,
                width: metrics.width, height: metrics.height,
                padding: 0,
            },
            scene_animation: {
                left: 0,
                top: 0,
                right: metrics.image.width,
                bottom: metrics.image.height,
                width: metrics.image.width,
                height: metrics.image.height,
                clear_color: "black",
                padding: 0,
            },
            inventory: {
                left: metrics.image.width,
                top: 0,
                right: metrics.width,
                bottom: metrics.inventory.height,
                width: metrics.width - metrics.image.width,
                height: metrics.inventory.height,
                clear_color: get_game_settings("inventory").background_color,
                padding: get_game_settings("inventory").padding,
            },
            choices_panel: {
                left: 0,
                top: metrics.image.height,
                right: metrics.width,
                bottom: metrics.height,
                width: metrics.width,
                height: metrics.height - metrics.image.height,
                clear_color: get_game_settings("choices_panel").background_color,
                padding: get_game_settings("choices_panel").container_padding
            },
        };
    }

    /**
     * @returns {Boolean} true if scene is of type Playable
     */
    scene_is_not_cinematic() {
        return this.params.get_scene()._type === SCENE_TYPES.PLAYABLE;
    }

    /**
     * Creates the tree of all the components to render. All component extends the UiComponent class.
     * The root component instances (Scene animation, Inventory, Choices panel) will only be created once,
     * but children components are functions of their parents so they are recreated when get_children is called on a parent component.
     * For example A TextBoxCpt is a children a SceneAnimationCpt, so the text box component will be recreated each time 
     * scene_animation.get_children() is called. This allow to display those components as functions of dynamical states.
     */
    create_components() {
        const { get_game_settings, get_inventory, get_scene, get_game_scenes } = this.params;
        const { scale_ratio } = this.canvas_dimensions;
        const scene_is_not_cinematic = this.scene_is_not_cinematic.bind(this);
        this.components = {
            scene_animation: new SceneAnimationCpt({
                bounding_zone: this.canvas_zones.scene_animation,
                get_animation: () => get_scene().animation,
                next_frame_ready: () => this.fps_controller.nextFrameReady(),
                get_children: () => {
                    const scene = get_scene();
                    return scene.game_objects.map(o => {
                        const parent_zone = this.canvas_zones.scene_animation;
                        const obj_pos = {
                            x: (o.position.x * scale_ratio) + parent_zone.left,
                            y: (o.position.y * scale_ratio) + parent_zone.top,
                        };
                        const obj_dim = {
                            w: o.image.width * scale_ratio,
                            h: o.image.height * scale_ratio,
                        };
                        const obj_bounds = {
                            left: obj_pos.x,
                            right: obj_pos.x + obj_dim.w,
                            top: obj_pos.y,
                            bottom: obj_pos.y + obj_dim.h,
                            width: obj_dim.w,
                            height: obj_dim.h,
                        };
                        const game_objects_cpt_params = {
                            bounding_zone: obj_bounds,
                            position: obj_pos,
                            dimensions: obj_dim,
                            image: o.image,
                            is_in_inventory: () => get_inventory().has(o),
                        };

                        const obj_cpt = new GameObjectCpt(game_objects_cpt_params);

                        obj_cpt.add_event_listener({
                            event_type: "mousemove",
                            listener: e => {
                                if (!get_inventory().has(o)) {
                                    const cursor_is_over_obj = e.offsetX >= obj_bounds.left
                                        && e.offsetX <= obj_bounds.right
                                        && e.offsetY >= obj_bounds.top
                                        && e.offsetY <= obj_bounds.bottom;
                                    obj_cpt.state.draw_border = cursor_is_over_obj;
                                }
                            }
                        });

                        obj_cpt.add_event_listener({
                            event_type: "click",
                            listener: e => {
                                if (!get_inventory().has(o)
                                    && e.offsetX >= obj_bounds.left
                                    && e.offsetX <= obj_bounds.right
                                    && e.offsetY >= obj_bounds.top
                                    && e.offsetY <= obj_bounds.bottom) {
                                    this.params.on_game_object_click(o);
                                    this.clear_event_listeners();
                                    this.clear_children({ exclude: "TextBoxCpt" });
                                }
                            }
                        });

                        return obj_cpt;
                    })
                        .concat(scene.text_box ? [
                            (() => {
                                const text_box_settings = get_game_settings("text_boxes")
                                const text_box_bounds = (() => {
                                    const parent_zone = this.canvas_zones.scene_animation;
                                    const padding = text_box_settings.padding * scale_ratio;
                                    const margin = text_box_settings.margin * scale_ratio;
                                    const left = parent_zone.left + margin;
                                    const right = parent_zone.right - margin;
                                    const bottom = parent_zone.bottom - margin;
                                    const top = bottom - (2 * padding);
                                    return {
                                        left,
                                        right,
                                        top,
                                        bottom,
                                        width: right - left,
                                        height: bottom - top,
                                    }
                                })();
                                const closing_icon_radius = 10 * scale_ratio;
                                const closing_icon_center = {
                                    x: text_box_bounds.right - (closing_icon_radius / 2),
                                    y: text_box_bounds.top + (closing_icon_radius / 2),
                                };

                                const closing_icon_params = {
                                    color: text_box_settings.font_color,
                                    radius: closing_icon_radius,
                                    center: closing_icon_center,
                                    background_color: text_box_settings.background_color,
                                    line_width: Math.floor(2 * scale_ratio),
                                    bounding_zone: {
                                        left: closing_icon_center.x - closing_icon_radius,
                                        right: closing_icon_center.x + closing_icon_radius,
                                        top: closing_icon_center.y - closing_icon_radius,
                                        bottom: closing_icon_center.y + closing_icon_radius,
                                        width: 2 * closing_icon_radius,
                                        height: 2 * closing_icon_radius,
                                    },
                                };

                                const text_box = new TextBoxCpt({
                                    text: get_scene().text_box,
                                    settings: Object.assign({ ...text_box_settings }, {
                                        font_size: text_box_settings.font_size * scale_ratio,
                                        padding: text_box_settings.padding * scale_ratio,
                                        margin: text_box_settings.margin * scale_ratio,
                                        rounded_corners_radius: text_box_settings.rounded_corners_radius * scale_ratio,
                                        border_width: text_box_settings.border_width * scale_ratio,
                                    }),
                                    bounding_zone: text_box_bounds,
                                    get_visibility_state: () => this.components.scene_animation.state.text_box_visible,
                                    get_children: () => [new ClosingIconCpt(closing_icon_params)],
                                });

                                const close_text_box_icon = text_box.children[0];
                                text_box.children[0].add_event_listener({
                                    event_type: "click",
                                    listener: e => {
                                        const bounds = close_text_box_icon.params.bounding_zone;
                                        const click_over_icon = e.offsetX >= bounds.left
                                            && e.offsetX <= bounds.right
                                            && e.offsetY >= bounds.top
                                            && e.offsetY <= bounds.bottom;

                                        const { scene_animation } = this.components;

                                        if (click_over_icon && scene_animation.state.text_box_visible) {
                                            scene_animation.set_text_box_visibility(false);
                                        }
                                    }
                                });
                                return text_box;
                            })(),
                        ] : [])
                        .concat(this.state.user_error_popup.is_set ? [
                            (() => {
                                const { text } = this.state.user_error_popup;
                                const default_font = get_canvas_font();
                                const use_settings = get_game_settings("text_boxes");
                                const parent_bounds = this.canvas_zones.scene_animation;
                                const ctx = window.mentalo_drawing_context;

                                ctx.save();
                                ctx.font = default_font;
                                const char_size = get_canvas_char_size(ctx);
                                ctx.restore();

                                const popup_width = parent_bounds.width / 3;
                                const padding = char_size.height * 2;
                                const max_chars_per_row = (popup_width - (2 * padding)) / char_size.width;
                                const text_lines = [""];
                                let line_i = 0;

                                text.split(" ").forEach(word => {
                                    if (`${text_lines[line_i]}${word} `.length > max_chars_per_row) {
                                        line_i++;
                                        text_lines.push("");
                                    }
                                    text_lines[line_i] += `${word} `;
                                });

                                const line_h = char_size.text_line_height;
                                const popup_height = (text_lines.length * line_h) + (2 * padding);

                                const background_color = use_settings.background_color;
                                const text_color = use_settings.font_color;

                                const popup_bounds = {
                                    left: parent_bounds.left + (parent_bounds.width / 2) - (popup_width / 2),
                                    top: parent_bounds.top + (parent_bounds.height / 2) - (popup_height / 2),
                                    right: parent_bounds.left + (parent_bounds.width / 2) + (popup_width / 2),
                                    bottom: parent_bounds.top + (parent_bounds.height / 2) - (popup_height / 2) + popup_height,
                                    width: popup_width,
                                    height: popup_height,
                                    clear_color: background_color,
                                };

                                const popup_params = {
                                    bounding_zone: popup_bounds,
                                    font: default_font,
                                    font_metrics: char_size,
                                    text_lines,
                                    text_color,
                                    padding,
                                    get_children: () => {
                                        const center = {
                                            x: popup_bounds.right - 5,
                                            y: popup_bounds.top + 5,
                                        };

                                        const radius = 15;

                                        const closing_icon_bounds = {
                                            left: center.x - radius,
                                            right: center.x + radius,
                                            top: center.y - radius,
                                            bottom: center.y + radius,
                                            width: radius * 2,
                                            height: radius * 2,
                                        };

                                        const closing_icon_params = {
                                            color: text_color,
                                            radius,
                                            center,
                                            background_color,
                                            line_width: 2,
                                            bounding_zone: closing_icon_bounds,
                                        };

                                        const closing_icon = new ClosingIconCpt(closing_icon_params);

                                        closing_icon.add_event_listener({
                                            event_type: "click",
                                            listener: e => {
                                                if (e.offsetX >= closing_icon_bounds.left
                                                    && e.offsetX <= closing_icon_bounds.right
                                                    && e.offsetY >= closing_icon_bounds.top
                                                    && e.offsetY <= closing_icon_bounds.bottom) {
                                                    this.on_close_user_error_popup();
                                                }
                                            }
                                        });

                                        return [closing_icon];
                                    }
                                };
                                const popup = new UserErrorPopup(popup_params);
                                return popup;
                            })()