Roll on the sprite to use for an expression

adede8b6befe1c6c21e8b6ae3b28c44e746580ec

Wolfsblvt <wolfsblvt@gmail.com>

Parents: a072951102f40be153a019ccb4443305654387da

public/scripts/extensions/expressions/index.js+53 -16 Viewed

     return new Promise(resolve => {
         const prevExpressionSrc = img.attr('src');
         const expressionClone = img.clone();
-        const originalId = img.attr('id');
+        const originalId = img.data('filename');
         //only swap expressions when necessary
         if (prevExpressionSrc !== path && !img.hasClass('expression-animating')) {

             expressionClone.addClass('expression-clone');
             //make invisible and remove id to prevent double ids
             //must be made invisible to start because they share the same Z-index
-            expressionClone.attr('id', '').css({ opacity: 0 });
+            expressionClone.data('filename', '').css({ opacity: 0 });
             //add new sprite path to clone src
             expressionClone.attr('src', path);
             //add invisible clone to html

                     //remove old expression
                     img.remove();
                     //replace ID so it becomes the new 'original' expression for next change
-                    expressionClone.attr('id', originalId);
+                    expressionClone.data('filename', originalId);
                     expressionClone.removeClass('expression-animating');
                     // Reset the expression holder min height and width

 /**
  * Validate a character's sprites, and redraw the sprites list if not done before or forced to redraw.
  * @param {string} character - The character to validate
- * @param {boolean} forceRedrawCached - Whether to force redrawing the sprites list even if it's already been drawn before
+ * @param {boolean} [forceRedrawCached=false] - Whether to force redrawing the sprites list even if it's already been drawn before
  */
-async function validateImages(character, forceRedrawCached) {
+async function validateImages(character, forceRedrawCached = false) {
     if (!character) {
         return;
+    }

+    }
+}
+/**
+ * Retrieves a unique list of cached expressions.
+ * Combines the default expressions list with custom user-defined expressions.
+ *
+ * @returns {string[]} An array of unique expression labels
+ */
 function getCachedExpressions() {
     if (!Array.isArray(expressionsList)) {
         return [];

     return [...result, ...extension_settings.expressions.custom].filter(onlyUnique);
+}
-async function setExpression(character, expression, force) {
+/**
+ * Set the expression of a character.
+ * @param {string} character - The name of the character
+ * @param {string} expression - The expression to set
+ * @param {boolean} [force=false] - Whether to force the expression change even if Visual Novel mode is on.
+ * @returns {Promise<void>} A promise that resolves when the expression has been set.
+ */
+async function setExpression(character, expression, force = false) {
     if (!isTalkingHeadEnabled() || !modules.includes('talkinghead')) {
         console.debug('entered setExpressions');
         await validateImages(character);

         const prevExpressionSrc = img.attr('src');
         const expressionClone = img.clone();
+        /** @type {Expression} */
         const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
         console.debug('checking for expression images to show..');
         if (sprite) {
             console.debug('setting expression from character images folder');
+            let spriteFile = sprite.files[0];
+            // Calculate next expression
+            if (sprite.files.length > 1) {
+                let possibleFiles = sprite.files;
+                if (extension_settings.expressions_reroll_if_same) {
+                    possibleFiles = possibleFiles.filter(x => x.imageSrc !== prevExpressionSrc);
+                }
+                spriteFile = possibleFiles[Math.floor(Math.random() * possibleFiles.length)];
+            }
             if (force && isVisualNovelMode()) {
                 const context = getContext();
                 const group = context.groups.find(x => x.id === context.groupId);

@@ -1583,13 +1609,13 @@ async function setExpression(character, expression, force) {
1583	}	1609	}
1584		1610
1585	if (groupMember.name == character) {	1611	if (groupMember.name == character) {
1586	await setImage($(`.expression-holder[data-avatar="${member}"] img`), sprite.path);	1612	await setImage($(`.expression-holder[data-avatar="${member}"] img`), spriteFile.imageSrc);
1587	return;	1613	return;
1588	}	1614	}
1589	}	1615	}
1590	}	1616	}
1591	//only swap expressions when necessary	1617	//only swap expressions when necessary
1592	if (prevExpressionSrc !== sprite.path	1618	if (prevExpressionSrc !== spriteFile.imageSrc
1593	&& !img.hasClass('expression-animating')) {	1619	&& !img.hasClass('expression-animating')) {
1594	//clone expression	1620	//clone expression
1595	expressionClone.addClass('expression-clone');	1621	expressionClone.addClass('expression-clone');

                 //must be made invisible to start because they share the same Z-index
                 expressionClone.attr('id', '').css({ opacity: 0 });
                 //add new sprite path to clone src
-                expressionClone.attr('src', sprite.path);
+                expressionClone.attr('src', spriteFile.imageSrc);
                 //add invisible clone to html
                 expressionClone.appendTo($('#expression-holder'));

                 expressionClone.removeClass('default');
                 expressionClone.off('error');
                 expressionClone.on('error', function () {
-                    console.debug('Expression image error', sprite.path);
+                    console.debug('Expression image error', spriteFile.imageSrc);
                     $(this).attr('src', '');
                     $(this).off('error');
                     if (force && extension_settings.expressions.showDefault) {

@@ -1706,7 +1732,7 @@ async function setExpression(character, expression, force) {
1706	}	1732	}
1707		1733
1708	function onClickExpressionImage() {	1734	function onClickExpressionImage() {
1709	const expression = $(this).attr('id');	1735	const expression = $(this).data('expression');
1710	setSpriteSlashCommand({}, expression);	1736	setSpriteSlashCommand({}, expression);
1711	}	1737	}
1712		1738

     // Prevents the expression from being set
     event.stopPropagation();
-    const id = $(this).closest('.expression_list_item').attr('id');
+    const expression = $(this).closest('.expression_list_item').data('expression');
     const name = $('#image_list').data('name');
     const handleExpressionUploadChange = async (e) => {

             return;
+        }
+        // // If extension_settings.expressions.allowMultiple is false and there's already a main image, ask user:
+        // let hasMainImage = true; // Check from your item data
+        // if (!extension_settings.expressions.allowMultiple && hasMainImage) {
+        //     let userChoice = await callPopup('<h3>Replace existing main image?</h3><p>Press Ok to replace, Cancel to abort.</p>', 'confirm');
+        //     if (!userChoice) {
+        //         return;
+        //     }
+        //     // If user chooses replace, remove the old file, then proceed
+        //     // ...existing code to remove old file...
+        // }
         const formData = new FormData();
         formData.append('name', name);
-        formData.append('label', id);
+        formData.append('label', expression);
         formData.append('avatar', file);
         await handleFileUpload('/api/sprites/upload', formData);

         e.target.form.reset();
         // In Talkinghead mode, when a new talkinghead image is uploaded, refresh the live char.
-        if (id === 'talkinghead' && isTalkingHeadEnabled() && modules.includes('talkinghead')) {
+        if (expression === 'talkinghead' && isTalkingHeadEnabled() && modules.includes('talkinghead')) {
             await loadTalkingHead();
+        }
     };

         return;
+    }
-    const id = $(this).closest('.expression_list_item').attr('id');
+    const expression = $(this).closest('.expression_list_item').data('expression');
     const name = $('#image_list').data('name');
     try {
         await fetch('/api/sprites/delete', {
             method: 'POST',
             headers: getRequestHeaders(),
-            body: JSON.stringify({ name, label: id }),
+            body: JSON.stringify({ name, label: expression }),
         });
     } catch (error) {
         toastr.error('Failed to delete image. Try again later.');

public/scripts/extensions/expressions/list-item.html+1 -1 Viewed

 {{#each images}}
-<div class="expression_list_item" data-epression="{{../expression}}" data-expression-type="{{this.type}}" data-filename="{{this.fileName}}">
+<div class="expression_list_item" data-expression="{{../expression}}" data-expression-type="{{this.type}}" data-filename="{{this.fileName}}">
     <div class="expression_list_buttons">
         <div class="menu_button expression_list_upload" title="Upload image">
             <i class="fa-solid fa-upload"></i>