diff --git a/src/interaction/siWardrobe.js b/src/interaction/siWardrobe.js index 626e942f10adf75d1d197019a2569544da238e6c..33003a8aedc32848e2a85279e38a9a39be2cf726 100644 --- a/src/interaction/siWardrobe.js +++ b/src/interaction/siWardrobe.js @@ -40,35 +40,28 @@ App.UI.SlaveInteract.wardrobe = function(slave) { function filtersDOM() { const el = document.createElement("div"); - el.classList.add("filter-line"); + el.classList.add("filter-row"); el.append("Filters: "); const niceFilters = new Map([ [false, "Nice"], [true, "Harsh"], ]); - let linkArray = []; + let span = document.createElement("span"); + span.classList.add("button-group"); for (const [bool, string] of niceFilters) { + const button = App.UI.DOM.makeElement("button", string); if (filters.harsh === bool) { - linkArray.push( - App.UI.DOM.disabledLink( - string, - ["Currently selected"] - ) - ); + button.classList.add("selected", "disabled"); } else { - linkArray.push( - App.UI.DOM.link( - string, - () => { - filters.harsh = bool; - refresh(); - } - ) - ); + button.onclick = () => { + filters.harsh = bool; + refresh(); + }; } + span.append(button); } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); + el.append(span); const exposureFilters = new Map([ [0, "Modest"], @@ -77,41 +70,29 @@ App.UI.SlaveInteract.wardrobe = function(slave) { [3, "Humiliating"], [4, "Practically nude"], ]); - linkArray = []; + span = document.createElement("span"); + span.classList.add("button-group"); for (const [num, string] of exposureFilters) { + const button = App.UI.DOM.makeElement("button", string); if (filters.exposure === num) { - linkArray.push( - App.UI.DOM.disabledLink( - string, - ["Currently selected"] - ) - ); + button.classList.add("selected", "disabled"); } else { - linkArray.push( - App.UI.DOM.link( - string, - () => { - filters.exposure = num; - refresh(); - } - ) - ); + button.onclick = () => { + filters.exposure = num; + refresh(); + }; } + span.append(button); } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); + el.append(span); // clear filters - App.UI.DOM.appendNewElement( - "span", - el, - App.UI.DOM.link( - "Reset Filters", - () => { - filters = {}; - refresh(); - } - ), - "filter-cluster"); + const resetButton = App.UI.DOM.makeElement("button", "Reset Filters"); + resetButton.onclick = () => { + filters = {}; + refresh(); + }; + App.UI.DOM.appendNewElement("span", el, resetButton, "button-group"); return el; } diff --git a/src/interaction/wardrobe.css b/src/interaction/wardrobe.css index d857756c3b40c29dd844ab94819131d7f3081345..328e67174f1d5f419a88e340667593b10c395041 100644 --- a/src/interaction/wardrobe.css +++ b/src/interaction/wardrobe.css @@ -1,9 +1,7 @@ -span.filter-cluster { - background-color: var(--button-color); - border: solid 2px var(--button-border-color); - margin: 6px; - padding: 1ex 1ex; -} -div.filter-line { +div.filter-row { line-height: 3em; -} \ No newline at end of file +} + +div.filter-row .button-group { + margin: 1em; +}