games.js

                        ] : []);
                },
            }),
            inventory: new InventoryCpt({
                bounding_zone: this.canvas_zones.inventory,
                get_inventory,
                is_visible: scene_is_not_cinematic,
                invisible_clear_color: get_game_settings("general").background_color,
                get_children: () => {
                    const slots = [];
                    let settings = get_game_settings("inventory");
                    settings = {
                        ...settings,
                        slot_rounded_corner_radius: settings.slot_rounded_corner_radius * scale_ratio,
                        slot_border_width: settings.slot_border_width * scale_ratio,
                    };

                    const slots_zone = {
                        left: this.canvas_zones.inventory.left + settings.padding,
                        top: this.canvas_zones.inventory.top + settings.padding,
                        right: this.canvas_zones.inventory.right - settings.padding,
                        bottom: this.canvas_zones.inventory.bottom - settings.padding,
                        width: this.canvas_zones.inventory.width - (2 * settings.padding),
                        height: this.canvas_zones.inventory.height - (2 * settings.padding)
                    };

                    const gap = settings.gap;
                    const h = slots_zone.height;
                    const gap_h = (settings.rows - 1) * gap;
                    const slot_side = (h - gap_h) / settings.rows;
                    const slots_total_w = (slot_side * settings.columns) + (gap * (settings.columns - 1));
                    const center_slot_x_offset = (slots_zone.width - (slots_total_w)) / 2;

                    let slot_i = 0;
                    Array.from({ length: settings.rows }).forEach((_row, i) => {
                        const top = slots_zone.top + (i * (slot_side + gap));
                        Array.from({ length: settings.columns }).forEach((_col, j) => {
                            const left = slots_zone.left + (j * (slot_side + gap)) + center_slot_x_offset;

                            const slot_bounds = {
                                left,
                                top,
                                right: left + slot_side,
                                bottom: top + slot_side,
                                width: slot_side,
                                height: slot_side
                            };

                            const stroke_color = get_optimal_visible_foreground_color(settings.background_color);

                            const slot_params = {
                                bounding_zone: slot_bounds,
                                stroke_color,
                                is_visible: scene_is_not_cinematic,
                                settings,
                                get_children: () => {
                                    const inventory_object = new InventoryObjectCpt({
                                        slot_index: slot_i,
                                        is_visible: scene_is_not_cinematic,
                                        settings,
                                        stroke_color,
                                        get_game_object: index => {
                                            const obj = Array.from(get_inventory())[index];
                                            if (obj) {
                                                const obj_dim = obj.get_dimensions();
                                                const obj_ratio = obj_dim.width / obj_dim.height;
                                                const scaled_dim = { width: 0, height: 0 };
                                                const pos = { x: 0, y: 0 };
                                                if (obj_ratio > 1) {
                                                    // object image landscape oriented
                                                    scaled_dim.width = slot_side;
                                                    scaled_dim.height = slot_side * (obj_dim.height / obj_dim.width);
                                                    pos.x = slot_bounds.left;
                                                    pos.y = slot_bounds.top + ((slot_side / 2) - (scaled_dim.height / 2));
                                                } else if (obj_ratio < 1) {
                                                    // portrait oriented
                                                    scaled_dim.height = slot_side;
                                                    scaled_dim.width = slot_side * obj_ratio;
                                                    pos.y = slot_bounds.top;
                                                    pos.x = slot_bounds.left + ((slot_side / 2) - (scaled_dim.width / 2));
                                                } else {
                                                    // square
                                                    scaled_dim.width = slot_side;
                                                    scaled_dim.height = slot_side;
                                                    pos.x = slot_bounds.left;
                                                    pos.y = slot_bounds.top;
                                                }
                                                return {
                                                    ref: obj,
                                                    position: pos,
                                                    dimensions: scaled_dim,
                                                };
                                            } else {
                                                return undefined;
                                            }
                                        },
                                        bounding_zone: slot_bounds,
                                        get_children: () => [
                                            new ClosingIconCpt({
                                                is_visible: scene_is_not_cinematic,
                                                color: "#bf5e43", // Some kind of red
                                                center: {
                                                    x: slot_bounds.left + (slot_side / 2),
                                                    y: slot_bounds.top + (slot_side / 2)
                                                },
                                                radius: slot_side / 4,
                                                line_width: slot_side / 20 > 2 ? slot_side / 20 : 2,
                                                bounding_zone: { ...slot_bounds, clear_color: "rgba(0,0,0,0.2)" },
                                            }),
                                        ]
                                    });

                                    inventory_object.add_event_listener({
                                        event_type: "mousemove",
                                        listener: e => {
                                            const obj = inventory_object.params.get_game_object(inventory_object.params.slot_index);
                                            const bounds = inventory_object.params.bounding_zone;

                                            inventory_object.state.draw_inventory_close_icon = inventory_object.params.is_visible()
                                                && !!obj
                                                && get_scene().game_objects.includes(obj.ref)
                                                && (
                                                    e.offsetX >= bounds.left
                                                    && e.offsetX <= bounds.right
                                                    && e.offsetY >= bounds.top
                                                    && e.offsetY <= bounds.bottom
                                                );
                                        }
                                    });

                                    inventory_object.children[0].add_event_listener({
                                        event_type: "click",
                                        listener: e => {
                                            if (!inventory_object.params.is_visible()) return false;
                                            const obj = inventory_object.params.get_game_object(inventory_object.params.slot_index);
                                            const bounds = inventory_object.params.bounding_zone;
                                            const mouse_over_slot = e.offsetX >= bounds.left
                                                && e.offsetX <= bounds.right
                                                && e.offsetY >= bounds.top
                                                && e.offsetY <= bounds.bottom;
                                            if (!!obj && mouse_over_slot && get_scene().game_objects.includes(obj.ref)) {
                                                this.params.on_drop_inventory_object(obj.ref);
                                                this.clear_event_listeners();
                                                this.clear_children({ exclude: "TextBoxCpt" });
                                            }
                                        }
                                    });

                                    return [inventory_object];
                                },
                            };

                            const slot = new InventorySlotCpt(slot_params);
                            slots.push(slot);
                            slot_i++;
                        });
                    });
                    return slots;
                },
            }),
            choices_panel: (() => {

                const panel_params = {
                    bounding_zone: this.canvas_zones.choices_panel,
                    is_visible: scene_is_not_cinematic,
                    invisible_clear_color: get_game_settings("general").background_color,
                    get_children: () => Array.from({ length: this.get_max_choices_row_per_scene() * 2 }).map((_, i) => {
                        const base_settings = get_game_settings("choices_panel")
                        const choices_settings = Object.assign({ ...base_settings }, {
                            font_size: base_settings.font_size * scale_ratio,
                            active_choice_border_width: base_settings.active_choice_border_width * scale_ratio,
                            active_choice_rounded_corners_radius: base_settings.active_choice_rounded_corners_radius * scale_ratio,
                        });

                        const ctx = window.mentalo_drawing_context;
                        ctx.save();
                        ctx.font = get_canvas_font(choices_settings);
                        const char_w = get_canvas_char_size(ctx).width;

                        choices_settings.container_padding *= char_w;
                        choices_settings.choice_padding *= char_w;

                        const writable_parent_zone = {
                            left: this.canvas_zones.choices_panel.left + choices_settings.container_padding,
                            right: this.canvas_zones.choices_panel.right - choices_settings.container_padding,
                            top: this.canvas_zones.choices_panel.top + choices_settings.container_padding,
                            bottom: this.canvas_zones.choices_panel.bottom - choices_settings.container_padding,
                            width: 0, height: 0,
                        };

                        writable_parent_zone.width = writable_parent_zone.right - writable_parent_zone.left;
                        writable_parent_zone.height = writable_parent_zone.bottom - writable_parent_zone.top;

                        const choice_width = writable_parent_zone.width / 2;
                        const max_lines_per_row = this.get_choices_max_lines_per_row();
                        const text_line_h = get_canvas_char_size(ctx).text_line_height;

                        const choices_height_per_row = [
                            (max_lines_per_row[0] * text_line_h) + (2 * choices_settings.choice_padding),
                            (max_lines_per_row[1] > 0
                                ? (max_lines_per_row[1] * text_line_h) + (2 * choices_settings.choice_padding)
                                : 0),
                        ];

                        const choice_bounds = {
                            left: writable_parent_zone.left + ((i % 2) * choice_width),
                            top: writable_parent_zone.top + ((i > 1 ? 1 : 0) * choices_height_per_row[0]),
                            right: writable_parent_zone.left + ((i % 2) * choice_width) + choice_width,
                            bottom: writable_parent_zone.top + ((i > 1 ? 1 : 0) * choices_height_per_row[1]) + choices_height_per_row[i > 1 ? 1 : 0],
                            width: choice_width,
                            height: choices_height_per_row[i > 1 ? 1 : 0],
                        };

                        const choice_cpt = new ChoiceCpt({
                            is_visible: scene_is_not_cinematic,
                            bounding_zone: choice_bounds,
                            text_line_h,
                            get_formatted_choice: () => {
                                const scene_choices = this.get_scenes_formatted_choices()[
                                    get_game_scenes().indexOf(get_scene())
                                ];
                                return scene_choices.length - 1 >= i ? scene_choices[i] : undefined;
                            },
                            settings: choices_settings,
                        });

                        choice_cpt.add_event_listener({
                            event_type: "mousemove",
                            listener: e => choice_cpt.state.active =
                                choice_cpt.params.is_visible()
                                && !!choice_cpt.params.get_formatted_choice()
                                && e.offsetX >= choice_bounds.left
                                && e.offsetX <= choice_bounds.right
                                && e.offsetY >= choice_bounds.top
                                && e.offsetY <= choice_bounds.bottom
                        });

                        choice_cpt.add_event_listener({
                            event_type: "click",
                            listener: e => {
                                const choice = choice_cpt.params.get_formatted_choice();
                                if (choice_cpt.params.is_visible()
                                    && !!choice
                                    && e.offsetX >= choice_bounds.left
                                    && e.offsetX <= choice_bounds.right
                                    && e.offsetY >= choice_bounds.top
                                    && e.offsetY <= choice_bounds.bottom) {
                                    const success = this.params.on_choice_click(choice);
                                    if (success) {
                                        this.clear_event_listeners();
                                        this.clear_children();
                                    }
                                }
                            }
                        });

                        ctx.restore();

                        return choice_cpt;
                    })
                };

                return new ChoicesPanelCpt(panel_params);
            })(),
        };
    }

    /**
     * Draw a loading state on the black screen while some game resources are loading.
     * This shouldn't show up a lot except if some resources are really big...
     */
    draw_loading() {
        const ctx = window.mentalo_drawing_context;
        ctx.save();
        ctx.font = '25px monospace';
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        ctx.fillStyle = "white";
        ctx.fillText("Loading", 50, window.innerHeight / 2);
        const dots = Array.from({ length: ++this.loading_frame }).map(() => '.').join('');
        ctx.font = '8px monospace';
        ctx.fillText(dots, 50, window.innerHeight / 2 + 20);
        ctx.restore();
    }

    /**
     * Executes the draw method of each registered component.
     */
    draw_game() {
        Object.values(this.components).forEach(cpt => cpt.draw());
    }
}

module.exports = MtlRender;
},{"../lib/color-tools":5,"../lib/font-tools":6,"../lib/frame-rate-controller":7,"../model/scene-types":16,"../ui-components/choice-cpt":21,"../ui-components/choices-panel-cpt":22,"../ui-components/closing-icon-cpt":23,"../ui-components/game-object-cpt":24,"../ui-components/inventory-cpt":25,"../ui-components/inventory-object-cpt":26,"../ui-components/inventory-slot-cpt":27,"../ui-components/scene-animation-cpt":28,"../ui-components/text-box-cpt":29,"../ui-components/user-error-popup":31}],20:[function(require,module,exports){
const supported_locales = ["en", "fr", "es"];

/**
 * Translations for the default error messages.
 */

const translations = {
    "First scene has an empty image, game cannot be loaded": {
        fr: "La première scène a une image vide, le jeu ne peut pas être chargé",
        es: "La primera escena tiene una imagen vacía, el juego no se puede cargar"
    },
    "Destination scene has not been set.": {
        fr: "La scène de destination n'a pas été définie.",
        es: "La escena de destino no ha sido definida.",
    },
    "Next scene has not been set.": {
        fr: "La scène suivante n'a pas été définie",
        es: "La siguiente escena no ha sido definida.",
    },
};

function get_translated(str, locale) {
    return translations[str] && locale !== "en" && supported_locales.includes(locale)
        ? translations[str][locale]
        : str;
}

module.exports = {
    get_translated,
    supported_locales,
};
},{}],21:[function(require,module,exports){
"use strict";

const { get_canvas_font } = require("../lib/font-tools");
const { draw_rect } = require("../lib/shape-tools");
const MtlUiComponent = require("./ui-component");

/**
 * The rendering component for a scene choice.
 */
class ChoiceCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Draw the choice on the registered 2D drawing context
     */
    draw() {
        super.draw();
        const {
            get_formatted_choice,
            bounding_zone,
            settings,
            text_line_h,
        } = this.params;

        const writable_zone = {
            left: bounding_zone.left + settings.choice_padding,
            right: bounding_zone.right - settings.choice_padding,
            top: bounding_zone.top + settings.choice_padding,
            bottom: bounding_zone.bottom - settings.choice_padding,
            width: bounding_zone.width - (2 * settings.choice_padding),
            height: bounding_zone.height - (2 * settings.choice_padding),
        };

        const choice = get_formatted_choice();

        const ctx = window.mentalo_drawing_context;
        ctx.textAlign = settings.text_align;
        ctx.font = get_canvas_font(settings);
        ctx.fillStyle = settings.font_color;
        ctx.textBaseline = "top";

        if (choice) {
            if (this.state.active) {
                draw_rect(ctx, bounding_zone.left, bounding_zone.top, bounding_zone.width, bounding_zone.height, {
                    fill_color: settings.active_choice_background_color,
                    rounded_corners_radius: settings.active_choice_rounded_corners_radius,
                    border: {
                        width: settings.active_choice_border_width,
                        color: settings.font_color,
                    }
                });
            }

            const get_text_x_position = function () {
                switch (ctx.textAlign) {
                    case "left":
                        return writable_zone.left;
                    case "right":
                        return writable_zone.right;
                    case "center":
                        return writable_zone.left + (writable_zone.width / 2);
                }
            };

            choice.text_lines.forEach((line, i) => {
                const text_pos = {
                    x: get_text_x_position(),
                    y: writable_zone.top + (i * text_line_h),
                };
                ctx.fillText(line, text_pos.x, text_pos.y);
            });
        }
    }
}

module.exports = ChoiceCpt;
},{"../lib/font-tools":6,"../lib/shape-tools":8,"./ui-component":30}],22:[function(require,module,exports){
"use strict";

const MtlUiComponent = require("./ui-component");

/**
 * The rendering component for the game choices panel
 */
class ChoicesPanelCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Draw the choices panel and the choices as children components on the registered 2D drawing context
     */
    draw() {
        super.draw();
        if (this.params.is_visible()) {
            this.clear_bounding_zone();
            this.draw_children();
        } else {
            this.clear_bounding_zone({ clear_color: this.params.invisible_clear_color })
        }
    }
}

module.exports = ChoicesPanelCpt;
},{"./ui-component":30}],23:[function(require,module,exports){
"use strict";

const MtlUiComponent = require("./ui-component");

/**
 * A rendering component that displays a closing icon (a cross inside a circle)
 */
class ClosingIconCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Uses standard vectorial drawing methods to draw a circle and a cross at 
     * given coordinates on the registered 2D drawing context.
     */
    draw() {
        super.draw();
        this.clear_bounding_zone();
        const { color, center, radius = 5, line_width = 2, background_color = "rgba(0,0,0,0)" } = this.params;
        const ctx = window.mentalo_drawing_context;
        const padding = radius / 1.5;

        const cross_coords = {
            left: center.x - radius + padding,
            right: center.x + radius - padding,
            top: center.y - radius + padding,
            bottom: center.y + radius - padding,
        };

        ctx.fillStyle = background_color;
        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.strokeStyle = color;
        ctx.lineWidth = line_width;
        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(cross_coords.left, cross_coords.top);
        ctx.lineTo(cross_coords.right, cross_coords.bottom);
        ctx.moveTo(cross_coords.left, cross_coords.bottom)
        ctx.lineTo(cross_coords.right, cross_coords.top);
        ctx.stroke();
    }
}

module.exports = ClosingIconCpt;
},{"./ui-component":30}],24:[function(require,module,exports){
"use strict";

const MtlUiComponent = require("./ui-component");

/**
 * A component that draws a GameObject
 */
class GameObjectCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Draws the image of the object on the canvas.
     */
    draw() {
        super.draw();
        const { position, dimensions, image, is_in_inventory } = this.params;
        if (is_in_inventory()) {
            return;
        }

        const ctx = window.mentalo_drawing_context;

        ctx.drawImage(
            image,
            0, 0,
            image.width, image.height,
            position.x, position.y,
            dimensions.w, dimensions.h,
        );

        if (this.state.draw_border) {
            ctx.lineWidth = 1;
            ctx.strokeStyle = "rgba(180, 180, 180, 0.5)";
            ctx.strokeRect(position.x - 5, position.y - 5, dimensions.w + 10, dimensions.h + 10);
        }
    }
}

module.exports = GameObjectCpt;
},{"./ui-component":30}],25:[function(require,module,exports){
"use strict";

const MtlUiComponent = require("./ui-component");

/**
 * The component that draws the inventory panel
 */
class InventoryCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Draws the panel on the canvas, T
     * the grid slots and the game object images are draws as children components (InventorySlotCpt and InventoryObjectCpt)
     */
    draw() {
        super.draw();
        if (this.params.is_visible()) {
            this.clear_bounding_zone();
            this.draw_children();
        } else {
            this.clear_bounding_zone({ clear_color: this.params.invisible_clear_color })
        }
    }
}

module.exports = InventoryCpt;
},{"./ui-component":30}],26:[function(require,module,exports){
"use strict";

const { draw_rect } = require("../lib/shape-tools");
const MtlUiComponent = require("./ui-component");

/**
 * The component to display a game object image inside a grid slot of the inventory panel.
 */
class InventoryObjectCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * If a game object exists for the slot bound to this instance, its image will be drawn cropped inside a bounding rectangle.
     * When a game object is hovered in the inventory, the draw_inventory_closing_icon is updated and a red cross will be drawn 
     * on top of the object image. If the cross get's clicked the object is removed from inventory.
     */
    draw() {
        super.draw();
        const { get_game_object, slot_index, settings, bounding_zone, stroke_color } = this.params;
        const game_object = get_game_object(slot_index);
        if (game_object) {
            const ctx = window.mentalo_drawing_context;

            const image = game_object.ref.image;
            draw_rect(ctx, bounding_zone.left, bounding_zone.top, bounding_zone.width, bounding_zone.height, {
                fill_image: {
                    src: image,
                    dw: game_object.dimensions.width,
                    dh: game_object.dimensions.height,
                    dx: game_object.position.x,
                    dy: game_object.position.y,
                },
                rounded_corners_radius: settings.slot_rounded_corner_radius,
                border: {
                    width: settings.slot_border_width,
                    color: stroke_color,
                },
            });

            if (this.state.draw_inventory_close_icon) {
                this.draw_children(); // drop object icon
            }
        }
    }
}

module.exports = InventoryObjectCpt;
},{"../lib/shape-tools":8,"./ui-component":30}],27:[function(require,module,exports){
"use strict";

const { draw_rect } = require("../lib/shape-tools");
const MtlUiComponent = require("./ui-component");

/**
 * The component to draw a grid slot in the inventory panel.
 */
class InventorySlotCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
    }

    /**
     * Draws a rectangle as the grid slot.
     * Calls draw_children to draw the image of the game object stored in that slot if there is one.
     */
    draw() {
        super.draw();
        const { bounding_zone, stroke_color, settings } = this.params;
        const { left, top, width, height } = bounding_zone;
        const ctx = window.mentalo_drawing_context;

        draw_rect(ctx, left, top, width, height, {
            fill_color: "rgba(0,0,0,0)",
            rounded_corners_radius: settings.slot_rounded_corner_radius,
            border: {
                width: settings.slot_border_width,
                color: stroke_color,
            }
        });

        this.draw_children();
    }
}

module.exports = InventorySlotCpt;
},{"../lib/shape-tools":8,"./ui-component":30}],28:[function(require,module,exports){
"use strict";

const MtlUiComponent = require("./ui-component");

/**
 * The component that draws the scene animation.
 */
class SceneAnimationCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
        this.framecount = 0;
        // This state controls the visibility of the text box child component.
        this.state.text_box_visible = true;
    }

    /**
     * Sets the text_box_visibility state.
     * @param {Boolean} value 
     */
    set_text_box_visibility(value) {
        this.state.text_box_visible = value;
    }

    /**
     * Increments the animation frame count
     */
    update_framecount() {
        this.framecount = this.framecount + 1 <= Number.MAX_SAFE_INTEGER ? this.framecount + 1 : 0;
    }

    /**
     * Draw the scene animation on the canvas  at the frame given by the animation state
     * and draw each child component like text box, game objects and error popup.
     */
    draw() {
        super.draw();
        const { bounding_zone, get_animation, next_frame_ready } = this.params;
        if (next_frame_ready()) {
            this.clear_bounding_zone();
            const ctx = window.mentalo_drawing_context;

            const animation = get_animation();
            animation.update_frame(this.framecount);
            const dim = animation.dimensions;
            const w = dim.width;
            const h = dim.height;
            const offsetX = animation.frame * w;

            const cw = bounding_zone.width;
            const ch = bounding_zone.height;

            // center the image
            if (!animation.canvas_precalc) {
                animation.canvas_precalc = {
                    dx: bounding_zone.left,
                    dy: bounding_zone.top,
                    dw: cw,
                    dh: ch,
                };

                if (w / h > cw / ch) {
                    // image is more panoramic than canvas
                    animation.canvas_precalc.dw = cw;
                    animation.canvas_precalc.dh = cw * (h / w);
                    // center vertically
                    animation.canvas_precalc.dy = bounding_zone.top + ((ch - animation.canvas_precalc.dh) / 2);
                } else if (cw / ch > w / h) {
                    // canvas is more panoramic
                    animation.canvas_precalc.dh = ch;
                    animation.canvas_precalc.dw = ch * (w / h);
                    // center horizontally
                    animation.canvas_precalc.dx = bounding_zone.left + ((cw - animation.canvas_precalc.dw) / 2);
                } else {
                    // same ratio
                    animation.canvas_precalc.dh = ch;
                    animation.canvas_precalc.dw = cw;
                }
            }

            const { dx, dy, dw, dh } = animation.canvas_precalc;
            ctx.drawImage(
                animation.image,
                offsetX, 0,
                w, h,
                dx, dy,
                dw, dh
            );

            this.draw_children();
            this.update_framecount();
        }
    }
}

module.exports = SceneAnimationCpt;
},{"./ui-component":30}],29:[function(require,module,exports){
"use strict";

const { get_canvas_font, get_canvas_char_size } = require("../lib/font-tools");
const { draw_rect } = require("../lib/shape-tools");
const MtlUiComponent = require("./ui-component");

/**
 * The component that handles the displaying of a scene text boxe.
 */
class TextBoxCpt extends MtlUiComponent {
    constructor(params) {
        super(params);
        this.state.text = {};
    }

    /**
     * Initialize precalculations for the text box, text dimensions, split lines, etc.
     */
    init() {
        const { text, settings, bounding_zone } = this.params;
        const ctx = window.mentalo_drawing_context;
        ctx.font = get_canvas_font(settings);

        const char_size = get_canvas_char_size(ctx);
        const line_height = char_size.height * 1.2;
        const error_offset = 3 * char_size.width;
        const chars_per_line = (bounding_zone.width - error_offset) / char_size.width;
        const output_lines = [];
        const lines = text.split("\n");

        lines.forEach(line => {
            const res = [""];
            let target_i = 0;
            for (const word of line.split(" ")) {
                if ((res[target_i] + word + " ").length > chars_per_line) {
                    res.push("");
                    target_i++;
                }
                res[target_i] += word + " ";
            }

            res.forEach(l => output_lines.push(l));
        });

        const text_height = output_lines.length * line_height;

        const updated_bounds = Object.assign({ ...bounding_zone }, {
            height: bounding_zone.height + text_height,
            top: bounding_zone.top - text_height,
        });

        this.state.text = {
            lines: output_lines,
            line_height,
            bounding_zone: updated_bounds,
        };

        // Update closing icon position
        const closing_icon = this.children[0];
        let closing_icon_bounds = closing_icon.params.bounding_zone;
        closing_icon_bounds = Object.assign(closing_icon_bounds, {
            top: closing_icon_bounds.top - text_height,
            bottom: closing_icon_bounds.bottom - text_height,
        });
        closing_icon.params.center.y -= text_height;

        this.state.initialized = true;
    }

    /**
     * Draw the text box and the text inside of it.
     * The text is not drawn at once, the characters are drawn one by one at each frame 
     * and a local text.stream state is updated until text is complete.
     */
    draw() {
        if (!this.params.get_visibility_state()) {
            return;
        }

        super.draw();

        const { settings } = this.params;

        if (!this.state.initialized) {
            this.init();
        }

        const ctx = window.mentalo_drawing_context;
        const { lines, line_height, bounding_zone } = this.state.text;

        ctx.font = get_canvas_font(settings);
        ctx.textAlign = settings.text_align;
        ctx.textBaseline = "top";

        const box_pos = { x: bounding_zone.left, y: bounding_zone.top };
        const box_width = bounding_zone.width;
        const box_height = bounding_zone.height;

        draw_rect(ctx, box_pos.x, box_pos.y, box_width, box_height, {
            fill_color: settings.background_color,
            rounded_corners_radius: settings.rounded_corners_radius,
            border: {
                width: settings.border_width,
                color: settings.font_color,
            },
        });

        ctx.fillStyle = settings.font_color;

        const get_text_position = () => {
            const { padding } = settings;
            switch (ctx.textAlign) {
                case "left":
                    return {
                        x: box_pos.x + padding,
                        y: box_pos.y + padding,
                    }
                case "right":
                    return {
                        x: box_pos.x + box_width - padding,
                        y: box_pos.y + padding,
                    }
                case "center":
                    return {
                        x: box_pos.x + box_width / 2,
                        y: box_pos.y + padding,
                    }
                default:
                    return {
                        x: box_pos.x + padding,
                        y: box_pos.y + padding,
                    }
            }
        };

        const text_pos = get_text_position();

        this.state.text.stream = this.state.text.stream || {
            line_chars: 0,
            line_index: 0,
            complete: false,
        };

        const streamed_lines = lines.map((line, i) => {
            const stream_state = this.state.text.stream;
            if (i < stream_state.line_index || stream_state.complete) {
                return line;
            } else if (i > stream_state.line_index) {
                return "";
            } else {
                const slice = line.slice(0, ++stream_state.line_chars);
                if (slice.length === line.length) {
                    stream_state.complete = lines.length - 1 === stream_state.line_index;
                    stream_state.line_index = stream_state.complete
                        ? stream_state.line_index
                        : stream_state.line_index + 1;
                    stream_state.line_chars = 0;
                }
                return slice;
            }
        });

        streamed_lines.forEach(line => {
            ctx.fillText(line, text_pos.x, text_pos.y);
            text_pos.y += line_height;
        });

        if (this.state.text.stream.complete) {
            this.draw_children(); // draw closing_icon
        }
    }
}

module.exports = TextBoxCpt;
},{"../lib/font-tools":6,"../lib/shape-tools":8,"./ui-component":30}],30:[function(require,module,exports){
"use strict";

const { draw_rect } = require("../lib/shape-tools");

/**
 * A generic class that must be extended by all components registered in MtlRender.components.
 * It provides helping methods to handle event listeners and children components.
 */
class MtlUiComponent {
    constructor(params) {
        this.set_str_identifier();
        this.params = params;
        this.params.event_listeners = this.params.event_listeners || [];
        this.params.get_children = this.params.get_children || (() => []);
        this.params.is_visible = this.params.is_visible || (() => true);
        this.children = [];
        this.children_set = false;
        this.set_children();
        this.state = {
            event_listeners_initialized: false,
        };

        this.init_event_listeners();
    }

    /**
     * Provide a identifier for the object. Default is contructor name.
     * @param {String} str 
     */
    set_str_identifier(str = this.constructor.name) {
        this.str_identifier = str;
    }

    /**
     * Draws a black rectangle on all the surface of the bounding zone defined for this component
     * @param {Object} options can provide a clear_color<String> rgba value
     */
    clear_bounding_zone(options = {}) {
        const { bounding_zone } = this.params;
        draw_rect(window.mentalo_drawing_context, bounding_zone.left, bounding_zone.top, bounding_zone.width, bounding_zone.height, {
            fill_color: options.clear_color || bounding_zone.clear_color || "rgba(0,0,0,0)"
        });
    }

    /**
     * Removes the event listeners attached to this component and to children components.
     * @param {Object} options can pass a recursive flag wether children must be cleared or not. Default is true.
     */
    clear_event_listeners(options = { recursive: true }) {
        this.params.event_listeners.forEach(ref => {
            window.removeEventListener(ref.event_type, ref.listener);
        });

        if (options.recursive) {
            this.children.forEach(child => {
                child.clear_event_listeners();
            });
        }

        this.state.event_listeners_initialized = false;
    }

    /**
     * Removes children components from this component.
     * Options can define some component to exlude identifying them by their str_identifier.
     * The excluded component will be kept as persistent components.
     * @param {Object} options 
     */
    clear_children(options) {
        const { exclude } = options;
        const persistent_children = [];

        this.children.forEach(child => {
            if (exclude.includes(child.str_identifier)) {
                persistent_children.push(child);
            }
        });

        this.children = persistent_children;
        this.children_set = false;
    }

    /**
     * Register an array of children components in this component.