From 855cdcdc1bc29c6ff20622bfad52966ae5731495 Mon Sep 17 00:00:00 2001
From: Matheus Clemente <matheus.xb@gmail.com>
Date: Sun, 31 Mar 2024 19:16:45 -0300
Subject: [PATCH] Ability Score filters + restyling

---
 src/module/applications/compendium-browser.js |  33 +---
 src/styles/compendium-browser.less            | 146 ++++++++-------
 .../CompendiumBrowserCreatures.vue            | 168 ++++++++++--------
 3 files changed, 185 insertions(+), 162 deletions(-)

diff --git a/src/module/applications/compendium-browser.js b/src/module/applications/compendium-browser.js
index ce097d3..a8191b1 100644
--- a/src/module/applications/compendium-browser.js
+++ b/src/module/applications/compendium-browser.js
@@ -92,7 +92,7 @@ export class CompendiumBrowserVueApplication extends Application {
 			// Reactivate the listeners if we need to.
 			if (!this.vueListenersActive) {
 				setTimeout(() => {
-					this.activateVueListeners($(this.form), true);
+					this.activateVueListeners(true);
 				}, 150);
 			}
 			return;
@@ -112,7 +112,7 @@ export class CompendiumBrowserVueApplication extends Application {
 			this.vueRoot = this.vueApp.mount(`[data-appid="${this.appId}"] .compendium-browser-mount`);
 			// @todo Find a better solution than a timeout.
 			setTimeout(() => {
-				this.activateVueListeners($(this.form), false);
+				this.activateVueListeners();
 			}, 150);
 		}
 
@@ -142,37 +142,14 @@ export class CompendiumBrowserVueApplication extends Application {
 
 	/**
 	 * Activate additional listeners on the rendered Vue app.
-	 * @param {jQuery} html
 	 */
-	activateVueListeners(html, repeat = false) {
-		if (!this.options.editable) {
-			html.find("input,select,textarea").attr("disabled", true);
-			return;
-		}
-
-		if (html.find(".archmage-v2-vue").length > 0) {
-			this.vueListenersActive = true;
-		}
+	activateVueListeners(repeat = false) {
+		this.vueListenersActive = true;
 
 		// Place one-time executions after this line.
 		if (repeat) return;
 
 		// Input listeners.
-		let inputs = '.section input[type="text"], .section input[type="number"]';
-		html.on("focus", inputs, (event) => this._onFocus(event));
-	}
-
-	/**
-	 * Handle focus events.
-	 *
-	 * @param {*} event
-	 */
-	_onFocus(event) {
-		let target = event.currentTarget;
-		setTimeout(function () {
-			if (target == document.activeElement) {
-				$(target).trigger("select");
-			}
-		}, 100);
+		this.element.find(".filtercontainer h3").click(async (ev) => await $(ev.target.nextElementSibling).toggle(100));
 	}
 }
diff --git a/src/styles/compendium-browser.less b/src/styles/compendium-browser.less
index 078fde6..b986c6b 100644
--- a/src/styles/compendium-browser.less
+++ b/src/styles/compendium-browser.less
@@ -60,10 +60,69 @@
 		}
 	}
 	.control-area {
-		position: sticky;
 		height: 100%;
-		overflow: auto;
 		flex: 2;
+		.controls {
+			overflow: hidden auto;
+			.filtercontainer {
+				border: 1px solid #bbb;
+				border-radius: 5px;
+				margin-top: 5px;
+				padding: 2px;
+				h3 {
+					margin: 0;
+					cursor: pointer;
+				}
+				dl {
+					margin: 5px 0;
+				}
+				div {
+					margin: 5px 0;
+				}
+				dt {
+					display: inline-block;
+					width: 40%;
+					padding-left: 5px;
+				}
+				dd {
+					display: inline-block;
+					width: 58%;
+					margin-left: 0;
+					select {
+						width: 100%;
+					}
+				}
+				.multiselect {
+					border: 1px solid #bbb;
+					border-radius: 3px;
+					vertical-align: middle;
+					line-height: 32px;
+					margin: 2px 0;
+					label {
+						padding: 5px;
+					}
+					input {
+						vertical-align: middle;
+					}
+				}
+				.small-input {
+					width: calc(100% - 44px);
+					height: 27px;
+					background: rgba(0, 0, 0, 0.05);
+					border: 1px solid #444;
+					border-radius: 3px;
+					padding: 0 3px;
+					text-overflow: ellipsis;
+				}
+				.small-select {
+					width: 40px;
+				}
+			}
+		}
+		footer {
+			flex: 0;
+			padding: 1rem 0 3px;
+		}
 		button {
 			background: rgba(0, 0, 0, 0.05);
 			border: 1px solid #bbb;
@@ -71,60 +130,6 @@
 			margin-top: 5px;
 			padding: 2px;
 		}
-		.filtercontainer {
-			border: 1px solid #bbb;
-			border-radius: 5px;
-			margin-top: 5px;
-			padding: 2px;
-			h3 {
-				margin: 0;
-				cursor: pointer;
-			}
-			dl {
-				margin: 5px 0;
-			}
-			div {
-				margin: 5px 0;
-			}
-			dt {
-				display: inline-block;
-				width: 40%;
-				padding-left: 5px;
-			}
-			dd {
-				display: inline-block;
-				width: 58%;
-				margin-left: 0;
-				select {
-					width: 100%;
-				}
-			}
-			.multiselect {
-				border: 1px solid #bbb;
-				border-radius: 3px;
-				vertical-align: middle;
-				line-height: 32px;
-				margin: 2px 0;
-				label {
-					padding: 5px;
-				}
-				input {
-					vertical-align: middle;
-				}
-			}
-			.small-input {
-				width: calc(100% - 44px);
-				height: 27px;
-				background: rgba(0, 0, 0, 0.05);
-				border: 1px solid #444;
-				border-radius: 3px;
-				padding: 0 3px;
-				text-overflow: ellipsis;
-			}
-			.small-select {
-				width: 40px;
-			}
-		}
 	}
 	.list-area {
 		position: sticky;
@@ -134,17 +139,11 @@
 			flex: 0;
 			text-align: center;
 		}
-	}
-	.browser {
-		height: 100%;
-		overflow-y: hidden !important;
-		.window-content {
-			overflow-y: hidden !important;
-		}
+
 		ul {
 			float: right;
 			display: block;
-			min-width: 335px;
+			// min-width: 335px;
 			margin: 0;
 			height: 100%;
 			overflow: auto;
@@ -153,6 +152,10 @@
 				display: none;
 			}
 			li {
+				&:hover {
+					cursor: pointer;
+				}
+
 				span {
 					white-space: nowrap;
 					overflow: hidden;
@@ -178,6 +181,13 @@
 				}
 			}
 		}
+	}
+	.browser {
+		height: 100%;
+		overflow-y: hidden !important;
+		.window-content {
+			overflow-y: hidden !important;
+		}
 		.spacer {
 			display: inline-block;
 			min-width: 5px;
@@ -328,6 +338,14 @@
 					}
 				}
 			}
+
+			&:hover {
+				.npc-line {
+					.npc-name {
+						text-shadow: 0 0 8px var(--color-shadow-primary);
+					}
+				}
+			}
 		}
 	}
 	.settings {
diff --git a/src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue b/src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue
index e090551..7b87886 100644
--- a/src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue
+++ b/src/vue/components/dialogs/compendium-browser/CompendiumBrowserCreatures.vue
@@ -1,79 +1,98 @@
 <template>
 	<div class="npc-browser browser flexrow">
-		<section class="control-area">
-			<div class="filtercontainer">
-				<!-- Name filter. -->
-				<div class="filter">
-					<input type="text" name="compendiumBrowser.name" v-model="name" :placeholder="game.i18n.localize('Name')" />
+		<section class="control-area flexcol">
+			<div class="controls">
+				<div class="filtercontainer">
+					<!-- Name filter. -->
+					<div class="filter">
+						<input type="text" name="compendiumBrowser.name" v-model="name" :placeholder="game.i18n.localize('Name')" />
+					</div>
+
+					<!-- Sort -->
+					<dl class="sorter">
+						<dt>{{ game.i18n.localize('Sort by:') }}</dt>
+						<dd>
+							<select class="sort" name="sortorder" v-model="sortBy">
+								<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
+							</select>
+						</dd>
+					</dl>
 				</div>
 
-				<!-- Sort -->
-				<dl class="sorter">
-					<dt>{{ game.i18n.localize('Sort by:') }}</dt>
-					<dd>
-						<select class="sort" name="sortorder" v-model="sortBy">
-							<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
-						</select>
-					</dd>
-				</dl>
-
-				<!-- Reset. -->
-				<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
-			</div>
-
-			<div class="filtercontainer">
-				<h3>{{ game.i18n.localize('General') }}</h3>
-				<!-- Level range slider. -->
-				<div class="filter">
-					<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
-					<div class="level-range flexrow">
-						<div class="level-label"><span>{{ crRange[0] }}</span><span v-if="crRange[0] !== crRange[1]"> - {{ crRange[1] }}</span></div>
-						<div class="level-input slider-wrapper flexrow">
-							<Slider v-model="crRange" :min="0" :max="30" :tooltips="false"/>
+				<div class="filtercontainer">
+					<h3>{{ game.i18n.localize('General') }}</h3>
+					<div class="filters">
+						<!-- Level range slider. -->
+						<div class="filter">
+							<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
+							<div class="level-range flexrow">
+								<div class="level-label"><span>{{ crRange[0] }}</span><span v-if="crRange[0] !== crRange[1]"> - {{ crRange[1] }}</span></div>
+								<div class="level-input slider-wrapper flexrow">
+									<Slider v-model="crRange" :min="0" :max="30" :tooltips="false"/>
+								</div>
+							</div>
+						</div>
+						<!-- Size filter. -->
+						<div class="filter">
+							<label class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</label>
+							<Multiselect
+								v-model="size"
+								mode="tags"
+								:searchable="false"
+								:create-option="false"
+								:options="getOptions(CONFIG.DND5E.actorSizes)"
+							/>
+						</div>
+						<div class="filter">
+							<label class="unit-title" for="compendiumBrowser.legact">{{ game.i18n.localize('Legendary Actions') }}</label>
+							<Multiselect
+								v-model="legact"
+								:searchable="false"
+								:create-option="false"
+								:options="getOptions(yesNo)"
+							/>
+						</div>
+						<div class="filter">
+							<label class="unit-title" for="compendiumBrowser.legres">{{ game.i18n.localize('Legendary Resistances') }}</label>
+							<Multiselect
+								v-model="legres"
+								:searchable="false"
+								:create-option="false"
+								:options="getOptions(yesNo)"
+							/>
+						</div>
+						<div class="filter">
+							<label class="unit-title" for="compendiumBrowser.creatureType">{{ game.i18n.localize('Creature Type') }}</label>
+							<Multiselect
+								v-model="creatureType"
+								mode="tags"
+								:searchable="false"
+								:create-option="false"
+								:options="getOptions(CONFIG.DND5E.creatureTypes)"
+							/>
 						</div>
 					</div>
 				</div>
-				<!-- Size filter. -->
-				<div class="filter">
-					<label class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</label>
-					<Multiselect
-						v-model="size"
-						mode="tags"
-						:searchable="false"
-						:create-option="false"
-						:options="getOptions(CONFIG.DND5E.actorSizes)"
-					/>
-				</div>
-				<div class="filter">
-					<label class="unit-title" for="compendiumBrowser.legact">{{ game.i18n.localize('Legendary Actions') }}</label>
-					<Multiselect
-						v-model="legact"
-						:searchable="false"
-						:create-option="false"
-						:options="getOptions(yesNo)"
-					/>
-				</div>
-				<div class="filter">
-					<label class="unit-title" for="compendiumBrowser.legres">{{ game.i18n.localize('Legendary Resistances') }}</label>
-					<Multiselect
-						v-model="legres"
-						:searchable="false"
-						:create-option="false"
-						:options="getOptions(yesNo)"
-					/>
-				</div>
-				<div class="filter">
-					<label class="unit-title" for="compendiumBrowser.creatureType">{{ game.i18n.localize('Creature Type') }}</label>
-					<Multiselect
-						v-model="creatureType"
-						mode="tags"
-						:searchable="false"
-						:create-option="false"
-						:options="getOptions(CONFIG.DND5E.creatureTypes)"
-					/>
+
+				<div class="filtercontainer">
+					<h3>{{ game.i18n.localize('Ability Scores') }}</h3>
+					<div class="filters">
+						<div v-for="(ability, key) in abilities" class="filter">
+							<label class="unit-title" for="compendiumBrowser.str">{{ ability.label }}</label>
+							<div class="level-range flexrow">
+								<div class="level-label"><span>{{ ability.range[0] }}</span><span v-if="ability.range[0] !== ability.range[1]"> - {{ ability.range[1] }}</span></div>
+								<div class="level-input slider-wrapper flexrow">
+									<Slider v-model="abilities[key].range" :min="1" :max="30" :tooltips="false"/>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
-
+			<footer>
+				<!-- Reset. -->
+				<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
+			</footer>
 		</section>
 
 		<div class="list-area flexcol">
@@ -89,9 +108,7 @@
 					</div>
 					<div class="npc-line">
 						<!-- First row is the title. -->
-						<div class="npc-name">
-							<a>[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</a>
-						</div>
+						<div class="npc-name">[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</div>
 						<!-- Second row is supplemental info. -->
 						<div class="npc-tags flexrow">
 							<div class="numbers flexrow">
@@ -147,6 +164,8 @@ export default {
 		}
 	},
 	data() {
+		const abilities = {};
+		Object.entries(CONFIG.DND5E.abilities).forEach(([k, v]) => abilities[k] = { label: v.label, range: [1, 30] });
 		return {
 			// Props used for infinite scroll and pagination.
 			observer: null,
@@ -171,6 +190,7 @@ export default {
 			// Mixed decimals and ints aren't supported by the slider, so
 			// just use 0 for all CRs below 1.
 			crRange: [0, 30],
+			abilities,
 			legact: '',
 			legres: '',
 			size: [],
@@ -267,6 +287,14 @@ export default {
 				result = result.filter(entry => this.creatureType.includes(entry.system.details.type.value));
 			}
 
+			Object.entries(this.abilities)
+				.forEach(([k, v]) => {
+					result = result.filter((entry) =>
+						Number(entry.system.abilities[k].value) >= v.range[0] &&
+						Number(entry.system.abilities[k].value) <= v.range[1]
+					)
+				});
+
 			// Reflow pager.
 			if (result.length > this.pager.perPage) {
 				this.pager.totalRows = result.length;