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

More data is now shown in the optimization result view.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-09-11 15:51:56 +02:00
parent 0cfa20e30f
commit c9820ceccb
20 changed files with 287 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/gui/TabContainer.css
View File

@ -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%);

12
src/core/gui/TabContainer.ts
View File

@ -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[]) {
super(el.div({ class: "core_TabContainer" }));
constructor(options: TabContainerOptions) {
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,

14
src/core/gui/Table.css
View File

@ -12,7 +12,7 @@
align-items: stretch;
}
.core_Table thead {
.core_Table thead {
position: sticky;
display: inline-block;
top: 0;
@ -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-bottom: solid 1px var(--border-color);
border-right: var(--border);
border-bottom: var(--border);
background-color: var(--bg-color);
}
@ -46,6 +53,7 @@
}
.core_Table tbody th {
position: sticky;
text-align: left;
}

44
src/core/gui/Table.ts
View File

@ -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({
text: column.title,
});
const th = el.th({}, el.span({ 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,19 +103,30 @@ export class Table<T> extends Widget<HTMLTableElement> {
return el.tr(
{},
...this.columns.map(column => {
const cell = column.create_cell(value, disposer);
...this.columns.map((column, i) => {
const cell = column.sticky ? el.th() : el.td();
if (column.sticky) {
cell.style.position = "sticky";
cell.style.left = `${left}px`;
left += column.width || 0;
try {
const content = column.render_cell(value, disposer);
cell.append(content);
if (column.input) cell.classList.add("input");
if (column.sticky) {
cell.style.left = `${left}px`;
left += column.width || 0;
}
if (column.width != undefined) cell.style.width = `${column.width}px`;
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);
}
if (column.width != undefined) cell.style.width = `${column.width}px`;
if (column.text_align) cell.style.textAlign = column.text_align;
return cell;
}),
);

2
src/core/gui/ToolBar.css
View File

@ -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 > * {

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

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

12
src/core/gui/golden_layout_theme.css
View File

@ -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-bottom: solid 1px var(--border-color);
border-top: var(--border);
border-bottom: var(--border);
}
#root .lm_splitter.lm_horizontal {
border-left: solid 1px var(--border-color);
border-right: solid 1px var(--border-color);
border-left: var(--border);
border-right: var(--border);
}
body .lm_dropTargetIndicator {

4
src/core/gui/index.css
View File

@ -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] {

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

@ -2,21 +2,24 @@ import { TabContainer } from "../../core/gui/TabContainer";
export class HuntOptimizerView extends TabContainer {
constructor() {
super(
{
title: "Optimize",
key: "optimize",
create_view: async function() {
return new (await import("./OptimizerView")).OptimizerView();
super({
class: "hunt_optimizer_HuntOptimizerView",
tabs: [
{
title: "Optimize",
key: "optimize",
create_view: async function() {
return new (await import("./OptimizerView")).OptimizerView();
},
},
},
{
title: "Methods",
key: "methods",
create_view: async function() {
return new (await import("./MethodsView")).MethodsView();
{
title: "Methods",
key: "methods",
create_view: async function() {
return new (await import("./MethodsView")).MethodsView();
},
},
},
);
],
});
}
}

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

@ -38,18 +38,16 @@ export class MethodsForEpisodeView extends ResizableWidget {
title: "Method",
sticky: true,
width: 250,
create_cell(method: HuntMethodModel): HTMLTableDataCellElement {
return el.th({ text: method.name });
render_cell(method: HuntMethodModel) {
return method.name;
},
},
{
title: "Time",
sticky: true,
width: 60,
create_cell(
method: HuntMethodModel,
disposer: Disposer,
): HTMLTableDataCellElement {
input: true,
render_cell(method: HuntMethodModel, disposer: Disposer) {
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();
},
};
}),

43
src/hunt_optimizer/gui/MethodsView.ts
View File

@ -4,28 +4,31 @@ import { MethodsForEpisodeView } from "./MethodsForEpisodeView";
export class MethodsView extends TabContainer {
constructor() {
super(
{
title: "Episode I",
key: "episode_1",
create_view: async function() {
return new MethodsForEpisodeView(Episode.I);
super({
class: "hunt_optimizer_MethodsView",
tabs: [
{
title: "Episode I",
key: "episode_1",
create_view: async function() {
return new MethodsForEpisodeView(Episode.I);
},
},
},
{
title: "Episode II",
key: "episode_2",
create_view: async function() {
return new MethodsForEpisodeView(Episode.II);
{
title: "Episode II",
key: "episode_2",
create_view: async function() {
return new MethodsForEpisodeView(Episode.II);
},
},
},
{
title: "Episode IV",
key: "episode_4",
create_view: async function() {
return new MethodsForEpisodeView(Episode.IV);
{
title: "Episode IV",
key: "episode_4",
create_view: async function() {
return new MethodsForEpisodeView(Episode.IV);
},
},
},
);
],
});
}
}

10
src/hunt_optimizer/gui/OptimizationResultView.css Normal file
View File

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

163
src/hunt_optimizer/gui/OptimizationResultView.ts
View File

@ -1,57 +1,26 @@
import { Widget } from "../../core/gui/Widget";
import { el } from "../../core/gui/dom";
import { Table } from "../../core/gui/Table";
import { el, section_id_icon } from "../../core/gui/dom";
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 }) => {
if (result) {
optimal_methods.val = result.optimal_methods;
} else {
optimal_methods.val = [];
}
},
({ value }) => this.update_table(value),
{
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);
}
}

5
src/hunt_optimizer/gui/OptimizerView.css
View File

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

8
src/hunt_optimizer/gui/WantedItemsView.css
View File

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

6
src/hunt_optimizer/model/index.ts
View File

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

25
src/old/core/ui/SectionIdIcon.tsx
View File

@ -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,
}}
/>
);
}

9
src/old/core/ui/time.ts
View File

@ -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")}`;
}

31
src/viewer/gui/ViewerView.ts
View File

@ -2,21 +2,24 @@ import { TabContainer } from "../../core/gui/TabContainer";
export class ViewerView extends TabContainer {
constructor() {
super(
{
title: "Models",
key: "model",
create_view: async function() {
return new (await import("./model_3d/Model3DView")).Model3DView();
super({
class: "viewer_ViewerView",
tabs: [
{
title: "Models",
key: "model",
create_view: async function() {
return new (await import("./model_3d/Model3DView")).Model3DView();
},
},
},
{
title: "Textures",
key: "texture",
create_view: async function() {
return new (await import("./TextureView")).TextureView();
{
title: "Textures",
key: "texture",
create_view: async function() {
return new (await import("./TextureView")).TextureView();
},
},
},
);
],
});
}
}

4
src/viewer/gui/model_3d/Model3DSelectListView.ts
View File

@ -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.borderRight = "solid 1px var(--border-color)";
this.element.style.borderLeft = "var(--border)";
this.element.style.borderRight = "var(--border)";
} else {
this.element.style.borderLeft = "none";
this.element.style.borderRight = "none";