add zh localization font (#2066)

index.html

@@ -19,6 +19,11 @@
 			font-family: 'emerald';
 			src: url('./fonts/pokemon-emerald-pro.ttf') format('truetype');
 		}
+		@font-face {
+			font-family: 'vonwaon';
+			src: url('./fonts/VonwaonBitmap-16px.ttf') format('truetype');
+			size-adjust: 66.7%;
+		}
 
 		@font-face {
 			font-family: 'pkmnems';

src/data/trainer-config.ts

@@ -538,7 +538,6 @@ export class TrainerConfig {
       initI18n();
     }
     this.setPartyTemplates(trainerPartyTemplates.RIVAL_5);
-    console.log(signatureSpecies);
     signatureSpecies.forEach((speciesPool, s) => {
       if (!Array.isArray(speciesPool)) {
         speciesPool = [speciesPool];

src/main.ts

@@ -150,6 +150,7 @@ Phaser.GameObjects.Text.prototype.setPositionRelative = setPositionRelative;
 Phaser.GameObjects.Rectangle.prototype.setPositionRelative = setPositionRelative;
 
 document.fonts.load("16px emerald").then(() => document.fonts.load("10px pkmnems"));
+document.fonts.load("16px vonwaon");
 
 let game;
 

src/plugins/i18n.ts

@@ -94,44 +94,22 @@ const alternativeFonts = {
   ],
 };
 
-function loadFont(language: string) {
+function initFonts() {
-  if (!alternativeFonts[language]) {
+  Object.keys(alternativeFonts).forEach((language: string) => {
-    language = language.split(/[-_/]/)[0];
+    alternativeFonts[language].forEach((fontface: FontFace) => {
-  }
+      fontface.load().then(f => document.fonts.add(f)).catch(e => console.error(e));
-  if (alternativeFonts[language]) {
-    alternativeFonts[language].forEach((fontFace: FontFace) => {
-      document.fonts.add(fontFace);
-    });
-
-    const altFontLanguages = Object.keys(alternativeFonts);
-    altFontLanguages.splice(altFontLanguages.indexOf(language), 0);
-  }
-
-  (Object.values(alternativeFonts)).forEach(fontFaces => {
-    fontFaces.forEach(fontFace => {
-      if (fontFace && fontFace.status === "loaded") {
-        document.fonts.delete(fontFace);
-      }
     });
   });
 }
 
-export function initI18n(): void {
+export async function initI18n(): Promise<void> {
   // Prevent reinitialization
   if (isInitialized) {
     return;
   }
   isInitialized = true;
-  let lang = "";
 
-  if (localStorage.getItem("prLang")) {
+  initFonts();
-    lang = localStorage.getItem("prLang");
-  }
-
-  loadFont(lang);
-  i18next.on("languageChanged", lng=> {
-    loadFont(lng);
-  });
 
   /**
    * i18next is a localization library for maintaining and using translation resources.
@@ -149,11 +127,16 @@ export function initI18n(): void {
    * A: In src/system/settings.ts, add a new case to the Setting.Language switch statement.
    */
 
-  i18next.use(LanguageDetector).use(processor).use(new KoreanPostpositionProcessor()).init({
+  i18next.use(LanguageDetector);
-    lng: lang,
+  i18next.use(processor);
+  i18next.use(new KoreanPostpositionProcessor());
+  await i18next.init({
     nonExplicitSupportedLngs: true,
     fallbackLng: "en",
     supportedLngs: ["en", "es", "fr", "it", "de", "zh", "pt", "ko"],
+    detection: {
+      lookupLocalStorage: "prLang"
+    },
     debug: true,
     interpolation: {
       escapeValue: false,

src/ui/text.ts

@@ -1,10 +1,10 @@
-import i18next from "i18next";
 import BBCodeText from "phaser3-rex-plugins/plugins/gameobjects/tagtext/bbcodetext/BBCodeText";
 import InputText from "phaser3-rex-plugins/plugins/inputtext";
 import BattleScene from "../battle-scene";
 import { EggTier } from "../data/enums/egg-type";
 import { UiTheme } from "../enums/ui-theme";
 import { ModifierTier } from "../modifier/modifier-tier";
+import Phaser from "phaser";
 
 export enum TextStyle {
   MESSAGE,
@@ -36,30 +36,11 @@ export enum TextStyle {
   MOVE_PP_EMPTY
 }
 
-interface LanguageSetting {
-  summaryFontSize?: string,
-  battleInfoFontSize?: string,
-  partyFontSize?: string,
-  tooltipContentFontSize?: string,
-  moveInfoFontSize?: string,
-  textScale?: number
-}
-
-const languageSettings: { [key: string]: LanguageSetting } = {
-  "en":{},
-  "de":{},
-  "es":{},
-  "fr":{},
-  "it":{},
-  "pt_BR":{},
-  "zh_CN":{},
-};
-
 export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): Phaser.GameObjects.Text {
-  const [ styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
+  const [ scale, styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = scene.add.text(x, y, content, styleOptions);
-  ret.setScale(0.1666666667);
+  ret.setScale(scale);
   ret.setShadow(shadowXpos, shadowYpos, shadowColor);
   if (!(styleOptions as Phaser.Types.GameObjects.Text.TextStyle).lineSpacing) {
     ret.setLineSpacing(5);
@@ -69,8 +50,8 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
 }
 
 export function setTextStyle(obj: Phaser.GameObjects.Text, scene: Phaser.Scene, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle) {
-  const [ styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
+  const [ scale, styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
-  obj.setScale(0.1666666667);
+  obj.setScale(scale);
   obj.setShadow(shadowXpos, shadowYpos, shadowColor);
   if (!(styleOptions as Phaser.Types.GameObjects.Text.TextStyle).lineSpacing) {
     obj.setLineSpacing(5);
@@ -78,11 +59,11 @@ export function setTextStyle(obj: Phaser.GameObjects.Text, scene: Phaser.Scene,
 }
 
 export function addBBCodeTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): BBCodeText {
-  const [ styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
+  const [ scale, styleOptions, shadowColor, shadowXpos, shadowYpos ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = new BBCodeText(scene, x, y, content, styleOptions as BBCodeText.TextStyle);
   scene.add.existing(ret);
-  ret.setScale(0.1666666667);
+  ret.setScale(scale);
   ret.setShadow(shadowXpos, shadowYpos, shadowColor);
   if (!(styleOptions as BBCodeText.TextStyle).lineSpacing) {
     ret.setLineSpacing(10);
@@ -92,23 +73,24 @@ export function addBBCodeTextObject(scene: Phaser.Scene, x: number, y: number, c
 }
 
 export function addTextInputObject(scene: Phaser.Scene, x: number, y: number, width: number, height: number, style: TextStyle, extraStyleOptions?: InputText.IConfig): InputText {
-  const [ styleOptions ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
+  const [ scale, styleOptions ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = new InputText(scene, x, y, width, height, styleOptions as InputText.IConfig);
   scene.add.existing(ret);
-  ret.setScale(0.1666666667);
+  ret.setScale(scale);
 
   return ret;
 }
 
-function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): [ Phaser.Types.GameObjects.Text.TextStyle | InputText.IConfig, string, number, number ] {
+function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): [ number, Phaser.Types.GameObjects.Text.TextStyle | InputText.IConfig, string, number, number ] {
-  const lang = i18next.resolvedLanguage;
   let shadowXpos = 4;
   let shadowYpos = 5;
+  const scale = 0.1666666667;
+  const defaultFontSize = 96;
 
   let styleOptions: Phaser.Types.GameObjects.Text.TextStyle = {
-    fontFamily: "emerald",
+    fontFamily: "emerald, vonwaon",
-    fontSize: "96px",
+    fontSize: 96,
     color: getTextColor(style, false, uiTheme),
     padding: {
       bottom: 6
@@ -126,60 +108,35 @@ function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraStyleOptio
   case TextStyle.SUMMARY_GREEN:
   case TextStyle.WINDOW:
   case TextStyle.WINDOW_ALT:
+  case TextStyle.STATS_VALUE:
     shadowXpos = 3;
     shadowYpos = 3;
     break;
   case TextStyle.STATS_LABEL:
-    let fontSizeLabel = "96px";
-    switch (lang) {
-    case "de":
-      fontSizeLabel = "80px";
-      break;
-    default:
-      fontSizeLabel = "96px";
-      break;
-    }
-    styleOptions.fontSize =  fontSizeLabel;
-    break;
-  case TextStyle.STATS_VALUE:
-    shadowXpos = 3;
-    shadowYpos = 3;
-    let fontSizeValue = "96px";
-    switch (lang) {
-    case "de":
-      fontSizeValue = "80px";
-      break;
-    default:
-      fontSizeValue = "96px";
-      break;
-    }
-    styleOptions.fontSize =  fontSizeValue;
-    break;
   case TextStyle.MESSAGE:
   case TextStyle.SETTINGS_LABEL:
   case TextStyle.SETTINGS_LOCKED:
   case TextStyle.SETTINGS_SELECTED:
-    styleOptions.fontSize = languageSettings[lang]?.summaryFontSize || "96px";
     break;
   case TextStyle.BATTLE_INFO:
   case TextStyle.MONEY:
   case TextStyle.TOOLTIP_TITLE:
-    styleOptions.fontSize = languageSettings[lang]?.battleInfoFontSize || "72px";
+    styleOptions.fontSize = defaultFontSize - 24;
     shadowXpos = 3.5;
     shadowYpos = 3.5;
     break;
   case TextStyle.PARTY:
   case TextStyle.PARTY_RED:
-    styleOptions.fontSize = languageSettings[lang]?.partyFontSize || "66px";
+    styleOptions.fontSize = defaultFontSize - 30;
     styleOptions.fontFamily = "pkmnems";
     break;
   case TextStyle.TOOLTIP_CONTENT:
-    styleOptions.fontSize = languageSettings[lang]?.tooltipContentFontSize || "64px";
+    styleOptions.fontSize = defaultFontSize - 32;
     shadowXpos = 3;
     shadowYpos = 3;
     break;
   case TextStyle.MOVE_INFO_CONTENT:
-    styleOptions.fontSize = languageSettings[lang]?.moveInfoFontSize || "56px";
+    styleOptions.fontSize = defaultFontSize - 40;
     shadowXpos = 3;
     shadowYpos = 3;
     break;
@@ -195,7 +152,7 @@ function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraStyleOptio
     styleOptions = Object.assign(styleOptions, extraStyleOptions);
   }
 
-  return [ styleOptions, shadowColor, shadowXpos, shadowYpos ];
+  return [ scale, styleOptions, shadowColor, shadowXpos, shadowYpos ];
 }
 
 export function getBBCodeFrag(content: string, textStyle: TextStyle, uiTheme: UiTheme = UiTheme.DEFAULT): string {