phantasmal-world/src/application/ui/ApplicationComponent.tsx

87 lines
3.3 KiB
TypeScript
Raw Normal View History

import { Menu, Select } from "antd";
import { ClickParam } from "antd/lib/menu";
import { observer } from "mobx-react";
2019-07-18 21:39:23 +08:00
import React, { ReactNode, Component } from "react";
import { Server } from "../../core/domain";
import styles from "./ApplicationComponent.css";
import { DpsCalcComponent } from "../../dps_calc/ui/DpsCalcComponent";
import { with_error_boundary } from "../../core/ui/ErrorBoundary";
import { HuntOptimizerComponent } from "../../hunt_optimizer/ui/HuntOptimizerComponent";
import { QuestEditorComponent } from "../../quest_editor/ui/QuestEditorComponent";
import { ViewerComponent } from "../../viewer/ui/ViewerComponent";
2019-07-18 21:39:23 +08:00
import { application_store } from "../stores/ApplicationStore";
2019-07-11 23:30:23 +08:00
const Viewer = with_error_boundary(ViewerComponent);
2019-06-26 23:47:53 +08:00
const QuestEditor = with_error_boundary(QuestEditorComponent);
const HuntOptimizer = with_error_boundary(HuntOptimizerComponent);
const DpsCalc = with_error_boundary(DpsCalcComponent);
@observer
2019-07-18 21:39:23 +08:00
export class ApplicationComponent extends Component {
componentDidMount(): void {
window.addEventListener("keyup", this.keyup);
}
componentWillUnmount(): void {
window.removeEventListener("keyup", this.keyup);
}
2019-07-03 02:56:33 +08:00
render(): ReactNode {
2019-06-26 23:47:53 +08:00
let tool_component;
2019-07-18 21:39:23 +08:00
switch (application_store.current_tool) {
2019-07-11 23:30:23 +08:00
case "viewer":
tool_component = <Viewer />;
break;
case "quest_editor":
2019-06-26 23:47:53 +08:00
tool_component = <QuestEditor />;
break;
case "hunt_optimizer":
2019-06-26 23:47:53 +08:00
tool_component = <HuntOptimizer />;
break;
case "dps_calc":
2019-06-26 23:47:53 +08:00
tool_component = <DpsCalc />;
2019-06-17 02:31:48 +08:00
break;
}
return (
<div className={styles.main}>
<div className={styles.navbar}>
<Menu
className={styles.heading_menu}
2019-06-26 23:47:53 +08:00
onClick={this.menu_clicked}
2019-07-18 21:39:23 +08:00
selectedKeys={[application_store.current_tool]}
mode="horizontal"
>
2019-07-11 23:30:23 +08:00
<Menu.Item key="viewer">
Viewer<sup className={styles.beta}>(Beta)</sup>
</Menu.Item>
<Menu.Item key="quest_editor">
Quest Editor<sup className={styles.beta}>(Beta)</sup>
</Menu.Item>
<Menu.Item key="hunt_optimizer">Hunt Optimizer</Menu.Item>
2019-06-17 02:31:48 +08:00
{/* <Menu.Item key="dpsCalc">
DPS Calculator
</Menu.Item> */}
</Menu>
<div className={styles.server_select}>
<span>Server:</span>
<Select defaultValue={Server.Ephinea} style={{ width: 120 }}>
<Select.Option value={Server.Ephinea}>{Server.Ephinea}</Select.Option>
</Select>
</div>
</div>
<div className={styles.content}>{tool_component}</div>
</div>
);
}
2019-06-26 23:47:53 +08:00
private menu_clicked = (e: ClickParam) => {
2019-07-18 21:39:23 +08:00
application_store.current_tool = e.key;
};
2019-06-17 02:31:48 +08:00
2019-07-18 21:39:23 +08:00
private keyup = (e: KeyboardEvent) => {
application_store.dispatch_global_keyup(e);
};
}