diff --git a/README.md b/README.md index 374afe8..db74826 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,9 @@ This is my graduation project. **Automatic compilation preview address:** -Lab: https://living-together-lab.mrkbear.com +Simulator: [living-together.mrkbear.com](https://living-together.mrkbear.com) + +Laboratory: [living-together-lab.mrkbear.com](https://living-together-lab.mrkbear.com) ## 1. The meaning of the topic diff --git a/source/Component/CommandBar/CommandBar.scss b/source/Component/CommandBar/CommandBar.scss new file mode 100644 index 0000000..dbd174a --- /dev/null +++ b/source/Component/CommandBar/CommandBar.scss @@ -0,0 +1,39 @@ +div.command-bar { + height: 100%; + user-select: none; + display: flex; + flex-direction: column; + justify-content: space-between; + + button.ms-Button.command-button { + width: 100%; + text-align: center; + display: flex; + justify-content: center; + color: inherit; + + span.ms-Button-flexContainer i.ms-Icon { + font-size: 25px; + } + } + + button.ms-Button.command-button.on-end { + align-self: flex-end; + } +} + +button.ms-Button.command-button.active { + color: aqua !important; +} + +div.command-bar.dark button.ms-Button.command-button.active, +div.command-bar.dark button.ms-Button.command-button:hover { + background-color: rgba($color: #FFFFFF, $alpha: .2); + color: rgba($color: #FFFFFF, $alpha: 1); +} + +div.command-bar.light button.ms-Button.command-button.active, +div.command-bar.light button.ms-Button.command-button:hover { + background-color: rgba($color: #000000, $alpha: .08); + color: rgba($color: #000000, $alpha: 1); +} diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx new file mode 100644 index 0000000..64c4dbe --- /dev/null +++ b/source/Component/CommandBar/CommandBar.tsx @@ -0,0 +1,66 @@ +import { BackgroundLevel, Theme } from "@Component/Theme/Theme"; +import { IconButton } from "@fluentui/react"; +import { Component, ReactNode } from "react"; +import "./CommandBar.scss"; + +interface ICommandBarProps { + width: number; +} + +class CommandBar extends Component { + + render(): ReactNode { + return +
+ + + + + + + +
+
+ +
+
+ } +} + +export { CommandBar }; \ No newline at end of file diff --git a/source/Component/HeaderBar/HeaderBar.scss b/source/Component/HeaderBar/HeaderBar.scss index f7cda1d..0150667 100644 --- a/source/Component/HeaderBar/HeaderBar.scss +++ b/source/Component/HeaderBar/HeaderBar.scss @@ -1,5 +1,5 @@ div.header-bar { - padding: 0 20px; + padding: 0 3px; box-sizing: border-box; display: flex; align-items: center; @@ -7,13 +7,13 @@ div.header-bar { user-select: none; div.title > i, div.fps-view > i { - font-size: larger; - vertical-align: text-bottom; - padding-right: 5px; + font-size: 25px; + vertical-align: middle; + padding-right: 8px; } - + div.ms-TooltipHost { - padding: 0 5px; + padding: 0 8px; overflow: hidden; flex-shrink: 1; diff --git a/source/Component/HeaderBar/HeaderBar.tsx b/source/Component/HeaderBar/HeaderBar.tsx index ce5a925..18787ff 100644 --- a/source/Component/HeaderBar/HeaderBar.tsx +++ b/source/Component/HeaderBar/HeaderBar.tsx @@ -60,6 +60,7 @@ class HeaderBar extends Component< setting.on("language", this.changeListener); } if (status) { + status.archive.on("save", this.changeListener); status.model.on("loop", this.physicsFpsCalc); status.renderer.on("loop", this.renderFpsCalc); } @@ -71,6 +72,7 @@ class HeaderBar extends Component< setting.off("language", this.changeListener); } if (status) { + status.archive.off("save", this.changeListener); status.model.off("loop", this.physicsFpsCalc); status.renderer.off("loop", this.renderFpsCalc); } diff --git a/source/Component/Theme/Theme.scss b/source/Component/Theme/Theme.scss index a4b95b8..ce09e98 100644 --- a/source/Component/Theme/Theme.scss +++ b/source/Component/Theme/Theme.scss @@ -6,7 +6,7 @@ $lt-font-size-lvl2: $ms-font-size-18; $lt-font-size-lvl1: $ms-font-size-24; $lt-font-weight-normal: $ms-font-weight-regular; -$lt-font-weight-lvl3: $ms-font-weight-semibold; +$lt-font-weight-lvl3: $ms-font-weight-regular; $lt-font-weight-lvl2: $ms-font-weight-semibold; $lt-font-weight-lvl1: $ms-font-weight-bold; diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index aec7bf2..f33522a 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -8,6 +8,6 @@ const EN_US = { "Header.Bar.File.Save.Status.Saved": "Saved", "Header.Bar.File.Save.Status.Unsaved": "UnSaved", "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}", - "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} / fps) is on the left, and the simulation frame rate ({physicsFps} / fps) is on the right.", + "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 36fdfad..0c28443 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -8,6 +8,6 @@ const ZH_CN = { "Header.Bar.File.Save.Status.Saved": "已保存", "Header.Bar.File.Save.Status.Unsaved": "未保存", "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}", - "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} / fps), 右侧为模拟帧率 ({physicsFps} / fps)。", + "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。", } export default ZH_CN; \ No newline at end of file diff --git a/source/Model/Archive.ts b/source/Model/Archive.ts index b29a7fd..8c91b21 100644 --- a/source/Model/Archive.ts +++ b/source/Model/Archive.ts @@ -8,7 +8,7 @@ interface IArchiveEvent { class Archive< M extends any = any, E extends Record = {} -> extends Emitter { +> extends Emitter { /** * 是否为新文件 diff --git a/source/Page/SimulatorWeb/SimulatorWeb.scss b/source/Page/SimulatorWeb/SimulatorWeb.scss index 8677595..f3035ac 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.scss +++ b/source/Page/SimulatorWeb/SimulatorWeb.scss @@ -1,6 +1,11 @@ div.app-root { width: 100%; height: 100%; - position: absolute; + position: fixed; overflow: hidden; + + div.app-root-space { + height: 100%; + display: flex; + } } \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 6c1c81d..4d54aaf 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -1,15 +1,15 @@ import { Component, ReactNode } from "react"; import { SettingProvider, Setting } from "@Context/Setting"; import { HeaderBar } from "@Component/HeaderBar/HeaderBar"; -import { Theme, FontLevel, BackgroundLevel } from "@Component/Theme/Theme"; -import { Localization } from "@Component/Localization/Localization"; +import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme"; import { Entry } from "../Entry/Entry"; import { StatusProvider, Status } from "@Context/Status"; import { ClassicRenderer } from "@GLRender/ClassicRenderer"; import { initializeIcons } from '@fluentui/font-icons-mdl2'; import "./SimulatorWeb.scss"; +import { CommandBar } from "@Component/CommandBar/CommandBar"; -initializeIcons(); +initializeIcons("http://cdn.mrkbear.com/fabric-cdn-prod_20210407.001/"); class SimulatorWeb extends Component { @@ -65,8 +65,15 @@ class SimulatorWeb extends Component { return +
+ +
+
} }