feat: group weather effects (animals, other, weather) and sort weathe…

…r and filter effects

.gitignore

@@ -1,5 +1,6 @@
 fxmaster.lock
 node_modules/
+client
 foundry.js
 dist/
 .vscode/

README.md

@@ -9,7 +9,8 @@
 
 FXMaster is a module for [Foundry Virtual Tabletop] that provides various types of effects:
 
-* Global effects, called _Weather Effects_, like rain, clouds, fog, and, snow, but also other particle effects such as crows or bats.
+* Global effects, called _Weather Effects_, like rain, clouds, fog, and, snow, but also other particle effects such as
+  crows or bats.
 * _Filter Effects_, including color overlays, underwater, and lightning.
 * Clickable _Special Effects_, using video files provided by external sources.
 
@@ -68,7 +69,8 @@ individual functionality of FXMaster has its own tool inside this scene control.
 
 _Special Effects_ are essentially video files that can be played on the canvas via clicking or dragging. FXMaster
 includes only a couple of example effects. If you want more, you will need to install a module providing animation files
-like [JB2A], [Jinker's Animated Art], or [Jack Kerouac's Animated Spell Effects]. All of them integrate with FXMaster. Alternatively, you can also [add your own _Special Effects_](#managing-custom-special-effects).
+like [JB2A], [Jinker's Animated Art], or [Jack Kerouac's Animated Spell Effects]. All of them integrate with FXMaster.
+Alternatively, you can also [add your own _Special Effects_](#managing-custom-special-effects).
 
 Clicking on this tool opens the _Special Effects Management_ dialog:
 
@@ -143,14 +145,20 @@ Clicking on this tool opens the _Weather Effects Management_ dialog:
 
 ![Weather Effects Management](./media/screenshots/weather-effects-management.png)
 
-With this dialog, you can activate individual weather effects by checking the corresponding checkbox and then clicking
+In this dialog, you can configure individual weather effects. They are sorted into different groups (“Animals”, “Other”,
+and “Weather”). By clicking on a group, you expand it, showing all effects in that group:
+
+![Weather Effects Management With Group Expanded](./media/screenshots/weather-effects-management-group-expanded.png)
+
+You can activate individual weather effects by checking the corresponding checkbox and then clicking
 on “Save Changes”.
 
 By clicking on the name of a _Weather Effect_, you expand it, showing the options for that effect:
 
 ![Weather Effect Options](./media/screenshots/weather-effect-options.png)
 
-The available options differ slightly between _Weather Effects_ because not all options make sense for all of them. The options are:
+The available options differ slightly between _Weather Effects_ because not all options make sense for all of them. The
+options are:
 | Option     | Description                                                                                                                 |
 | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
 | Scale      | A factor that scales the effect relative to its base size.                                                                  |
@@ -168,7 +176,8 @@ Once you are finished with adjusting the options, you can apply them by clicking
 By default, _Weather Effects_ are displayed all across the entire scene. However, it is possible to constrain them to
 specific areas. This can be achieved by creating drawings and then marking them as _Weather Mask_. To do that, open the
 HUD for the drawing (by right-clicking the drawing) and then click on the “Mask FXMaster Weather” control icon
-(<img src="./media/font-awesome/cloud.svg" alt="Mask FXMaster Weather Control Icon" height="20" />) on the left of the drawing HUD:
+(<img src="./media/font-awesome/cloud.svg" alt="Mask FXMaster Weather Control Icon" height="20" />) on the left of the
+drawing HUD:
 
 ![Drawing HUD with Weather Mask](./media/screenshots/drawing-hud-weather-mask.png)
 
@@ -250,7 +259,8 @@ current scene.
 
 ## Developer API
 
-FXMaster provides functionality to interact with _Filter Effects_, _Weather Effects_, and _Special Effects_ from other packages and macros.
+FXMaster provides functionality to interact with _Filter Effects_, _Weather Effects_, and _Special Effects_ from other
+packages and macros.
 
 ### Filters Effects
 
@@ -407,8 +417,8 @@ const effectData = CONFIG.fxmaster.specials.custom.effects.find(ef => ef.label =
 
 #### Playing a Video File Between Two Tokens
 
-You can use the `canvas.specials.drawSpecialToward` method with the speed set to `"auto"` to adapt the speed so that the video ends
-when the target is reached.
+You can use the `canvas.specials.drawSpecialToward` method with the speed set to `"auto"` to adapt the speed so that the
+video ends when the target is reached.
 
 ```javascript
 function castSpell(effect) {
@@ -532,7 +542,8 @@ Many thanks to:
 * Jules and Ben's Witch Bolt effect is from [JB2A] and is licensed under [CC BY-NC-SA-4.0].
 * The Seagull sprites used in the Birds weather effect are from [whtdragon].
 * The control and tool icons are from [Font Awesome], licensed under the [CC BY-4.0].
-* The rats icon is a derivative work of “Rat” by DataBase Center for Life Science (DBCLS) (https://togotv.dbcls.jp/en/togopic.2021.006.html), used under [CC BY-4.0], and licensed under [CC BY-4.0].
+* The rats icon is a derivative work of “Rat” by DataBase Center for Life Science (DBCLS)
+  (https://togotv.dbcls.jp/en/togopic.2021.006.html), used under [CC BY-4.0], and licensed under [CC BY-4.0].
 * The rat sprites used in the Rats weather effects by crymoonster are licensed under [CC BY-4.0].
 
 [Foundry Virtual Tabletop]: https://foundryvtt.com/

css/common.css

@@ -1,75 +1,101 @@
-.fxmaster .directory-header {
+:root {
+  --fxmaster-color-bg-button: rgba(255, 255, 240, 0.8);
+}
+
+.fxmaster-form-header {
   box-shadow: 0 0 5px var(--color-shadow-dark, black);
   line-height: var(--line-height-12, 12px);
   font-size: var(--font-size-12, 12px);
   margin: 0;
-  padding: 2px 0;
+  padding: 4px 0;
 }
 
-.fxmaster .config {
-  padding: 4px;
-  border-bottom: 1px solid var(--color-border-dark-3, #333);
-  list-style: none;
+.fxmaster-groups-list,
+.fxmaster-list {
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
 }
 
-.fxmaster .config .icon {
-  border: none;
-  flex: 0 0 18px;
-  text-align: center;
-  line-height: var(--line-height-20, 20px);
-  font-size: var(--font-size-16, 16px);
+.fxmaster-groups-list__item,
+.fxmaster-list__item {
+  padding: 4px;
+  list-style: none;
 }
 
-.fxmaster .config .collapse {
-  text-indent: 5px;
+.fxmaster-groups-list__item {
+  border-bottom: 2px solid var(--color-border-dark-3, #333);
 }
 
-.fxmaster .config.collapsible {
-  padding: 0;
+.fxmaster-list__item {
+  border-bottom: 1px solid var(--color-border-dark-3, #333);
 }
 
-.fxmaster .config.collapsible.collapsed {
-  display: none;
-  overflow: hidden;
+.fxmaster-groups-list__item:last-of-type,
+.fxmaster-list__item:last-of-type {
+  border-bottom: none;
 }
 
-.fxmaster .config label {
+.fxmaster-groups-list__collapse,
+.fxmaster-list__collapse {
   font-size: var(--font-size-16, 16px);
   cursor: pointer;
+  text-indent: 5px;
 }
 
-.fxmaster .config label:hover {
+.fxmaster-groups-list__collapse:hover,
+.fxmaster-list__collapse:hover {
   text-shadow: 0 0 4px var(--color-shadow-primary, #ff0000);
 }
 
-.fxmaster .directory-item.active {
-  background: #f56b0066;
+.fxmaster-groups-list__collapsible,
+.fxmaster-list__collapsible {
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
 }
 
-.fxmaster .form-footer {
-  padding: 5px;
+.fxmaster-groups-list__collapsible--collapsed,
+.fxmaster-list__collapsible--collapsed {
+  display: none;
 }
 
-.fxmaster .form-footer button {
-  background-color: rgba(255, 255, 240, 0.8);
-  border: 1px solid var(--color-border-light-primary, #b5b3a4);
+.fxmaster-list__icon {
+  border: none;
+  flex: 0 0 18px;
+  text-align: center;
+  line-height: var(--line-height-20, 20px);
+  font-size: var(--font-size-16, 16px);
 }
 
-.fxmaster .directory-item .config input[type="text"] {
-  color: var(--color-text-light-0, #fff);
+.fxmaster-form-footer {
+  padding: 5px;
+}
+
+.fxmaster-form-footer__button {
+  background-color: var(--fxmaster-color-bg-button);
   border: 1px solid var(--color-border-light-primary, #b5b3a4);
-  text-align: center;
-  padding: 2px;
-  height: 20px;
 }
 
-.fxmaster .directory-item .config select.multi-select {
+.fxmaster-multi-select {
   border: 1px solid var(--color-border-light-primary, #b5b3a4);
   color: var(--color-border-light-1, #ddd);
   background: transparent;
   border-radius: 0px;
 }
 
-.fxmaster .directory-item .config select.multi-select:focus {
+.fxmaster-multi-select:focus {
   box-shadow: none;
 }
+
+.fxmaster-multi-select__option {
+  background: transparent;
+}
+
+.fxmaster-text-input[type="text"] {
+  color: var(--color-text-light-0, #fff);
+  border: 1px solid var(--color-border-light-primary, #b5b3a4);
+  text-align: center;
+  padding: 2px;
+  height: 20px;
+}

css/filters-config.css

@@ -1,18 +1,18 @@
-.layer-toggle {
+.fxmaster-layer-toggle {
   text-align: center;
 }
-.layer-toggle span {
+
+.fxmaster-layer-toggle__icon {
   font-size: var(--font-size-12, 12px);
-  vertical-align: text-top;
 }
-.layer-toggle input[type="checkbox"] {
+
+.fxmaster-layer-toggle__checkbox[type="checkbox"] {
   flex: 0 0 var(--line-height-12, 12px);
   width: var(--line-height-12, 12px);
   height: var(--line-height-12, 12px);
   margin: 0 3px;
 }
 
-.fxmaster.filters.directory-list {
-  overflow-y: auto;
-  height: 35px;
+.fxmaster-list--filters {
+  height: 370px;
 }

css/specials-config.css

@@ -1,3 +1,15 @@
+.fxmaster .directory-header {
+  box-shadow: 0 0 5px var(--color-shadow-dark, black);
+  line-height: var(--line-height-12, 12px);
+  font-size: var(--font-size-12, 12px);
+  margin: 0;
+  padding: 4px 0;
+}
+
+.fxmaster .directory-item.active {
+  background: #f56b0066;
+}
+
 .fxmaster.specials .directory-item.special-effects {
   line-height: inherit;
 }

css/weather-config.css

@@ -1,48 +1,3 @@
-.fxmaster .directory-header {
-  box-shadow: 0 0 5px var(--color-shadow-dark, black);
-  line-height: var(--line-height-12, 12px);
-  font-size: var(--font-size-12, 12px);
-  margin: 0;
-  padding: 2px 0;
-}
-
-.fxmaster.specials .directory-item.special-effects {
-  line-height: inherit;
-}
-
-.fxmaster .special-effects .description {
-  padding: 4px;
-  overflow: hidden;
-}
-
-.fxmaster .special-effects .description h4 {
-  line-height: var(--line-height-16, 16px);
-  text-indent: 5px;
-  font-size: var(--font-size-14, 14px);
-  height: 32px;
-}
-
-.fxmaster .special-effects .description .author {
-  line-height: calc(var(--line-height-12, 12px) / 12 * 10);
-  color: var(--color-text-light-7, #888);
-  text-align: right;
-  font-size: calc(var(--font-size-12, 12px) / 12 * 10);
-  flex: 0 calc(var(--line-height-12, 12px) / 12 * 10);
-}
-
-.fxmaster .special-effects .controls {
-  padding: 0 3px;
-  line-height: 48px;
-  flex: 0 0 40px;
-  text-align: right;
-}
-
-.fxmaster.effects.directory-list {
-  overflow-y: scroll;
+.fxmaster-groups-list--weather-effects {
   height: 370px;
 }
-
-.fxmaster.filters.directory-list {
-  overflow-y: auto;
-  height: 35px;
-}

lang/en.json

@@ -6,6 +6,9 @@
   "CONTROLS.Filters": "Filter Effects",
   "CONTROLS.SaveMacro": "Save Weather and Filters as Macro",
   "CONTROLS.ClearFX": "Clear Weather and Filters",
+  "FXMASTER.WeatherEffectsGroupOther": "Other",
+  "FXMASTER.WeatherEffectsGroupAnimals": "Animals",
+  "FXMASTER.WeatherEffectsGroupWeather": "Weather",
   "FXMASTER.SpecialsConfigTitle": "Special Effects Management",
   "FXMASTER.WeatherConfigTitle": "Weather Effects Management",
   "FXMASTER.FiltersConfigTitle": "Filter Effects Management",