Add banners for the categories

features.js

@@ -1,4 +1,22 @@
-const groups = ["body-part", "nsfw", "alt-vore", "gross"];
+const groups = ["body-part", "nsfw", "alt-vore", "gross", "magic"];
+
+const groupInfo = {
+  "body-part": {
+    name: "Body parts",
+  },
+  "nsfw": {
+    name: "Sexual parts"
+  },
+  "alt-vore": {
+    name: "Alt vore"
+  },
+  "gross": {
+    name: "Disposal/waste"
+  },
+  "magic": {
+    name: "Magic"
+  }
+}
 
 const panels = {
     "body": {
@@ -947,7 +965,7 @@ options = [
   {
     "name": "Footwear",
     "id": "footWear",
-    "group": "main",
+    "group": "body-part",
     "optional": true,
     "panels": ["shoes"],
     "entries":
@@ -1147,7 +1165,7 @@ options = [
   {
     "name": "Pouch",
     "id": "hasPouch",
-    "group": "body-part",
+    "group": "alt-vore",
     "optional": true,
     "panels": ["misc"],
     "buttons": ["pouch_stuff", "pouch_rub"],
@@ -1981,7 +1999,7 @@ options = [
   {
     "name": "Breath",
     "id": "breathEnabled",
-    "group": "main",
+    "group": "magic",
     "optional": true,
     "panels": ["breath"],
     "buttons": ["breath_line", "breath_cone"],
@@ -2052,7 +2070,7 @@ options = [
   {
     "name": "Magic",
     "id": "magicEnabled",
-    "group": "main",
+    "group": "magic",
     "optional": true,
     "panels": ["magic"],
     "entries":

game.js

@@ -5960,7 +5960,7 @@ function construct_options() {
     input.setAttribute("type", "checkbox");
 
     label.setAttribute("for", "group-toggle-" + group);
-    label.innerText = group;
+    label.innerText = groupInfo[group].name;
     
     input.addEventListener("input", update_visible_groups);
 
@@ -5969,11 +5969,23 @@ function construct_options() {
     group_holder.appendChild(label);
 
   })
+
   let root = document.getElementById("character-flex-outer");
 
   options.forEach(function(category) {
     render_category(root, category);
   });
+
+  groups.forEach(group => { 
+    let div = document.createElement("div");
+    div.classList.add("group-banner");
+  
+    div.classList.add("sheet-group-" + group);
+
+    div.innerText = groupInfo[group].name;
+
+    root.appendChild(div);
+  });
 }
 
 function attach_form_data(element, data) {

stroll.html

@@ -294,7 +294,7 @@
         </div>
 
         <div class="custom-category">
-          <p>Enable/disable categories of character features here.</p>
+          <p>Show/hide whole groups character features here.</p>
           <div id="group-button-holder">
 
           </div>

style.css

@@ -890,10 +890,16 @@ body.dark .meterLabel {
 
 body {
   --main-order: 1;
-  --body-part-order: 2;
-  --nsfw-order: 3;
-  --alt-vore-order: 4;
-  --gross-order: 5;
+  --body-part-order-banner: 2;
+  --body-part-order: 3;
+  --nsfw-order-banner: 4;
+  --nsfw-order: 5;
+  --alt-vore-order-banner: 6;
+  --alt-vore-order: 7;
+  --gross-order-banner: 8;
+  --gross-order: 9;
+  --magic-order-banner: 10;
+  --magic-order: 11;
 }
 
 .sheet-group-main {
@@ -904,14 +910,52 @@ body {
   order: var(--body-part-order);
 }
 
+.group-banner.sheet-group-body-part {
+  order: var(--body-part-order-banner);
+}
+
+.sheet-group-nsfw {
+  order: var(--nsfw-order);
+}
+
+.group-banner.sheet-group-nsfw {
+  order: var(--nsfw-order-banner);
+}
+
 .sheet-group-alt-vore {
   order: var(--alt-vore-order);
 }
 
+.group-banner.sheet-group-alt-vore {
+  order: var(--alt-vore-order-banner);
+}
+
 .sheet-group-gross {
   order: var(--gross-order);
 }
 
-.sheet-group-nsfw {
-  order: var(--nsfw-order);
+.group-banner.sheet-group-gross {
+  order: var(--gross-order-banner);
+}
+
+.sheet-group-magic {
+  order: var(--magic-order);
+}
+
+.group-banner.sheet-group-magic {
+  order: var(--magic-order-banner);
+}
+
+.group-banner {
+  min-width: 80vw;
+  min-height: 10vh;
+  font-size: 6vh;
+  margin: auto;
+}
+
+body.dark div.group-banner {
+  background-color: #444;
+}
+body.light div.group-banner {
+  background-color: #bbb;
 }