Improved hunt optimizer UI.

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-base: lighten(@component-background, 20%); // base border outline a component
-@border-color-split: lighten(@body-background, 10%); // split border inside 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;
+@menu-dark-bg: @component-background;

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",

src/index.css

@@ -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;
-}

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;
+}

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(
     <ApplicationComponent />,

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<WantedItem> = [];
     @observable readonly result: IObservableArray<OptimizationResult> = 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);
 

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;
 }

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;
 }

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;
+}

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<Item>();
 
         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 (
-            <section>
+            <section className="ho-OptimizationResultComponent">
-                <h2>Optimization Result</h2>
+                <h3>Optimization Result</h3>
-                <Table
+                <div className="ho-OptimizationResultComponent-table">
-                    dataSource={huntOptimizerStore.result}
+                    <AutoSizer>
-                    pagination={false}
+                        {({ width, height }) =>
-                    rowKey={(_, index) => index.toString()}
+                            <MultiGrid
-                    size="small"
+                                fixedRowCount={1}
-                    scroll={{ x: true, y: true }}
+                                width={width}
-                >
+                                height={height}
-                    <Table.Column title="Difficulty" dataIndex="difficulty" />
+                                rowHeight={28}
-                    <Table.Column title="Method" dataIndex="methodName" />
+                                rowCount={1 + huntOptimizerStore.result.length}
-                    <Table.Column title="Section ID" dataIndex="sectionId" />
+                                columnWidth={this.columnWidth}
-                    <Table.Column title="Hours/Run" dataIndex="methodTime" render={this.fixed1} />
+                                columnCount={this.standardColumns.length + this.items.length}
-                    <Table.Column title="Runs" dataIndex="runs" render={this.fixed1} />
+                                cellRenderer={this.cellRenderer}
-                    <Table.Column title="Total Hours" dataIndex="totalTime" render={this.fixed1} />
+                                noContentRenderer={() =>
-                    {[...items].map(item =>
+                                    <div className="ho-OptimizationResultComponent-no-result">
-                        <Table.Column<OptimizationResult>
+                                        Add some items and click "Optimize" to see the result here.
-                            title={item.name}
+                                    </div>
-                            key={item.name}
+                                }
-                            render={(_, result) => {
-                                const count = result.itemCounts.get(item);
-                                return count && count.toFixed(2);
-                            }}
                             />
-                    )}
+                        }
-                </Table>
+                    </AutoSizer>
+                </div>
             </section>
         );
     }
 
-    private fixed1(time: number): string {
+    private columnWidth = ({ index }: Index) => {
-        return time.toFixed(1);
+        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 (
+            <div
+                className={classes.join(' ')}
+                key={`${columnIndex}, ${rowIndex}`}
+                style={style}
+                title={title}
+            >
+                <span>{text}</span>
+            </div>
+        );
     }
 }

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;
 }

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 (
             <section className="ho-WantedItemsComponent">
-                <h2>Wanted Items</h2>
+                <h3>Wanted Items</h3>
                 <div>
                     <Select
                         value={undefined}
@@ -32,27 +33,40 @@ export class WantedItemsComponent extends React.Component {
                     </Select>
                     <Button onClick={huntOptimizerStore.optimize}>Optimize</Button>
                 </div>
+                <div className="ho-WantedItemsComponent-table">
+                    <AutoSizer>
+                        {({ width, height }) => (
                             <Table
-                    className="ho-WantedItemsComponent-table"
+                                width={width}
-                    size="small"
+                                height={height}
-                    dataSource={huntOptimizerStore.wantedItems}
+                                headerHeight={30}
-                    rowKey={wanted => wanted.item.name}
+                                rowHeight={30}
-                    pagination={false}
+                                rowCount={huntOptimizerStore.wantedItems.length}
+                                rowGetter={({ index }) => huntOptimizerStore.wantedItems[index]}
                             >
-                    <Table.Column<WantedItem>
+                                <Column
-                        title="Amount"
+                                    label="Amount"
-                        dataIndex="amount"
+                                    dataKey="amount"
-                        render={(_, wanted) => (
+                                    width={70}
-                            <WantedAmountCell wantedItem={wanted} />
+                                    cellRenderer={({ rowData }) =>
-                        )}
+                                        <WantedAmountCell wantedItem={rowData} />
+                                    }
                                 />
-                    <Table.Column title="Item" dataIndex="item.name" />
+                                <Column
-                    <Table.Column<WantedItem>
+                                    label="Item"
-                        render={(_, wanted) => (
+                                    dataKey="item"
-                            <Button type="link" icon="delete" onClick={this.removeWanted(wanted)} />
+                                    width={150}
-                        )}
+                                    cellDataGetter={({ rowData }) => rowData.item.name}
+                                />
+                                <Column
+                                    dataKey="remove"
+                                    width={30}
+                                    cellRenderer={this.tableRemoveCellRenderer}
                                 />
                             </Table>
+                        )}
+                    </AutoSizer>
+                </div>
             </section>
         );
     }
@@ -73,6 +87,10 @@ export class WantedItemsComponent extends React.Component {
             huntOptimizerStore.wantedItems.splice(i, 1);
         }
     }
+
+    private tableRemoveCellRenderer: TableCellRenderer = ({ rowData }) => {
+        return <Button type="link" icon="delete" onClick={this.removeWanted(rowData)} />;
+    }
 }
 
 @observer
@@ -83,8 +101,11 @@ class WantedAmountCell extends React.Component<{ wantedItem: WantedItem }> {
         return (
             <InputNumber
                 min={1}
+                max={10}
                 value={wanted.amount}
                 onChange={this.wantedAmountChanged}
+                size="small"
+                style={{ width: '100%' }}
             />
         );
     }

yarn.lock

@@ -887,6 +887,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.1.2":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
+  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -1348,6 +1355,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized@^9.21.2":
+  version "9.21.2"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.2.tgz#c5e4293409593814c35466913e83fb856e2053d0"
+  integrity sha512-Q6geJaDd8FlBw3ilD4ODferTyVtYAmDE3d7+GacfwN0jPt9rD9XkeuPjcHmyIwTrMXuLv1VIJmRxU9WQoQFBJw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@16.8.18":
   version "16.8.18"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.18.tgz#fe66fb748b0b6ca9709d38b87b2d1356d960a511"
@@ -2690,6 +2705,11 @@ clone@^2.1.1, clone@^2.1.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clsx@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
+  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3566,6 +3586,13 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+"dom-helpers@^2.4.0 || ^3.0.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-matches@>=1.0.1:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-matches/-/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
@@ -6215,6 +6242,11 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+linear-layout-vector@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70"
+  integrity sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA=
+
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -6427,7 +6459,7 @@ loglevel@^1.4.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
   integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9001,6 +9033,19 @@ react-slick@~0.24.0:
     lodash.debounce "^4.0.8"
     resize-observer-polyfill "^1.5.0"
 
+react-virtualized@^9.21.1:
+  version "9.21.1"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.1.tgz#4dbbf8f0a1420e2de3abf28fbb77120815277b3a"
+  integrity sha512-E53vFjRRMCyUTEKuDLuGH1ld/9TFzjf/fFW816PE4HFXWZorESbSTYtiZz1oAjra0MminaUU1EnvUxoGuEFFPA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    clsx "^1.0.1"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    linear-layout-vector "0.0.1"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"