From d3e1c81a1f1def3a17c7dd94eb6f14b691cf0e5d Mon Sep 17 00:00:00 2001
From: nulla2011 <nulla@outlook.com>
Date: Tue, 10 Oct 2023 23:36:27 +0800
Subject: [PATCH] feat: i18n

---
 index.html            | 16 ++++++++--------
 package.json          |  1 +
 pnpm-lock.yaml        | 20 ++++++++++++++++++++
 src/canvas.ts         |  4 ----
 src/i18n.ts           | 21 +++++++++++++++++++++
 src/locales/en.json   |  5 +++++
 src/locales/zh.json   |  5 +++++
 src/main.ts           |  1 +
 src/settings.ts       |  2 +-
 src/style.css         |  8 ++------
 src/utils/loadFont.ts |  6 +++---
 11 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 src/i18n.ts
 create mode 100644 src/locales/en.json
 create mode 100644 src/locales/zh.json
diff --git a/index.html b/index.html
index f3a278e..da1364b 100644
--- a/index.html
+++ b/index.html
@@ -11,18 +11,18 @@
 </head>
 
 <body>
-  <h1 class="title">blue archive</h1>
-  <div class="flex justify-center">
-    <canvas id="canvas" height="200" width="800"></canvas>
+  <h1 class="i18n mt-16 mb-12 text-center" data-i18n="title">BlueArchive-Style Logo Generater</h1>
+  <div class="flex justify-center items-center h-[250px]">
+    <canvas id="canvas" height="250" width="900"></canvas>
   </div>
-  <div class="w-[32rem] mx-auto my-8 flex flex-col">
-    <label class="swap">
+  <div class="w-screen mx-auto my-8 flex flex-col sm:w-[32rem]">
+    <!-- <label class="swap">
       <input type="checkbox" disabled id="loading-switch" />
       <div class="alert alert-info swap-on w-96 mx-auto">
         <span class="loading loading-spinner loading-md"></span>
         <span>loading assets...</span>
       </div>
-    </label>
+    </label> -->
     <div class="flex justify-center my-4">
       <span><input id="textL" type="text" placeholder="Type here" value="Blue"
           class="input input-bordered input-md input-primary mr-1" /></span>
@@ -34,8 +34,8 @@
         <span><input type="number" placeholder="Type here" value="Archive" class="input input-bordered input-sm input-primary ml-1" /></span>
       </div> -->
     <div class="flex justify-evenly my-4">
-      <span><button class="btn btn-primary" id="save">Save</button></span>
-      <span><button class="btn btn-primary" id="copy">Copy</button></span>
+      <span><button class="i18n btn btn-primary" id="save" data-i18n="save">Save</button></span>
+      <span><button class="i18n btn btn-primary" id="copy" data-i18n="copy">Copy</button></span>
     </div>
   </div>
   <script type="module" src="/src/main.ts"></script>
diff --git a/package.json b/package.json
index b06fbcd..9fa524d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "vite": "^4.4.5"
   },
   "dependencies": {
+    "i18next": "^23.5.1",
     "lodash-es": "^4.17.21"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 276effa..3fe91d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  i18next:
+    specifier: ^23.5.1
+    version: 23.5.1
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -39,6 +42,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /@babel/runtime@7.23.1:
+    resolution: {integrity: sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -548,6 +558,12 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
+  /i18next@23.5.1:
+    resolution: {integrity: sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==}
+    dependencies:
+      '@babel/runtime': 7.23.1
+    dev: false
+
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -785,6 +801,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regenerator-runtime@0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: false
+
   /resolve@1.22.6:
     resolution: {integrity: sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==}
     hasBin: true
diff --git a/src/canvas.ts b/src/canvas.ts
index dc2192c..8bfd655 100644
--- a/src/canvas.ts
+++ b/src/canvas.ts
@@ -131,10 +131,6 @@ export default class LogoCanvas {
       this.canvasWidthR = canvasWidth / 2;
     }
     this.canvas.width = this.canvasWidthL + this.canvasWidthR;
-    console.log(
-      '🚀 ~ file: canvas.ts:134 ~ LogoCanvas ~ setWidth ~ this.canvas.width:',
-      this.canvas.width
-    );
   }
   generateImg() {
     if (this.canvasWidthL < canvasWidth / 2 || this.canvasWidthR < canvasWidth / 2) {
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 0000000..e9c2854
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,21 @@
+import i18next from 'i18next';
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+const lang = ['zh', 'zh-CN', 'zh-TW'].includes(navigator.language) ? 'zh' : 'en';
+i18next.init({
+  lng: lang,
+  resources: {
+    en: {
+      translation: en,
+    },
+    zh: {
+      translation: zh,
+    },
+  },
+});
+
+document.querySelectorAll('.i18n').forEach((el) => {
+  const key = el.getAttribute('data-i18n')!;
+  el.textContent = i18next.t(key);
+});
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..4de4e86
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "title": "BlueArchive-Style Logo Generater",
+  "save": "SAVE",
+  "copy": "COPY"
+}
\ No newline at end of file
diff --git a/src/locales/zh.json b/src/locales/zh.json
new file mode 100644
index 0000000..9e64c65
--- /dev/null
+++ b/src/locales/zh.json
@@ -0,0 +1,5 @@
+{
+  "title": "碧蓝档案风 logo 生成器",
+  "save": "保存",
+  "copy": "复制"
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 53ce570..98f50ae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import './style.css';
 import LogoCanvas from './canvas';
 import loadImages from './utils/loadImages';
+import './i18n';
 
 (async function () {
   // await loadFont();
diff --git a/src/settings.ts b/src/settings.ts
index ac38b01..a580483 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,5 +1,5 @@
 export default {
-  canvasHeight: 200,
+  canvasHeight: 250,
   canvasWidth: 900,
   fontSize: 85,
   textBaseLine: 0.68,
diff --git a/src/style.css b/src/style.css
index c0965ca..9dca9cf 100644
--- a/src/style.css
+++ b/src/style.css
@@ -32,7 +32,7 @@ body {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: 2em;
   line-height: 1.1;
 }
 
@@ -46,9 +46,5 @@ h1 {
 #canvas {
   border-radius: 8px;
   border: 1px solid #ccc;
-}
-
-.title {
-  margin-top: 2em;
-  text-align: center;
+  max-width: 100%;
 }
diff --git a/src/utils/loadFont.ts b/src/utils/loadFont.ts
index 3abc3b0..4ec88e3 100644
--- a/src/utils/loadFont.ts
+++ b/src/utils/loadFont.ts
@@ -6,11 +6,11 @@ export default async (content: string = 'A') => {
   // await Promise.all([G2B.load() /*, GSH.load()*/]).then((fonts) =>
   //   fonts.map((font) => document.fonts.add(font))
   // );
-  const loadingSwitch = document.querySelector('#loading-switch') as HTMLInputElement;
-  loadingSwitch.checked = true;
+  // const loadingSwitch = document.querySelector('#loading-switch') as HTMLInputElement;
+  // loadingSwitch.checked = true;
   await document.fonts.load(
     `${settings.fontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy_diff`,
     content
   );
-  loadingSwitch.checked = false;
+  // loadingSwitch.checked = false;
 };
