Added support for animated token previews

- Support on previews was changed according to Foundry's format support:
Only jpg, jpeg, png, webp, svg images and webm, mp4, m4v videos will
render a button for selection in the HUD preview, wildcard items with
different formats will be ignored

README.md

@@ -44,8 +44,20 @@ To install the module, follow any of these methods:
 - Extract the contents of the zip in your modules folder.
 - Restart Foundry and it should be available for your games.
 
-## Planned Features
-Nothing that I can think of just yet.
+## Condensed Changelog
+- #### Features:
+    - Token image previews in HUD.
+    - Default token on drop. Allows the user to pick a token that will always be chosen when dropping actor on canvas instead of random chosen by the wildcard setting.
+    - Global setting to choose between filename and image previews in HUD.
+    - Global opacity setting in module settings for token previews in HUD.
+- #### Fixes:
+    - Allows for image and video previews, non supported formats are not shown in the HUD anymore.
+    - Fixed for Pathfinder 1 game system.
+- #### Localization:
+    - Improved localization of all displayable text.
+    - Languages:
+        - English
+        - Spanish
 
 ## Acknowledgements
 Thanks to Atropos for making this amazing platform for roleplaying games. I've enjoyed it a ton and the possibility of expanding functionalities and adding your own is just awesome.

token-hud-wildcard/css/token-hud-wildcard.css

@@ -27,6 +27,7 @@
     width: max-content !important;
     padding: 0 !important;
     margin: 0 !important;
+    line-height: 0 !important;
 }
 
 #token-hud .thwildcard-button-select:hover .thwildcard-button-image{
@@ -37,18 +38,20 @@
     max-width: 440px;
     width: 100% !important;
     margin: 8px 0px !important;
+    line-height: 40px !important;
 }
 
 #token-hud .thwildcard-button-image {
     width: 100px;
     height: 100px;
+    margin: 2px;
 }
 
-#token-hud .thwildcard-button-disabled span , #token-hud .thwildcard-button-disabled img {
+#token-hud .thwildcard-button-disabled span, #token-hud .thwildcard-button-disabled img, #token-hud .thwildcard-button-disabled video {
     opacity: 1 !important;
     filter: grayscale(100%);
 }
-#token-hud .thwildcard-button-disabled span, #token-hud .thwildcard-button-disabled:hover img {
+#token-hud .thwildcard-button-disabled span, #token-hud .thwildcard-button-disabled:hover img, #token-hud .thwildcard-button-disabled:hover video {
     /* opacity: 0.7 !important; */
     color: #CCC;
 }

token-hud-wildcard/main.js

@@ -87,7 +87,11 @@ Hooks.on('renderTokenHUD', async (hud, html, token) => {
     const imageOpacity = game.settings.get('token-hud-wildcard', 'imageOpacity')/100
     const imagesParsed = images.map(im => {
         const split = im.split('/')
-        return { route: im, name: split[split.length - 1], used: im === token.img }
+        var extension = im.split('.')
+        extension = extension[extension.length - 1]
+        const img = ['jpg', 'jpeg', 'png', 'svg', 'webp'].includes(extension)
+        const vid =  ['webm', 'mp4', 'm4v'].includes(extension)
+        return { route: im, name: split[split.length - 1], used: im === token.img, img, vid, type: img || vid }
     })
 
     const wildcardDisplay = await renderTemplate('/modules/token-hud-wildcard/templates/hud.html', { imagesParsed, imageDisplay, imageOpacity })

token-hud-wildcard/module.json

@@ -2,7 +2,7 @@
 	"name": "token-hud-wildcard",
 	"title": "Token HUD Wildcard",
 	"description": "This module adds a button to the Token HUD if the token has wildcard set and detects more than 1 image to choose from. Pressing the button displays a panel on the right side of the HUD with buttons for each image, pressing one of these allows to change the token image.",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"minimumCoreVersion": "0.6.0",
 	"compatibleCoreVersion": "0.6.6",
 	"author": "Javieros",

token-hud-wildcard/templates/hud.html

@@ -2,13 +2,20 @@
     <img src="modules/token-hud-wildcard/img/token-icon.svg" width="36" height="36" title="{{localize 'THWildcard.Title' }}" />
     <div class="thwildcard-selector-wrap {{#unless imageDisplay}}list{{/unless}}">
         {{#each imagesParsed as |image|}}
-            <button class="thwildcard-button-select control-icon {{#unless ../imageDisplay}}list{{/unless}} {{#if image.used}}thwildcard-button-disabled active{{/if}}" >
-                {{#if ../imageDisplay}}
-                    <img class="thwildcard-button-image" src="{{image.route}}" alt="{{image.name}}" data-name="{{image.route}}" style="opacity:{{../imageOpacity}};"/>
-                {{else}}
-                    <span data-name="{{image.route}}">{{image.name}}</span>
-                {{/if}}
-            </button>
+            {{#if image.type}}
+                <button class="thwildcard-button-select control-icon {{#unless ../imageDisplay}}list{{/unless}} {{#if image.used}}thwildcard-button-disabled active{{/if}}" >
+                    {{#if ../imageDisplay}}
+                        {{#if image.img}}
+                            <img class="thwildcard-button-image" src="{{image.route}}" alt="{{image.name}}" data-name="{{image.route}}" style="opacity:{{../imageOpacity}};"/>
+                        {{/if}}
+                        {{#if image.vid}}
+                            <video class="thwildcard-button-image" src="{{image.route}}" alt="{{image.name}}" data-name="{{image.route}}" style="opacity:{{../imageOpacity}};" autoplay loop/>
+                        {{/if}}
+                    {{else}}
+                        <span data-name="{{image.route}}">{{image.name}}</span>
+                    {{/if}}
+                </button>
+            {{/if}}
         {{/each}}
     </div>
 </div>