Add a simple language selector.

css/styles.css

@@ -65,6 +65,14 @@ h2 {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
+.dialog-box-lng {
+  text-align: center;
+}
+
+.dialog-box-lng p,.dialog-box-lng select{
+  display: inline;
+}
+
 .dialog-box p {
   font-family: 'Raleway', sans-serif;
   font-weight: 800;

index.html

@@ -297,6 +297,9 @@
     <p data-i18n="[html]textbox.support"></p>
     <p data-i18n="textbox.contributors-text"></p>
     <p id="contributors"><span data-i18n="textbox.contributors"></span>: </p>
+    <div class="dialog-box-lng">
+      <p data-i18n="textbox.language"></p>: <select id="language"></select>
+    </div>
   </div>
 
   <div id="snackbar">Some text some message...</div>

js/translations.js

@@ -4,22 +4,40 @@ function updateContent() {
 }
 
 i18next
-  .use(i18nextXHRBackend)
+.use(i18nextXHRBackend)
-  .use(i18nextBrowserLanguageDetector)
+.use(i18nextBrowserLanguageDetector)
-  .init({
+.init({
-    fallbackLng: 'en',
+  fallbackLng: 'en',
-    debug: true,
+  debug: true,
-    backend: {
+  backend: {
-      loadPath: 'locales/{{lng}}.json',
+    loadPath: 'locales/{{lng}}.json',
-    },
+  },
-  }, function(err, t) {
+}, (err, t) => {
-    jqueryI18next.init(i18next, $);
+  const languages = [
-    i18next.on('languageChanged', () => {
+    ["en", "English"],
-      updateContent();
+    ["zh-CN", "简体中文"],
-    });
+    ["zh-TW", "繁體中文"],
-
+  ],
-    // init set content
+  languageSelector = $('#language');
-    $(document).ready(initialize);
+  languages.map(([code, name]) => {
-    $(document).on("input", updateContent);
+    languageSelector.append(`<option value="${code}"${code == i18next.language ? ' selected' : ''}>${name}</option>`);
-    $('input[type = radio]').on("change", updateContent);
+  });
+  languageSelector.on('change', function () {
+    if (this.value == i18next.language)
+      return;
+    i18next.changeLanguage(this.value);
+  });
+  jqueryI18next.init(i18next, $);
+  i18next.on('languageChanged', lng => {
+    if (!languageSelector.find(`[value=${lng}]`).length) {
+      i18next.changeLanguage('en');
+      return;
+    }
+    languageSelector.val(lng);
+    updateContent();
   });
+  // init set content
+  $(document).ready(initialize);
+  $(document).on("input", updateContent);
+  $('input[type = radio]').on("change", updateContent);
+});

locales/en.json

@@ -75,6 +75,7 @@
     "thanks": "None of this would have been possible without <a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji's work</a> figuring out just how Timmy and Tommy value their turnips.",
     "support": "Support, comments and contributions are available through <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>",
     "contributors-text": "Oh! And let's not forget to thank those who have contributed so far!",
-    "contributors": "Contributors"
+    "contributors": "Contributors",
+    "language": "Language"
   }
 }

locales/zh-CN.json

@@ -22,8 +22,8 @@
     "decreasing": "递减型",
     "fluctuating": "波动型",
     "unknown": "不知道",
-    "large-spike": "大幅上涨（四期型）",
+    "large-spike": "大幅上涨（三期型）",
-    "small-spike": "小幅上涨（三期型）"
+    "small-spike": "小幅上涨（四期型）"
   },
   "prices": {
     "description": "本周你的岛上大头菜的购买价格是多少？<i>（如果你是第一次购买大头菜，这个字段不可用）</i>",
@@ -73,8 +73,9 @@
     "description": "在填写一些大头菜价格后，大头菜预测工具将预测大头菜的价格并显示本周可能的趋势。",
     "development": "APP仍在开发中，但会随着时间的推移不断完善！",
     "thanks": "如果不是<a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji</a>发现豆狸和粒狸如何给大头菜定价的，这一切将不可能实现。",
-    "support": "可以在<a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>获得支持，或讨论和贡献",
+    "support": "可以在<a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>获得支持，或是讨论和贡献。",
     "contributors-text": "哦！别忘记感谢那些至今为止做出过贡献的人。",
-    "contributors": "贡献者"
+    "contributors": "贡献者",
+    "language": "语言"
   }
 }

locales/zh-TW.json

@@ -73,8 +73,9 @@
     "description": "在您紀錄了一些大頭菜價格後，大頭菜預測工具會預測，並顯示你島上可能出現的不同模型。",
     "development": "此工具仍在開發中，但會隨著時間的推移而改善！",
     "thanks": "如果沒有<a href=\"https://twitter.com/_Ninji/status/1244818665851289602?s=20\">Ninji 的幫忙</a>來弄清楚豆狸和粒狸如何對他們的大頭菜的估價，這一切都是不可能實現的。",
-    "support": "可透過 <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>獲得支援、討論及貢獻",
+    "support": "可透過 <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices/issues\">Github</a>獲得支援、討論及貢獻。",
     "contributors-text": "哦！讓我們不要忘記感謝那些迄今為止作出貢獻的人！",
-    "contributors": "貢獻者"
+    "contributors": "貢獻者",
+    "language": "語言"
   }
 }