i18n: Complete zh-cn and add en-us & perf: Add RobotoMono font

src/common/i18n.ts

@@ -18,6 +18,12 @@ export function setLang(lang: string): void {
     storage.setItem(langStorageKey, lang);
 }
 
+/**
+ * I18n string getter
+ * 
+ * @param key The key of the locale string
+ * @returns {string} The locale string
+ */
 export function i18n(key: string): string {
     const lang = getLang();
     const locale = getLocale(lang);

src/index.ts

@@ -2,6 +2,7 @@ import "@/style/main.less";
 
 import { getVersionString } from "./common/global";
 import { Motive } from "./simulator";
+import { initI18n } from "./common/i18n";
 
 console.log(
     `\n%cMotive%c${getVersionString()} | Nocpiun Org\n`+
@@ -17,6 +18,8 @@ console.log(
     "font-family: Consolas;font-size: 8pt;color: white"
 );
 
+initI18n();
+
 const root = document.getElementById("root");
 
 new Motive(root);

src/locales/en-us.json

@@ -0,0 +1,64 @@
+{
+    "app.name": "Motive",
+
+    "modal.about.title": "About",
+    "modal.about.changelog": "Changelog",
+    "modal.about.version": "Version",
+    "modal.about.repo": "Github Repo",
+    "modal.about.license": "License",
+    "modal.about.ctx.donate": "Donate",
+    "modal.about.ctx.donate.links": "Links",
+    "modal.about.ctx.donate.links.repo": "Github Repo",
+    "modal.about.ctx.donate.links.homepage": "Norcleeh's Github Homepage",
+    "modal.about.ctx.donate.links.website": "Norcleeh's Website",
+
+    "modal.import.title": "Import File",
+    "modal.import.label": "Select / Drag & Drop mot file",
+    "modal.import.load": "Load",
+    "modal.import.clear": "Clear",
+
+    "modal.manager.title": "Manager",
+
+    "modal.settings.title": "Settings",
+    "modal.settings.save": "Save",
+    "modal.settings.cancel": "Cancel",
+
+    "modal.object.save": "Save",
+    "modal.object.cancel": "Cancel",
+    "modal.object.delete": "Delete",
+    "modal.object.ball.name": "Name",
+    "modal.object.ball.mass": "Mass",
+    "modal.object.block.name": "Name",
+    "modal.object.block.mass": "Mass",
+
+    "panel.tooltip.settings": "Settings",
+    "panel.tooltip.manager": "Manager",
+    "panel.tooltip.mouse-mode": "Mouse Mode",
+    "panel.tooltip.wall": "Border Wall",
+    "panel.tooltip.refresh": "Refresh",
+    "panel.tooltip.pause": "Pause",
+    "panel.tooltip.unpause": "Unpause",
+    "panel.tooltip.export": "Export",
+    "panel.tooltip.import": "Import",
+    "panel.tooltip.about": "About",
+    "panel.ctx.refresh": "Refresh",
+    "panel.ctx.settings": "Settings",
+    "panel.ctx.manager": "Manager",
+    "panel.ctx.about": "About Motive",
+    "panel.button.ctx.select": "Select",
+
+    "canvas.ctx.refresh": "Refresh",
+    "canvas.ctx.vector": "Add Vector",
+    "canvas.ctx.vector.velocity": "Velocity",
+    "canvas.ctx.vector.force": "Force",
+
+    "obj.ball": "Ball",
+    "obj.block": "Block",
+    "obj.board": "Board",
+    "obj.slope": "Slope",
+    "obj.rope": "Rope",
+    "obj.pole": "Pole",
+    "obj.spring": "Spring",
+    "obj.arc": "Arc",
+    "obj.fixed": "Fixed Object"
+}

src/locales/index.ts

@@ -1,7 +1,9 @@
 import zh_cn from "./zh-cn.json";
+import en_us from "./en-us.json";
 
 export function getLocale(lang: string): { [key: string]: string } {
     switch(lang) {
         case "zh-cn": return zh_cn;
+        case "en-us": return en_us;
     }
 }

src/locales/zh-cn.json

@@ -2,15 +2,15 @@
     "app.name": "Motive",
 
     "modal.about.title": "关于",
-    "modal.about.donate": "打赏",
-    "modal.about.donate.links": "链接",
-    "modal.about.donate.links.repo": "项目 Github 仓库",
-    "modal.about.donate.links.homepage": "作者 Github 主页",
-    "modal.about.donate.links.website": "作者个人网站",
     "modal.about.changelog": "更新日志",
     "modal.about.version": "版本",
     "modal.about.repo": "Github 仓库",
     "modal.about.license": "许可",
+    "modal.about.ctx.donate": "打赏",
+    "modal.about.ctx.donate.links": "链接",
+    "modal.about.ctx.donate.links.repo": "项目 Github 仓库",
+    "modal.about.ctx.donate.links.homepage": "作者 Github 主页",
+    "modal.about.ctx.donate.links.website": "作者个人网站",
 
     "modal.import.title": "导入文件",
     "modal.import.label": "选择 / 拖拽 mot 文件",
@@ -40,5 +40,25 @@
     "panel.tooltip.unpause": "继续",
     "panel.tooltip.export": "导出",
     "panel.tooltip.import": "导入",
-    "panel.tooltip.about": "关于"
+    "panel.tooltip.about": "关于",
+    "panel.ctx.refresh": "刷新画面",
+    "panel.ctx.settings": "设置",
+    "panel.ctx.manager": "管理",
+    "panel.ctx.about": "关于 Motive",
+    "panel.button.ctx.select": "选择",
+
+    "canvas.ctx.refresh": "刷新画面",
+    "canvas.ctx.vector": "添加向量",
+    "canvas.ctx.vector.velocity": "速度",
+    "canvas.ctx.vector.force": "力",
+
+    "obj.ball": "小球",
+    "obj.block": "木块",
+    "obj.board": "木板",
+    "obj.slope": "斜面",
+    "obj.rope": "绳",
+    "obj.pole": "杆",
+    "obj.spring": "弹簧",
+    "obj.arc": "圆弧",
+    "obj.fixed": "固定物"
 }

src/simulator/index.ts

@@ -1,10 +1,21 @@
 import type { ObjectNameMap } from "./object";
 
-import { Box, Circle, Cuboid, Grid2X2, Radius, Shell, Slash, Spline, TriangleRight } from "lucide";
+import {
+    Box,
+    Circle,
+    Cuboid,
+    Grid2X2,
+    Radius,
+    Shell,
+    Slash,
+    Spline,
+    TriangleRight
+} from "lucide";
 
 import { Disposable } from "@/common/lifecycle";
 import { Canvas } from "@/ui/canvas/canvas";
 import { Panel } from "@/ui/panel/panel";
+import { $ } from "@/common/i18n";
 
 import { Render } from "./render/render";
 
@@ -29,15 +40,15 @@ export class Motive extends Disposable {
         this._panel = new Panel(this._root);
 
         // Register object switchers
-        this._panel.addObjectSwitcher("ball", "小球", Circle, false, true);
-        this._panel.addObjectSwitcher("block", "木块", Box);
-        this._panel.addObjectSwitcher("board", "木板", Cuboid, true);
-        this._panel.addObjectSwitcher("slope", "斜面", TriangleRight, true);
-        this._panel.addObjectSwitcher("rope", "绳", Spline, true);
-        this._panel.addObjectSwitcher("pole", "杆", Slash, true);
-        this._panel.addObjectSwitcher("spring", "弹簧", Shell, true);
-        this._panel.addObjectSwitcher("arc", "圆弧", Radius, true);
-        this._panel.addObjectSwitcher("fixed", "固定物", Grid2X2, true);
+        this._panel.addObjectSwitcher("ball", $("obj.ball"), Circle, false, true);
+        this._panel.addObjectSwitcher("block", $("obj.block"), Box);
+        this._panel.addObjectSwitcher("board", $("obj.board"), Cuboid, true);
+        this._panel.addObjectSwitcher("slope", $("obj.slope"), TriangleRight, true);
+        this._panel.addObjectSwitcher("rope", $("obj.rope"), Spline, true);
+        this._panel.addObjectSwitcher("pole", $("obj.pole"), Slash, true);
+        this._panel.addObjectSwitcher("spring", $("obj.spring"), Shell, true);
+        this._panel.addObjectSwitcher("arc", $("obj.arc"), Radius, true);
+        this._panel.addObjectSwitcher("fixed", $("obj.fixed"), Grid2X2, true);
 
         // Initialize the control panel
         this._panel.linkRenderer(this._render);

src/style/fonts.less

@@ -1,3 +1,8 @@
+@font-face {
+    font-family: RobotoMono;
+    src: url("@/assets/fonts/RobotoMono-Regular.ttf");
+}
+
 @font-face {
     font-family: NotoSans-SC;
     src: url("@/assets/fonts/NotoSansSC-Regular.otf");
@@ -14,10 +19,10 @@
 }
 
 @font-face {
-    font-family: FiraCode-Regular;
+    font-family: FiraCode;
     src: url("@/assets/fonts/FiraCode-Regular.ttf");
 }
 
 * {
-    font-family: FiraCode-Regular, NotoSans-SC, NotoSans-SC-Light, NotoSans-SC-Medium, "微软雅黑", "Segoe UI", Arial;
+    font-family: RobotoMono, NotoSans-SC, NotoSans-SC-Light, NotoSans-SC-Medium, "微软雅黑", "Segoe UI", Arial;
 }

src/ui/canvas/canvas.tsx

@@ -4,6 +4,7 @@ import { ArrowRightFromLine, MoveUpRight, RotateCw } from "lucide";
 import { Emitter, type Event } from "@/common/event";
 import { Component, type ComponentLike, type IComponent } from "@/ui/ui";
 import { contextMenuProvider } from "@/ui/contextMenu/contextMenuProvider";
+import { $ } from "@/common/i18n";
 import KatexRegularTTF from "@/assets/fonts/KaTeX_Main-Regular.ttf";
 import KatexRegularWOFF from "@/assets/fonts/KaTeX_Main-Regular.woff";
 import KatexRegularWOFF2 from "@/assets/fonts/KaTeX_Main-Regular.woff2";
@@ -65,21 +66,21 @@ export class Canvas extends Component<HTMLCanvasElement, CanvasOptions> implemen
 
         contextMenuProvider.registerContextMenu(this, [
             {
-                text: "刷新画面",
+                text: $("canvas.ctx.refresh"),
                 icon: RotateCw,
                 action: () => this._onRefresh.fire()
             },
             { separator: true },
             {
-                text: "添加向量",
+                text: $("canvas.ctx.vector"),
                 icon: MoveUpRight,
                 subItems: [
                     {
-                        text: "速度",
+                        text: $("canvas.ctx.vector.velocity"),
                         icon: MoveUpRight,
                     },
                     {
-                        text: "力",
+                        text: $("canvas.ctx.vector.force"),
                         icon: ArrowRightFromLine,
                     }
                 ]

src/ui/modal/aboutModal.tsx

@@ -15,31 +15,31 @@ export class AboutModal extends Modal {
         this._addFooterButton(
             "donate",
             {
-                text: $("modal.about.donate"),
+                text: $("modal.about.ctx.donate"),
                 variant: "primary",
                 icon: HandCoins,
                 contextMenuItems: [
                     {
-                        text: $("modal.about.donate"),
+                        text: $("modal.about.ctx.donate"),
                         icon: HandCoins,
                         action: () => window.open("https://github.com/sponsors/nocpiun", "_blank")
                     },
                     { separator: true },
                     {
-                        text: $("modal.about.donate.links"),
+                        text: $("modal.about.ctx.donate.links"),
                         subItems: [
                             {
-                                text: $("modal.about.donate.links.repo"),
+                                text: $("modal.about.ctx.donate.links.repo"),
                                 icon: SquareArrowOutUpRight,
                                 action: () => window.open("https://github.com/nocpiun/motive", "_blank")
                             },
                             {
-                                text: $("modal.about.donate.links.homepage"),
+                                text: $("modal.about.ctx.donate.links.homepage"),
                                 icon: SquareArrowOutUpRight,
                                 action: () => window.open("https://github.com/NriotHrreion", "_blank")
                             },
                             {
-                                text: $("modal.about.donate.links.website"),
+                                text: $("modal.about.ctx.donate.links.website"),
                                 icon: SquareArrowOutUpRight,
                                 action: () => window.open("https://nocp.space", "_blank")
                             }

src/ui/modal/modal.less

@@ -110,9 +110,11 @@ dialog.modal-dialog {
                 gap: 15px;
                 h2 {
                     margin: 0;
+                    font-family: FiraCode;
                 }
                 .version-number {
                     font-size: 10pt;
+                    font-family: FiraCode;
                     color: var(--mt-foreground-secondary);
                 }
             }
@@ -124,6 +126,7 @@ dialog.modal-dialog {
                 span {
                     margin-top: 10px;
                     font-size: 9pt;
+                    font-family: FiraCode;
                     color: var(--mt-foreground-secondary);
                 }
             }
@@ -144,6 +147,7 @@ dialog.modal-dialog {
                 }
                 &-content {
                     font-size: 11pt;
+                    font-family: FiraCode;
                     color: var(--mt-foreground-secondary);
                 }
             }

src/ui/panel/panel.less

@@ -31,6 +31,7 @@
             span {
                 color: var(--mt-foreground-secondary);
                 font-size: 10pt;
+                font-family: FiraCode;
             }
         }
     }

src/ui/panel/panel.tsx

@@ -100,7 +100,7 @@ export class Panel extends Component<HTMLDivElement, PanelOptions> implements IP
 
         contextMenuProvider.registerContextMenu(this, [
             {
-                text: "刷新画面",
+                text: $("panel.ctx.refresh"),
                 icon: RotateCw,
                 action: () => {
                     if(this._renderer.isPaused) return;
@@ -110,17 +110,17 @@ export class Panel extends Component<HTMLDivElement, PanelOptions> implements IP
             },
             { separator: true },
             {
-                text: "设置",
+                text: $("panel.ctx.settings"),
                 icon: Settings,
                 action: () => modalProvider.open("settings")
             },
             {
-                text: "管理",
+                text: $("panel.ctx.manager"),
                 icon: Box,
                 action: () => modalProvider.open("manager")
             },
             {
-                text: "关于 Motive",
+                text: $("panel.ctx.about"),
                 icon: Info,
                 action: () => modalProvider.open("about")
             }
@@ -185,7 +185,7 @@ export class Panel extends Component<HTMLDivElement, PanelOptions> implements IP
             defaultValue,
             contextMenuItems: [
                 {
-                    text: "选择",
+                    text: $("panel.button.ctx.select"),
                     action: () => switcher.select()
                 }
             ]