Merge pull request #22 from chiba233/v1-dev

[U] update i18n.ts type and more intuitive

AquaNet/src/libs/i18n.ts

@@ -1,5 +1,18 @@
-
+const EN_REF_USER = {
-const EN_REF = {
+  'UseHome.ServerRank': 'Server Rank',
+  'UseHome.Ratting':'DX Ratting',
+  'UseHome.Statistics':'Statistics',
+  'UseHome.Accuracy':'Accuracy',
+  'UseHome.DXScore':'DX Score',
+  'UseHome.PlayActivity':' Play Activity',
+  'UseHome.Plays':'Plays',
+  'UseHome.PlayTime':'Play Time',
+  'UseHome.FirstSeen':'First Seen',
+  'UseHome.LastSeen':'Last Seen',
+  'UseHome.Vesion':'Last Version',
+  'UseHome.RecentScores':'Recent Scores'
+}
+const EN_REF_Welcome = {
   'back': 'Back',
   'email': 'Email',
   'password': 'Password',
@@ -12,48 +25,78 @@ const EN_REF = {
   'welcome.turnstile-error': 'Error verifying your network environment. Please turn off your VPN and try again.',
   'welcome.turnstile-timeout': 'Network verification timed out. Please try again.',
   'welcome.verification-sent': 'A verification email has been sent to ${email}. Please check your inbox!',
-  'welcome.verify-state-0': "You haven't verified your email. A verification email had been sent to your inbox less than a minute ago. Please check your inbox!",
+  'welcome.verify-state-0': 'You haven\'t verified your email. A verification email had been sent to your inbox less than a minute ago. Please check your inbox!',
-  'welcome.verify-state-1': "You haven't verified your email. We've already sent 3 emails over the last 24 hours so we'll not send another one. Please check your inbox!",
+  'welcome.verify-state-1': 'You haven\'t verified your email. We\'ve already sent 3 emails over the last 24 hours so we\'ll not send another one. Please check your inbox!',
-  'welcome.verify-state-2': "You haven't verified your email. We just sent you another verification email. Please check your inbox!",
+  'welcome.verify-state-2': 'You haven\'t verified your email. We just sent you another verification email. Please check your inbox!',
-  'welcome.verifying': "Verifying your email... please wait.",
+  'welcome.verifying': 'Verifying your email... please wait.',
-  'welcome.verified': "Your email has been verified! You can now log in now.",
+  'welcome.verified': 'Your email has been verified! You can now log in now.',
   'welcome.verification-failed': 'Verification failed: ${message}. Please try again.',
 }
 
-const msgs: { [index: string]: typeof EN_REF } = {
+const zhWelcome ={
-  en: EN_REF,
+  'back': '返回',
-  zh: {
+  'email': '邮箱',
-    'back': '返回',
+  'password': '密码',
-    'email': '邮箱',
+  'username': '用户名',
-    'password': '密码',
+  'welcome.btn-login': '登录',
-    'username': '用户名',
+  'welcome.btn-signup': '注册',
-    'welcome.btn-login': '登录',
+  'welcome.email-password-missing': '邮箱和密码必须填哦',
-    'welcome.btn-signup': '注册',
+  'welcome.username-missing': '用户名/邮箱必须填哦',
-    'welcome.email-password-missing': '邮箱和密码必须填哦',
+  'welcome.waiting-turnstile': '正在验证网络环境...',
-    'welcome.username-missing': '用户名/邮箱必须填哦',
+  'welcome.turnstile-error': '验证网络环境出错了，请关闭VPN后重试',
-    'welcome.waiting-turnstile': '正在验证网络环境...',
+  'welcome.turnstile-timeout': '验证网络环境超时了，请重试',
-    'welcome.turnstile-error': '验证网络环境出错了，请关闭VPN后重试',
+  'welcome.verification-sent': '验证邮件已发送至 ${email}，请翻翻收件箱',
-    'welcome.turnstile-timeout': '验证网络环境超时了，请重试',
+  'welcome.verify-state-0': '您还没有验证邮箱哦！验证邮件一分钟内刚刚发到您的邮箱，请翻翻收件箱',
-    'welcome.verification-sent': '验证邮件已发送至 ${email}，请翻翻收件箱',
+  'welcome.verify-state-1': '您还没有验证邮箱哦！我们在过去的24小时内已经发送了3封验证邮件，所以我们不会再发送了，请翻翻收件箱',
-    'welcome.verify-state-0': '您还没有验证邮箱哦！验证邮件一分钟内刚刚发到您的邮箱，请翻翻收件箱',
+  'welcome.verify-state-2': '您还没有验证邮箱哦！我们刚刚又发送了一封验证邮件，请翻翻收件箱',
-    'welcome.verify-state-1': '您还没有验证邮箱哦！我们在过去的24小时内已经发送了3封验证邮件，所以我们不会再发送了，请翻翻收件箱',
+  'welcome.verifying': '正在验证邮箱...请稍等',
-    'welcome.verify-state-2': '您还没有验证邮箱哦！我们刚刚又发送了一封验证邮件，请翻翻收件箱',
+  'welcome.verified': '您的邮箱已经验证成功！您现在可以登录了',
-    'welcome.verifying': '正在验证邮箱...请稍等',
+  'welcome.verification-failed': '验证失败：${message}。请重试',
-    'welcome.verified': '您的邮箱已经验证成功！您现在可以登录了',
+}
-    'welcome.verification-failed': '验证失败：${message}。请重试',
+const zhUser={
-  }
+  'UseHome.ServerRank':'服务器排名',
+  'UseHome.Ratting':'DX B50分',
+  'UseHome.Statistics':'统计数据',
+  'UseHome.Accuracy':'准确度',
+  'UseHome.DXScore':'DX 得分',
+  'UseHome.PlayActivity':'游戏活动',
+  'UseHome.Plays':'出勤次',
+  'UseHome.PlayTime':'出勤时间',
+  'UseHome.FirstSeen':'发现新大陆',
+  'UseHome.LastSeen':'上次出勤',
+  'UseHome.Version':'最新最热否',
+  'UseHome.RecentScores':'我的战绩'
 }
 
-let lang = 'en'
+
+type LocalizationMessages = {
+  [key: string]: string;
+};
+
+type Lang = 'en' | 'zh'
+
+const allI18n: Record<Lang, LocalizationMessages> = {
+  en: { ...EN_REF_USER, ...EN_REF_Welcome },
+  zh: { ...zhUser, ...zhWelcome }
+};
+
+
+const msgs: Record<Lang, LocalizationMessages> = {
+  en: allI18n.en,
+  zh: allI18n.zh
+}
+
+
+let lang: Lang = 'en'
 
 // Infer language from browser
 if (navigator.language.startsWith('zh')) {
   lang = 'zh'
 }
 
-export function t(key: keyof typeof EN_REF, variables?: { [index: string]: string }) {
+export function t(key: keyof LocalizationMessages, variables?: { [index: string]: string }) {
   if (variables) {
-    return msgs[lang][key].replace(/\${(.*?)}/g, (_, v) => variables[v])
+    return msgs[lang][key].replace(/\${(.*?)}/g, (_:string, v: string | number) => variables[v])
   }
   return msgs[lang][key]
 }

AquaNet/src/pages/UserHome.svelte

@@ -10,6 +10,7 @@
   import { type GameName, getMult } from "../libs/scoring";
   import StatusOverlays from "../components/StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
+  import {t} from "../libs/i18n";
 
   registerChart()
 
@@ -73,17 +74,17 @@
     </div>
 
     <div>
-      <h2>{titleText} Statistics</h2>
+      <h2>{titleText} {t('UseHome.Statistics')}</h2>
       <div class="scoring-info">
         <div class="chart">
           <div class="info-top">
             <div class="rating">
-              <span>{game === 'mai2' ? 'DX Rating' : 'Rating'}</span>
+              <span>{game === 'mai2' ? t("UseHome.Ratting"): 'Rating'}</span>
               <span>{d.user.rating.toLocaleString()}</span>
             </div>
 
             <div class="rank">
-              <span>Server Rank</span>
+              <span>{t('UseHome.ServerRank')}</span>
               <span>#{+d.user.serverRank.toLocaleString() + 1}</span>
             </div>
           </div>
@@ -122,7 +123,7 @@
 
         <div class="other-info">
           <div class="accuracy">
-            <span>Accuracy</span>
+            <span>{t('UseHome.Accuracy')}</span>
             <span>{(d.user.accuracy).toFixed(2)}%</span>
           </div>
 
@@ -142,7 +143,7 @@
           </div>
 
           <div class="total-dx-score">
-            <span>{game === 'mai2' ? 'DX Score' : 'Total Score'}</span>
+            <span>{game === 'mai2' ? t('UseHome.DXScore') : 'Total Score'}</span>
             <span>{d.user.totalScore.toLocaleString()}</span>
           </div>
         </div>
@@ -150,33 +151,33 @@
     </div>
 
     <div>
-      <h2>Play Activity</h2>
+      <h2>{t('UseHome.PlayActivity')}</h2>
       <div class="activity-info">
         <div class="hide-scrollbar" id="cal-heatmap" bind:this={calElement} />
 
         <div class="info-bottom">
           <div class="plays">
-            <span>Plays</span>
+            <span>{t("UseHome.Plays")}</span>
             <span>{d.user.plays}</span>
           </div>
 
           <div class="time">
-            <span>Play Time</span>
+            <span>{t('UseHome.PlayTime')}</span>
             <span>{(d.user.totalPlayTime / 60).toFixed(1)} hr</span>
           </div>
 
           <div class="first-play">
-            <span>First Seen</span>
+            <span>{t('UseHome.FirstSeen')}</span>
             <span>{moment(d.user.joined).format("YYYY-MM-DD")}</span>
           </div>
 
           <div class="last-play">
-            <span>Last Seen</span>
+            <span>{t('UseHome.LastSeen')}</span>
             <span>{moment(d.user.lastSeen).format("YYYY-MM-DD")}</span>
           </div>
 
           <div class="last-version">
-            <span>Last Version</span>
+            <span>{t('UseHome.Version')}</span>
             <span>{d.user.lastVersion}</span>
           </div>
         </div>
@@ -184,7 +185,7 @@
     </div>
 
     <div class="recent">
-      <h2>Recent Scores</h2>
+      <h2>{t('UseHome.RecentScores')}</h2>
       <div class="scores">
         {#each d.recent as r, i}
           <div class:alt={i % 2 === 0}>