@m2c2kit/addons 0.3.14 → 0.3.15

package/dist/index.js

@@ -260,6 +260,8 @@ class Button extends Composite {
     this.fontSize = 20;
     this._text = "";
     this._fontColor = WebColors.White;
+    this._interpolation = {};
+    this._localize = true;
     if (options.text) {
       this.text = options.text;
     }
@@ -269,6 +271,12 @@ class Button extends Composite {
     if (options.cornerRadius !== void 0) {
       this.cornerRadius = options.cornerRadius;
     }
+    if (options.fontName) {
+      this.fontName = options.fontName;
+    }
+    if (options.fontNames) {
+      this.fontNames = options.fontNames;
+    }
     if (options.fontSize !== void 0) {
       this.fontSize = options.fontSize;
     }
@@ -278,6 +286,12 @@ class Button extends Composite {
     if (options.backgroundColor) {
       this.backgroundColor = options.backgroundColor;
     }
+    if (options.interpolation) {
+      this.interpolation = options.interpolation;
+    }
+    if (options.localize !== void 0) {
+      this.localize = options.localize;
+    }
   }
   initialize() {
     this.removeAllChildren();
@@ -299,6 +313,10 @@ class Button extends Composite {
     this.addChild(buttonRectangle);
     const buttonLabel = new Label({
       text: this.text,
+      localize: this.localize,
+      interpolation: this.interpolation,
+      fontName: this.fontName,
+      fontNames: this.fontNames,
       fontSize: this.fontSize,
       fontColor: this.fontColor
     });
@@ -329,6 +347,35 @@ class Button extends Composite {
     this._fontColor = fontColor;
     this.needsInitialization = true;
   }
+  get fontName() {
+    return this._fontName;
+  }
+  set fontName(fontName) {
+    this._fontName = fontName;
+    this.needsInitialization = true;
+  }
+  get fontNames() {
+    return this._fontNames;
+  }
+  set fontNames(fontNames) {
+    this._fontNames = fontNames;
+    this.needsInitialization = true;
+  }
+  get interpolation() {
+    return this._interpolation;
+  }
+  set interpolation(interpolation) {
+    this._interpolation = interpolation;
+    Object.freeze(this._interpolation);
+    this.needsInitialization = true;
+  }
+  get localize() {
+    return this._localize;
+  }
+  set localize(localize) {
+    this._localize = localize;
+    this.needsInitialization = true;
+  }
   /**
    * Duplicates a node using deep copy.
    *
@@ -348,7 +395,11 @@ class Button extends Composite {
       cornerRadius: this.cornerRadius,
       backgroundColor: this.backgroundColor,
       fontColor: this.fontColor,
-      name: newName
+      name: newName,
+      localize: this.localize,
+      interpolation: JSON.parse(JSON.stringify(this.interpolation)),
+      fontName: this.fontName,
+      fontNames: JSON.parse(JSON.stringify(this.fontNames))
     });
     if (this.children.length > 0) {
       dest.children = this.children.map((child) => {
@@ -1198,8 +1249,12 @@ class VirtualKeyboard extends Composite {
    */
   constructor(options) {
     super(options);
+    this.compositeType = "VirtualKeyboard";
     this.rowsConfiguration = new Array();
     this.shiftActivated = false;
+    this.keyShapes = new Array();
+    // VirtualKeyboard defaults to being user interactive.
+    this._isUserInteractionEnabled = true;
     this.size = options.size;
     this.position = options.position ?? { x: 0, y: 0 };
     this.keyboardHorizontalPaddingPercent = options.keyboardHorizontalPaddingPercent ?? 0.02;
@@ -1381,6 +1436,7 @@ class VirtualKeyboard extends Composite {
     const keyboardHorizontalPadding = (this.keyboardHorizontalPaddingPercent ?? 0.02) * this.size.width;
     const keyBoxHeight = (this.size.height - 2 * keyboardVerticalPadding) / rows.length;
     const keyBoxWidth = (this.size.width - 2 * keyboardHorizontalPadding) / this.keysPerRow;
+    this.keyShapes = [];
     for (let r = 0; r < rows.length; r++) {
       const row = rows[r];
       const rowSumKeyWidths = row.reduce(
@@ -1419,9 +1475,10 @@ class VirtualKeyboard extends Composite {
           cornerRadius: 4,
           fillColor: this.keyColor,
           lineWidth: 0,
-          isUserInteractionEnabled: true
+          isUserInteractionEnabled: this.isUserInteractionEnabled
         });
         keyBox.addChild(keyShape);
+        this.keyShapes.push(keyShape);
         keyShape.onTapUp((tapEvent) => {
           let keyAsString = "";
           if (!key.isShift) {
@@ -1616,6 +1673,21 @@ class VirtualKeyboard extends Composite {
     }
     this.eventListeners.push(eventListener);
   }
+  /**
+   * Does the `VirtualKeyboard` respond to user events? Default is true.
+   */
+  get isUserInteractionEnabled() {
+    return this._isUserInteractionEnabled;
+  }
+  /**
+   * Does the `VirtualKeyboard` respond to user events? Default is true.
+   */
+  set isUserInteractionEnabled(isUserInteractionEnabled) {
+    this._isUserInteractionEnabled = isUserInteractionEnabled;
+    this.keyShapes.forEach((keyShape) => {
+      keyShape.isUserInteractionEnabled = isUserInteractionEnabled;
+    });
+  }
   update() {
     super.update();
   }
@@ -1629,7 +1701,7 @@ class VirtualKeyboard extends Composite {
     });
   }
   duplicate(newName) {
-    throw new Error("Method not implemented.");
+    throw new Error(`Method not implemented. ${newName}`);
   }
 }
 
@@ -1981,7 +2053,462 @@ class CountdownScene extends Scene {
   }
 }
 
-console.log("\u26AA @m2c2kit/addons version 0.3.14 (ebbdc605)");
+class LocalePicker extends Composite {
+  /**
+   * An icon and dialog box for selecting a locale from a list of options.
+   *
+   * @remarks This composite node is composed of a dialog box that appears
+   * when the user taps a globe icon. Typically, the `LocalePicker` will be
+   * added as a free node to the game so that it exists independently of
+   * the game's scenes. The dialog box contains a list of locales that the
+   * user can choose from. By default, this list is populated with the locales
+   * in the game's `Translation` object. When the user selects a locale, the
+   * dialog box disappears and the locale is set as the game's current locale.
+   *  The dialog box is automatically sized to fit the number of locale
+   * options.
+   *
+   * @example
+   * let localePicker: LocalePicker;
+   * if (game.getParameter<boolean>("show_locale_picker")) {
+   *   localePicker = new LocalePicker();
+   *   game.addFreeNode(localePicker);
+   * }
+   *
+   * @param options - {@link LocalePickerOptions}
+   */
+  constructor(options) {
+    super(options);
+    this.compositeType = "LocalePicker";
+    this.zPosition = Number.MAX_VALUE;
+    this.DEFAULT_FONT_SIZE = 24;
+    this.automaticallyChangeLocale = true;
+    this._localeOptions = new Array();
+    this._backgroundColor = WebColors.White;
+    this._fontSize = this.DEFAULT_FONT_SIZE;
+    this._fontColor = WebColors.Black;
+    this._cornerRadius = 8;
+    this._overlayAlpha = 0.5;
+    this._icon = {
+      // public domain SVG from https://commons.wikimedia.org/wiki/File:Globe_icon.svg
+      svgString: `<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" stroke="#000" fill="none"><path stroke-width="26" d="M209 15a195 195 0 1 0 2 0z"/><path stroke-width="18" d="M210 15v390m195-195H15M59 90a260 260 0 0 0 302 0m0 240a260 260 0 0 0-302 0M195 20a250 250 0 0 0 0 382m30 0a250 250 0 0 0 0-382"/></svg>`,
+      height: 32,
+      width: 32
+    };
+    this._iconPosition = { x: 32, y: 32 };
+    /**
+     * Wrap displayed locale in double angle quotes if it is the current locale.
+     * Note: Although the code editor will allow us to enter almost any
+     * unicode character, it will not render correctly if the font does
+     * not support the character. Thus, be careful to use characters that
+     * are supported by the font. For example, check a page like
+     * https://www.fontspace.com/roboto-font-f13281 to see which characters
+     * are supported by Roboto Regular, which is often the default font in
+     * m2c2kit. Emoji or checkmarks like ✓ are not in Roboto Regular!
+     */
+    this.LEFT_SELECTION_INDICATOR = "\xAB";
+    this.RIGHT_SELECTION_INDICATOR = "\xBB";
+    if (!options) {
+      return;
+    }
+    if (options.localeOptions) {
+      this.localeOptions = options.localeOptions;
+    }
+    if (options.backgroundColor) {
+      this.backgroundColor = options.backgroundColor;
+    }
+    if (options.overlayAlpha !== void 0) {
+      this.overlayAlpha = options.overlayAlpha;
+    }
+    if (options.fontSize !== void 0) {
+      this.fontSize = options.fontSize;
+    }
+    if (options.fontColor) {
+      this.fontColor = options.fontColor;
+    }
+    if (options.cornerRadius) {
+      this.cornerRadius = options.cornerRadius;
+    }
+    if (options.currentLocale !== void 0) {
+      this.currentLocale = options.currentLocale;
+    }
+    if (options.icon) {
+      this.icon = options.icon;
+    }
+    if (options.automaticallyChangeLocale !== void 0) {
+      this.automaticallyChangeLocale = options.automaticallyChangeLocale;
+    }
+  }
+  /**
+   * Executes a callback when the user selects a locale.
+   *
+   * @param callback - function to execute
+   * @param options - {@link CallbackOptions}
+   */
+  onResult(callback, options) {
+    const eventListener = {
+      type: M2EventType.CompositeCustom,
+      compositeType: "LocalePickerResult",
+      nodeUuid: this.uuid,
+      callback
+    };
+    if (options?.replaceExisting) {
+      this.eventListeners = this.eventListeners.filter(
+        (listener) => !(listener.nodeUuid === eventListener.nodeUuid && listener.type === "LocalePickerResult")
+      );
+    }
+    this.eventListeners.push(eventListener);
+  }
+  initialize() {
+    if (this.currentLocale === void 0) {
+      this.currentLocale = this.game.i18n?.locale;
+    }
+    if (this.localeOptions.length === 0) {
+      const locales = Object.keys(this.game.i18n?.translation || {});
+      locales.filter((locale) => locale !== "configuration").forEach((locale) => {
+        this.localeOptions.push({
+          text: this.game.i18n?.translation[locale].localeName || locale,
+          locale,
+          svg: this.game.i18n?.translation[locale].localeSvg
+        });
+      });
+    }
+    if (this.localeOptions.length === 0) {
+      throw new Error("No locales available for LocalePicker");
+    }
+    this.children.filter((child) => child.name !== "localePickerIcon").forEach((child) => this.removeChild(child));
+    this.game.imageManager.loadImages([
+      {
+        imageName: "__localePickerIcon",
+        svgString: this.icon.svgString,
+        height: this.icon.height,
+        width: this.icon.width
+      }
+    ]);
+    if (!this.iconSprite) {
+      this.iconSprite = new Sprite({
+        // name is how we refer to this sprite, as a node.
+        name: "localePickerIcon",
+        // imageName is the loaded image that we can assign to the sprite
+        imageName: "__localePickerIcon",
+        position: this.iconPosition,
+        isUserInteractionEnabled: true
+      });
+      this.addChild(this.iconSprite);
+      this.iconSprite.onTapDown(() => {
+        this.setDialogVisibility(true);
+      });
+    }
+    const overlay = new Shape({
+      rect: {
+        width: Globals.canvasCssWidth,
+        height: Globals.canvasCssHeight,
+        x: Globals.canvasCssWidth / 2,
+        y: Globals.canvasCssHeight / 2
+      },
+      fillColor: [0, 0, 0, this.overlayAlpha],
+      zPosition: -1,
+      isUserInteractionEnabled: true,
+      hidden: true
+    });
+    overlay.onTapDown((e) => {
+      e.handled = true;
+      if (this.eventListeners.length > 0) {
+        this.eventListeners.filter((listener) => listener.type === "LocalePickerResult").forEach((listener) => {
+          const languagePickerEvent = {
+            type: "LocalePickerResult",
+            target: this,
+            handled: false,
+            result: {
+              locale: void 0
+            }
+          };
+          listener.callback(languagePickerEvent);
+        });
+      }
+      this.setDialogVisibility(false);
+    });
+    this.addChild(overlay);
+    const lineHeight = this.fontSize / this.DEFAULT_FONT_SIZE * 50;
+    const dialogHeight = this.localeOptions.length * lineHeight;
+    const dialogWidth = Globals.canvasCssWidth / 2;
+    const sceneCenter = {
+      x: Globals.canvasCssWidth / 2,
+      y: Globals.canvasCssHeight / 2
+    };
+    const localeDialog = new Shape({
+      rect: {
+        width: dialogWidth,
+        height: dialogHeight,
+        x: sceneCenter.x,
+        y: sceneCenter.y
+      },
+      cornerRadius: this.cornerRadius,
+      fillColor: this.backgroundColor,
+      isUserInteractionEnabled: true,
+      hidden: true
+    });
+    localeDialog.onTapDown((e) => {
+      e.handled = true;
+    });
+    this.addChild(localeDialog);
+    for (let i = 0; i < this.localeOptions.length; i++) {
+      const localeOption = this.localeOptions[i];
+      if (!localeOption.svg) {
+        let labelText = localeOption.text;
+        if (this.currentLocale === localeOption.locale) {
+          labelText = `${this.LEFT_SELECTION_INDICATOR} ${labelText} ${this.RIGHT_SELECTION_INDICATOR}`;
+        }
+        const text = new Label({
+          text: labelText,
+          fontSize: this.fontSize,
+          fontColor: this.fontColor,
+          position: {
+            x: sceneCenter.x,
+            y: sceneCenter.y + i * lineHeight - dialogHeight / 2 + lineHeight / 2
+          },
+          isUserInteractionEnabled: true,
+          zPosition: 1,
+          hidden: true,
+          // do not localize the text of each language option
+          localize: false
+        });
+        text.onTapDown((e) => {
+          this.handleLocaleSelection(e, localeOption);
+        });
+        this.addChild(text);
+      } else {
+        this.game.imageManager.loadImages([
+          {
+            imageName: localeOption.text,
+            svgString: localeOption.svg.svgString,
+            height: localeOption.svg.height,
+            width: localeOption.svg.width
+          }
+        ]);
+        const localeSprite = new Sprite({
+          imageName: localeOption.text,
+          position: {
+            x: sceneCenter.x,
+            y: sceneCenter.y + i * lineHeight - dialogHeight / 2 + lineHeight / 2
+          },
+          isUserInteractionEnabled: true,
+          zPosition: 1,
+          hidden: true
+        });
+        this.addChild(localeSprite);
+        if (this.currentLocale === localeOption.locale) {
+          const leftSelectionIndicator = new Label({
+            text: this.LEFT_SELECTION_INDICATOR,
+            fontSize: this.fontSize,
+            fontColor: this.fontColor,
+            position: {
+              x: sceneCenter.x - localeOption.svg.width / 2,
+              y: sceneCenter.y + i * lineHeight - dialogHeight / 2 + lineHeight / 2
+            },
+            hidden: true,
+            // do not localize the left selection indicator
+            localize: false
+          });
+          this.addChild(leftSelectionIndicator);
+          const rightSelectionIndicator = new Label({
+            text: this.RIGHT_SELECTION_INDICATOR,
+            fontSize: this._fontSize,
+            fontColor: this.fontColor,
+            position: {
+              x: sceneCenter.x + localeOption.svg.width / 2,
+              y: sceneCenter.y + i * lineHeight - dialogHeight / 2 + lineHeight / 2
+            },
+            hidden: true,
+            // do not localize the left selection indicator
+            localize: false
+          });
+          this.addChild(rightSelectionIndicator);
+        }
+        localeSprite.onTapDown((e) => {
+          this.handleLocaleSelection(e, localeOption);
+        });
+      }
+    }
+    this.needsInitialization = false;
+  }
+  handleLocaleSelection(e, localeOption) {
+    e.handled = true;
+    if (this.eventListeners.length > 0) {
+      this.eventListeners.filter(
+        (listener) => listener.type === M2EventType.CompositeCustom && listener.compositeType === "LocalePickerResult" && listener.nodeUuid == this.uuid
+      ).forEach((listener) => {
+        const languagePickerEvent = {
+          type: M2EventType.CompositeCustom,
+          compositeType: "LocalePickerResult",
+          target: this,
+          handled: false,
+          result: {
+            locale: localeOption.locale
+          }
+        };
+        listener.callback(languagePickerEvent);
+      });
+    }
+    this.setDialogVisibility(false);
+    if (this.automaticallyChangeLocale) {
+      this.game.i18n?.switchToLocale(localeOption.locale);
+      this.currentLocale = localeOption.locale;
+    }
+  }
+  setDialogVisibility(visible) {
+    this.children.filter((child) => child.name !== "localePickerIcon").forEach((child) => {
+      child.hidden = !visible;
+    });
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(backgroundColor) {
+    this._backgroundColor = backgroundColor;
+    this.needsInitialization = true;
+  }
+  get fontSize() {
+    return this._fontSize;
+  }
+  set fontSize(fontSize) {
+    this._fontSize = fontSize;
+    this.needsInitialization = true;
+  }
+  get fontColor() {
+    return this._fontColor;
+  }
+  set fontColor(fontColor) {
+    this._fontColor = fontColor;
+    this.needsInitialization = true;
+  }
+  get cornerRadius() {
+    return this._cornerRadius;
+  }
+  set cornerRadius(cornerRadius) {
+    this._cornerRadius = cornerRadius;
+    this.needsInitialization = true;
+  }
+  get overlayAlpha() {
+    return this._overlayAlpha;
+  }
+  set overlayAlpha(alpha) {
+    this._overlayAlpha = alpha;
+    this.needsInitialization = true;
+  }
+  get icon() {
+    const localePicker = this;
+    return {
+      get svgString() {
+        return localePicker._icon.svgString;
+      },
+      set svgString(svgString) {
+        localePicker._icon.svgString = svgString;
+        localePicker.needsInitialization = true;
+      },
+      get imageName() {
+        return localePicker._icon.imageName;
+      },
+      set imageName(imageName) {
+        localePicker._icon.imageName = imageName;
+        localePicker.needsInitialization = true;
+      },
+      get height() {
+        return localePicker._icon.height;
+      },
+      set height(height) {
+        localePicker._icon.height = height;
+        localePicker.needsInitialization = true;
+      },
+      get width() {
+        return localePicker._icon.width;
+      },
+      set width(width) {
+        localePicker._icon.width = width;
+        localePicker.needsInitialization = true;
+      }
+    };
+  }
+  set icon(icon) {
+    this._icon = icon;
+    this.needsInitialization = true;
+  }
+  get iconPosition() {
+    const localePicker = this;
+    return {
+      get x() {
+        return localePicker._iconPosition.x;
+      },
+      set x(x) {
+        localePicker._iconPosition.x = x;
+        if (localePicker.iconSprite) {
+          localePicker.iconSprite.position = localePicker._iconPosition;
+        }
+        localePicker.needsInitialization = true;
+      },
+      get y() {
+        return localePicker._iconPosition.y;
+      },
+      set y(y) {
+        localePicker._iconPosition.y = y;
+        if (localePicker.iconSprite) {
+          localePicker.iconSprite.position = localePicker._iconPosition;
+        }
+        localePicker.needsInitialization = true;
+      }
+    };
+  }
+  set iconPosition(position) {
+    this._iconPosition = position;
+    if (this.iconSprite) {
+      this.iconSprite.position = position;
+    }
+    this.needsInitialization = true;
+  }
+  get localeOptions() {
+    return this._localeOptions;
+  }
+  set localeOptions(options) {
+    this._localeOptions = options;
+    this.needsInitialization = true;
+  }
+  get currentLocale() {
+    return this._currentLocale;
+  }
+  set currentLocale(locale) {
+    if (locale === this.currentLocale) {
+      return;
+    }
+    this._currentLocale = locale;
+    this.needsInitialization = true;
+  }
+  update() {
+    super.update();
+  }
+  draw(canvas) {
+    super.drawChildren(canvas);
+  }
+  warmup(canvas) {
+    this.initialize();
+    this.children.filter((child) => child.isDrawable).forEach((child) => {
+      child.warmup(canvas);
+    });
+  }
+  /**
+   * Duplicates a node using deep copy.
+   *
+   * @remarks This is a deep recursive clone (node and children).
+   * The uuid property of all duplicated nodes will be newly created,
+   * because uuid must be unique.
+   *
+   * @param newName - optional name of the new, duplicated node. If not
+   * provided, name will be the new uuid
+   */
+  duplicate(newName) {
+    throw new Error(`duplicate not implemented. ${newName}`);
+  }
+}
+
+console.log("\u26AA @m2c2kit/addons version 0.3.15 (b3a70752)");
 
-export { Button, CountdownScene, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, VirtualKeyboard };
+export { Button, CountdownScene, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, LocalePicker, VirtualKeyboard };
 //# sourceMappingURL=index.js.map