Skip to content
This repository has been archived by the owner on Oct 25, 2022. It is now read-only.

Commit

Permalink
refactor(core): Move tab-specific code out of core
Browse files Browse the repository at this point in the history 
While the two UIs share similar functionality, it has been in distinct methods all along. It should be refactored into common parts later.
  • Loading branch information
@oliversalzburg
oliversalzburg committed Sep 29, 2022
1 parent 62dd533 commit e8f44a5
Show file tree
Hide file tree
Showing 3 changed files with 215 additions and 232 deletions.
229 changes: 0 additions & 229 deletions packages/userscript/source/ui/SettingsSectionUi.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { BonfireSettingsItem } from "../options/BonfireSettings";
import { ReligionSettingsItem } from "../options/ReligionSettings";
import { ResourcesSettingsItem } from "../options/ResourcesSettings";
import { SettingMax, SettingTrigger } from "../options/Settings";
import { SettingsSection } from "../options/SettingsSection";
import { TimeControlResourcesSettingsItem } from "../options/TimeControlSettings";
import { ucfirst } from "../tools/Format";
import { mustExist } from "../tools/Maybe";
import { Resource } from "../types";
Expand Down Expand Up @@ -365,233 +363,6 @@ export abstract class SettingsSectionUi {
return items;
}

/**
* Creates a UI element that reflects stock and consume values for a given resource.
* This is currently only used for the craft section.
*
* @param name The resource.
* @param title The title to apply to the option.
* @param option The option that is being controlled.
* @param onDelHandler Will be invoked when the user removes the resoruce from the list.
* @returns A new option with stock and consume values.
*/
protected _addNewResourceOption(
name: Resource,
title: string,
option: ResourcesSettingsItem,
onDelHandler: (name: Resource, option: ResourcesSettingsItem) => void
): JQuery<HTMLElement> {
//title = title || this._host.gamePage.resPool.get(name)?.title || ucfirst(name);

const stock = option.stock;

// The overall container for this resource item.
const container = $("<div/>", {
id: `resource-${name}`,
css: { display: "inline-block", width: "100%" },
});

// The label with the name of the resource.
const label = $("<div/>", {
id: `resource-label-${name}`,
text: title,
css: { display: "inline-block", width: "95px" },
});

// How many items to stock.
const stockElement = $("<div/>", {
id: `stock-value-${name}`,
text: this._host.i18n("resources.stock", [this._renderLimit(stock)]),
css: { cursor: "pointer", display: "inline-block", width: "80px" },
});

// The consume rate for the resource.
const consumeElement = $("<div/>", {
id: `consume-rate-${name}`,
text: this._host.i18n("resources.consume", [
SettingsSectionUi.renderConsumeRate(option.consume),
]),
css: { cursor: "pointer", display: "inline-block" },
});

// Delete the resource from the list.
const del = $('<div class="ks-icon-button"/>', {
id: `resource-delete-${name}`,
}).text(this._host.i18n("resources.del"));

container.append(label, stockElement, consumeElement, del);

// once created, set color if relevant
if (option !== undefined && option.stock !== undefined) {
this._setStockWarning(name, option.stock);
}

stockElement.on("click", () => {
const value = SettingsSectionUi.promptLimit(
this._host.i18n("resources.stock.set", [title]),
option.stock.toFixed(0)
);
if (value !== null) {
this._setStockValue(name, value, false);
stockElement.text(this._host.i18n("resources.stock", [this._renderLimit(value)]));
this._host.updateOptions();
}
});

consumeElement.on("click", () => {
const consumeValue = SettingsSectionUi.promptPercentage(
this._host.i18n("resources.consume.set", [title]),
SettingsSectionUi.renderConsumeRate(option.consume)
);
if (consumeValue !== null) {
// Cap value between 0 and 1.
this._host.updateOptions(() => (option.consume = consumeValue));
consumeElement.text(
this._host.i18n("resources.consume", [SettingsSectionUi.renderConsumeRate(consumeValue)])
);
}
});

del.on("click", () => {
if (window.confirm(this._host.i18n("resources.del.confirm", [title]))) {
container.remove();
onDelHandler(name, option);
this._host.updateOptions();
}
});

option.$consume = consumeElement;
option.$stock = stockElement;

return container;
}

/**
* Removes a previously created resource option.
*
* @param name The resource to remove.
*/
protected _removeResourceOption(name: Resource): void {
const container = $(`#resource-${name}`).remove();
if (!container.length) {
return;
}

container.remove();
}

/**
* Creates a UI element that reflects stock values for a given resource.
* This is currently only used for the time/reset section.
*
* @param name The resource.
* @param title The title to apply to the option.
* @param option The option that is being controlled.
* @param onDelHandler Will be invoked when the user removes the resoruce from the list.
* @returns A new option with stock value.
*/
protected _addNewResourceOptionForReset(
name: Resource,
title: string,
option: TimeControlResourcesSettingsItem,
onDelHandler: (name: Resource, option: TimeControlResourcesSettingsItem) => void
): JQuery<HTMLElement> {
//title = title || this._host.gamePage.resPool.get(name)?.title || ucfirst(name);

const stock = option.stock;

// The overall container for this resource item.
const container = $("<div/>", {
id: `resource-reset-${name}`,
css: { display: "inline-block", width: "100%" },
});

// The label with the name of the resource.
const label = $("<div/>", {
id: `resource-label-${name}`,
text: title,
css: { display: "inline-block", width: "95px" },
});

// How many items to stock.
const stockElement = $("<div/>", {
id: `stock-value-${name}`,
text: this._host.i18n("resources.stock", [this._renderLimit(stock)]),
css: { cursor: "pointer", display: "inline-block", width: "80px" },
});

// Delete the resource from the list.
const del = $('<div class="ks-icon-button"/>', {
id: `resource-delete-${name}`,
}).text(this._host.i18n("resources.del"));

container.append(label, stockElement, del);

stockElement.on("click", () => {
const value = SettingsSectionUi.promptLimit(
this._host.i18n("resources.stock.set", [title]),
option.stock.toFixed(0)
);
if (value !== null) {
this._setStockValue(name, value, true);
}
});

del.on("click", () => {
if (window.confirm(this._host.i18n("resources.del.confirm", [title]))) {
container.remove();
onDelHandler(name, option);
this._host.updateOptions();
}
});

option.$stock = stockElement;

return container;
}

/**
* Removes a previously created resource option.
*
* @param name The resource to remove.
*/
protected _removeResourceOptionForReset(name: Resource): void {
const container = $(`#resource-reset-${name}`);
if (!container) {
return;
}

container.remove();
}

private _setStockWarning(name: Resource, value: number, forReset = false): void {
// simplest way to ensure it doesn't stick around too often; always do
// a remove first then re-add only if needed
const path = forReset ? `#resource-reset-${name}` : `#resource-${name}`;
$(path).removeClass("stockWarn");

const maxValue = this._host.gamePage.resPool.resources.filter(i => i.name === name)[0].maxValue;
if ((value > maxValue && !(maxValue === 0)) || value === Infinity) {
$(path).addClass("stockWarn");
}
}

protected _setStockValue(name: Resource, value: number, forReset = false): void {
if (value < 0) {
this._host.warning(`ignoring non-numeric or invalid stock value '${value}'`);
return;
}

if (forReset) {
value = value < 0 ? Infinity : value;
mustExist(this._host.engine.timeControlManager.settings.resources[name]).enabled = true;
mustExist(this._host.engine.timeControlManager.settings.resources[name]).stock = value;
} else {
mustExist(this._host.engine.workshopManager.settings.resources[name]).enabled = true;
mustExist(this._host.engine.workshopManager.settings.resources[name]).stock = value;
}
}

setConsumeRate(name: Resource, value: number): void {
if (value < 0.0 || 1.0 < value) {
this._host.warning(`ignoring non-numeric or invalid consume rate ${value}`);
Expand Down
88 changes: 86 additions & 2 deletions packages/userscript/source/ui/TimeControlSettingsUi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
import { objectEntries } from "../tools/Entries";
import { ucfirst } from "../tools/Format";
import { Maybe, mustExist } from "../tools/Maybe";
import { Season } from "../types";
import { Resource, Season } from "../types";
import { UserScript } from "../UserScript";
import { SettingsSectionUi } from "./SettingsSectionUi";
import { SettingTriggerUi } from "./SettingTriggerUi";
Expand Down Expand Up @@ -567,7 +567,6 @@ export class TimeControlSettingsUi extends SettingsSectionUi {
delete this._settings.resources[_name];
})
);
this._setStockValue(item, resource.stock, true);
}

// Religion reset options.
Expand Down Expand Up @@ -1086,6 +1085,91 @@ export class TimeControlSettingsUi extends SettingsSectionUi {
return this._resourcesList;
}

/**
* Creates a UI element that reflects stock values for a given resource.
* This is currently only used for the time/reset section.
*
* @param name The resource.
* @param title The title to apply to the option.
* @param option The option that is being controlled.
* @param onDelHandler Will be invoked when the user removes the resoruce from the list.
* @returns A new option with stock value.
*/
private _addNewResourceOptionForReset(
name: Resource,
title: string,
option: TimeControlResourcesSettingsItem,
onDelHandler: (name: Resource, option: TimeControlResourcesSettingsItem) => void
): JQuery<HTMLElement> {
const stock = option.stock;

// The overall container for this resource item.
const container = $("<div/>", {
id: `resource-reset-${name}`,
css: { display: "inline-block", width: "100%" },
});

// The label with the name of the resource.
const label = $("<div/>", {
id: `resource-label-${name}`,
text: title,
css: { display: "inline-block", width: "95px" },
});

// How many items to stock.
const stockElement = $("<div/>", {
id: `stock-value-${name}`,
text: this._host.i18n("resources.stock", [this._renderLimit(stock)]),
css: { cursor: "pointer", display: "inline-block", width: "80px" },
});

// Delete the resource from the list.
const del = $('<div class="ks-icon-button"/>', {
id: `resource-delete-${name}`,
}).text(this._host.i18n("resources.del"));

container.append(label, stockElement, del);

stockElement.on("click", () => {
const value = SettingsSectionUi.promptLimit(
this._host.i18n("resources.stock.set", [title]),
option.stock.toFixed(0)
);
if (value !== null) {
option.enabled = true;
option.stock = value;
stockElement.text(this._host.i18n("resources.stock", [this._renderLimit(value)]));
this._host.updateOptions();
}
});

del.on("click", () => {
if (window.confirm(this._host.i18n("resources.del.confirm", [title]))) {
container.remove();
onDelHandler(name, option);
this._host.updateOptions();
}
});

option.$stock = stockElement;

return container;
}

/**
* Removes a previously created resource option.
*
* @param name The resource to remove.
*/
private _removeResourceOptionForReset(name: Resource): void {
const container = $(`#resource-reset-${name}`);
if (!container) {
return;
}

container.remove();
}

setState(state: TimeControlSettings): void {
this._settings.enabled = state.enabled;

Expand Down
Loading

0 comments on commit e8f44a5

Please sign in to comment.