diff --git a/src/003-assets/CSS/RAoptions.css b/src/003-assets/CSS/RAoptions.css
index 3fa3f2351f2c9041a94288fa7fc25f381750edfe..ca589dea8d465bf170ccb75c97be67a452ff401f 100644
--- a/src/003-assets/CSS/RAoptions.css
+++ b/src/003-assets/CSS/RAoptions.css
@@ -58,3 +58,7 @@
content: ":";
margin-right: 0.5em;
}
+
+.ra-setters {
+ margin-top: 3ex;
+}
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index fb5aca1cb19a4d28c9b0afc92d74ddaee445deb0..b76a70dbcef7b427754f0ca6a3c8fd0f60436b85 100644
--- a/src/js/rulesAssistantOptions.js
+++ b/src/js/rulesAssistantOptions.js
@@ -170,6 +170,45 @@ window.rulesAssistantOptions = (function() {
}
}
+ class Tab extends Element {
+ /**
+ *
+ * @param {string} name
+ * @param {string} label
+ * @param {HTMLDivElement} tabButtonsContainer
+ */
+ constructor(name, label, tabButtonsContainer) {
+ super(name);
+ tabButtonsContainer.appendChild(Tab.makeTabButton(name, label));
+ }
+ render(name) {
+ const tab = document.createElement("div");
+ tab.id = name;
+ tab.className = "tabcontent";
+
+ this.tabContent_ = document.createElement("div");
+ this.tabContent_.className = "content";
+ tab.appendChild(this.tabContent_);
+
+ return tab;
+ }
+
+ appendChild(child) {
+ child.parent = this;
+ this.children.push(child);
+ this.tabContent_.appendChild(child.element);
+ }
+
+ static makeTabButton(name, text) {
+ const btn = document.createElement("button");
+ btn.className = "tablinks";
+ btn.id = `tab ${name}`;
+ btn.innerHTML = text;
+ btn.onclick = (event) => App.UI.tabbar.openTab(event, name);
+ return btn;
+ }
+ }
+
// list of clickable elements
// has a short explanation (the prefix) and a value display
@@ -786,6 +825,7 @@ window.rulesAssistantOptions = (function() {
this.appendChild(new RuleOptions(this));
this.appendChild(new ConditionEditor(this));
this.appendChild(new EffectEditor(this));
+ App.UI.tabbar.handlePreSelectedTab("appearance", true);
}
render(element) {
@@ -1290,24 +1330,28 @@ window.rulesAssistantOptions = (function() {
class EffectEditor extends Element {
constructor() {
super();
- this.appendChild(new AppearanceSection(true));
- this.appendChild(new CosmeticSection(true));
- this.appendChild(new BodyModSection(true));
- this.appendChild(new AutosurgerySection(true));
- this.appendChild(new RegimenSection(true));
- this.appendChild(new BehaviourSection(true));
- this.appendChild(new OtherSection(true));
+ this.appendChild(new AppearanceTab(this.tabButtons_));
+ this.appendChild(new CosmeticTab(this.tabButtons_));
+ this.appendChild(new BodyModTab(this.tabButtons_));
+ this.appendChild(new AutosurgeryTab(this.tabButtons_));
+ this.appendChild(new RegimenTab(this.tabButtons_));
+ this.appendChild(new BehaviourTab(this.tabButtons_));
+ this.appendChild(new OtherTab(this.tabButtons_));
}
render() {
const element = document.createElement("div");
+ element.className = "ra-setters";
+ this.tabButtons_ = document.createElement("div");
+ this.tabButtons_.className = "tab";
+ element.appendChild(this.tabButtons_);
return element;
}
}
- class AppearanceSection extends Section {
- constructor(isCollapsed) {
- super("Appearance Settings", isCollapsed);
+ class AppearanceTab extends Tab {
+ constructor(tabButtons) {
+ super("appearance", "Appearance", tabButtons);
this.appendChild(new ClothesList());
this.appendChild(new CollarList());
this.appendChild(new ShoeList());
@@ -1332,9 +1376,9 @@ window.rulesAssistantOptions = (function() {
}
}
- class RegimenSection extends Section {
- constructor(isCollapsed) {
- super("Physical Regimen Settings", isCollapsed);
+ class RegimenTab extends Tab {
+ constructor(tabButtons) {
+ super("regiment", "Physical Regiment", tabButtons);
if (V.arcologies[0].FSAssetExpansionistResearch === 1)
this.appendChild(new HyperGrowthSwitch());
this.appendChild(new IntensiveGrowthSwitch());
@@ -1364,9 +1408,9 @@ window.rulesAssistantOptions = (function() {
}
}
- class BehaviourSection extends Section {
- constructor(isCollapsed) {
- super("Behavior Settings", isCollapsed);
+ class BehaviourTab extends Tab {
+ constructor(tabButtons) {
+ super("behavior", "Behavior", tabButtons);
this.appendChild(new AutomaticAssignmentList());
this.appendChild(new LivingStandardList());
this.appendChild(new PunishmentList());
@@ -1386,17 +1430,17 @@ window.rulesAssistantOptions = (function() {
}
}
- class OtherSection extends Section {
- constructor(isCollapsed) {
- super("Other Settings", isCollapsed);
+ class OtherTab extends Tab {
+ constructor(tabButtons) {
+ super("other", "Other", tabButtons);
this.appendChild(new LabelList());
this.appendChild(new LabelRemoveList());
}
}
- class CosmeticSection extends Section {
- constructor(isCollapsed) {
- super("Cosmetic Settings", isCollapsed);
+ class CosmeticTab extends Tab {
+ constructor(tabButtons) {
+ super("cosmetic", "Cosmetic", tabButtons);
this.appendChild(new EyewearList());
this.appendChild(new LensesList());
this.appendChild(new EarwearList());
@@ -1418,9 +1462,9 @@ window.rulesAssistantOptions = (function() {
}
}
- class BodyModSection extends Section {
- constructor(isCollapsed) {
- super("Body Mod Settings", isCollapsed);
+ class BodyModTab extends Tab {
+ constructor(tabButtons) {
+ super("bodyMod", "Body Mod", tabButtons);
this.appendChild(new EarPiercingList());
this.appendChild(new NosePiercingList());
this.appendChild(new EyebrowPiercingList());
@@ -1455,9 +1499,9 @@ window.rulesAssistantOptions = (function() {
}
}
- class AutosurgerySection extends Section {
- constructor() {
- super("Autosurgery Settings", true);
+ class AutosurgeryTab extends Tab {
+ constructor(tabButtons) {
+ super("autosurgery", "Autosurgery", tabButtons);
this.appendChild(new AutosurgerySwitch());
this.appendChild(new VisionSurgeryList());
this.appendChild(new HearingSurgeryList());
diff --git a/src/js/utilJS.js b/src/js/utilJS.js
index 393a44bb12444b38608d23eea1aea6354b123d24..7f70a098cbfab8ecc99bea4488751960667ffeb0 100644
--- a/src/js/utilJS.js
+++ b/src/js/utilJS.js
@@ -2232,7 +2232,8 @@ App.UI.tabbar = function() {
openTab: openTab,
tabButton: tabButton,
makeTab: makeTab,
- handlePreSelectedTab: handlePreSelectedTab
+ handlePreSelectedTab: handlePreSelectedTab,
+ tabChoiceVarName: tabChoiceVarName
};
function openTab(evt, tabName) {
@@ -2246,7 +2247,7 @@ App.UI.tabbar = function() {
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
- V.tabChoice[_tabChoiceVarName()] = tabName; /* The regex strips spaces and " ' " from passage names, making "Servants' Quarters" into "ServantsQuarters" and allowing it to be used as a label in this object. */
+ V.tabChoice[tabChoiceVarName()] = tabName; /* The regex strips spaces and " ' " from passage names, making "Servants' Quarters" into "ServantsQuarters" and allowing it to be used as a label in this object. */
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
@@ -2269,19 +2270,24 @@ App.UI.tabbar = function() {
return `<div id="${name}" class="tabcontent"><div class="content">${content}</div></div>`;
}
- function handlePreSelectedTab() {
- let selectedTab = State.variables.tabChoice[_tabChoiceVarName()];
- if (!selectedTab) { selectedTab = "assign"; }
- $(document).one(':passagedisplay', function() {
+ function handlePreSelectedTab(defaultTab = "assign", immidiate = false) {
+ let selectedTab = State.variables.tabChoice[tabChoiceVarName()];
+ if (!selectedTab) { selectedTab = defaultTab; }
+ function selectTab() {
let tabBtn = document.getElementById(`tab ${selectedTab}`);
if (!tabBtn) {
tabBtn = document.getElementsByClassName('tablinks').item(0);
}
if (tabBtn) { tabBtn.click(); }
- });
+ }
+ if (immidiate) {
+ selectTab();
+ } else {
+ $(document).one(':passagedisplay', selectTab);
+ }
}
- function _tabChoiceVarName() {
+ function tabChoiceVarName() {
return passage().trim().replace(/ |'/g, '');
}
}();