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

Commit

Permalink
feat(ui): Use new list component for sub-settings
Browse files Browse the repository at this point in the history 
The list UI "component" that enables the main UI sections is now also used to construct arbitrary lists through the rest of the UI. This allows us to inherit familiar enable/disable all behavior.
  • Loading branch information
@oliversalzburg
oliversalzburg committed Oct 8, 2022
1 parent 0ecac9b commit 1221d35
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 158 deletions.
39 changes: 5 additions & 34 deletions packages/userscript/source/ui/BonfireSettingsUi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ export class BonfireSettingsUi extends SettingsSectionUi {

private readonly _settings: BonfireSettings;

private _buildingUpgradesExpanded = false;

constructor(host: UserScript, settings: BonfireSettings) {
super(host);

Expand Down Expand Up @@ -292,26 +290,15 @@ export class BonfireSettingsUi extends SettingsSectionUi {
private _getAdditionOptions(): Array<JQuery<HTMLElement>> {
const header = this._getHeader("Additional options");

const upgradeBuildingsButton = SettingUi.make(
const upgradeBuildingsList = SettingsListUi.getSettingsList(this._host.engine, "buildings");
const upgradeBuildingsElement = SettingsPanelUi.make(
this._host,
"buildings",
this._settings.upgradeBuildings,
this._host.engine.i18n("ui.upgrade.buildings"),

{
onCheck: () =>
this._host.engine.imessage("status.auto.enable", [
this._host.engine.i18n("ui.upgrade.buildings"),
]),
onUnCheck: () =>
this._host.engine.imessage("status.auto.disable", [
this._host.engine.i18n("ui.upgrade.buildings"),
]),
}
this._settings.upgradeBuildings,
upgradeBuildingsList
);

const upgradeBuildingsList = SettingsSectionUi.getList("items-list-buildings");

const upgradeBuildingsButtons = [];
for (const [upgradeName, upgrade] of objectEntries(this._settings.upgradeBuildings.items)) {
const label = this._host.engine.i18n(`$buildings.${upgradeName}.label`);
Expand All @@ -336,22 +323,6 @@ export class BonfireSettingsUi extends SettingsSectionUi {
upgradeBuildingsButtons.sort((a, b) => a.label.localeCompare(b.label));
upgradeBuildingsButtons.forEach(button => upgradeBuildingsList.append(button.button));

const upgradeBuildingsItemsButton = this._getItemsToggle("buildings-show");
upgradeBuildingsItemsButton.on("click", () => {
upgradeBuildingsList.toggle();

this._buildingUpgradesExpanded = !this._buildingUpgradesExpanded;

upgradeBuildingsItemsButton.text(this._buildingUpgradesExpanded ? "-" : "+");
upgradeBuildingsItemsButton.prop(
"title",
this._buildingUpgradesExpanded
? this._host.engine.i18n("ui.itemsHide")
: this._host.engine.i18n("ui.itemsShow")
);
});
upgradeBuildingsButton.append(upgradeBuildingsItemsButton, upgradeBuildingsList);

const nodeTurnOnSteamworks = SettingUi.make(
this._host,
"_steamworks",
Expand All @@ -370,7 +341,7 @@ export class BonfireSettingsUi extends SettingsSectionUi {
}
);

return [header, upgradeBuildingsButton, nodeTurnOnSteamworks];
return [header, upgradeBuildingsElement, upgradeBuildingsList, nodeTurnOnSteamworks];
}

setState(state: BonfireSettings): void {
Expand Down
51 changes: 7 additions & 44 deletions packages/userscript/source/ui/ScienceSettingsUi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,17 @@ export class ScienceSettingsUi extends SettingsSectionUi {

private readonly _settings: ScienceSettings;

private _techsExpanded = false;
private _policiesExpanded = false;

constructor(host: UserScript, settings: ScienceSettings) {
super(host);

this._settings = settings;

const toggleName = "upgrade";
const label = ucfirst(this._host.engine.i18n("ui.upgrade"));

// Create build items.
// We create these in a list that is displayed when the user clicks the "items" button.
const list = SettingsListUi.getSettingsList(this._host.engine, toggleName);

// Our main element is a list item.
const element = SettingsPanelUi.make(this._host, toggleName, label, this._settings, list);

// Technologies
const techsList = SettingsListUi.getSettingsList(this._host.engine, "techs");
const techsElement = SettingsPanelUi.make(
this._host,
Expand All @@ -55,26 +48,16 @@ export class ScienceSettingsUi extends SettingsSectionUi {
techButtons.sort((a, b) => a.label.localeCompare(b.label));
techButtons.forEach(button => techsList.append(button.button));

// Set up the more complex policies options.
const policiesButton = SettingUi.make(
// Policies
const policiesList = SettingsListUi.getSettingsList(this._host.engine, "policies");
const policiesElement = SettingsPanelUi.make(
this._host,
"policies",
this._settings.policies,
this._host.engine.i18n("ui.upgrade.policies"),
{
onCheck: () =>
this._host.engine.imessage("status.auto.enable", [
this._host.engine.i18n("ui.upgrade.policies"),
]),
onUnCheck: () =>
this._host.engine.imessage("status.auto.disable", [
this._host.engine.i18n("ui.upgrade.policies"),
]),
}
this._settings.policies,
policiesList
);

const policiesList = SettingsSectionUi.getList("items-list-policies");

const policyButtons = [];
for (const [policyName, policy] of objectEntries(this._settings.policies.items)) {
const policyLabel = this._host.engine.i18n(
Expand All @@ -91,27 +74,7 @@ export class ScienceSettingsUi extends SettingsSectionUi {
policyButtons.sort((a, b) => a.label.localeCompare(b.label));
policyButtons.forEach(button => policiesList.append(button.button));

const policiesItemsButton = this._getItemsToggle("policies-show");
policiesItemsButton.on("click", () => {
policiesList.toggle();

this._policiesExpanded = !this._policiesExpanded;

policiesItemsButton.text(this._policiesExpanded ? "-" : "+");
policiesItemsButton.prop(
"title",
this._policiesExpanded
? this._host.engine.i18n("ui.itemsHide")
: this._host.engine.i18n("ui.itemsShow")
);
});
policiesButton.append(policiesItemsButton, policiesList);

// Set up the remaining options.
const optionButtons = [techsElement, techsList, policiesButton];

list.append(...optionButtons);

list.append(techsElement, techsList, policiesElement, policiesList);
element.append(list);

this.element = element;
Expand Down
43 changes: 5 additions & 38 deletions packages/userscript/source/ui/SpaceSettingsUi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,14 @@ export class SpaceSettingsUi extends SettingsSectionUi {

private readonly _settings: SpaceSettings;

private _missionsExpanded = false;

constructor(host: UserScript, settings: SpaceSettings) {
super(host);

this._settings = settings;

const toggleName = "space";
const label = ucfirst(this._host.engine.i18n("ui.space"));

// Create build items.
// We create these in a list that is displayed when the user clicks the "items" button.
const list = SettingsListUi.getSettingsList(this._host.engine, toggleName);

// Our main element is a list item.
const element = SettingsPanelUi.make(this._host, toggleName, label, this._settings, list);

// Create "trigger" button in the item.
Expand Down Expand Up @@ -194,25 +187,15 @@ export class SpaceSettingsUi extends SettingsSectionUi {
private _getAdditionOptions(): Array<JQuery<HTMLElement>> {
const header = this._getHeader("Additional options");

const missionsButton = SettingUi.make(
const missionsList = SettingsListUi.getSettingsList(this._host.engine, "missions");
const missionsElement = SettingsPanelUi.make(
this._host,
"missions",
this._settings.unlockMissions,
this._host.engine.i18n("ui.upgrade.missions"),
{
onCheck: () =>
this._host.engine.imessage("status.auto.enable", [
this._host.engine.i18n("ui.upgrade.missions"),
]),
onUnCheck: () =>
this._host.engine.imessage("status.auto.disable", [
this._host.engine.i18n("ui.upgrade.missions"),
]),
}
this._settings.unlockMissions,
missionsList
);

const missionsList = SettingsSectionUi.getList("items-list-missions");

const missionButtons = [];
for (const [missionName, mission] of objectEntries(this._settings.unlockMissions.items)) {
const missionLabel = this._host.engine.i18n(`$space.${missionName}.label`);
Expand All @@ -233,23 +216,7 @@ export class SpaceSettingsUi extends SettingsSectionUi {
missionButtons.sort((a, b) => a.label.localeCompare(b.label));
missionButtons.forEach(button => missionsList.append(button.button));

const missionsItemsButton = this._getItemsToggle("missions-show");
missionsItemsButton.on("click", () => {
missionsList.toggle();

this._missionsExpanded = !this._missionsExpanded;

missionsItemsButton.text(this._missionsExpanded ? "-" : "+");
missionsItemsButton.prop(
"title",
this._missionsExpanded
? this._host.engine.i18n("ui.itemsHide")
: this._host.engine.i18n("ui.itemsShow")
);
});
missionsButton.append(missionsItemsButton, missionsList);

return [header, missionsButton];
return [header, missionsElement, missionsList];
}

setState(state: SpaceSettings): void {
Expand Down
49 changes: 7 additions & 42 deletions packages/userscript/source/ui/WorkshopSettingsUi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,20 @@ export class WorkshopSettingsUi extends SettingsSectionUi {

private readonly _settings: WorkshopSettings;

private readonly _optionButtons = new Array<JQuery<HTMLElement>>();

private _upgradesExpanded = false;

constructor(host: UserScript, settings: WorkshopSettings) {
super(host);

this._settings = settings;

const toggleName = "craft";
const label = ucfirst(this._host.engine.i18n("ui.craft"));

// Create build items.
// We create these in a list that is displayed when the user clicks the "items" button.
const list = SettingsListUi.getSettingsList(this._host.engine, toggleName);

// Our main element is a list item.
const element = SettingsPanelUi.make(this._host, toggleName, label, this._settings, list);

// Create "trigger" button in the item.
this._settings.$trigger = this._registerTriggerButton(toggleName, label, this._settings);

this._optionButtons = [
const buttons = [
this._getCraftOption(
"wood",
this._settings.items.wood,
Expand Down Expand Up @@ -140,7 +131,7 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
),
];

list.append(...this._optionButtons);
list.append(...buttons);

const additionOptions = this._getAdditionOptions();
list.append(additionOptions);
Expand Down Expand Up @@ -184,25 +175,15 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
private _getAdditionOptions(): Array<JQuery<HTMLElement>> {
const header = this._getHeader("Additional options");

const upgradesButton = SettingUi.make(
const upgradesList = SettingsListUi.getSettingsList(this._host.engine, "upgrades");
const upgradesElement = SettingsPanelUi.make(
this._host,
"upgrades",
this._settings.unlockUpgrades,
this._host.engine.i18n("ui.upgrade.upgrades"),
{
onCheck: () =>
this._host.engine.imessage("status.auto.enable", [
this._host.engine.i18n("ui.upgrade.upgrades"),
]),
onUnCheck: () =>
this._host.engine.imessage("status.auto.disable", [
this._host.engine.i18n("ui.upgrade.upgrades"),
]),
}
this._settings.unlockUpgrades,
upgradesList
);

const upgradesList = SettingsSectionUi.getList("items-list-upgrades");

const upgradeButtons = [];
for (const [upgradeName, upgrade] of objectEntries(this._settings.unlockUpgrades.items)) {
const upgradeLabel = this._host.engine.i18n(`$workshop.${upgradeName}.label`);
Expand All @@ -223,22 +204,6 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
upgradeButtons.sort((a, b) => a.label.localeCompare(b.label));
upgradeButtons.forEach(button => upgradesList.append(button.button));

const upgradesItemsButton = this._getItemsToggle("upgrades-show");
upgradesItemsButton.on("click", () => {
upgradesList.toggle();

this._upgradesExpanded = !this._upgradesExpanded;

upgradesItemsButton.text(this._upgradesExpanded ? "-" : "+");
upgradesItemsButton.prop(
"title",
this._upgradesExpanded
? this._host.engine.i18n("ui.itemsHide")
: this._host.engine.i18n("ui.itemsShow")
);
});
upgradesButton.append(upgradesItemsButton, upgradesList);

const shipOverride = SettingUi.make(
this._host,
"shipOverride",
Expand All @@ -256,7 +221,7 @@ export class WorkshopSettingsUi extends SettingsSectionUi {
}
);

return [header, upgradesButton, shipOverride];
return [header, upgradesElement, upgradesList, shipOverride];
}

setState(state: WorkshopSettings): void {
Expand Down

0 comments on commit 1221d35

Please sign in to comment.