diff --git a/assets_generation/update_drops_ephinea.ts b/assets_generation/update_drops_ephinea.ts index c2cc003e..b6dd9567 100644 --- a/assets_generation/update_drops_ephinea.ts +++ b/assets_generation/update_drops_ephinea.ts @@ -3,7 +3,7 @@ import { writeFileSync } from "fs"; import "isomorphic-fetch"; import Logger from "js-logger"; import { ASSETS_DIR } from "."; -import { Difficulty, SectionId, SectionIds } from "../src/old/core/domain"; +import { Difficulty, SectionId, SectionIds } from "../src/core/domain"; import { BoxDropDto, EnemyDropDto, ItemTypeDto } from "../src/old/core/dto"; import { name_and_episode_to_npc_type, diff --git a/assets_generation/update_ephinea_data.ts b/assets_generation/update_ephinea_data.ts index a3021317..bc1ce527 100644 --- a/assets_generation/update_ephinea_data.ts +++ b/assets_generation/update_ephinea_data.ts @@ -5,7 +5,7 @@ import { BufferCursor } from "../src/core/data_formats/cursor/BufferCursor"; import { ItemPmt, parse_item_pmt } from "../src/core/data_formats/parsing/itempmt"; import { parse_quest } from "../src/core/data_formats/parsing/quest"; import { parse_unitxt, Unitxt } from "../src/core/data_formats/parsing/unitxt"; -import { Difficulties, Difficulty, SectionId, SectionIds } from "../src/old/core/domain"; +import { Difficulties, Difficulty, SectionId, SectionIds } from "../src/core/domain"; import { BoxDropDto, EnemyDropDto, ItemTypeDto, QuestDto } from "../src/old/core/dto"; import { update_drops_from_website } from "./update_drops_ephinea"; import { Episode, EPISODES } from "../src/core/data_formats/parsing/quest/Episode"; diff --git a/src/application/gui/MainContentView.ts b/src/application/gui/MainContentView.ts index 48e6dc79..4e6cf3f3 100644 --- a/src/application/gui/MainContentView.ts +++ b/src/application/gui/MainContentView.ts @@ -1,12 +1,14 @@ import { create_el } from "../../core/gui/dom"; -import { View } from "../../core/gui/View"; import { gui_store, GuiTool } from "../../core/stores/GuiStore"; import { LazyView } from "../../core/gui/LazyView"; -import { Resizable } from "../../core/gui/Resizable"; import { ResizableView } from "../../core/gui/ResizableView"; -const TOOLS: [GuiTool, () => Promise][] = [ +const TOOLS: [GuiTool, () => Promise][] = [ [GuiTool.Viewer, async () => new (await import("../../viewer/gui/ViewerView")).ViewerView()], + [ + GuiTool.QuestEditor, + async () => new (await import("../../quest_editor/gui/QuestEditorView")).QuestEditorView(), + ], ]; export class MainContentView extends ResizableView { diff --git a/src/application/gui/NavigationView.css b/src/application/gui/NavigationView.css index c2a752e0..cb8cf677 100644 --- a/src/application/gui/NavigationView.css +++ b/src/application/gui/NavigationView.css @@ -3,7 +3,7 @@ display: flex; flex-direction: row; align-items: stretch; - background-color: hsl(0, 0%, 12%); + background-color: hsl(0, 0%, 10%); border-bottom: solid 2px var(--bg-color); } @@ -14,18 +14,19 @@ .application_ToolButton label { box-sizing: border-box; display: inline-block; - font-size: 16px; + font-size: 15px; height: 100%; padding: 0 20px; - line-height: 40px; + line-height: 29px; + color: hsl(0, 0%, 65%); } .application_ToolButton label:hover { - color: hsl(200, 25%, 85%); - background-color: hsl(0, 0%, 16%); + color: hsl(0, 0%, 85%); + background-color: hsl(0, 0%, 12%); } .application_ToolButton input:checked + label { - color: hsl(200, 50%, 85%); - background-color: hsl(0, 0%, 20%); + color: hsl(0, 0%, 85%); + background-color: var(--bg-color); } diff --git a/src/application/gui/NavigationView.ts b/src/application/gui/NavigationView.ts index 25f5814a..ab28b27f 100644 --- a/src/application/gui/NavigationView.ts +++ b/src/application/gui/NavigationView.ts @@ -11,7 +11,7 @@ const TOOLS: [GuiTool, string][] = [ export class NavigationView extends View { element = create_el("div", "application_NavigationView"); - height = 40; + height = 30; private buttons = new Map( TOOLS.map(([value, text]) => [value, this.disposable(new ToolButton(value, text))]), diff --git a/src/old/core/domain/index.ts b/src/core/domain/index.ts similarity index 91% rename from src/old/core/domain/index.ts rename to src/core/domain/index.ts index 517ae122..804a058c 100644 --- a/src/old/core/domain/index.ts +++ b/src/core/domain/index.ts @@ -1,4 +1,4 @@ -import { enum_values } from "../../../core/enums"; +import { enum_values } from "../enums"; export const RARE_ENEMY_PROB = 1 / 512; export const KONDRIEU_PROB = 1 / 10; diff --git a/src/core/gui/Button.css b/src/core/gui/Button.css index 0c9e08ce..4e7b50d0 100644 --- a/src/core/gui/Button.css +++ b/src/core/gui/Button.css @@ -1,21 +1,30 @@ .core_Button { display: inline-block; box-sizing: border-box; - background-color: #404040; - height: 26px; - padding: 2px 8px; - border: solid 1px #606060; - color: #f0f0f0; + padding: 0; + border: solid 1px hsl(0, 0%, 10%); + color: hsl(0, 0%, 80%); outline: none; } -.core_Button:hover { - background-color: #505050; - border-color: #707070; +.core_Button .core_Button_inner { + display: inline-block; + box-sizing: border-box; + background-color: hsl(0, 0%, 20%); + height: 24px; + line-height: 17px; + padding: 3px 8px; + border: solid 1px hsl(0, 0%, 35%); } -.core_Button:active { - background-color: #404040; - border-color: #606060; - color: #e0e0e0; +.core_Button:hover .core_Button_inner { + background-color: hsl(0, 0%, 25%); + border-color: hsl(0, 0%, 40%); + color: hsl(0, 0%, 90%); +} + +.core_Button:active .core_Button_inner { + background-color: hsl(0, 0%, 20%); + border-color: hsl(0, 0%, 30%); + color: hsl(0, 0%, 75%); } diff --git a/src/core/gui/Button.ts b/src/core/gui/Button.ts index 2becce54..aa0c0856 100644 --- a/src/core/gui/Button.ts +++ b/src/core/gui/Button.ts @@ -13,7 +13,10 @@ export class Button extends View { constructor(text: string) { super(); - this.element.textContent = text; + const inner_element = create_el("span", "core_Button_inner"); + inner_element.textContent = text; + + this.element.append(inner_element); this.element.onclick = (e: MouseEvent) => this._click.emit(e, undefined); } diff --git a/src/core/gui/FileButton.ts b/src/core/gui/FileButton.ts index 3749b4e3..0b20c0d2 100644 --- a/src/core/gui/FileButton.ts +++ b/src/core/gui/FileButton.ts @@ -26,7 +26,9 @@ export class FileButton extends View { } }; - this.element.textContent = text; - this.element.append(this.input); + const inner_element = create_el("span", "core_FileButton_inner core_Button_inner"); + inner_element.textContent = text; + + this.element.append(inner_element, this.input); } } diff --git a/src/core/gui/Input.css b/src/core/gui/Input.css index dbb85b0d..39797b95 100644 --- a/src/core/gui/Input.css +++ b/src/core/gui/Input.css @@ -1,23 +1,32 @@ .core_Input { box-sizing: border-box; - height: 26px; + border: solid 1px hsl(0, 0%, 25%); +} + +.core_Input .core_Input_inner { + box-sizing: border-box; + width: 100%; + height: 24px; padding: 0 3px; - border: solid 1px var(--border-color); - background-color: var(--input-bg-color); - color: var(--text-color); + border: solid 1px hsl(0, 0%, 0%); + background-color: hsl(0, 0%, 12%); + color: hsl(0, 0%, 75%); outline: none; } .core_Input:hover { - border: solid 1px var(--border-color-hover); + border-color: hsl(0, 0%, 35%); } -.core_Input:focus { - border: solid 1px var(--border-color-focus); +.core_Input:focus-within { + border-color: hsl(0, 0%, 45%); } -.core_Input:disabled { +.core_Input.disabled { + border: solid 1px hsl(0, 0%, 20%); +} + +.core_Input.disabled .core_Input_inner { + background-color: hsl(0, 0%, 15%); color: var(--text-color-disabled); - background-color: var(--input-bg-color-disabled); - border: solid 1px var(--border-color); } diff --git a/src/core/gui/NumberInput.css b/src/core/gui/NumberInput.css index 3f9981f0..b5e37ab0 100644 --- a/src/core/gui/NumberInput.css +++ b/src/core/gui/NumberInput.css @@ -1,3 +1,3 @@ -.core_NumberInput { +.core_NumberInput .core_NumberInput_inner { text-align: right; } \ No newline at end of file diff --git a/src/core/gui/NumberInput.ts b/src/core/gui/NumberInput.ts index 347232ea..9700cb02 100644 --- a/src/core/gui/NumberInput.ts +++ b/src/core/gui/NumberInput.ts @@ -7,12 +7,17 @@ import { LabelledControl } from "./LabelledControl"; import { is_any_property, Property } from "../observable/Property"; export class NumberInput extends LabelledControl { - readonly element: HTMLInputElement = create_el("input", "core_NumberInput core_Input"); + readonly element = create_el("span", "core_NumberInput core_Input"); readonly value: WritableProperty = property(0); readonly preferred_label_position = "left"; + private readonly input: HTMLInputElement = create_el( + "input", + "core_NumberInput_inner core_Input_inner", + ); + constructor( value = 0, label?: string, @@ -22,29 +27,40 @@ export class NumberInput extends LabelledControl { ) { super(label); - this.element.type = "number"; - this.element.valueAsNumber = value; - this.element.style.width = "50px"; + this.input.type = "number"; + this.input.valueAsNumber = value; this.set_prop("min", min); this.set_prop("max", max); this.set_prop("step", step); - this.element.onchange = () => this.value.set(this.element.valueAsNumber); + this.input.onchange = () => this.value.set(this.input.valueAsNumber); + + this.element.append(this.input); this.disposables( - this.value.observe(value => (this.element.valueAsNumber = value)), + this.value.observe(value => (this.input.valueAsNumber = value)), - this.enabled.observe(enabled => (this.element.disabled = !enabled)), + this.enabled.observe(enabled => { + this.input.disabled = !enabled; + + if (enabled) { + this.element.classList.remove("disabled"); + } else { + this.element.classList.add("disabled"); + } + }), ); + + this.element.style.width = "50px"; } private set_prop(prop: "min" | "max" | "step", value: T | Property): void { if (is_any_property(value)) { - this.element[prop] = String(value.get()); - this.disposable(value.observe(v => (this.element[prop] = String(v)))); + this.input[prop] = String(value.get()); + this.disposable(value.observe(v => (this.input[prop] = String(v)))); } else { - this.element[prop] = String(value); + this.input[prop] = String(value); } } } diff --git a/src/core/gui/TabContainer.css b/src/core/gui/TabContainer.css index 2b3c0a48..68c14863 100644 --- a/src/core/gui/TabContainer.css +++ b/src/core/gui/TabContainer.css @@ -1,6 +1,5 @@ .core_TabContainer_Bar { box-sizing: border-box; - background-color: hsl(0, 0%, 16%); padding: 3px 0 0 0; border-bottom: solid 1px var(--border-color); } @@ -13,7 +12,8 @@ padding: 0 10px; border: solid 1px var(--border-color); margin: 0 1px -1px 1px; - color: #c0c0c0; + background-color: hsl(0, 0%, 12%); + color: hsl(0, 0%, 75%); font-size: 15px; } diff --git a/src/core/gui/ToolBar.css b/src/core/gui/ToolBar.css index a556c3e3..d629ebd1 100644 --- a/src/core/gui/ToolBar.css +++ b/src/core/gui/ToolBar.css @@ -7,10 +7,11 @@ } .core_ToolBar > * { - margin: 2px 4px; + margin: 2px 1px; } .core_ToolBar > .core_ToolBar_group { + margin: 2px 3px; display: flex; flex-direction: row; align-items: center; @@ -19,19 +20,3 @@ .core_ToolBar > .core_ToolBar_group > * { margin: 0 2px; } - -.core_ToolBar .core_Button { - background-color: transparent; - border-color: transparent; -} - -.core_ToolBar .core_Button:hover { - background-color: #404040; - border-color: #505050; -} - -.core_ToolBar .core_Button:active { - background-color: #383838; - border-color: #404040; - color: #d0d0d0; -} diff --git a/src/core/gui/ToolBar.ts b/src/core/gui/ToolBar.ts index 5583cbf8..009d41d4 100644 --- a/src/core/gui/ToolBar.ts +++ b/src/core/gui/ToolBar.ts @@ -5,7 +5,7 @@ import { LabelledControl } from "./LabelledControl"; export class ToolBar extends View { readonly element = create_el("div", "core_ToolBar"); - readonly height = 35; + readonly height = 33; constructor(...children: View[]) { super(); diff --git a/src/core/gui/View.ts b/src/core/gui/View.ts index cb82e2c8..c9101580 100644 --- a/src/core/gui/View.ts +++ b/src/core/gui/View.ts @@ -15,12 +15,11 @@ export abstract class View implements Disposable { private disposer = new Disposer(); protected disposable(disposable: T): T { - this.disposer.add(disposable); - return disposable; + return this.disposer.add(disposable); } protected disposables(...disposables: Disposable[]): void { - this.disposer.add(...disposables); + this.disposer.add_all(...disposables); } dispose(): void { diff --git a/src/core/observable/Disposer.ts b/src/core/observable/Disposer.ts index e3bccc6c..fd15e14a 100644 --- a/src/core/observable/Disposer.ts +++ b/src/core/observable/Disposer.ts @@ -6,7 +6,12 @@ const logger = Logger.get("core/observable/Disposer"); export class Disposer implements Disposable { private readonly disposables: Disposable[] = []; - add(...disposable: Disposable[]): this { + add(disposable: T): T { + this.disposables.push(disposable); + return disposable; + } + + add_all(...disposable: Disposable[]): this { this.disposables.push(...disposable); return this; } diff --git a/src/old/core/persistence.ts b/src/core/persistence.ts similarity index 94% rename from src/old/core/persistence.ts rename to src/core/persistence.ts index ad255b1e..f8200a6d 100644 --- a/src/old/core/persistence.ts +++ b/src/core/persistence.ts @@ -1,7 +1,7 @@ import Logger from "js-logger"; import { Server } from "./domain"; -const logger = Logger.get("persistence/Persister"); +const logger = Logger.get("core/persistence/Persister"); export abstract class Persister { protected persist_for_server(server: Server, key: string, data: any): void { diff --git a/src/index.css b/src/index.css index 4557ac72..b8475e89 100644 --- a/src/index.css +++ b/src/index.css @@ -1,16 +1,11 @@ :root { - --bg-color: hsl(0, 0%, 20%); - --text-color: hsl(0, 0%, 85%); + --bg-color: hsl(0, 0%, 15%); + --text-color: hsl(0, 0%, 80%); --text-color-disabled: hsl(0, 0%, 55%); - --border-color: hsl(0, 0%, 30%); - --border-color-hover: hsl(0, 0%, 40%); - --border-color-focus: hsl(0, 0%, 50%); + --border-color: hsl(0, 0%, 25%); - --scrollbar-color: hsl(0, 0%, 17%); - --scrollbar-thumb-color: hsl(0, 0%, 23%); - - --input-bg-color: hsl(0, 0%, 15%); - --input-bg-color-disabled: hsl(0, 0%, 20%); + --scrollbar-color: hsl(0, 0%, 13%); + --scrollbar-thumb-color: hsl(0, 0%, 17%); } * { diff --git a/src/old/core/stores/ItemTypeStore.ts b/src/old/core/stores/ItemTypeStore.ts index 7457c9ae..9458064a 100644 --- a/src/old/core/stores/ItemTypeStore.ts +++ b/src/old/core/stores/ItemTypeStore.ts @@ -10,7 +10,7 @@ import { import { Loadable } from "../Loadable"; import { ServerMap } from "./ServerMap"; import { ItemTypeDto } from "../dto"; -import { Server } from "../domain"; +import { Server } from "../../../core/domain"; export class ItemTypeStore { private id_to_item_type: ItemType[] = []; diff --git a/src/old/core/stores/ServerMap.ts b/src/old/core/stores/ServerMap.ts index 4eb17802..081fafb6 100644 --- a/src/old/core/stores/ServerMap.ts +++ b/src/old/core/stores/ServerMap.ts @@ -1,5 +1,5 @@ import { computed } from "mobx"; -import { Server } from "../domain"; +import { Server } from "../../../core/domain"; import { EnumMap } from "../../../core/enums"; /** diff --git a/src/old/core/ui/SectionIdIcon.tsx b/src/old/core/ui/SectionIdIcon.tsx index c42cd34f..2e065305 100644 --- a/src/old/core/ui/SectionIdIcon.tsx +++ b/src/old/core/ui/SectionIdIcon.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { SectionId } from "../domain"; +import { SectionId } from "../../../core/domain"; export function SectionIdIcon({ section_id, diff --git a/src/old/hunt_optimizer/domain/index.ts b/src/old/hunt_optimizer/domain/index.ts index c5c22f9e..c17b1227 100644 --- a/src/old/hunt_optimizer/domain/index.ts +++ b/src/old/hunt_optimizer/domain/index.ts @@ -2,7 +2,7 @@ import { Episode } from "../../../core/data_formats/parsing/quest/Episode"; import { NpcType } from "../../../core/data_formats/parsing/quest/npc_types"; import { computed, observable } from "mobx"; import { ItemType } from "../../core/domain/items"; -import { Difficulty, SectionId } from "../../core/domain"; +import { Difficulty, SectionId } from "../../../core/domain"; export class HuntMethod { readonly id: string; diff --git a/src/old/hunt_optimizer/persistence/HuntMethodPersister.ts b/src/old/hunt_optimizer/persistence/HuntMethodPersister.ts index 8f4bba83..9914b2dd 100644 --- a/src/old/hunt_optimizer/persistence/HuntMethodPersister.ts +++ b/src/old/hunt_optimizer/persistence/HuntMethodPersister.ts @@ -1,5 +1,5 @@ -import { Persister } from "../../core/persistence"; -import { Server } from "../../core/domain"; +import { Persister } from "../../../core/persistence"; +import { Server } from "../../../core/domain"; import { HuntMethod } from "../domain"; const METHOD_USER_TIMES_KEY = "HuntMethodStore.methodUserTimes"; diff --git a/src/old/hunt_optimizer/persistence/HuntOptimizerPersister.ts b/src/old/hunt_optimizer/persistence/HuntOptimizerPersister.ts index 5eb5ff5f..9d728dd3 100644 --- a/src/old/hunt_optimizer/persistence/HuntOptimizerPersister.ts +++ b/src/old/hunt_optimizer/persistence/HuntOptimizerPersister.ts @@ -1,7 +1,7 @@ -import { Server } from "../../core/domain"; +import { Server } from "../../../core/domain"; import { WantedItem } from "../stores/HuntOptimizerStore"; import { item_type_stores } from "../../core/stores/ItemTypeStore"; -import { Persister } from "../../core/persistence"; +import { Persister } from "../../../core/persistence"; const WANTED_ITEMS_KEY = "HuntOptimizerStore.wantedItems"; diff --git a/src/old/hunt_optimizer/stores/HuntMethodStore.ts b/src/old/hunt_optimizer/stores/HuntMethodStore.ts index be4874b5..a3828598 100644 --- a/src/old/hunt_optimizer/stores/HuntMethodStore.ts +++ b/src/old/hunt_optimizer/stores/HuntMethodStore.ts @@ -1,6 +1,6 @@ import Logger from "js-logger"; import { autorun, IReactionDisposer, observable } from "mobx"; -import { Server } from "../../core/domain"; +import { Server } from "../../../core/domain"; import { QuestDto } from "../../core/dto"; import { Loadable } from "../../core/Loadable"; import { hunt_method_persister } from "../persistence/HuntMethodPersister"; diff --git a/src/old/hunt_optimizer/stores/HuntOptimizerStore.ts b/src/old/hunt_optimizer/stores/HuntOptimizerStore.ts index c22e3b49..a0699bc9 100644 --- a/src/old/hunt_optimizer/stores/HuntOptimizerStore.ts +++ b/src/old/hunt_optimizer/stores/HuntOptimizerStore.ts @@ -8,7 +8,7 @@ import { SectionId, SectionIds, Server, -} from "../../core/domain"; +} from "../../../core/domain"; import { hunt_optimizer_persister } from "../persistence/HuntOptimizerPersister"; import { hunt_method_store } from "./HuntMethodStore"; import { item_drop_stores } from "./ItemDropStore"; diff --git a/src/old/hunt_optimizer/stores/ItemDropStore.ts b/src/old/hunt_optimizer/stores/ItemDropStore.ts index 45cae96a..bdcf06e6 100644 --- a/src/old/hunt_optimizer/stores/ItemDropStore.ts +++ b/src/old/hunt_optimizer/stores/ItemDropStore.ts @@ -1,5 +1,5 @@ import { observable } from "mobx"; -import { Difficulties, Difficulty, SectionId, SectionIds, Server } from "../../core/domain"; +import { Difficulties, Difficulty, SectionId, SectionIds, Server } from "../../../core/domain"; import { EnemyDropDto } from "../../core/dto"; import { Loadable } from "../../core/Loadable"; import { item_type_stores } from "../../core/stores/ItemTypeStore"; diff --git a/src/old/hunt_optimizer/ui/OptimizationResultComponent.tsx b/src/old/hunt_optimizer/ui/OptimizationResultComponent.tsx index 217d1ea1..2fcdc0c1 100644 --- a/src/old/hunt_optimizer/ui/OptimizationResultComponent.tsx +++ b/src/old/hunt_optimizer/ui/OptimizationResultComponent.tsx @@ -2,7 +2,7 @@ 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/domain"; +import { Difficulty, SectionId } from "../../../core/domain"; import { hunt_optimizer_store, OptimalMethod } from "../stores/HuntOptimizerStore"; import { BigTable, Column } from "../../core/ui/BigTable"; import { SectionIdIcon } from "../../core/ui/SectionIdIcon"; diff --git a/src/old/quest_editor/ui/QuestEditorComponent.tsx b/src/old/quest_editor/ui/QuestEditorComponent.tsx index 5a4f7a71..a71bb56d 100644 --- a/src/old/quest_editor/ui/QuestEditorComponent.tsx +++ b/src/old/quest_editor/ui/QuestEditorComponent.tsx @@ -2,7 +2,7 @@ import GoldenLayout, { ContentItem, ItemConfigType } from "golden-layout"; import Logger from "js-logger"; import { observer } from "mobx-react"; import React, { Component, createRef, FocusEvent, ReactNode } from "react"; -import { quest_editor_ui_persister } from "../persistence/QuestEditorUiPersister"; +import { quest_editor_ui_persister } from "../../../quest_editor/persistence/QuestEditorUiPersister"; import { quest_editor_store } from "../stores/QuestEditorStore"; import { AssemblyEditorComponent } from "./AssemblyEditorComponent"; import { EntityInfoComponent } from "./EntityInfoComponent"; diff --git a/src/quest_editor/gui/QuestEditorView.ts b/src/quest_editor/gui/QuestEditorView.ts new file mode 100644 index 00000000..9cdeaf39 --- /dev/null +++ b/src/quest_editor/gui/QuestEditorView.ts @@ -0,0 +1,88 @@ +import { ResizableView } from "../../core/gui/ResizableView"; +import { create_el } from "../../core/gui/dom"; +import { ToolBarView } from "./ToolBarView"; +import GoldenLayout, { ContentItem } from "golden-layout"; +import { quest_editor_ui_persister } from "../persistence/QuestEditorUiPersister"; +import { AssemblyEditorComponent } from "../../old/quest_editor/ui/AssemblyEditorComponent"; +import { quest_editor_store } from "../../old/quest_editor/stores/QuestEditorStore"; +import Logger = require("js-logger"); + +const logger = Logger.get("quest_editor/gui/QuestEditorView"); + +const DEFAULT_LAYOUT_CONFIG = { + settings: { + showPopoutIcon: false, + }, + dimensions: { + headerHeight: 28, + }, + labels: { + close: "Close", + maximise: "Maximise", + minimise: "Minimise", + popout: "Open in new window", + }, +}; + +export class QuestEditorView extends ResizableView { + readonly element = create_el("div"); + + private readonly tool_bar_view = this.disposable(new ToolBarView()); + + private layout_element = create_el("div"); + // private layout: GoldenLayout; + + constructor() { + super(); + + // const content = await quest_editor_ui_persister.load_layout_config( + // [...CMP_TO_NAME.values()], + // DEFAULT_LAYOUT_CONTENT, + // ); + // + // const config: GoldenLayout.Config = { + // ...DEFAULT_LAYOUT_CONFIG, + // content, + // }; + // + // try { + // this.layout = new GoldenLayout(config, this.layout_element); + // } catch (e) { + // logger.warn("Couldn't initialize golden layout with persisted layout.", e); + // + // this.layout = new GoldenLayout( + // { + // ...DEFAULT_LAYOUT_CONFIG, + // content: DEFAULT_LAYOUT_CONTENT, + // }, + // this.layout_element, + // ); + // } + // + // for (const [component, name] of CMP_TO_NAME) { + // this.layout.registerComponent(name, component); + // } + // + // this.layout.on("stateChanged", () => { + // if (this.layout) { + // quest_editor_ui_persister.persist_layout_config(this.layout.toConfig().content); + // } + // }); + // + // this.layout.on("stackCreated", (stack: ContentItem) => { + // stack.on("activeContentItemChanged", (item: ContentItem) => { + // if ("component" in item.config) { + // if (item.config.component === CMP_TO_NAME.get(AssemblyEditorComponent)) { + // quest_editor_store.script_undo.make_current(); + // } else { + // quest_editor_store.undo.make_current(); + // } + // } + // }); + // }); + // + // this.layout.init(); + + this.element.append(this.tool_bar_view.element, this.layout_element); + } +} diff --git a/src/quest_editor/gui/ToolBarView.ts b/src/quest_editor/gui/ToolBarView.ts new file mode 100644 index 00000000..a885fa8e --- /dev/null +++ b/src/quest_editor/gui/ToolBarView.ts @@ -0,0 +1,24 @@ +import { View } from "../../core/gui/View"; +import { ToolBar } from "../../core/gui/ToolBar"; +import { FileButton } from "../../core/gui/FileButton"; +import { Button } from "../../core/gui/Button"; + +export class ToolBarView extends View { + private readonly open_file_button = new FileButton("Open file...", ".qst"); + private readonly save_as_button = new Button("Save as..."); + private readonly undo_button = new Button("Undo"); + private readonly redo_button = new Button("Redo"); + + private readonly tool_bar = new ToolBar( + this.open_file_button, + this.save_as_button, + this.undo_button, + this.redo_button, + ); + + readonly element = this.tool_bar.element; + + get height(): number { + return this.tool_bar.height; + } +} diff --git a/src/old/quest_editor/persistence/QuestEditorUiPersister.ts b/src/quest_editor/persistence/QuestEditorUiPersister.ts similarity index 100% rename from src/old/quest_editor/persistence/QuestEditorUiPersister.ts rename to src/quest_editor/persistence/QuestEditorUiPersister.ts diff --git a/src/viewer/gui/ModelView.css b/src/viewer/gui/ModelView.css index 39644d55..7702f1b6 100644 --- a/src/viewer/gui/ModelView.css +++ b/src/viewer/gui/ModelView.css @@ -16,11 +16,11 @@ } .viewer_ModelSelectListView li:hover { - color: hsl(200, 25%, 85%); - background-color: hsl(0, 0%, 25%); + color: hsl(0, 0%, 90%); + background-color: hsl(0, 0%, 18%); } .viewer_ModelSelectListView li.active { - color: hsl(200, 50%, 85%); - background-color: hsl(0, 0%, 30%); + color: hsl(0, 0%, 90%); + background-color: hsl(0, 0%, 21%); } diff --git a/src/viewer/rendering/ModelRenderer.ts b/src/viewer/rendering/ModelRenderer.ts index 9a634335..3a7e4116 100644 --- a/src/viewer/rendering/ModelRenderer.ts +++ b/src/viewer/rendering/ModelRenderer.ts @@ -42,7 +42,7 @@ export class ModelRenderer extends Renderer implements Disposable { this.perspective_camera = this.camera as PerspectiveCamera; - this.disposer.add( + this.disposer.add_all( model_store.current_nj_data.observe(this.nj_data_or_xvm_changed), model_store.current_xvm.observe(this.nj_data_or_xvm_changed), model_store.current_nj_motion.observe(this.nj_motion_changed), diff --git a/src/viewer/rendering/TextureRenderer.ts b/src/viewer/rendering/TextureRenderer.ts index 12cd4f00..73ede7bb 100644 --- a/src/viewer/rendering/TextureRenderer.ts +++ b/src/viewer/rendering/TextureRenderer.ts @@ -31,7 +31,7 @@ export class TextureRenderer extends Renderer implements Disposable { this.controls.azimuthRotateSpeed = 0; this.controls.polarRotateSpeed = 0; - this.disposer.add( + this.disposer.add_all( texture_store.current_xvm.observe(xvm => { this.scene.remove(...this.quad_meshes);