More data is now shown in the optimization result view.

src/core/gui/TabContainer.css

@@ -1,7 +1,7 @@
 .core_TabContainer_Bar {
     box-sizing: border-box;
     padding: 3px 3px 0 3px;
-    border-bottom: solid 1px var(--border-color);
+    border-bottom: var(--border);
 }
 
 .core_TabContainer_Tab {
@@ -10,7 +10,7 @@
     align-items: center;
     height: calc(100% + 1px);
     padding: 0 10px;
-    border: solid 1px var(--border-color);
+    border: var(--border);
     margin: 0 1px -1px 1px;
     background-color: hsl(0, 0%, 12%);
     color: hsl(0, 0%, 75%);

src/core/gui/TabContainer.ts

@@ -1,4 +1,4 @@
-import { Widget } from "./Widget";
+import { Widget, WidgetOptions } from "./Widget";
 import { create_element, el } from "./dom";
 import { LazyWidget } from "./LazyWidget";
 import { Resizable } from "./Resizable";
@@ -11,6 +11,10 @@ export type Tab = {
     create_view: () => Promise<Widget & Resizable>;
 };
 
+export type TabContainerOptions = WidgetOptions & {
+    tabs: Tab[];
+};
+
 type TabInfo = Tab & { tab_element: HTMLSpanElement; lazy_view: LazyWidget };
 
 const BAR_HEIGHT = 28;
@@ -20,12 +24,12 @@ export class TabContainer extends ResizableWidget {
     private bar_element = el.div({ class: "core_TabContainer_Bar" });
     private panes_element = el.div({ class: "core_TabContainer_Panes" });
 
-    constructor(...tabs: Tab[]) {
+    constructor(options: TabContainerOptions) {
-        super(el.div({ class: "core_TabContainer" }));
+        super(el.div({ class: "core_TabContainer" }), options);
 
         this.bar_element.onmousedown = this.bar_mousedown;
 
-        for (const tab of tabs) {
+        for (const tab of options.tabs) {
             const tab_element = create_element("span", {
                 class: "core_TabContainer_Tab",
                 text: tab.title,

src/core/gui/Table.css

@@ -24,14 +24,21 @@
     top: 0;
 }
 
+.core_Table thead th {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
 .core_Table th,
 .core_Table td {
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 3px 6px;
-    border-right: solid 1px var(--border-color);
+    border-right: var(--border);
-    border-bottom: solid 1px var(--border-color);
+    border-bottom: var(--border);
     background-color: var(--bg-color);
 }
 
@@ -46,6 +53,7 @@
 }
 
 .core_Table tbody th {
+    position: sticky;
     text-align: left;
 }
 

src/core/gui/Table.ts

@@ -7,13 +7,18 @@ import {
 } from "../observable/property/list/ListProperty";
 import { Disposer } from "../observable/Disposer";
 import "./Table.css";
+import Logger = require("js-logger");
+
+const logger = Logger.get("core/gui/Table");
 
 export type Column<T> = {
     title: string;
     sticky?: boolean;
     width: number;
+    input?: boolean;
     text_align?: string;
-    create_cell(value: T, disposer: Disposer): HTMLTableCellElement;
+    tooltip?: (value: T) => string;
+    render_cell(value: T, disposer: Disposer): string | HTMLElement;
 };
 
 export type TableOptions<T> = WidgetOptions & {
@@ -40,9 +45,7 @@ export class Table<T> extends Widget<HTMLTableElement> {
 
         header_tr_element.append(
             ...this.columns.map(column => {
-                const th = el.th({
+                const th = el.th({}, el.span({ text: column.title }));
-                    text: column.title,
-                });
 
                 if (column.sticky) {
                     th.style.position = "sticky";
@@ -61,6 +64,8 @@ export class Table<T> extends Widget<HTMLTableElement> {
         this.element.append(thead_element, this.tbody_element);
 
         this.disposables(this.values.observe_list(this.update_table));
+
+        this.splice_rows(0, this.values.length.val, this.values.val);
     }
 
     private update_table = (change: ListPropertyChangeEvent<T>): void => {
@@ -98,11 +103,17 @@ export class Table<T> extends Widget<HTMLTableElement> {
 
         return el.tr(
             {},
-            ...this.columns.map(column => {
+            ...this.columns.map((column, i) => {
-                const cell = column.create_cell(value, disposer);
+                const cell = column.sticky ? el.th() : el.td();
+
+                try {
+                    const content = column.render_cell(value, disposer);
+
+                    cell.append(content);
+
+                    if (column.input) cell.classList.add("input");
 
                     if (column.sticky) {
-                    cell.style.position = "sticky";
                         cell.style.left = `${left}px`;
                         left += column.width || 0;
                     }
@@ -111,6 +122,11 @@ export class Table<T> extends Widget<HTMLTableElement> {
 
                     if (column.text_align) cell.style.textAlign = column.text_align;
 
+                    if (column.tooltip) cell.title = column.tooltip(value);
+                } catch (e) {
+                    logger.warn(`Error while rendering cell for index ${index}, column ${i}.`, e);
+                }
+
                 return cell;
             }),
         );

src/core/gui/ToolBar.css

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: solid var(--border-color) 1px;
+    border-bottom: var(--border);
 }
 
 .core_ToolBar > * {

src/core/gui/dom.ts

@@ -1,6 +1,7 @@
 import { Disposable } from "../observable/Disposable";
 import { Observable } from "../observable/Observable";
 import { is_property } from "../observable/property/Property";
+import { SectionId } from "../model";
 
 export const el = {
     div: (
@@ -143,6 +144,20 @@ export function icon(icon: Icon): HTMLElement {
     return el.span({ class: `fas ${icon_str}` });
 }
 
+export function section_id_icon(section_id: SectionId, options?: { size?: number }): HTMLElement {
+    const element = el.span();
+    const size = options && options.size;
+
+    element.style.display = "inline-block";
+    element.style.width = `${size}px`;
+    element.style.height = `${size}px`;
+    element.style.backgroundImage = `url(${process.env.PUBLIC_URL}/images/sectionids/${SectionId[section_id]}.png)`;
+    element.style.backgroundSize = `${size}px`;
+    element.title = SectionId[section_id];
+
+    return element;
+}
+
 export function disposable_listener(
     element: DocumentAndElementEventHandlers,
     event: string,

src/core/gui/golden_layout_theme.css

@@ -1,7 +1,7 @@
 #root .lm_header {
     box-sizing: border-box;
     padding: 3px 0 0 0;
-    border-bottom: solid 1px var(--border-color);
+    border-bottom: var(--border);
 }
 
 #root .lm_tabs {
@@ -14,7 +14,7 @@
     align-items: center;
     height: 23px;
     padding: 0 10px;
-    border: solid 1px var(--border-color);
+    border: var(--border);
     margin: 0 1px -1px 1px;
     background-color: hsl(0, 0%, 12%);
     color: hsl(0, 0%, 75%);
@@ -38,13 +38,13 @@
 }
 
 #root .lm_splitter.lm_vertical {
-    border-top: solid 1px var(--border-color);
+    border-top: var(--border);
-    border-bottom: solid 1px var(--border-color);
+    border-bottom: var(--border);
 }
 
 #root .lm_splitter.lm_horizontal {
-    border-left: solid 1px var(--border-color);
+    border-left: var(--border);
-    border-right: solid 1px var(--border-color);
+    border-right: var(--border);
 }
 
 body .lm_dropTargetIndicator {

src/core/gui/index.css

@@ -5,7 +5,7 @@
     --text-color: hsl(0, 0%, 80%);
     --text-color-disabled: hsl(0, 0%, 55%);
     --font-family: Verdana, Geneva, sans-serif;
-    --border-color: hsl(0, 0%, 25%);
+    --border: solid 1px hsl(0, 0%, 25%);
 
     /* Scrollbars */
 
@@ -69,7 +69,7 @@ body {
 
 h2 {
     font-size: 1.1em;
-    margin: 0.1em 0;
+    margin: 0.5em 0;
 }
 
 #root *[hidden] {

src/hunt_optimizer/gui/HuntOptimizerView.ts

@@ -2,7 +2,9 @@ import { TabContainer } from "../../core/gui/TabContainer";
 
 export class HuntOptimizerView extends TabContainer {
     constructor() {
-        super(
+        super({
+            class: "hunt_optimizer_HuntOptimizerView",
+            tabs: [
                 {
                     title: "Optimize",
                     key: "optimize",
@@ -17,6 +19,7 @@ export class HuntOptimizerView extends TabContainer {
                         return new (await import("./MethodsView")).MethodsView();
                     },
                 },
-        );
+            ],
+        });
     }
 }

src/hunt_optimizer/gui/MethodsForEpisodeView.ts

@@ -38,18 +38,16 @@ export class MethodsForEpisodeView extends ResizableWidget {
                         title: "Method",
                         sticky: true,
                         width: 250,
-                        create_cell(method: HuntMethodModel): HTMLTableDataCellElement {
+                        render_cell(method: HuntMethodModel) {
-                            return el.th({ text: method.name });
+                            return method.name;
                         },
                     },
                     {
                         title: "Time",
                         sticky: true,
                         width: 60,
-                        create_cell(
+                        input: true,
-                            method: HuntMethodModel,
+                        render_cell(method: HuntMethodModel, disposer: Disposer) {
-                            disposer: Disposer,
-                        ): HTMLTableDataCellElement {
                             const time_input = disposer.add(new DurationInput(method.time.val));
 
                             disposer.add(
@@ -58,7 +56,7 @@ export class MethodsForEpisodeView extends ResizableWidget {
                                 ),
                             );
 
-                            return el.th({ class: "input" }, time_input.element);
+                            return time_input.element;
                         },
                     },
                     ...this.enemy_types.map(enemy_type => {
@@ -66,9 +64,9 @@ export class MethodsForEpisodeView extends ResizableWidget {
                             title: npc_data(enemy_type).simple_name,
                             width: 80,
                             text_align: "right",
-                            create_cell(method: HuntMethodModel): HTMLTableDataCellElement {
+                            render_cell(method: HuntMethodModel) {
                                 const count = method.enemy_counts.get(enemy_type);
-                                return el.td({ text: count == undefined ? "" : count.toString() });
+                                return count == undefined ? "" : count.toString();
                             },
                         };
                     }),

src/hunt_optimizer/gui/MethodsView.ts

@@ -4,7 +4,9 @@ import { MethodsForEpisodeView } from "./MethodsForEpisodeView";
 
 export class MethodsView extends TabContainer {
     constructor() {
-        super(
+        super({
+            class: "hunt_optimizer_MethodsView",
+            tabs: [
                 {
                     title: "Episode I",
                     key: "episode_1",
@@ -26,6 +28,7 @@ export class MethodsView extends TabContainer {
                         return new MethodsForEpisodeView(Episode.IV);
                     },
                 },
-        );
+            ],
+        });
     }
 }

src/hunt_optimizer/gui/OptimizationResultView.css

@@ -0,0 +1,10 @@
+.hunt_optimizer_OptimizationResultView {
+    display: flex;
+    flex-direction: column;
+}
+
+.hunt_optimizer_OptimizationResultView_table {
+    flex: 1;
+    border-top: var(--border);
+    border-left: var(--border);
+}

src/hunt_optimizer/gui/OptimizationResultView.ts

@@ -1,57 +1,26 @@
 import { Widget } from "../../core/gui/Widget";
-import { el } from "../../core/gui/dom";
+import { el, section_id_icon } from "../../core/gui/dom";
-import { Table } from "../../core/gui/Table";
+import { Column, Table } from "../../core/gui/Table";
 import { hunt_optimizer_stores } from "../stores/HuntOptimizerStore";
 import { Disposable } from "../../core/observable/Disposable";
 import { list_property } from "../../core/observable";
-import { OptimalMethodModel } from "../model";
+import { OptimalMethodModel, OptimalResultModel } from "../model";
 import { Difficulty } from "../../core/model";
 import { Episode } from "../../core/data_formats/parsing/quest/Episode";
+import "./OptimizationResultView.css";
 
 export class OptimizationResultView extends Widget {
     private results_observer?: Disposable;
+    private table?: Table<OptimalMethodModel>;
 
     constructor() {
         super(
             el.div(
                 { class: "hunt_optimizer_OptimizationResultView" },
-                el.h2({ text: "Optimization Result" }),
+                el.h2({ text: "Ideal Combination of Methods" }),
             ),
         );
 
-        const optimal_methods = list_property<OptimalMethodModel>();
-
-        this.element.append(
-            this.disposable(
-                new Table({
-                    values: optimal_methods,
-                    columns: [
-                        {
-                            title: "Difficulty",
-                            width: 80,
-                            create_cell(value: OptimalMethodModel) {
-                                return el.td({ text: Difficulty[value.difficulty] });
-                            },
-                        },
-                        {
-                            title: "Method",
-                            width: 200,
-                            create_cell(value: OptimalMethodModel) {
-                                return el.td({ text: value.method_name });
-                            },
-                        },
-                        {
-                            title: "Ep.",
-                            width: 50,
-                            create_cell(value: OptimalMethodModel) {
-                                return el.td({ text: Episode[value.method_episode] });
-                            },
-                        },
-                    ],
-                }),
-            ).element,
-        );
-
         this.disposable(
             hunt_optimizer_stores.observe_current(
                 hunt_optimizer_store => {
@@ -60,13 +29,7 @@ export class OptimizationResultView extends Widget {
                     }
 
                     this.results_observer = hunt_optimizer_store.result.observe(
-                        ({ value: result }) => {
+                        ({ value }) => this.update_table(value),
-                            if (result) {
-                                optimal_methods.val = result.optimal_methods;
-                            } else {
-                                optimal_methods.val = [];
-                            }
-                        },
                         {
                             call_now: true,
                         },
@@ -83,5 +46,117 @@ export class OptimizationResultView extends Widget {
         if (this.results_observer) {
             this.results_observer.dispose();
         }
+
+        if (this.table) {
+            this.table.dispose();
+        }
+    }
+
+    private update_table(result?: OptimalResultModel): void {
+        if (this.table) {
+            this.table.dispose();
+        }
+
+        const columns: Column<OptimalMethodModel>[] = [
+            {
+                title: "Difficulty",
+                sticky: true,
+                width: 80,
+                render_cell(value: OptimalMethodModel) {
+                    return Difficulty[value.difficulty];
+                },
+            },
+            {
+                title: "Method",
+                sticky: true,
+                width: 250,
+                render_cell(value: OptimalMethodModel) {
+                    return value.method_name;
+                },
+            },
+            {
+                title: "Ep.",
+                sticky: true,
+                width: 40,
+                render_cell(value: OptimalMethodModel) {
+                    return Episode[value.method_episode];
+                },
+            },
+            {
+                title: "Section ID",
+                sticky: true,
+                width: 90,
+                render_cell(value: OptimalMethodModel) {
+                    const element = el.span(
+                        {},
+                        ...value.section_ids.map(sid => section_id_icon(sid, { size: 17 })),
+                    );
+                    element.style.display = "flex";
+                    return element;
+                },
+            },
+            {
+                title: "Time/Run",
+                width: 90,
+                text_align: "center",
+                render_cell(value: OptimalMethodModel) {
+                    return value.method_time.toFormat("hh:mm");
+                },
+            },
+            {
+                title: "Runs",
+                width: 60,
+                text_align: "right",
+                tooltip(value: OptimalMethodModel) {
+                    return value.runs.toString();
+                },
+                render_cell(value: OptimalMethodModel) {
+                    return value.runs.toFixed(1);
+                },
+            },
+            {
+                title: "Total Hours",
+                width: 60,
+                text_align: "right",
+                tooltip(value: OptimalMethodModel) {
+                    return value.total_time.as("hours").toString();
+                },
+                render_cell(value: OptimalMethodModel) {
+                    return value.total_time.as("hours").toFixed(1);
+                },
+            },
+        ];
+
+        if (result) {
+            for (const item of result.wanted_items) {
+                let totalCount = 0;
+
+                for (const method of result.optimal_methods) {
+                    totalCount += method.item_counts.get(item) || 0;
+                }
+
+                columns.push({
+                    title: item.name,
+                    width: 80,
+                    text_align: "right",
+                    tooltip(value: OptimalMethodModel) {
+                        const count = value.item_counts.get(item);
+                        return count ? count.toString() : "";
+                    },
+                    render_cell(value: OptimalMethodModel) {
+                        const count = value.item_counts.get(item);
+                        return count ? count.toFixed(2) : "";
+                    },
+                });
+            }
+        }
+
+        this.table = new Table({
+            class: "hunt_optimizer_OptimizationResultView_table",
+            values: result ? list_property(undefined, ...result.optimal_methods) : list_property(),
+            columns,
+        });
+
+        this.element.append(this.table.element);
     }
 }

src/hunt_optimizer/gui/OptimizerView.css

@@ -3,3 +3,8 @@
     align-items: stretch;
     overflow: hidden;
 }
+
+.hunt_optimizer_OptimizerView div:nth-child(2) {
+    flex: 1;
+    overflow: hidden;
+}

src/hunt_optimizer/gui/WantedItemsView.css

@@ -3,6 +3,8 @@
     flex-direction: column;
     align-items: stretch;
     overflow: hidden;
+    padding-left: 6px;
+    min-width: 200px;
 }
 
 .hunt_optimizer_WantedItemsView .hunt_optimizer_WantedItemsView_table_wrapper {
@@ -11,7 +13,11 @@
     overflow: auto;
 }
 
-
 .hunt_optimizer_WantedItemsView .hunt_optimizer_WantedItemsView_table_wrapper table {
     width: 100%;
+    border-collapse: collapse;
+}
+
+.hunt_optimizer_WantedItemsView .hunt_optimizer_WantedItemsView_table_wrapper td {
+    padding: 0 6px 3px 0;
 }

src/hunt_optimizer/model/index.ts

@@ -32,6 +32,8 @@ export class OptimalResultModel {
 }
 
 export class OptimalMethodModel {
+    readonly total_time: Duration;
+
     constructor(
         readonly difficulty: Difficulty,
         readonly section_ids: SectionId[],
@@ -40,5 +42,7 @@ export class OptimalMethodModel {
         readonly method_time: Duration,
         readonly runs: number,
         readonly item_counts: Map<ItemType, number>,
-    ) {}
+    ) {
+        this.total_time = Duration.fromMillis(runs * method_time.as("milliseconds"));
+    }
 }

src/old/core/ui/SectionIdIcon.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { SectionId } from "../../../core/model";
-
-export function SectionIdIcon({
-    section_id,
-    size = 28,
-    title,
-}: {
-    section_id: SectionId;
-    size?: number;
-    title?: string;
-}): JSX.Element {
-    return (
-        <div
-            title={title}
-            style={{
-                display: "inline-block",
-                width: size,
-                height: size,
-                backgroundImage: `url(${process.env.PUBLIC_URL}/images/sectionids/${SectionId[section_id]}.png)`,
-                backgroundSize: size,
-            }}
-        />
-    );
-}

src/old/core/ui/time.ts

@@ -1,9 +0,0 @@
-/**
- * @param hours can be fractional.
- * @returns a string of the shape ##:##.
- */
-export function hours_to_string(hours: number): string {
-    const h = Math.floor(hours);
-    const m = Math.round(60 * (hours - h));
-    return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
-}

src/viewer/gui/ViewerView.ts

@@ -2,7 +2,9 @@ import { TabContainer } from "../../core/gui/TabContainer";
 
 export class ViewerView extends TabContainer {
     constructor() {
-        super(
+        super({
+            class: "viewer_ViewerView",
+            tabs: [
                 {
                     title: "Models",
                     key: "model",
@@ -17,6 +19,7 @@ export class ViewerView extends TabContainer {
                         return new (await import("./TextureView")).TextureView();
                     },
                 },
-        );
+            ],
+        });
     }
 }

src/viewer/gui/model_3d/Model3DSelectListView.ts

@@ -6,8 +6,8 @@ import "./Model3DSelectListView.css";
 export class Model3DSelectListView<T extends { name: string }> extends ResizableWidget {
     set borders(borders: boolean) {
         if (borders) {
-            this.element.style.borderLeft = "solid 1px var(--border-color)";
+            this.element.style.borderLeft = "var(--border)";
-            this.element.style.borderRight = "solid 1px var(--border-color)";
+            this.element.style.borderRight = "var(--border)";
         } else {
             this.element.style.borderLeft = "none";
             this.element.style.borderRight = "none";