diff --git a/features.js b/features.js index b20d778..2e385b9 100644 --- a/features.js +++ b/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": diff --git a/game.js b/game.js index 2ad034f..1a86e84 100644 --- a/game.js +++ b/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) { diff --git a/stroll.html b/stroll.html index 9b01f30..5f4ab94 100644 --- a/stroll.html +++ b/stroll.html @@ -294,7 +294,7 @@
-

Enable/disable categories of character features here.

+

Show/hide whole groups character features here.

diff --git a/style.css b/style.css index 9eaff2f..0c3c1a0 100644 --- a/style.css +++ b/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; }