add tab switch buttons

src/css/style.css

@@ -316,6 +316,14 @@ input[type="file"] {
   flex-direction: column;
 }
 
+.tab-switch-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
 .checkboxes {
   margin-top: 0rem;
 }

src/js/page-functions.js

@@ -186,10 +186,31 @@ function GenerateInnerHTML(db) {
 
   for (let section in sections) {
 
+    textFill = "";
+
+    switch (section) {
+
+      case "bosses":
+
+        textFill += [
+          `<div class="tab-switch-buttons">`,
+            `<button id="tab-switch-base" class="button">Base</button>`,
+            `<button id="tab-switch-essential" class="button">Essential</button>`,
+            `<button id="tab-switch-journal" class="button">Journal</button>`,
+            `<button id="tab-switch-statistics" class="button">Stats</button>`,
+            `<button id="tab-switch-godhome" class="button">Godhome</button>`,
+          `</div>`,
+        ].join("\n");
+
+        textFill += `<div id="tab-base">`;
+
+        break;
+    }
+
     entries = sections[section].entries;
 
     /* starts a new <div> with the current section id */
-    textFill = SectionStart(sections[section]);
+    textFill += SectionStart(sections[section]);
 
     /* creates a <h2> tag for the current section and fills with current%/max%
     If the save file was not analyzed, then fill only max% on blue background */
@@ -464,8 +485,6 @@ function GenerateInnerHTML(db) {
 
           if (obj.textPrefix.includes("<del>")) obj.textSuffix = `<del>${obj.textSuffix}</del>`;
 
-
-
           /* textFill += SingleEntryFill(section, entries[entry]); */
           textFill += SingleEntryFill(obj);
 
@@ -478,16 +497,26 @@ function GenerateInnerHTML(db) {
               textFill += FLEUR_DIVIDE;
 
               break;
-
-            default:
           }
-        }
-    }
+        } /* end for (let entry in entries) */
+    } /* end switch (section) - central */
+
+    /* ############# Cumulate all section texts into one variable for final HTML filling. End section div tag ############### */
 
-    /* Cumulate all section texts into one variable for final HTML filling. End section div tag */
     finalHTMLFill += `${textFill}\n</div>\n\n`;
 
-  }
+    /* ################## End the Tab divs (must be after section ending div) ################# */
+
+    switch (section) {
+
+      case "statistics":
+
+        finalHTMLFill += `</div>`;
+
+        break;
+    }
+
+  } /* end for (let section in sections) */
 
   /* console.groupCollapsed("finalHTMLFill");
   console.log(finalHTMLFill);