@drincs/pixi-vn 0.6.1 → 0.6.3

package/dist/labels/BaseCanvasElementTestLabel.mjs

@@ -1,5 +1,5 @@
-import { Sprite, Container, Assets, FillGradient, Color, TextStyle, Text, Application, Texture } from 'pixi.js';
-import 'deep-diff';
+import { Sprite, Container, Application, Assets, FillGradient, Color, TextStyle, Text, Texture } from 'pixi.js';
+import { diff } from 'deep-diff';
 import sha1 from 'crypto-js/sha1';
 
 var __defProp = Object.defineProperty;
@@ -50,138 +50,6 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-
-// src/decorators/CanvasElementDecorator.ts
-var registeredCanvasElement = {};
-function getCanvasElementInstanceByClassName(canvasName) {
-  try {
-    let eventType = registeredCanvasElement[canvasName];
-    if (!eventType) {
-      if (canvasName === "CanvasContainer") {
-        eventType = CanvasContainer;
-      } else if (canvasName === "CanvasImage") {
-        eventType = CanvasImage;
-      } else if (canvasName === "CanvasSprite") {
-        eventType = CanvasSprite;
-      } else if (canvasName === "CanvasText") {
-        eventType = CanvasText;
-      }
-    }
-    if (!eventType) {
-      console.error(`[Pixi'VN] CanvasElement ${canvasName} not found`);
-      return;
-    }
-    let canvasElement = new eventType();
-    return canvasElement;
-  } catch (e) {
-    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasName}`, e);
-    return;
-  }
-}
-
-// src/functions/CanvasUtility.ts
-function getTextureMemory(texture) {
-  let sourceTexture = texture.source;
-  let textureMemory = {
-    image: sourceTexture.label
-  };
-  return textureMemory;
-}
-function exportCanvasElement(element) {
-  return element.memory;
-}
-function importCanvasElement(memory) {
-  let element = getCanvasElementInstanceByClassName(memory.className);
-  if (element) {
-    element.memory = memory;
-  } else {
-    throw new Error("[Pixi'VN] The element " + memory.className + " could not be created");
-  }
-  return element;
-}
-
-// src/classes/canvas/CanvasContainer.ts
-var CanvasContainer = class extends Container {
-  get memory() {
-    let memory = getMemoryContainer(this);
-    this.children.forEach((child) => {
-      memory.elements.push(exportCanvasElement(child));
-    });
-    return memory;
-  }
-  set memory(value) {
-    setMemoryContainer(this, value);
-    value.elements.forEach((child) => {
-      this.addChild(importCanvasElement(child));
-    });
-  }
-};
-function getMemoryContainer(element) {
-  return {
-    className: "CanvasContainer",
-    elements: [],
-    width: element.width,
-    height: element.height,
-    isRenderGroup: element.isRenderGroup,
-    blendMode: element.blendMode,
-    tint: element.tint,
-    alpha: element.alpha,
-    angle: element.angle,
-    renderable: element.renderable,
-    rotation: element.rotation,
-    scale: { x: element.scale.x, y: element.scale.y },
-    pivot: { x: element.pivot.x, y: element.pivot.y },
-    position: { x: element.position.x, y: element.position.y },
-    skew: { x: element.skew.x, y: element.skew.y },
-    visible: element.visible,
-    culled: element.culled,
-    x: element.x,
-    y: element.y,
-    boundsArea: element.boundsArea,
-    cursor: element.cursor,
-    eventMode: element.eventMode,
-    interactive: element.interactive,
-    interactiveChildren: element.interactiveChildren,
-    hitArea: element.hitArea
-  };
-}
-function setMemoryContainer(element, memory) {
-  memory.width && (element.width = memory.width);
-  memory.height && (element.height = memory.height);
-  memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
-  memory.blendMode && (element.blendMode = memory.blendMode);
-  memory.tint && (element.tint = memory.tint);
-  memory.alpha && (element.alpha = memory.alpha);
-  memory.angle && (element.angle = memory.angle);
-  memory.renderable && (element.renderable = memory.renderable);
-  memory.rotation && (element.rotation = memory.rotation);
-  if (memory.scale) {
-    if (typeof memory.scale === "number") {
-      element.scale.set(memory.scale, memory.scale);
-    } else {
-      element.scale.set(memory.scale.x, memory.scale.y);
-    }
-  }
-  if (memory.pivot) {
-    if (typeof memory.pivot === "number") {
-      element.pivot.set(memory.pivot, memory.pivot);
-    } else {
-      element.pivot.set(memory.pivot.x, memory.pivot.y);
-    }
-  }
-  memory.position && element.position.set(memory.position.x, memory.position.y);
-  memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
-  memory.visible && (element.visible = memory.visible);
-  memory.culled && (element.culled = memory.culled);
-  memory.x && (element.x = memory.x);
-  memory.y && (element.y = memory.y);
-  memory.boundsArea && (element.boundsArea = memory.boundsArea);
-  memory.cursor && (element.cursor = memory.cursor);
-  memory.eventMode && (element.eventMode = memory.eventMode);
-  memory.interactive && (element.interactive = memory.interactive);
-  memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
-  memory.hitArea && (element.hitArea = memory.hitArea);
-}
 function getTexture(imageUrl) {
   return __async(this, null, function* () {
     if (Assets.cache.has(imageUrl)) {
@@ -203,17 +71,19 @@ function getTexture(imageUrl) {
     });
   });
 }
-function getTextStyle(style) {
-  let fill = style.fill;
-  if (fill instanceof Object) {
-    console.warn("[Pixi'VN] CanvasText.style.fill is a FillGradient or FillPattern, this is not supported yet.", fill);
-    fill = "#00FF00";
+function getFillGradientFillPattern(prop, propName) {
+  if (!(prop instanceof Object)) {
+    return prop;
   }
+  console.warn(`[Pixi'VN] CanvasText.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop);
+  return void 0;
+}
+function getTextStyle(style) {
   return {
     align: style.align,
     breakWords: style.breakWords,
     dropShadow: style.dropShadow,
-    fill,
+    fill: getFillGradientFillPattern(style.stroke, "fill"),
     fontFamily: style.fontFamily,
     fontSize: style.fontSize,
     fontStyle: style.fontStyle,
@@ -223,7 +93,7 @@ function getTextStyle(style) {
     letterSpacing: style.letterSpacing,
     lineHeight: style.lineHeight,
     padding: style.padding,
-    stroke: style.stroke,
+    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
     textBaseline: style.textBaseline,
     trim: style.trim,
     whiteSpace: style.whiteSpace,
@@ -234,40 +104,43 @@ function getTextStyle(style) {
 
 // src/decorators/EventDecorator.ts
 var registeredEvents = {};
-function getEventTypeByClassName(eventName) {
+function getEventTypeById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     new eventType();
     return eventType;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
-function getEventInstanceByClassName(eventName) {
+function getEventInstanceById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     let event = new eventType();
     return event;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
 
 // src/classes/canvas/CanvasSprite.ts
+var CANVAS_SPRITE_ID = "CanvasSprite";
 var CanvasSprite = class _CanvasSprite extends Sprite {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_SPRITE_ID;
   }
   get memory() {
     return getMemorySprite(this);
@@ -308,9 +181,9 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -339,7 +212,7 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
 function getMemorySprite(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasSprite",
+    pixivnId: element.pixivnId,
     textureImage: getTextureMemory(element.texture),
     anchor: { x: element.anchor.x, y: element.anchor.y },
     roundPixels: element.roundPixels,
@@ -362,8 +235,8 @@ function setMemorySprite(element, memory) {
   }
   memory.roundPixels && (element.roundPixels = memory.roundPixels);
   for (let event in memory.onEvents) {
-    let className = memory.onEvents[event];
-    let instance = getEventTypeByClassName(className);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
@@ -371,9 +244,11 @@ function setMemorySprite(element, memory) {
 }
 
 // src/classes/canvas/CanvasImage.ts
+var CANVAS_IMAGE_ID = "CanvasImage";
 var CanvasImage = class _CanvasImage extends CanvasSprite {
   constructor(options, imageLink) {
     super(options);
+    this.pixivnId = CANVAS_IMAGE_ID;
     this.imageLink = "";
     if (imageLink) {
       this.imageLink = imageLink;
@@ -381,12 +256,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
   }
   get memory() {
     return __spreadProps(__spreadValues({}, getMemorySprite(this)), {
-      className: "CanvasImage",
-      textureImage: { image: this.imageLink }
+      pixivnId: this.pixivnId,
+      imageLink: this.imageLink
     });
   }
   set memory(memory) {
     setMemorySprite(this, memory);
+    this.imageLink = memory.imageLink;
   }
   static from(source, skipCache) {
     let sprite = Sprite.from(source, skipCache);
@@ -414,10 +290,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
     });
   }
 };
+var CANVAS_TEXT_ID = "CanvasText";
 var CanvasText = class extends Text {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_TEXT_ID;
   }
   get memory() {
     return getMemoryText(this);
@@ -458,9 +337,9 @@ var CanvasText = class extends Text {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -483,7 +362,7 @@ var CanvasText = class extends Text {
 function getMemoryText(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasText",
+    pixivnId: element.pixivnId,
     anchor: { x: element.anchor.x, y: element.anchor.y },
     text: element.text,
     resolution: element.resolution,
@@ -506,13 +385,170 @@ function setMemoryText(element, memory) {
   memory.style && (element.style = memory.style);
   memory.roundPixels && (element.roundPixels = memory.roundPixels);
   for (let event in memory.onEvents) {
-    let className = memory.onEvents[event];
-    let instance = getEventTypeByClassName(className);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
   }
 }
+
+// src/decorators/CanvasElementDecorator.ts
+var registeredCanvasElement = {};
+function getCanvasElementInstanceById(canvasId) {
+  try {
+    let eventType = registeredCanvasElement[canvasId];
+    if (!eventType) {
+      if (canvasId === CANVAS_CONTAINER_ID) {
+        eventType = CanvasContainer;
+      } else if (canvasId === CANVAS_IMAGE_ID) {
+        eventType = CanvasImage;
+      } else if (canvasId === CANVAS_SPRITE_ID) {
+        eventType = CanvasSprite;
+      } else if (canvasId === CANVAS_TEXT_ID) {
+        eventType = CanvasText;
+      }
+    }
+    if (!eventType) {
+      console.error(`[Pixi'VN] CanvasElement ${canvasId} not found`);
+      return;
+    }
+    let canvasElement = new eventType();
+    return canvasElement;
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasId}`, e);
+    return;
+  }
+}
+
+// src/functions/CanvasUtility.ts
+function getTextureMemory(texture) {
+  let sourceTexture = texture.source;
+  let textureMemory = {
+    image: sourceTexture.label
+  };
+  return textureMemory;
+}
+function exportCanvasElement(element) {
+  return element.memory;
+}
+function importCanvasElement(memory) {
+  let element = getCanvasElementInstanceById(memory.pixivnId);
+  if (element) {
+    element.memory = memory;
+  } else {
+    throw new Error("[Pixi'VN] The element " + memory.pixivnId + " could not be created");
+  }
+  return element;
+}
+
+// src/classes/canvas/CanvasContainer.ts
+var CANVAS_CONTAINER_ID = "CanvasContainer";
+var CanvasContainer = class extends Container {
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_CONTAINER_ID;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID;
+  }
+  get memory() {
+    let memory = getMemoryContainer(this);
+    this.children.forEach((child) => {
+      memory.elements.push(exportCanvasElement(child));
+    });
+    return memory;
+  }
+  set memory(value) {
+    setMemoryContainer(this, value);
+    value.elements.forEach((child) => {
+      this.addChild(importCanvasElement(child));
+    });
+  }
+};
+function getMemoryContainer(element) {
+  let className = "CanvasContainer";
+  if (element.hasOwnProperty("pixivnId")) {
+    className = element.pixivnId;
+  }
+  return {
+    pixivnId: className,
+    elements: [],
+    width: element.width,
+    height: element.height,
+    isRenderGroup: element.isRenderGroup,
+    blendMode: element.blendMode,
+    tint: element.tint,
+    alpha: element.alpha,
+    angle: element.angle,
+    renderable: element.renderable,
+    rotation: element.rotation,
+    scale: { x: element.scale.x, y: element.scale.y },
+    pivot: { x: element.pivot.x, y: element.pivot.y },
+    position: { x: element.position.x, y: element.position.y },
+    skew: { x: element.skew.x, y: element.skew.y },
+    visible: element.visible,
+    x: element.x,
+    y: element.y,
+    boundsArea: element.boundsArea,
+    cursor: element.cursor,
+    eventMode: element.eventMode,
+    interactive: element.interactive,
+    interactiveChildren: element.interactiveChildren,
+    hitArea: element.hitArea
+  };
+}
+function setMemoryContainer(element, memory) {
+  memory.width && (element.width = memory.width);
+  memory.height && (element.height = memory.height);
+  memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
+  memory.blendMode && (element.blendMode = memory.blendMode);
+  memory.tint && (element.tint = memory.tint);
+  memory.alpha && (element.alpha = memory.alpha);
+  memory.angle && (element.angle = memory.angle);
+  memory.renderable && (element.renderable = memory.renderable);
+  memory.rotation && (element.rotation = memory.rotation);
+  if (memory.scale) {
+    if (typeof memory.scale === "number") {
+      element.scale.set(memory.scale, memory.scale);
+    } else {
+      element.scale.set(memory.scale.x, memory.scale.y);
+    }
+  }
+  if (memory.pivot) {
+    if (typeof memory.pivot === "number") {
+      element.pivot.set(memory.pivot, memory.pivot);
+    } else {
+      element.pivot.set(memory.pivot.x, memory.pivot.y);
+    }
+  }
+  memory.position && element.position.set(memory.position.x, memory.position.y);
+  memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
+  memory.visible && (element.visible = memory.visible);
+  memory.x && (element.x = memory.x);
+  memory.y && (element.y = memory.y);
+  memory.boundsArea && (element.boundsArea = memory.boundsArea);
+  memory.cursor && (element.cursor = memory.cursor);
+  memory.eventMode && (element.eventMode = memory.eventMode);
+  memory.interactive && (element.interactive = memory.interactive);
+  memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
+  memory.hitArea && (element.hitArea = memory.hitArea);
+}
+
+// src/decorators/CharacterDecorator.ts
+var registeredCharacters = {};
+function saveCharacter(character) {
+  if (Array.isArray(character)) {
+    character.forEach((c) => saveCharacter(c));
+    return;
+  }
+  if (registeredCharacters[character.id]) {
+    console.info(`[Pixi'VN] Character id ${character.id} already exists, it will be overwritten`);
+  }
+  registeredCharacters[character.id] = character;
+}
+function getStepSha1(step) {
+  let sha1String = sha1(step.toString().toLocaleLowerCase());
+  return sha1String.toString();
+}
 function checkIfStepsIsEqual(step1, step2) {
   return step1 === step2;
 }
@@ -532,7 +568,7 @@ var Label = class {
     this._choiseIndex = choiseIndex;
   }
   /**
-   * Get the id of the label
+   * Get the id of the label. This variable is used in the system to get the label by id, {@link getLabelById}
    */
   get id() {
     return this._id;
@@ -583,11 +619,237 @@ var Label = class {
     return this._choiseIndex;
   }
 };
-function clearDialogue() {
-  GameStorageManager.setVariable(GameStorageManager.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY, void 0);
+
+// src/classes/CloseLabel.ts
+var CLOSE_LABEL_ID = "__close-label-id__";
+function newCloseLabel(choiseIndex) {
+  return new Label(CLOSE_LABEL_ID, [], void 0, choiseIndex);
 }
 
-// src/constants.ts
+// src/types/CloseType.ts
+var Close = "close";
+
+// src/functions/DialogueUtility.ts
+function setDialogue(props) {
+  let text = "";
+  let character = void 0;
+  let dialogue;
+  if (typeof props === "string") {
+    text = props;
+    dialogue = new DialogueBaseModel(text, character);
+  } else if (!(props instanceof DialogueBaseModel)) {
+    text = props.text;
+    if (props.character) {
+      if (typeof props.character === "string") {
+        character = props.character;
+      } else {
+        character = props.character.id;
+      }
+    }
+    dialogue = new DialogueBaseModel(text, character);
+  } else {
+    dialogue = props;
+  }
+  GameStorageManager.setVariable(GameStorageManager.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY, dialogue);
+  GameStorageManager.setVariable(GameStorageManager.keysSystem.LAST_DIALOGUE_ADDED_IN_STEP_MEMORY_KEY, GameStepManager.lastStepIndex);
+}
+function getDialogue() {
+  return GameStorageManager.getVariable(GameStorageManager.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY);
+}
+function getChoiceMenuOptions() {
+  let d = GameStorageManager.getVariable(GameStorageManager.keysSystem.CURRENT_MENU_OPTIONS_MEMORY_KEY);
+  if (d) {
+    let options = [];
+    d.forEach((option, index) => {
+      if (option.type === Close) {
+        let itemLabel = newCloseLabel(index);
+        options.push({
+          text: option.text,
+          label: itemLabel,
+          type: Close,
+          closeCurrentLabel: option.closeCurrentLabel,
+          props: {}
+        });
+        return;
+      }
+      let label = getLabelById(option.label);
+      if (label) {
+        let itemLabel = new Label(label.id, label.steps, label.onStepRun, index);
+        options.push(__spreadProps(__spreadValues({}, option), {
+          label: itemLabel
+        }));
+      }
+    });
+    return options;
+  }
+  return void 0;
+}
+
+// src/functions/TickerUtility.ts
+function updateTickerProgression(args, propertyName, progression) {
+  if (args[propertyName] === void 0 || !progression || args[propertyName] === progression.limit) {
+    return;
+  }
+  if (typeof args[propertyName] === "number") {
+    if (progression.type === "linear") {
+      args[propertyName] = getLinearProgression(args[propertyName], progression);
+    } else if (progression.type === "exponential") {
+      args[propertyName] = getExponentialProgression(args[propertyName], progression);
+    }
+  } else if (args[propertyName] !== void 0 && typeof args[propertyName] === "object" && args[propertyName].haveOwnProperty("x") && args[propertyName].haveOwnProperty("y") && typeof args[propertyName].x === "number" && typeof args[propertyName].y === "number") {
+    if (progression.type === "linear") {
+      args[propertyName].x = getLinearProgression(args[propertyName].x, progression);
+      args[propertyName].y = getLinearProgression(args[propertyName].y, progression);
+    } else if (progression.type === "exponential") {
+      args[propertyName].x = getExponentialProgression(args[propertyName].x, progression);
+      args[propertyName].y = getExponentialProgression(args[propertyName].y, progression);
+    }
+  }
+}
+function getLinearProgression(number, progression) {
+  if (progression.limit !== void 0) {
+    if (number > progression.limit && progression.amt > 0) {
+      return progression.limit;
+    } else if (number < progression.limit && progression.amt < 0) {
+      return progression.limit;
+    }
+  }
+  return number + progression.amt / 60;
+}
+function getExponentialProgression(number, progression) {
+  if (progression.limit !== void 0) {
+    if (number > progression.limit && progression.percentage > 0) {
+      return progression.limit;
+    } else if (number < progression.limit && progression.percentage < 0) {
+      return progression.limit;
+    }
+  }
+  return number + number * progression.percentage;
+}
+
+// src/classes/ticker/TickerBase.ts
+var TickerBase = class {
+  /**
+   * @param args The arguments that you want to pass to the ticker.
+   * @param duration The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish). @default undefined
+   * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
+   */
+  constructor(args, duration, priority) {
+    /**
+     * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link geTickerInstanceById}
+     */
+    this.id = "ticker_id_not_set";
+    this.args = args;
+    this.duration = duration;
+    this.priority = priority;
+    this.id = this.constructor.prototype.id;
+  }
+  /**
+   * The method that will be called every frame.
+   * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them.
+   * @param _ticker The ticker that is calling this method
+   * @param _args The arguments that you passed when you added the ticker
+   * @param _tags The tags of the canvas elements that are connected to this ticker
+   * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link GameWindowManager.currentTickers}
+   */
+  fn(_ticker, _args, _tags, _tickerId) {
+    throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden");
+  }
+};
+
+// src/classes/ticker/ZoomTicker.ts
+var ZoomTicker = class extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
+    let xSpeed = 0.1;
+    let ySpeed = 0.1;
+    if (args.speed) {
+      if (typeof args.speed === "number") {
+        xSpeed = args.speed;
+        ySpeed = args.speed;
+      } else {
+        xSpeed = args.speed.x;
+        ySpeed = args.speed.y;
+      }
+    }
+    xSpeed /= 60;
+    ySpeed /= 60;
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
+    }
+    let type = args.type || "zoom";
+    let xLimit = type === "zoom" ? Infinity : 0;
+    let yLimit = type === "zoom" ? Infinity : 0;
+    if (args.limit) {
+      if (typeof args.limit === "number") {
+        xLimit = args.limit;
+        yLimit = args.limit;
+      } else {
+        xLimit = args.limit.x;
+        yLimit = args.limit.y;
+      }
+    }
+    tags.filter((tag) => {
+      var _a;
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (args.startOnlyIfHaveTexture) {
+        if (element && element instanceof Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") {
+          return false;
+        }
+      }
+      return true;
+    }).forEach((tag) => {
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (element && element instanceof Container) {
+        if (type === "zoom" && (element.scale.x < xLimit || element.scale.y < yLimit)) {
+          element.scale.x += xSpeed * ticker.deltaTime;
+          element.scale.y += ySpeed * ticker.deltaTime;
+        } else if (type === "unzoom" && (element.scale.x > xLimit || element.scale.y > yLimit)) {
+          element.scale.x -= xSpeed * ticker.deltaTime;
+          element.scale.y -= ySpeed * ticker.deltaTime;
+        }
+        if (type === "zoom") {
+          if (element.scale.x > xLimit) {
+            element.scale.x = xLimit;
+          }
+          if (element.scale.y > yLimit) {
+            element.scale.y = yLimit;
+          }
+          if (element.scale.x >= xLimit && element.scale.y >= yLimit) {
+            element.scale.x = xLimit;
+            element.scale.y = yLimit;
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+          }
+        } else if (type === "unzoom") {
+          if (element.scale.x < xLimit) {
+            element.scale.x = xLimit;
+          }
+          if (element.scale.y < yLimit) {
+            element.scale.y = yLimit;
+          }
+          if (element.scale.x <= xLimit && element.scale.y <= yLimit) {
+            element.scale.x = xLimit;
+            element.scale.y = yLimit;
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+          }
+        }
+        if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
+          this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
+        }
+      }
+    });
+    if (args.speedProgression)
+      updateTickerProgression(args, "speed", args.speedProgression);
+  }
+  onEndOfTicker(tag, tickerId, _element, tagToRemoveAfter2) {
+    GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+  }
+};
+ZoomTicker = __decorateClass([
+  tickerDecorator()
+], ZoomTicker);
+
+// src/constants.ts
 var Repeat = "repeat";
 
 // src/functions/ImageUtility.ts
@@ -606,6 +868,47 @@ function createExportableElement(element) {
   }
 }
 
+// src/functions/DiffUtility.ts
+function restoreDeepDiffChanges(data, differences) {
+  let result = createExportableElement(data);
+  differences.forEach((diff2) => {
+    let dataToEdit = result;
+    if (diff2.path && diff2.path.length > 0) {
+      diff2.path.forEach((path, index) => {
+        if (diff2.path && index === diff2.path.length - 1) {
+          if (diff2.kind === "E" || diff2.kind === "D") {
+            dataToEdit[path] = diff2.lhs;
+          } else if (diff2.kind === "N") {
+            if (Number.isInteger(path)) {
+              if (Array.isArray(dataToEdit)) {
+                dataToEdit.splice(path, 1);
+              }
+            } else if (typeof path === "string") {
+              delete dataToEdit[path];
+            }
+          } else if (diff2.kind === "A") {
+            let index2 = diff2.index;
+            if (diff2.item.kind === "N") {
+              dataToEdit[path].splice(index2, 1);
+            } else if (diff2.item.kind === "E" || diff2.item.kind === "D") {
+              dataToEdit[path][index2] = diff2.item.lhs;
+            } else if (diff2.item.kind === "A") {
+              console.warn("[Pixi'VN] Nested array found, skipping diff", diff2);
+            } else {
+              console.warn("[Pixi'VN] No array found, skipping diff", diff2);
+            }
+          }
+        } else {
+          dataToEdit = dataToEdit[path];
+        }
+      });
+    } else {
+      console.warn("[Pixi'VN] No path found, skipping diff", diff2);
+    }
+  });
+  return result;
+}
+
 // src/managers/StorageManager.ts
 var _GameStorageManager = class _GameStorageManager {
   constructor() {
@@ -691,31 +994,6 @@ var _GameStorageManager = class _GameStorageManager {
 _GameStorageManager.storage = {};
 var GameStorageManager = _GameStorageManager;
 
-// src/classes/ticker/TickerBase.ts
-var TickerBase = class {
-  /**
-   * @param args The arguments that you want to pass to the ticker.
-   * @param duration The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish). @default undefined
-   * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
-   */
-  constructor(args, duration, priority) {
-    this.args = args;
-    this.duration = duration;
-    this.priority = priority;
-  }
-  /**
-   * The method that will be called every frame.
-   * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them.
-   * @param _ticker The ticker that is calling this method
-   * @param _args The arguments that you passed when you added the ticker
-   * @param _tags The tags of the canvas elements that are connected to this ticker
-   * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link GameWindowManager.currentTickers}
-   */
-  fn(_ticker, _args, _tags, _tickerId) {
-    throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden");
-  }
-};
-
 // src/decorators/TickerDecorator.ts
 var registeredTickers = {};
 function tickerDecorator(name) {
@@ -726,19 +1004,20 @@ function tickerDecorator(name) {
     if (registeredTickers[name]) {
       console.info(`[Pixi'VN] Ticker ${name} already exists, it will be overwritten`);
     }
+    target.prototype.id = name;
     registeredTickers[name] = target;
   };
 }
-function geTickerInstanceByClassName(tickerName, args, duration, priority) {
+function geTickerInstanceById(tickerId, args, duration, priority) {
   try {
-    let ticker = registeredTickers[tickerName];
+    let ticker = registeredTickers[tickerId];
     if (!ticker) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     return new ticker(args, duration, priority);
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Ticker ${tickerName}`, e);
+    console.error(`[Pixi'VN] Error while getting Ticker ${tickerId}`, e);
     return;
   }
 }
@@ -810,7 +1089,7 @@ var _GameWindowManager = class _GameWindowManager {
         height
       }, options)).then(() => {
         _GameWindowManager._isInitialized = true;
-        this.addCanvasIntoElement(element);
+        this.addCanvasIntoHTMLElement(element);
         window.addEventListener("resize", _GameWindowManager.resize);
         _GameWindowManager.resize();
         asciiArtLog();
@@ -821,7 +1100,7 @@ var _GameWindowManager = class _GameWindowManager {
    * Add the canvas into a html element.
    * @param element it is the html element where I will put the canvas. Example: document.body
    */
-  static addCanvasIntoElement(element) {
+  static addCanvasIntoHTMLElement(element) {
     if (_GameWindowManager.isInitialized) {
       element.appendChild(_GameWindowManager.app.canvas);
     } else {
@@ -1067,18 +1346,18 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static addTicker(canvasElementTag, ticker) {
-    let tickerName = ticker.constructor.name;
+    let tickerId = ticker.id;
     if (typeof canvasElementTag === "string") {
       canvasElementTag = [canvasElementTag];
     }
-    if (!geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority)) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+    if (!geTickerInstanceById(tickerId, ticker.args, ticker.duration, ticker.priority)) {
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerId,
       args: createExportableElement(ticker.args),
       canvasElementTags: canvasElementTag,
       priority: ticker.priority,
@@ -1094,11 +1373,11 @@ var _GameWindowManager = class _GameWindowManager {
           _GameWindowManager.removeTicker(id);
         }
       }, ticker.duration * 1e3);
-      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString(), true);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerId, timeout.toString(), true);
     }
   }
   static pushTicker(id, tickerData, ticker) {
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, ticker);
     _GameWindowManager._currentTickers[id] = tickerData;
     tickerData.fn = (t) => {
       let data = _GameWindowManager._currentTickers[id];
@@ -1139,9 +1418,9 @@ var _GameWindowManager = class _GameWindowManager {
         if (step.hasOwnProperty("type") && step.type === "pause") {
           return step;
         }
-        let tickerName = step.constructor.name;
+        let tickerId = step.id;
         return {
-          ticker: tickerName,
+          ticker: tickerId,
           args: createExportableElement(step.args),
           duration: step.duration
         };
@@ -1179,16 +1458,16 @@ var _GameWindowManager = class _GameWindowManager {
       _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString(), false);
       return;
     }
-    let ticker = geTickerInstanceByClassName(step.ticker, step.args, step.duration, step.priority);
+    let ticker = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority);
     if (!ticker) {
       console.error(`[Pixi'VN] Ticker ${step.ticker} not found`);
       return;
     }
-    let tickerName = ticker.constructor.name;
+    let tickerName = ticker.id;
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerName,
       args: createExportableElement(ticker.args),
       canvasElementTags: [tag],
       priority: ticker.priority,
@@ -1245,26 +1524,26 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static removeAssociationBetweenTickerCanvasElement(tags, ticker) {
-    let tickerName;
+    let tickerId;
     if (typeof ticker === "string") {
-      tickerName = ticker;
+      tickerId = ticker;
     } else if (ticker instanceof TickerBase) {
-      tickerName = ticker.constructor.name;
+      tickerId = ticker.id;
     } else {
-      tickerName = ticker.name;
+      tickerId = ticker.prototype.id;
     }
     if (typeof tags === "string") {
       tags = [tags];
     }
     for (let id in _GameWindowManager._currentTickers) {
       let ticker2 = _GameWindowManager._currentTickers[id];
-      if (ticker2.className === tickerName) {
+      if (ticker2.id === tickerId) {
         _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e));
       }
     }
     for (let timeout in _GameWindowManager._currentTickersTimeouts) {
       let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
-      if (TickerTimeout.ticker === tickerName && TickerTimeout.canBeDeletedBeforeEnd) {
+      if (TickerTimeout.ticker === tickerId && TickerTimeout.canBeDeletedBeforeEnd) {
         _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t));
       }
     }
@@ -1450,11 +1729,11 @@ var _GameWindowManager = class _GameWindowManager {
         for (let id in currentTickers) {
           let t = currentTickers[id];
           let tags = t.canvasElementTags;
-          let ticker = geTickerInstanceByClassName(t.className, t.args, t.duration, t.priority);
+          let ticker = geTickerInstanceById(t.id, t.args, t.duration, t.priority);
           if (ticker) {
             _GameWindowManager.addTicker(tags, ticker);
           } else {
-            console.error(`[Pixi'VN] Ticker ${t.className} not found`);
+            console.error(`[Pixi'VN] Ticker ${t.id} not found`);
           }
         }
       }
@@ -1479,109 +1758,819 @@ _GameWindowManager._currentTickersSteps = {};
 _GameWindowManager._currentTickersTimeouts = {};
 var GameWindowManager = _GameWindowManager;
 
-// src/decorators/LabelDecorator.ts
-var registeredLabels = {};
-function newLabel(id, steps, onStepRun) {
-  if (registeredLabels[id]) {
-    console.info(`[Pixi'VN] Label ${id} already exists, it will be overwritten`);
+// src/managers/StepManager.ts
+var _GameStepManager = class _GameStepManager {
+  constructor() {
   }
-  let label = new Label(id, steps, onStepRun);
-  registeredLabels[id] = label;
-  return label;
-}
-
-// src/classes/ticker/FadeAlphaTicker.ts
-var FadeAlphaTicker = class extends TickerBase {
-  fn(ticker, args, tags, tickerId) {
-    let type = args.type === void 0 ? "hide" : args.type;
-    let duration = args.duration === void 0 ? 1 : args.duration;
-    let speed = 1 / (duration * 60);
-    let limit = args.limit === void 0 ? type === "hide" ? 0 : 1 : args.limit;
-    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
-    if (typeof tagToRemoveAfter2 === "string") {
-      tagToRemoveAfter2 = [tagToRemoveAfter2];
+  static get stepsHistory() {
+    return _GameStepManager._stepsHistory;
+  }
+  /**
+   * lastStepIndex is the last step index that occurred during the progression of the steps. **Not is the length of the stepsHistory - 1.**
+   */
+  static get lastStepIndex() {
+    return _GameStepManager._lastStepIndex;
+  }
+  /**
+   * Increase the last step index that occurred during the progression of the steps.
+   */
+  static increaseLastStepIndex() {
+    _GameStepManager._lastStepIndex++;
+  }
+  static get openedLabels() {
+    return _GameStepManager._openedLabels;
+  }
+  /**
+   * currentLabelId is the current label id that occurred during the progression of the steps.
+   */
+  static get currentLabelId() {
+    if (_GameStepManager._openedLabels.length > 0) {
+      let item = _GameStepManager._openedLabels[_GameStepManager._openedLabels.length - 1];
+      return item.label;
     }
-    if (type === "hide" && limit < 0) {
-      limit = 0;
+    return void 0;
+  }
+  /**
+   * currentLabel is the current label that occurred during the progression of the steps.
+   */
+  static get currentLabel() {
+    if (_GameStepManager.currentLabelId) {
+      return getLabelById(_GameStepManager.currentLabelId);
     }
-    if (type === "show" && limit > 1) {
-      limit = 1;
+  }
+  static get currentLabelStepIndex() {
+    if (_GameStepManager._openedLabels.length > 0) {
+      let item = _GameStepManager._openedLabels[_GameStepManager._openedLabels.length - 1];
+      return item.currentStepIndex;
     }
-    tags.filter((tag) => {
-      var _a;
-      let element = GameWindowManager.getCanvasElement(tag);
-      if (args.startOnlyIfHaveTexture) {
-        if (element && element instanceof Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") {
-          return false;
-        }
-      }
-      return true;
-    }).forEach((tag) => {
-      let element = GameWindowManager.getCanvasElement(tag);
-      if (element && element instanceof Container) {
-        if (type === "show" && element.alpha < limit) {
-          element.alpha += speed * ticker.deltaTime;
-        } else if (type === "hide" && element.alpha > limit) {
-          element.alpha -= speed * ticker.deltaTime;
+    return null;
+  }
+  /**
+   * lastHistoryStep is the last history step that occurred during the progression of the steps.
+   */
+  static get lastHistoryStep() {
+    if (_GameStepManager._stepsHistory.length > 0) {
+      return _GameStepManager._stepsHistory[_GameStepManager._stepsHistory.length - 1];
+    }
+    return null;
+  }
+  static get originalStepData() {
+    if (!_GameStepManager._originalStepData) {
+      return {
+        path: "",
+        storage: {},
+        canvas: {
+          childrenTagsOrder: [],
+          currentElements: {},
+          currentTickers: {},
+          currentTickersSteps: {}
+        },
+        labelIndex: -1,
+        openedLabels: []
+      };
+    }
+    return createExportableElement(_GameStepManager._originalStepData);
+  }
+  static set originalStepData(value) {
+    _GameStepManager._originalStepData = createExportableElement(value);
+  }
+  /* Edit History Methods */
+  /**
+   * Add a label to the history.
+   * @param label The label to add to the history.
+   */
+  static addStepHistory(step, choiseMade) {
+    let stepHistory = getStepSha1(step);
+    let historyStep = {
+      path: window.location.pathname,
+      storage: GameStorageManager.export(),
+      canvas: GameWindowManager.export(),
+      labelIndex: _GameStepManager.currentLabelStepIndex || 0,
+      openedLabels: createExportableElement(_GameStepManager._openedLabels)
+    };
+    if (_GameStepManager.originalStepData) {
+      if (_GameStepManager.originalStepData.openedLabels.length === historyStep.openedLabels.length) {
+        try {
+          let lastStepDataOpenedLabelsString = JSON.stringify(_GameStepManager.originalStepData.openedLabels);
+          let historyStepOpenedLabelsString = JSON.stringify(historyStep.openedLabels);
+          if (lastStepDataOpenedLabelsString === historyStepOpenedLabelsString && _GameStepManager.originalStepData.path === historyStep.path && _GameStepManager.originalStepData.labelIndex === historyStep.labelIndex) {
+            return;
+          }
+        } catch (e) {
+          console.error("[Pixi'VN] Error comparing openedLabels", e);
         }
-        if (type === "show" && element.alpha >= limit) {
-          element.alpha = limit;
-          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
-        } else if (type === "hide" && element.alpha <= limit) {
-          element.alpha = limit;
-          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+      }
+    }
+    let data = diff(_GameStepManager.originalStepData, historyStep);
+    if (data) {
+      let dialoge = void 0;
+      let requiredChoices = void 0;
+      if (GameStorageManager.getVariable(GameStorageManager.keysSystem.LAST_DIALOGUE_ADDED_IN_STEP_MEMORY_KEY) === _GameStepManager.lastStepIndex) {
+        dialoge = getDialogue();
+      }
+      if (GameStorageManager.getVariable(GameStorageManager.keysSystem.LAST_MENU_OPTIONS_ADDED_IN_STEP_MEMORY_KEY) === _GameStepManager.lastStepIndex) {
+        requiredChoices = GameStorageManager.getVariable(GameStorageManager.keysSystem.CURRENT_MENU_OPTIONS_MEMORY_KEY);
+      }
+      _GameStepManager._stepsHistory.push({
+        diff: data,
+        currentLabel: _GameStepManager.currentLabelId,
+        dialoge,
+        choices: requiredChoices,
+        stepSha1: stepHistory,
+        index: _GameStepManager.lastStepIndex,
+        choiceIndexMade: choiseMade
+      });
+      _GameStepManager.originalStepData = historyStep;
+    }
+    _GameStepManager.increaseLastStepIndex();
+  }
+  /**
+   * Add a label to the history.
+   * @param label The label to add to the history.
+   */
+  static pushNewLabel(label) {
+    let currentLabel = getLabelById(label);
+    if (!currentLabel) {
+      throw new Error(`[Pixi'VN] Label ${label} not found`);
+    }
+    _GameStepManager._openedLabels.push({
+      label,
+      currentStepIndex: 0
+    });
+  }
+  /**
+   * Close the current label and add it to the history.
+   * @returns 
+   */
+  static closeCurrentLabel() {
+    if (!_GameStepManager.currentLabelId) {
+      console.warn("[Pixi'VN] No label to close");
+      return;
+    }
+    if (!_GameStepManager.currentLabel) {
+      console.error("[Pixi'VN] currentLabel not found");
+      return;
+    }
+    _GameStepManager._openedLabels.pop();
+  }
+  /**
+   * Close all labels and add them to the history. **Attention: This method can cause an unhandled game ending.**
+   */
+  static closeAllLabels() {
+    while (_GameStepManager._openedLabels.length > 0) {
+      _GameStepManager.closeCurrentLabel();
+    }
+  }
+  /**
+   * Increase the current step index of the current label.
+   */
+  static increaseCurrentStepIndex() {
+    let item = _GameStepManager._openedLabels[_GameStepManager._openedLabels.length - 1];
+    _GameStepManager._openedLabels[_GameStepManager._openedLabels.length - 1] = __spreadProps(__spreadValues({}, item), {
+      currentStepIndex: item.currentStepIndex + 1
+    });
+  }
+  static restorLastLabelList() {
+    _GameStepManager._openedLabels = _GameStepManager.originalStepData.openedLabels;
+  }
+  /* Run Methods */
+  static get canGoNext() {
+    let options = getChoiceMenuOptions();
+    if (options && options.length > 0) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Execute the next step and add it to the history.
+   * @param props The props to pass to the step.
+   * @param choiseMade The index of the choise made by the player. (This params is used in the choice menu)
+   * @returns StepLabelResultType or undefined.
+   * @example
+   * ```typescript
+   *     function nextOnClick() {
+   *     setLoading(true)
+   *     GameStepManager.goNext(yourParams)
+   *         .then((result) => {
+   *             setUpdate((p) => p + 1)
+   *             setLoading(false)
+   *             if (result) {
+   *                 // your code
+   *             }
+   *         })
+   *         .catch((e) => {
+   *             setLoading(false)
+   *             console.error(e)
+   *         })
+   * }
+   * ```
+   */
+  static goNext(props, choiseMade) {
+    return __async(this, null, function* () {
+      if (!_GameStepManager.canGoNext) {
+        console.warn("[Pixi'VN] The player must make a choice");
+        return;
+      }
+      _GameStepManager.increaseCurrentStepIndex();
+      return yield _GameStepManager.runCurrentStep(props, choiseMade);
+    });
+  }
+  /**
+   * Execute the current step and add it to the history.
+   * @param props The props to pass to the step.
+   * @param choiseMade The choise made by the player.
+   * @returns StepLabelResultType or undefined.
+   */
+  static runCurrentStep(props, choiseMade) {
+    return __async(this, null, function* () {
+      if (_GameStepManager.currentLabelId) {
+        let currentLabelStepIndex = _GameStepManager.currentLabelStepIndex;
+        if (currentLabelStepIndex === null) {
+          console.error("[Pixi'VN] currentLabelStepIndex is null");
+          return;
+        }
+        let currentLabel = _GameStepManager.currentLabel;
+        if (!currentLabel) {
+          console.error("[Pixi'VN] currentLabel not found");
+          return;
+        }
+        if (currentLabel.steps.length > currentLabelStepIndex) {
+          let step = currentLabel.steps[currentLabelStepIndex];
+          let result = yield step(props);
+          _GameStepManager.addStepHistory(step, choiseMade);
+          return result;
+        } else if (_GameStepManager.openedLabels.length > 1) {
+          _GameStepManager.closeCurrentLabel();
+          return yield _GameStepManager.goNext(props, choiseMade);
+        } else {
+          _GameStepManager.restorLastLabelList();
+          console.error("[Pixi'VN] The end of the game is not managed, so the game is blocked. Read this documentation to know how to manage the end of the game: https://pixi-vn.web.app/start/labels.html#how-manage-the-end-of-the-game");
+          return;
+        }
+      }
+    });
+  }
+  /**
+   * Execute the label and add it to the history. (It's similar to Ren'Py's call function)
+   * @param label The label to execute or the id of the label
+   * @param props The props to pass to the label.
+   * @returns StepLabelResultType or undefined.
+   * @example
+   * ```typescript
+   * GameStepManager.callLabel(startLabel, yourParams).then((result) => {
+   *     if (result) {
+   *         // your code
+   *     }
+   * })
+   * ```
+   * @example
+   * ```typescript
+   * // if you use it in a step label you should return the result.
+   * return GameStepManager.callLabel(startLabel).then((result) => {
+   *     return result
+   * })
+   * ```
+   */
+  static callLabel(label, props) {
+    return __async(this, null, function* () {
+      let choiseMade = void 0;
+      let labelId;
+      if (typeof label === "string") {
+        labelId = label;
+      } else {
+        labelId = label.id;
+        if (typeof label.choiseIndex === "number") {
+          choiseMade = label.choiseIndex;
+        }
+      }
+      try {
+        if (labelId === CLOSE_LABEL_ID) {
+          let closeCurrentLabel = newCloseLabel(choiseMade);
+          let choice = {
+            label: closeCurrentLabel,
+            text: "",
+            closeCurrentLabel: false,
+            type: "close",
+            props: {}
+          };
+          return _GameStepManager.closeChoiceMenu(choice, props);
+        }
+        let tempLabel = getLabelById(labelId);
+        if (!tempLabel) {
+          throw new Error(`[Pixi'VN] Label ${labelId} not found`);
+        }
+        _GameStepManager.pushNewLabel(tempLabel.id);
+      } catch (e) {
+        console.error("[Pixi'VN] Error calling label", e);
+        return;
+      }
+      return yield _GameStepManager.runCurrentStep(props, choiseMade);
+    });
+  }
+  /**
+   * Execute the label, close the current label, execute the new label and add the new label to the history. (It's similar to Ren'Py's jump function)
+   * @param label The label to execute.
+   * @param props The props to pass to the label or the id of the label
+   * @returns StepLabelResultType or undefined.
+   * @example
+   * ```typescript
+   * GameStepManager.jumpLabel(startLabel, yourParams).then((result) => {
+   *     if (result) {
+   *         // your code
+   *     }
+   * })
+   * ```
+   * @example
+   * ```typescript
+   * // if you use it in a step label you should return the result.
+   * return GameStepManager.jumpLabel(startLabel).then((result) => {
+   *     return result
+   * })
+   * ```
+   */
+  static jumpLabel(label, props) {
+    return __async(this, null, function* () {
+      _GameStepManager.closeCurrentLabel();
+      let choiseMade = void 0;
+      let labelId;
+      if (typeof label === "string") {
+        labelId = label;
+      } else {
+        labelId = label.id;
+        if (typeof label.choiseIndex === "number") {
+          choiseMade = label.choiseIndex;
+        }
+      }
+      try {
+        if (labelId === CLOSE_LABEL_ID) {
+          let closeCurrentLabel = newCloseLabel(choiseMade);
+          let choice = {
+            label: closeCurrentLabel,
+            text: "",
+            closeCurrentLabel: false,
+            type: "close",
+            props: {}
+          };
+          return _GameStepManager.closeChoiceMenu(choice, props);
         }
+        let tempLabel = getLabelById(labelId);
+        if (!tempLabel) {
+          throw new Error(`[Pixi'VN] Label ${labelId} not found`);
+        }
+        _GameStepManager.pushNewLabel(tempLabel.id);
+      } catch (e) {
+        console.error("[Pixi'VN] Error jumping label", e);
+        return;
       }
+      return yield _GameStepManager.runCurrentStep(props, choiseMade);
     });
   }
+  /**
+   * When the player is in a choice menu, can use this function to exit to the choice menu.
+   * @param choice
+   * @param props
+   * @returns StepLabelResultType or undefined.
+   * @example
+   * ```typescript
+   * GameStepManager.closeChoiceMenu(yourParams).then((result) => {
+   *     if (result) {
+   *         // your code
+   *     }
+   * })
+   * ```
+   */
+  static closeChoiceMenu(choice, props) {
+    return __async(this, null, function* () {
+      let label = choice.label;
+      let choiseMade = void 0;
+      if (typeof label.choiseIndex === "number") {
+        choiseMade = label.choiseIndex;
+      }
+      if (choice.closeCurrentLabel) {
+        _GameStepManager.closeCurrentLabel();
+      }
+      return _GameStepManager.goNext(props, choiseMade);
+    });
+  }
+  /* After Update Methods */
+  // /**
+  //  * After the update or code edit, some steps or labels may no longer match.
+  //  * - In case of step mismatch, the game will be updated to the last matching step.
+  //  * - In case of label mismatch, the game gives an error.
+  //  * @returns 
+  //  */
+  // private static afterUpdate() {
+  //     // TODO: implement
+  //     if (!GameStepManager.currentLabel) {
+  //         // TODO: implement
+  //         return
+  //     }
+  //     let currentLabel = getLabelInstanceByClassName(GameStepManager.currentLabel)
+  //     if (!currentLabel) {
+  //         console.error("Label not found")
+  //         return
+  //     }
+  //     let oldSteps = GameStepManager.stepsAfterLastHistoryLabel
+  //     let currentStepIndex = currentLabel.getCorrespondingStepsNumber(oldSteps)
+  //     let stepToRemove = oldSteps.length - currentStepIndex
+  //     GameStepManager.removeLastHistoryNodes(stepToRemove)
+  //     GameStepManager.loadLastStep()
+  // }
+  // private static loadLastStep() {
+  //     // TODO: implement
+  // }
+  // /**
+  //  * Remove a number of items from the last of the history.
+  //  * @param itemNumber The number of items to remove from the last of the history.
+  //  */
+  // private static removeLastHistoryNodes(itemNumber: number) {
+  //     // TODO: implement
+  //     for (let i = 0; i < itemNumber; i++) {
+  //         GameStepManager._stepsHistory.pop()
+  //     }
+  // }
+  // /**
+  //  * stepsAfterLastHistoryLabel is a list of steps that occurred after the last history label.
+  //  */
+  // private static get stepsAfterLastHistoryLabel(): StepHistoryDataType[] {
+  //     let length = GameStepManager._stepsHistory.length
+  //     let steps: StepHistoryDataType[] = []
+  //     for (let i = length - 1; i >= 0; i--) {
+  //         let element = GameStepManager._stepsHistory[i]
+  //         if (typeof element === "object" && "stepSha1" in element) {
+  //             steps.push(element.stepSha1)
+  //         }
+  //         else {
+  //             break
+  //         }
+  //     }
+  //     steps = steps.reverse()
+  //     return steps
+  // }
+  /* Go Back & Refresh Methods */
+  /**
+   * Go back to the last step and add it to the history.
+   * @param navigate The navigate function.
+   * @param steps The number of steps to go back.
+   * @returns 
+   * @example
+   * ```typescript
+   * export function goBack(navigate: (path: string) => void, afterBack?: () => void) {
+   *     GameStepManager.goBack(navigate)
+   *     afterBack && afterBack()
+   * }
+   * ```
+   */
+  static goBack(navigate, steps = 1) {
+    if (steps <= 0) {
+      console.warn("[Pixi'VN] Steps must be greater than 0");
+      return;
+    }
+    if (_GameStepManager._stepsHistory.length <= 1) {
+      console.warn("[Pixi'VN] No steps to go back");
+      return;
+    }
+    let restoredStep = _GameStepManager.goBackInternal(steps, _GameStepManager.originalStepData);
+    if (restoredStep) {
+      _GameStepManager._originalStepData = restoredStep;
+      _GameStepManager._openedLabels = createExportableElement(restoredStep.openedLabels);
+      GameStorageManager.import(createExportableElement(restoredStep.storage));
+      GameWindowManager.import(createExportableElement(restoredStep.canvas));
+      navigate(restoredStep.path);
+    } else {
+      console.error("[Pixi'VN] Error going back");
+    }
+  }
+  static goBackInternal(steps, restoredStep) {
+    if (steps <= 0) {
+      return restoredStep;
+    }
+    if (_GameStepManager._stepsHistory.length == 0) {
+      return restoredStep;
+    }
+    let lastHistoryStep = _GameStepManager.lastHistoryStep;
+    if (lastHistoryStep) {
+      try {
+        let result = restoreDeepDiffChanges(restoredStep, lastHistoryStep.diff);
+        _GameStepManager._lastStepIndex = lastHistoryStep.index;
+        _GameStepManager._stepsHistory.pop();
+        return _GameStepManager.goBackInternal(steps - 1, result);
+      } catch (e) {
+        console.error("[Pixi'VN] Error applying diff", e);
+        return restoredStep;
+      }
+    } else {
+      return restoredStep;
+    }
+  }
+  /**
+   * Return true if it is possible to go back.
+   */
+  static get canGoBack() {
+    return _GameStepManager._stepsHistory.length > 1;
+  }
+  /**
+   * Add a label to the history.
+   */
+  static clear() {
+    _GameStepManager._stepsHistory = [];
+    _GameStepManager._openedLabels = [];
+  }
+  /* Export and Import Methods */
+  /**
+   * Export the history to a JSON string.
+   * @returns The history in a JSON string.
+   */
+  static exportJson() {
+    return JSON.stringify(this.export());
+  }
+  /**
+   * Export the history to an object.
+   * @returns The history in an object.
+   */
+  static export() {
+    return {
+      stepsHistory: _GameStepManager._stepsHistory,
+      openedLabels: _GameStepManager._openedLabels,
+      lastStepIndex: _GameStepManager._lastStepIndex,
+      originalStepData: _GameStepManager._originalStepData
+    };
+  }
+  /**
+   * Import the history from a JSON string.
+   * @param dataString The history in a JSON string.
+   */
+  static importJson(dataString) {
+    _GameStepManager.import(JSON.parse(dataString));
+  }
+  /**
+   * Import the history from an object.
+   * @param data The history in an object.
+   */
+  static import(data) {
+    _GameStepManager.clear();
+    try {
+      if (data.hasOwnProperty("stepsHistory")) {
+        _GameStepManager._stepsHistory = data["stepsHistory"];
+      } else {
+        console.warn("[Pixi'VN] Could not import stepsHistory data, so will be ignored");
+      }
+      if (data.hasOwnProperty("openedLabels")) {
+        _GameStepManager._openedLabels = data["openedLabels"];
+      } else {
+        console.warn("[Pixi'VN] Could not import openedLabels data, so will be ignored");
+      }
+      if (data.hasOwnProperty("lastStepIndex")) {
+        _GameStepManager._lastStepIndex = data["lastStepIndex"];
+      } else {
+        console.warn("[Pixi'VN] Could not import lastStepIndex data, so will be ignored");
+      }
+      if (data.hasOwnProperty("originalStepData")) {
+        _GameStepManager._originalStepData = data["originalStepData"];
+      } else {
+        console.warn("[Pixi'VN] Could not import originalStepData data, so will be ignored");
+      }
+    } catch (e) {
+      console.error("[Pixi'VN] Error importing data", e);
+    }
+  }
 };
-FadeAlphaTicker = __decorateClass([
-  tickerDecorator()
-], FadeAlphaTicker);
+/**
+ * stepHistory is a list of label events and steps that occurred during the progression of the steps.
+ */
+_GameStepManager._stepsHistory = [];
+_GameStepManager._lastStepIndex = 0;
+_GameStepManager._openedLabels = [];
+_GameStepManager._originalStepData = void 0;
+var GameStepManager = _GameStepManager;
 
-// src/functions/TickerUtility.ts
-function updateTickerProgression(args, propertyName, progression) {
-  if (args[propertyName] === void 0 || !progression || args[propertyName] === progression.limit) {
-    return;
+// src/classes/StoredClassModel.ts
+var StoredClassModel = class {
+  /**
+   * @param categoryId The id of the category. For example if you are storing a character class, you can use "characters" as categoryId. so all instances of the character class will be stored in the "characters" category.
+   * @param id The id of instance of the class. This id must be unique for the category.
+   */
+  constructor(categoryId, id) {
+    this.categoryId = categoryId;
+    this._id = id;
   }
-  if (typeof args[propertyName] === "number") {
-    if (progression.type === "linear") {
-      args[propertyName] = getLinearProgression(args[propertyName], progression);
-    } else if (progression.type === "exponential") {
-      args[propertyName] = getExponentialProgression(args[propertyName], progression);
+  /**
+   * Is id of the stored class. is unique for this class.
+   */
+  get id() {
+    return this._id;
+  }
+  /**
+   * Update a property in the storage.
+   * @param propertyName The name of the property to set.
+   * @param value The value to set. If is undefined, the property will be removed from the storage.
+   */
+  setStorageProperty(propertyName, value) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (!storage) {
+      storage = {};
     }
-  } else if (args[propertyName] !== void 0 && typeof args[propertyName] === "object" && args[propertyName].haveOwnProperty("x") && args[propertyName].haveOwnProperty("y") && typeof args[propertyName].x === "number" && typeof args[propertyName].y === "number") {
-    if (progression.type === "linear") {
-      args[propertyName].x = getLinearProgression(args[propertyName].x, progression);
-      args[propertyName].y = getLinearProgression(args[propertyName].y, progression);
-    } else if (progression.type === "exponential") {
-      args[propertyName].x = getExponentialProgression(args[propertyName].x, progression);
-      args[propertyName].y = getExponentialProgression(args[propertyName].y, progression);
+    if (!storage.hasOwnProperty(this.id)) {
+      storage[this.id] = {};
+    }
+    if (value === void 0 || value === null) {
+      if (storage[this.id].hasOwnProperty(propertyName)) {
+        delete storage[this.id][propertyName];
+      }
+    } else {
+      storage[this.id] = __spreadProps(__spreadValues({}, storage[this.id]), { [propertyName]: value });
     }
+    if (Object.keys(storage[this.id]).length === 0) {
+      delete storage[this.id];
+    }
+    GameStorageManager.setVariable(this.categoryId, storage);
   }
-}
-function getLinearProgression(number, progression) {
-  if (progression.limit !== void 0) {
-    if (number > progression.limit && progression.amt > 0) {
-      return progression.limit;
-    } else if (number < progression.limit && progression.amt < 0) {
-      return progression.limit;
+  /**
+   * Get a property from the storage.
+   * @param propertyName The name of the property to get.
+   * @returns The value of the property. If the property is not found, returns undefined.
+   */
+  getStorageProperty(propertyName) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (storage && storage.hasOwnProperty(this.id) && storage[this.id].hasOwnProperty(propertyName)) {
+      return storage[this.id][propertyName];
     }
+    return void 0;
   }
-  return number + progression.amt / 60;
-}
-function getExponentialProgression(number, progression) {
-  if (progression.limit !== void 0) {
-    if (number > progression.limit && progression.percentage > 0) {
-      return progression.limit;
-    } else if (number < progression.limit && progression.percentage < 0) {
-      return progression.limit;
+};
+
+// src/classes/CharacterBaseModel.ts
+var CharacterBaseModel2 = class extends StoredClassModel {
+  /**
+   * @param id The id of the character.
+   * @param props The properties of the character.
+   */
+  constructor(id, props) {
+    super(GameStorageManager.keysSystem.CHARACTER_CATEGORY_KEY, id);
+    this.defaultName = "";
+    this.defaultName = props.name;
+    this.defaultSurname = props.surname;
+    this.defaultAge = props.age;
+    this._icon = props.icon;
+    this._color = props.color;
+  }
+  /***
+   * The name of the character.
+   * If you set undefined, it will return the default name.
+   */
+  get name() {
+    return this.getStorageProperty("name") || this.defaultName;
+  }
+  set name(value) {
+    this.setStorageProperty("name", value);
+  }
+  /**
+   * The surname of the character.
+   * If you set undefined, it will return the default surname.
+   */
+  get surname() {
+    return this.getStorageProperty("surname") || this.defaultSurname;
+  }
+  set surname(value) {
+    this.setStorageProperty("surname", value);
+  }
+  /**
+   * The age of the character.
+   * If you set undefined, it will return the default age.
+   */
+  get age() {
+    return this.getStorageProperty("age") || this.defaultAge;
+  }
+  set age(value) {
+    this.setStorageProperty("age", value);
+  }
+  /**
+   * The icon of the character.
+   */
+  get icon() {
+    return this._icon;
+  }
+  /**
+   * The color of the character.
+   */
+  get color() {
+    return this._color;
+  }
+};
+
+// src/classes/DialogueBaseModel.ts
+var DialogueBaseModel = class {
+  /**
+   * @param text The text of the dialogue.
+   * @param character The id of the character that is speaking. 
+   * @param oltherParams Other parameters that can be stored in the dialogue.
+   */
+  constructor(text, character, oltherParams = {}) {
+    /**
+     * The text of the dialogue.
+     */
+    this.text = "";
+    /**
+     * Other parameters that can be stored in the dialogue.
+     */
+    this.oltherParams = {};
+    if (typeof text === "string") {
+      this.text = text;
+      if (typeof character === "string") {
+        this.character = character;
+      } else {
+        this.character = character == null ? void 0 : character.id;
+      }
+      this.oltherParams = oltherParams;
+    } else {
+      this.text = text.text;
+      if (text.character) {
+        this.character = text.character;
+      }
+      this.oltherParams = text.oltherParams || {};
     }
   }
-  return number + number * progression.percentage;
+  /**
+   * Export the dialogue to a DialogueBaseData object.
+   * 
+   * @returns The data of the dialogue.
+   */
+  export() {
+    return {
+      text: this.text,
+      character: this.character,
+      oltherParams: this.oltherParams
+    };
+  }
+};
+
+// src/decorators/LabelDecorator.ts
+var registeredLabels = {};
+function newLabel(id, steps, onStepRun) {
+  if (registeredLabels[id]) {
+    console.info(`[Pixi'VN] Label ${id} already exists, it will be overwritten`);
+  }
+  let label = new Label(id, steps, onStepRun);
+  registeredLabels[id] = label;
+  return label;
+}
+function getLabelById(id) {
+  let label = registeredLabels[id];
+  if (!label) {
+    console.error(`[Pixi'VN] Label ${id} not found`);
+    return;
+  }
+  return label;
 }
 
-// src/classes/ticker/MoveTicker.ts
+// src/classes/ticker/FadeAlphaTicker.ts
+var FadeAlphaTicker = class extends TickerBase {
+  fn(ticker, args, tags, tickerId) {
+    let type = args.type === void 0 ? "hide" : args.type;
+    let duration = args.duration === void 0 ? 1 : args.duration;
+    let speed = 1 / (duration * 60);
+    let limit = args.limit === void 0 ? type === "hide" ? 0 : 1 : args.limit;
+    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
+    if (typeof tagToRemoveAfter2 === "string") {
+      tagToRemoveAfter2 = [tagToRemoveAfter2];
+    }
+    if (type === "hide" && limit < 0) {
+      limit = 0;
+    }
+    if (type === "show" && limit > 1) {
+      limit = 1;
+    }
+    tags.filter((tag) => {
+      var _a;
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (args.startOnlyIfHaveTexture) {
+        if (element && element instanceof Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") {
+          return false;
+        }
+      }
+      return true;
+    }).forEach((tag) => {
+      let element = GameWindowManager.getCanvasElement(tag);
+      if (element && element instanceof Container) {
+        if (type === "show" && element.alpha < limit) {
+          element.alpha += speed * ticker.deltaTime;
+        } else if (type === "hide" && element.alpha > limit) {
+          element.alpha -= speed * ticker.deltaTime;
+        }
+        if (type === "show" && element.alpha >= limit) {
+          element.alpha = limit;
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+        } else if (type === "hide" && element.alpha <= limit) {
+          element.alpha = limit;
+          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+        }
+      }
+    });
+  }
+};
+FadeAlphaTicker = __decorateClass([
+  tickerDecorator()
+], FadeAlphaTicker);
 var MoveTicker = class extends TickerBase {
   fn(ticker, args, tags, tickerId) {
     let xSpeed = 1;
@@ -1678,104 +2667,32 @@ var RotateTicker = class extends TickerBase {
 RotateTicker = __decorateClass([
   tickerDecorator()
 ], RotateTicker);
-var ZoomTicker = class extends TickerBase {
-  fn(ticker, args, tags, tickerId) {
-    let xSpeed = 0.1;
-    let ySpeed = 0.1;
-    if (args.speed) {
-      if (typeof args.speed === "number") {
-        xSpeed = args.speed;
-        ySpeed = args.speed;
-      } else {
-        xSpeed = args.speed.x;
-        ySpeed = args.speed.y;
-      }
-    }
-    xSpeed /= 60;
-    ySpeed /= 60;
-    let tagToRemoveAfter2 = args.tagToRemoveAfter || [];
-    if (typeof tagToRemoveAfter2 === "string") {
-      tagToRemoveAfter2 = [tagToRemoveAfter2];
-    }
-    let type = args.type || "zoom";
-    let xLimit = Infinity;
-    let yLimit = Infinity;
-    if (args.limit) {
-      if (typeof args.limit === "number") {
-        xLimit = args.limit;
-        yLimit = args.limit;
-      } else {
-        xLimit = args.limit.x;
-        yLimit = args.limit.y;
-      }
-    }
-    tags.filter((tag) => {
-      var _a;
-      let element = GameWindowManager.getCanvasElement(tag);
-      if (args.startOnlyIfHaveTexture) {
-        if (element && element instanceof Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") {
-          return false;
-        }
-      }
-      return true;
-    }).forEach((tag) => {
-      let element = GameWindowManager.getCanvasElement(tag);
-      if (element && element instanceof Container) {
-        if (type === "zoom" && (element.scale.x < xLimit || element.scale.y < yLimit)) {
-          element.scale.x += xSpeed * ticker.deltaTime;
-          element.scale.y += ySpeed * ticker.deltaTime;
-        } else if (type === "unzoom" && (element.scale.x > xLimit || element.scale.y > yLimit)) {
-          element.scale.x -= xSpeed * ticker.deltaTime;
-          element.scale.y -= ySpeed * ticker.deltaTime;
-        }
-        if (type === "zoom") {
-          if (element.scale.x > xLimit) {
-            element.scale.x = xLimit;
-          }
-          if (element.scale.y > yLimit) {
-            element.scale.y = yLimit;
-          }
-          if (element.scale.x >= xLimit && element.scale.y >= yLimit) {
-            element.scale.x = xLimit;
-            element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
-          }
-        } else if (type === "unzoom") {
-          if (element.scale.x < xLimit) {
-            element.scale.x = xLimit;
-          }
-          if (element.scale.y < yLimit) {
-            element.scale.y = yLimit;
-          }
-          if (element.scale.x <= xLimit && element.scale.y <= yLimit) {
-            element.scale.x = xLimit;
-            element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
-          }
-        }
-        if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
-          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
-        }
-      }
-    });
-    if (args.speedProgression)
-      updateTickerProgression(args, "speed", args.speedProgression);
-  }
-};
-ZoomTicker = __decorateClass([
-  tickerDecorator()
-], ZoomTicker);
+
+// src/labels/TestConstant.ts
+var juliette = new CharacterBaseModel2("___pixivn_juliette___", {
+  name: "Juliette",
+  age: 25,
+  icon: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-square.webp?alt=media&token=5856ae7b-d99e-4563-86ec-cbc48cc9c6b4",
+  color: "#ac0086"
+});
+saveCharacter(juliette);
+var bunnyImage = "https://pixijs.com/assets/bunny.png";
 
 // src/labels/BaseCanvasElementTestLabel.ts
+var BASE_CANVAS_ELEMENT_LABEL = "___pixi_vn_base_canvas_element_label___";
 var baseCanvasElementTestLabel = newLabel(
-  "BaseCanvasElementTestLabel",
+  BASE_CANVAS_ELEMENT_LABEL,
   [
     () => __async(void 0, null, function* () {
-      clearDialogue();
+      let number = 25;
+      setDialogue({
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create ${number} bunnies (CanvasSprites) and put them in a CanvasContainer.`
+      });
       const container = new CanvasContainer();
       GameWindowManager.addCanvasElement("container", container);
-      const texture = yield Assets.load("https://pixijs.com/assets/bunny.png");
-      for (let i = 0; i < 25; i++) {
+      const texture = yield Assets.load(bunnyImage);
+      for (let i = 0; i < number; i++) {
         const bunny = new CanvasSprite(texture);
         bunny.x = i % 5 * 40;
         bunny.y = Math.floor(i / 5) * 40;
@@ -1785,10 +2702,15 @@ var baseCanvasElementTestLabel = newLabel(
       container.y = GameWindowManager.screen.height / 2;
       container.pivot.x = container.width / 2;
       container.pivot.y = container.height / 2;
-      GameWindowManager.addTicker("container", new RotateTicker({ speed: 0.01 }));
+      GameWindowManager.addTicker("container", new RotateTicker({ speed: 1 }));
     }),
     () => __async(void 0, null, function* () {
       removeCanvasElement("container");
+      setDialogue({
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create some text elements with different styles and put them on the stage.
+But it will generate a warn message, because the FillGradient or FillPattern has not yet been supported by the Pixi\u2019VN ( you can see the status of the issue here: [#76](https://github.com/DRincs-Productions/pixi-vn/issues/76)).`
+      });
       const basicText = new CanvasText({ text: "Basic text in pixi" });
       basicText.x = 50;
       basicText.y = 100;
@@ -1850,5 +2772,5 @@ var baseCanvasElementTestLabel = newLabel(
 );
 
 export { baseCanvasElementTestLabel };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=BaseCanvasElementTestLabel.mjs.map
 //# sourceMappingURL=BaseCanvasElementTestLabel.mjs.map