README.md

@@ -11,9 +11,7 @@ This is my graduation project.
 
 **Automatic compilation preview address:**
 
-Simulator: [living-together.mrkbear.com](https://living-together.mrkbear.com)
+Lab: https://living-together-lab.mrkbear.com
-
-Laboratory: [living-together-lab.mrkbear.com](https://living-together-lab.mrkbear.com)
 
 ## 1. The meaning of the topic
 

source/Component/CommandBar/CommandBar.scss

@@ -1,39 +0,0 @@
-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);
-}

source/Component/CommandBar/CommandBar.tsx

@@ -1,66 +0,0 @@
-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<ICommandBarProps> {
-
-    render(): ReactNode {
-        return <Theme
-            className="command-bar"
-            backgroundLevel={BackgroundLevel.Level3}
-            style={{ width: this.props.width }}
-        >
-            <div>
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "Save"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "HandsFree"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "TouchPointer"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "Camera"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "Play"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "PlayResume"}}
-                    className="command-button"
-                />
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "PlayReverseResume"}}
-                    className="command-button"
-                />
-            </div>
-            <div>
-                <IconButton 
-                    style={{ height: this.props.width }}
-                    iconProps={{iconName: "Settings"}}
-                    className="command-button on-end"
-                />
-            </div>
-        </Theme>
-    }
-}
-
-export { CommandBar };

source/Component/HeaderBar/HeaderBar.scss

@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 3px;
+    padding: 0 20px;
     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: 25px;
+        font-size: larger;
-        vertical-align: middle;
+        vertical-align: text-bottom;
-        padding-right: 8px;
+        padding-right: 5px;
     }
-
+    
     div.ms-TooltipHost {
-        padding: 0 8px;
+        padding: 0 5px;
         overflow: hidden;
         flex-shrink: 1;
         

source/Component/HeaderBar/HeaderBar.tsx

@@ -60,7 +60,6 @@ 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);
         }
@@ -72,7 +71,6 @@ 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);
         }

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-regular;
+$lt-font-weight-lvl3: $ms-font-weight-semibold;
 $lt-font-weight-lvl2: $ms-font-weight-semibold;
 $lt-font-weight-lvl1: $ms-font-weight-bold;
 

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;

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;

source/Model/Archive.ts

@@ -8,7 +8,7 @@ interface IArchiveEvent {
 class Archive<
     M extends any = any,
     E extends Record<EventType, any> = {}
-> extends Emitter<E & IArchiveEvent> {
+> extends Emitter<E> {
 
     /**
      * 是否为新文件

source/Page/SimulatorWeb/SimulatorWeb.scss

@@ -1,11 +1,6 @@
 div.app-root {
     width: 100%;
     height: 100%;
-    position: fixed;
+    position: absolute;
     overflow: hidden;
-
-    div.app-root-space {
-        height: 100%;
-        display: flex;
-    }
 }

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, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { Theme, FontLevel, BackgroundLevel } from "@Component/Theme/Theme";
+import { Localization } from "@Component/Localization/Localization";
 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("http://cdn.mrkbear.com/fabric-cdn-prod_20210407.001/");
+initializeIcons();
 
 class SimulatorWeb extends Component {
     
@@ -65,15 +65,8 @@ class SimulatorWeb extends Component {
         return <Theme 
             className="app-root"
             backgroundLevel={BackgroundLevel.Level5}
-            fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
-            <div className="app-root-space" style={{
-                height: `calc( 100% - ${45}px)`
-            }}>
-                <CommandBar width={45}/>
-                <div></div>
-            </div>
         </Theme>
     }
 }