Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added a help tab in Hunt Optimizer.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-09-14 14:23:06 +02:00
parent 58939b2ff5
commit 20a1046053
9 changed files with 46 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/core/gui/dom.ts
View File

@ -34,6 +34,14 @@ export const el = {
...children: HTMLElement[]
): HTMLHeadingElement => create_element("h2", attributes, ...children),
p: (
attributes?: {
class?: string;
text?: string;
},
...children: HTMLElement[]
): HTMLParagraphElement => create_element("p", attributes, ...children),
a: (
attributes?: {
class?: string;

4
src/hunt_optimizer/gui/HelpView.css Normal file
View File

@ -0,0 +1,4 @@
.hunt_optimizer_HelpView p {
margin: 1em;
max-width: 600px;
}

26
src/hunt_optimizer/gui/HelpView.ts Normal file
View File

@ -0,0 +1,26 @@
import { el } from "../../core/gui/dom";
import { ResizableWidget } from "../../core/gui/ResizableWidget";
import "./HelpView.css";
export class HelpView extends ResizableWidget {
constructor() {
super(
el.div(
{ class: "hunt_optimizer_HelpView" },
el.p({
text:
"Add some items with the drop down to see the optimal combination of hunt methods on the right.",
}),
el.p({
text:
'At the moment a method is simply a quest run-through. Partial quest run-throughs are coming. View the list of methods on the "Methods" tab. Each method takes a certain amount of time, which affects the optimization result. Make sure the times are correct for you.',
}),
el.p({ text: "Only enemy drops are considered. Box drops are coming." }),
el.p({
text:
"The optimal result is calculated using linear optimization. The optimizer takes rare enemies and the fact that pan arms can be split in two into account.",
}),
),
);
}
}

7
src/hunt_optimizer/gui/HuntOptimizerView.ts
View File

@ -19,6 +19,13 @@ export class HuntOptimizerView extends TabContainer {
return new (await import("./MethodsView")).MethodsView();
},
},
{
title: "Help",
key: "help",
create_view: async function() {
return new (await import("./HelpView")).HelpView();
},
},
],
});
}

2
src/hunt_optimizer/gui/MethodsForEpisodeView.ts
View File

@ -62,7 +62,7 @@ export class MethodsForEpisodeView extends ResizableWidget {
...this.enemy_types.map(enemy_type => {
return {
title: npc_data(enemy_type).simple_name,
width: 80,
width: 90,
text_align: "right",
render_cell(method: HuntMethodModel) {
const count = method.enemy_counts.get(enemy_type);

16
src/old/hunt_optimizer/ui/OptimizationResultComponent.css
View File

@ -1,16 +0,0 @@
.main {
display: flex;
flex-direction: column;
}
.table {
flex: 1;
}
.sid_col {
display: inline-block;
overflow: hidden;
white-space: nowrap;
height: 20px;
margin: 0 3px;
}

148
src/old/hunt_optimizer/ui/OptimizationResultComponent.tsx
View File

@ -1,148 +0,0 @@
import { computed } from "mobx";
import { observer } from "mobx-react";
import React, { Component, ReactNode } from "react";
import { AutoSizer, Index } from "react-virtualized";
import { Difficulty, SectionId } from "../../../core/model";
import { hunt_optimizer_store, OptimalMethod } from "../stores/HuntOptimizerStore";
import { BigTable, Column } from "../../core/ui/BigTable";
import { SectionIdIcon } from "../../core/ui/SectionIdIcon";
import { hours_to_string } from "../../core/ui/time";
import styles from "./OptimizationResultComponent.css";
import { Episode } from "../../../core/data_formats/parsing/quest/Episode";
@observer
export class OptimizationResultComponent extends Component {
@computed private get columns(): Column<OptimalMethod>[] {
// Standard columns.
const result = hunt_optimizer_store.result;
const optimal_methods = result ? result.optimal_methods : [];
let total_runs = 0;
let total_time = 0;
for (const method of optimal_methods) {
total_runs += method.runs;
total_time += method.total_time;
}
const columns: Column<OptimalMethod>[] = [
{
name: "Difficulty",
width: 75,
cell_renderer: result => Difficulty[result.difficulty],
footer_value: "Totals:",
},
{
name: "Method",
width: 200,
cell_renderer: result => result.method_name,
tooltip: result => result.method_name,
},
{
name: "Ep.",
width: 34,
cell_renderer: result => Episode[result.method_episode],
},
{
name: "Section ID",
width: 80,
cell_renderer: result => (
<div className={styles.sid_col}>
{result.section_ids.map(sid => (
<SectionIdIcon section_id={sid} key={sid} size={20} />
))}
</div>
),
tooltip: result => result.section_ids.map(sid => SectionId[sid]).join(", "),
},
{
name: "Time/Run",
width: 80,
cell_renderer: result => hours_to_string(result.method_time),
class_name: "number",
},
{
name: "Runs",
width: 60,
cell_renderer: result => result.runs.toFixed(1),
tooltip: result => result.runs.toString(),
footer_value: total_runs.toFixed(1),
footer_tooltip: total_runs.toString(),
class_name: "number",
},
{
name: "Total Hours",
width: 90,
cell_renderer: result => result.total_time.toFixed(1),
tooltip: result => result.total_time.toString(),
footer_value: total_time.toFixed(1),
footer_tooltip: total_time.toString(),
class_name: "number",
},
];
// Add one column per item.
if (result) {
for (const item of result.wanted_items) {
let totalCount = 0;
for (const method of optimal_methods) {
totalCount += method.item_counts.get(item) || 0;
}
columns.push({
name: item.name,
width: 80,
cell_renderer: result => {
const count = result.item_counts.get(item);
return count ? count.toFixed(2) : "";
},
tooltip: result => {
const count = result.item_counts.get(item);
return count ? count.toString() : "";
},
class_name: "number",
footer_value: totalCount.toFixed(2),
footer_tooltip: totalCount.toString(),
});
}
}
return columns;
}
// Make sure render is called when result changes.
@computed private get update_trigger(): any {
return hunt_optimizer_store.result;
}
render(): ReactNode {
this.update_trigger; // eslint-disable-line
const result = hunt_optimizer_store.result;
return (
<section className={styles.main}>
<h3>Optimization Result</h3>
<div className={styles.table}>
<AutoSizer>
{({ width, height }) => (
<BigTable
width={width}
height={height}
row_count={result ? result.optimal_methods.length : 0}
columns={this.columns}
fixed_column_count={4}
record={this.record}
footer={result != null}
update_trigger={this.update_trigger}
/>
)}
</AutoSizer>
</div>
</section>
);
}
private record = ({ index }: Index): OptimalMethod => {
return hunt_optimizer_store.result!.optimal_methods[index];
};
}

24
src/old/hunt_optimizer/ui/WantedItemsComponent.css
View File

@ -1,24 +0,0 @@
.main {
display: flex;
flex-direction: column;
margin: 0 10px;
}
.top_bar {
display: flex;
}
.table {
position: relative;
flex: 1;
margin: 10px 0 0 -10px;
}
.no_rows {
padding: 5px 20px;
color: var(--text-color-disabled);
}
.help {
max-width: 500px;
}

175
src/old/hunt_optimizer/ui/WantedItemsComponent.tsx
View File

@ -1,175 +0,0 @@
import { Button, InputNumber, Popover } from "antd";
import { observer } from "mobx-react";
import React, { Component, ReactNode } from "react";
import { AutoSizer, Column, Table, TableCellRenderer } from "react-virtualized";
import { hunt_optimizer_store, WantedItem } from "../stores/HuntOptimizerStore";
import { item_type_stores } from "../../../core/stores/ItemTypeStore";
import { BigSelect } from "../../core/ui/BigSelect";
import styles from "./WantedItemsComponent.css";
@observer
export class WantedItemsComponent extends Component {
state = {
help_visible: false,
};
render(): ReactNode {
// Make sure render is called on updates.
hunt_optimizer_store.wanted_items.slice(0, 0);
return (
<section className={styles.main}>
<h3>
Wanted Items
<Popover
content={<Help />}
trigger="click"
visible={this.state.help_visible}
onVisibleChange={this.on_help_visible_change}
>
<Button icon="info-circle" type="link" />
</Popover>
</h3>
<div className={styles.top_bar}>
<BigSelect
placeholder="Add an item"
value={undefined}
style={{ width: 200 }}
options={hunt_optimizer_store.huntable_item_types.map(itemType => ({
label: itemType.name,
value: itemType.id,
}))}
onChange={this.add_wanted}
/>
<Button onClick={hunt_optimizer_store.optimize} style={{ marginLeft: 10 }}>
Optimize
</Button>
</div>
<div className={styles.table}>
<AutoSizer>
{({ width, height }) => (
<Table
width={width}
height={height}
headerHeight={30}
rowHeight={30}
rowCount={hunt_optimizer_store.wanted_items.length}
rowGetter={({ index }) => hunt_optimizer_store.wanted_items[index]}
noRowsRenderer={this.no_rows_renderer}
>
<Column
label="Amount"
dataKey="amount"
width={70}
cellRenderer={({ rowData }) => (
<WantedAmountCell wantedItem={rowData} />
)}
/>
<Column
label="Item"
dataKey="item"
width={150}
flexGrow={1}
cellDataGetter={({ rowData }) =>
(rowData as WantedItem).item_type.name
}
/>
<Column
dataKey="remove"
width={30}
cellRenderer={this.table_remove_cell_renderer}
/>
</Table>
)}
</AutoSizer>
</div>
</section>
);
}
private add_wanted = (selected: any) => {
if (selected) {
let added = hunt_optimizer_store.wanted_items.find(
w => w.item_type.id === selected.value,
);
if (!added) {
const item_type = item_type_stores.current.value.get_by_id(selected.value)!;
hunt_optimizer_store.wanted_items.push(new WantedItem(item_type, 1));
}
}
};
private remove_wanted = (wanted: WantedItem) => () => {
const i = hunt_optimizer_store.wanted_items.findIndex(w => w === wanted);
if (i !== -1) {
hunt_optimizer_store.wanted_items.splice(i, 1);
}
};
private table_remove_cell_renderer: TableCellRenderer = ({ rowData }) => {
return <Button type="link" icon="delete" onClick={this.remove_wanted(rowData)} />;
};
private no_rows_renderer = () => {
return (
<div className={styles.no_rows}>
<p>
Add some items with the above drop down and click "Optimize" to see the result
on the right.
</p>
</div>
);
};
private on_help_visible_change = (visible: boolean) => {
this.setState({ helpVisible: visible });
};
}
function Help(): JSX.Element {
return (
<div className={styles.help}>
<p>
Add some items with the drop down and click "Optimize" to see the optimal
combination of hunt methods on the right.
</p>
<p>
At the moment a method is simply a quest run-through. Partial quest run-throughs are
coming. View the list of methods on the "Methods" tab. Each method takes a certain
amount of time, which affects the optimization result. Make sure the times are
correct for you.
</p>
<p>Only enemy drops are considered. Box drops are coming.</p>
<p>
The optimal result is calculated using linear optimization. The optimizer takes rare
enemies and the fact that pan arms can be split in two into account.
</p>
</div>
);
}
@observer
class WantedAmountCell extends Component<{ wantedItem: WantedItem }> {
render(): ReactNode {
const wanted = this.props.wantedItem;
return (
<InputNumber
min={0}
max={10}
value={wanted.amount}
onChange={this.wanted_amount_changed}
size="small"
style={{ width: "100%" }}
/>
);
}
private wanted_amount_changed = (value?: number) => {
if (value != null && value >= 0) {
this.props.wantedItem.amount = value;
}
};
}