diff --git a/antd.customize.less b/antd.customize.less index 72732ea0..7eba8e1b 100644 --- a/antd.customize.less +++ b/antd.customize.less @@ -18,14 +18,14 @@ @border-radius-base: 2px; @border-radius-sm: 0px; -@background-color-light: lighten(@body-background, 20%); // background of header and selected item +@background-color-light: lighten(@component-background, 20%); // background of header and selected item @background-color-base: fade(@primary-color, 20%); // Default grey background color @item-active-bg: fade(@primary-color, 20%); @item-hover-bg: fade(@primary-color, 10%); -@border-color-base: lighten(@body-background, 20%); // base border outline a component -@border-color-split: lighten(@body-background, 10%); // split border inside a component +@border-color-base: lighten(@component-background, 20%); // base border outline a component +@border-color-split: lighten(@component-background, 10%); // split border inside a component // Disabled states @disabled-color: fade(#fff, 50%); @@ -36,10 +36,10 @@ @animation-duration-fast: 0.033s; // Tooltip // Input -@input-bg: darken(@body-background, 5%); +@input-bg: darken(@component-background, 5%); // Buttons -@btn-default-bg: lighten(@body-background, 10%); +@btn-default-bg: lighten(@component-background, 10%); // Modal @modal-mask-bg: fade(black, 80%); @@ -49,4 +49,4 @@ @table-row-hover-bg: @item-hover-bg; // Menu -@menu-dark-bg: @body-background; \ No newline at end of file +@menu-dark-bg: @component-background; diff --git a/package.json b/package.json index ca6ae1c7..216abc3a 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@types/lodash": "^4.14.132", "@types/react": "16.8.18", "@types/react-dom": "16.8.4", + "@types/react-virtualized": "^9.21.2", "@types/text-encoding": "^0.0.35", "antd": "^3.19.1", "craco-antd": "^1.11.0", @@ -18,6 +19,7 @@ "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1", + "react-virtualized": "^9.21.1", "text-encoding": "^0.7.0", "three": "^0.104.0", "three-orbit-controls": "^82.1.0", diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 7ae19043..00000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -@import '~antd/dist/antd.css'; - -body { - margin: 0; -} - -body, #phantasmal-world-root { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} \ No newline at end of file diff --git a/src/index.less b/src/index.less new file mode 100644 index 00000000..eca2a3b9 --- /dev/null +++ b/src/index.less @@ -0,0 +1,32 @@ +@import '~antd/dist/antd.less'; + +#phantasmal-world-root { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +@scrollbar-color: darken(@component-background, 3%); +@scrollbar-thumb-color: lighten(@component-background, 3%); + +* { + scrollbar-color: @scrollbar-thumb-color @scrollbar-color; +} + +::-webkit-scrollbar { + background-color: @scrollbar-color; +} + +::-webkit-scrollbar-track { + background-color: @scrollbar-color; +} + +::-webkit-scrollbar-thumb { + background-color: @scrollbar-thumb-color; +} + +::-webkit-scrollbar-corner { + background-color: @scrollbar-color; +} diff --git a/src/index.tsx b/src/index.tsx index f2b26a81..073373f1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './index.less'; import { ApplicationComponent } from './ui/ApplicationComponent'; +import 'react-virtualized/styles.css'; ReactDOM.render( , diff --git a/src/stores/HuntOptimizerStore.ts b/src/stores/HuntOptimizerStore.ts index 543a0604..30e2e103 100644 --- a/src/stores/HuntOptimizerStore.ts +++ b/src/stores/HuntOptimizerStore.ts @@ -31,13 +31,18 @@ export class OptimizationResult { // TODO: group similar methods (e.g. same difficulty, same quest and similar ID). // This way people can choose their preferred section ID. -// TODO: Cutter doesn't seem to work. +// TODO: boxes. +// TODO: rare enemy variants. +// TODO: order of items in results table should match order in wanted table. class HuntOptimizerStore { @observable readonly wantedItems: Array = []; @observable readonly result: IObservableArray = observable.array(); optimize = async () => { - if (!this.wantedItems.length) return; + if (!this.wantedItems.length) { + this.result.splice(0); + return; + } const methods = await huntMethodStore.methods.current.promise; const dropTable = await itemDropStore.enemyDrops.current.promise; @@ -107,6 +112,10 @@ class HuntOptimizerStore { runInAction(() => { this.result.splice(0); + if (!result.feasible) { + return; + } + for (const [method, runsOrOther] of Object.entries(result)) { const [diffStr, sIdStr, methodName] = method.split('\t', 3); diff --git a/src/ui/ApplicationComponent.css b/src/ui/ApplicationComponent.css index 3a0ecbec..b15df593 100644 --- a/src/ui/ApplicationComponent.css +++ b/src/ui/ApplicationComponent.css @@ -24,10 +24,11 @@ .ApplicationComponent-main { flex: 1; display: flex; + flex-direction: column; align-items: stretch; overflow: hidden; } -.ApplicationComponent-main>* { +.ApplicationComponent-main > * { flex: 1; } diff --git a/src/ui/hunt-optimizer/HuntOptimizerComponent.css b/src/ui/hunt-optimizer/HuntOptimizerComponent.css index f774e8d1..8767cb37 100644 --- a/src/ui/hunt-optimizer/HuntOptimizerComponent.css +++ b/src/ui/hunt-optimizer/HuntOptimizerComponent.css @@ -1,4 +1,11 @@ .ho-HuntOptimizerComponent { display: flex; align-items: stretch; + overflow: hidden; + margin-top: 10px; } + +.ho-HuntOptimizerComponent > *:nth-child(2) { + flex-grow: 1; + overflow: hidden; +} \ No newline at end of file diff --git a/src/ui/hunt-optimizer/OptimizationResultComponent.less b/src/ui/hunt-optimizer/OptimizationResultComponent.less new file mode 100644 index 00000000..2d42cda8 --- /dev/null +++ b/src/ui/hunt-optimizer/OptimizationResultComponent.less @@ -0,0 +1,51 @@ +.ho-OptimizationResultComponent { + display: flex; + flex-direction: column; +} + +.ho-OptimizationResultComponent-table { + flex: 1; + overflow: hidden; +} + +.ho-OptimizationResultComponent-table div { + outline: none; +} + +.ho-OptimizationResultComponent-cell { + display: flex; + align-items: center; + box-sizing: border-box; + padding: 0 5px; + border-bottom: solid 1px @border-color-base; + // border-right: solid 1px @border-color-base; +} + +.ho-OptimizationResultComponent-cell > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ho-OptimizationResultComponent-cell.first-in-row { + border-left: solid 1px @border-color-base; +} + +.ho-OptimizationResultComponent-cell.last-in-row { + border-right: solid 1px @border-color-base; +} + +.ho-OptimizationResultComponent-cell.header { + background-color: darken(@border-color-base, 10%); + font-weight: bold; + border-top: solid 1px @border-color-base; +} + +.ho-OptimizationResultComponent-cell.number { + justify-content: flex-end; +} + +.ho-OptimizationResultComponent-no-result { + margin: 20px; + color: @text-color-secondary; +} \ No newline at end of file diff --git a/src/ui/hunt-optimizer/OptimizationResultComponent.tsx b/src/ui/hunt-optimizer/OptimizationResultComponent.tsx index 5a792843..c02e3d61 100644 --- a/src/ui/hunt-optimizer/OptimizationResultComponent.tsx +++ b/src/ui/hunt-optimizer/OptimizationResultComponent.tsx @@ -1,12 +1,55 @@ -import { Table } from "antd"; import { observer } from "mobx-react"; import React from "react"; +import { AutoSizer, GridCellRenderer, MultiGrid, Index } from "react-virtualized"; import { Item } from "../../domain"; import { huntOptimizerStore, OptimizationResult } from "../../stores/HuntOptimizerStore"; +import "./OptimizationResultComponent.less"; +import { computed } from "mobx"; @observer export class OptimizationResultComponent extends React.Component { - render() { + private standardColumns: Array<{ + title: string, + width: number, + cellValue: (result: OptimizationResult) => string, + className?: string + }> = [ + { + title: 'Difficulty', + width: 75, + cellValue: (result) => result.difficulty + }, + { + title: 'Method', + width: 200, + cellValue: (result) => result.methodName + }, + { + title: 'Section ID', + width: 80, + cellValue: (result) => result.sectionId + }, + { + title: 'Hours/Run', + width: 85, + cellValue: (result) => result.methodTime.toFixed(1), + className: 'number' + }, + { + title: 'Runs', + width: 50, + cellValue: (result) => result.runs.toFixed(1), + className: 'number' + }, + { + title: 'Total Hours', + width: 90, + cellValue: (result) => result.totalTime.toFixed(1), + className: 'number' + }, + ]; + + @computed private get items(): Item[] { const items = new Set(); for (const r of huntOptimizerStore.result) { @@ -15,38 +58,102 @@ export class OptimizationResultComponent extends React.Component { } } + return [...items]; + } + + render() { + // Make sure render is called when result changes. + huntOptimizerStore.result.slice(0, 0); + return ( -
-

Optimization Result

- index.toString()} - size="small" - scroll={{ x: true, y: true }} - > - - - - - - - {[...items].map(item => - - title={item.name} - key={item.name} - render={(_, result) => { - const count = result.itemCounts.get(item); - return count && count.toFixed(2); - }} - /> - )} -
+
+

Optimization Result

+
+ + {({ width, height }) => + +
+ Add some items and click "Optimize" to see the result here. +
+ } + /> + } + +
); } - private fixed1(time: number): string { - return time.toFixed(1); + private columnWidth = ({ index }: Index) => { + const column = this.standardColumns[index]; + return column ? column.width : 80; + } + + private cellRenderer: GridCellRenderer = ({ columnIndex, rowIndex, style }) => { + const column = this.standardColumns[columnIndex]; + let text: string; + let title: string | undefined; + const classes = ['ho-OptimizationResultComponent-cell']; + + if (columnIndex === 0) { + classes.push('first-in-row'); + } else if (columnIndex === this.standardColumns.length + this.items.length - 1) { + classes.push('last-in-row'); + } + + if (rowIndex === 0) { + // Header + text = title = column + ? column.title + : this.items[columnIndex - this.standardColumns.length].name; + + classes.push('header'); + } else { + // Method row + const result = huntOptimizerStore.result[rowIndex - 1]; + + if (column) { + text = title = column.cellValue(result); + } else { + const itemCount = result.itemCounts.get( + this.items[columnIndex - this.standardColumns.length] + ); + + if (itemCount) { + text = itemCount.toFixed(2); + title = itemCount.toString(); + } else { + text = ''; + } + } + + if (column) { + if (column.className) { + classes.push(column.className); + } + } else { + classes.push('number'); + } + } + + return ( +
+ {text} +
+ ); } } diff --git a/src/ui/hunt-optimizer/WantedItemsComponent.css b/src/ui/hunt-optimizer/WantedItemsComponent.css index eb4a41ce..d496ea2d 100644 --- a/src/ui/hunt-optimizer/WantedItemsComponent.css +++ b/src/ui/hunt-optimizer/WantedItemsComponent.css @@ -1,7 +1,11 @@ .ho-WantedItemsComponent { - margin: 10px; + display: flex; + flex-direction: column; + margin: 0 10px; } .ho-WantedItemsComponent-table { + position: relative; + flex: 1; margin-top: 10px; } \ No newline at end of file diff --git a/src/ui/hunt-optimizer/WantedItemsComponent.tsx b/src/ui/hunt-optimizer/WantedItemsComponent.tsx index 70fc51fb..e8ee58c4 100644 --- a/src/ui/hunt-optimizer/WantedItemsComponent.tsx +++ b/src/ui/hunt-optimizer/WantedItemsComponent.tsx @@ -1,6 +1,7 @@ -import { Button, InputNumber, Select, Table } from "antd"; +import { Button, InputNumber, Select } from "antd"; import { observer } from "mobx-react"; import React from "react"; +import { AutoSizer, Column, Table, TableCellRenderer } from "react-virtualized"; import { huntOptimizerStore, WantedItem } from "../../stores/HuntOptimizerStore"; import { itemStore } from "../../stores/ItemStore"; import './WantedItemsComponent.css'; @@ -13,7 +14,7 @@ export class WantedItemsComponent extends React.Component { return (
-

Wanted Items

+

Wanted Items