HR betwn WI Entries; fading for solo sprites

public/index.html

@@ -2819,7 +2819,7 @@
                             <div class="tags rm_tag_filter"></div>
                         </div>
                         <!-- a div containing a dynamically updated count of characters currently displayed -->
-                        <div id="rm_character_count" ></div>
+                        <div id="rm_character_count"></div>
                         <hr>
                     </div>
 
@@ -3300,7 +3300,12 @@
 
                             <input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
                         </div>
+                        <div class="wide100p">
+                            <hr>
+                        </div>
+
                     </div>
+
                 </div>
             </form>
         </div>
@@ -3619,4 +3624,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/scripts/extensions/expressions/index.js

@@ -620,6 +620,8 @@ async function setExpression(character, expression, force) {
     console.debug('entered setExpressions');
     await validateImages(character);
     const img = $('img.expression');
+    const prevExpressionSrc = img.attr('src');
+    const expressionClone = img.clone()
 
     const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
     console.debug('checking for expression images to show..');
@@ -643,21 +645,62 @@ async function setExpression(character, expression, force) {
                 }
             }
         }
+        //only swap expressions when necessary
+        if (prevExpressionSrc !== sprite.path
+            && !img.hasClass('expression-animating')) {
+            //clone expression
+            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 });
+            //add new sprite path to clone src
+            expressionClone.attr('src', sprite.path);
+            //add invisible clone to html
+            expressionClone.appendTo($("#expression-holder"))
 
-        img.attr('src', sprite.path);
-        img.removeClass('default');
-        img.off('error');
-        img.on('error', function () {
-            console.debug('Expression image error', sprite.path);
-            $(this).attr('src', '');
-            $(this).off('error');
-            if (force && extension_settings.expressions.showDefault) {
+            const duration = 200;
+
+            //add animation flags to both images
+            //to prevent multiple expression changes happening simultaneously
+            img.addClass('expression-animating')
+            //position absolute prevent the original from jumping around during transition
+            img.css('position', 'absolute')
+            expressionClone.addClass('expression-animating')
+            //fade the clone in
+            expressionClone.css({
+                opacity: 0
+            }).animate({
+                opacity: 1
+            }, duration)
+                //when finshed fading in clone, fade out the original
+                .promise().done(function () {
+                    img.animate({
+                        opacity: 0
+                    }, duration);
+                    //remove old expression
+                    img.remove();
+                    //replace ID so it becomes the new 'original' expression for next change
+                    expressionClone.attr('id', 'expression-image')
+                    expressionClone.removeClass('expression-animating')
+                });
+
+
+            expressionClone.removeClass('expression-clone');
+
+            expressionClone.removeClass('default');
+            expressionClone.off('error');
+            expressionClone.on('error', function () {
+                console.debug('Expression image error', sprite.path);
+                $(this).attr('src', '');
+                $(this).off('error');
+                if (force && extension_settings.expressions.showDefault) {
+                    setDefault();
+                }
+            });
+        } else {
+            if (extension_settings.expressions.showDefault) {
                 setDefault();
             }
-        });
-    } else {
-        if (extension_settings.expressions.showDefault) {
-            setDefault();
         }
     }
 
@@ -665,8 +708,8 @@ async function setExpression(character, expression, force) {
         console.debug('setting default');
         const defImgUrl = `/img/default-expressions/${expression}.png`;
         //console.log(defImgUrl);
-        img.attr('src', defImgUrl);
-        img.addClass('default');
+        expressionClone.attr('src', defImgUrl);
+        expressionClone.addClass('default');
     }
     document.getElementById("expression-holder").style.display = '';
 }

public/scripts/extensions/expressions/style.css

@@ -20,6 +20,9 @@
 
 #visual-novel-wrapper .expression-holder {
     width: max-content;
+    display: flex;
+    left: unset;
+    right: unset;
 }
 
 #visual-novel-wrapper .hidden {
@@ -31,21 +34,6 @@
     object-fit: cover;
 }*/
 
-/* .expression-holder {
-    min-width: 100px;
-    min-height: 100px;
-    max-height: 90vh;
-    max-width: 90vh;
-    width: calc((100vw - var(--sheldWidth)) /2);
-    position: absolute;
-    padding: 0;
-    filter: drop-shadow(2px 2px 2px #51515199);
-    z-index: 29;
-    overflow: hidden;
-    display: none;
-    bottom: 0;
-} */
-
 .expression-holder {
     min-width: 100px;
     min-height: 100px;
@@ -55,6 +43,7 @@
     position: absolute;
     bottom: 0;
     padding: 0;
+    left: 0;
     filter: drop-shadow(2px 2px 2px #51515199);
     z-index: 2;
     overflow: hidden;
@@ -62,8 +51,13 @@
 }
 
 img.expression {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
     width: 100%;
-    height: 100%;
+    bottom: 0;
+    padding: 0;
     vertical-align: bottom;
     object-fit: contain;
 }
@@ -79,6 +73,10 @@ img.expression.default {
     margin-top: 50px;
 }
 
+.expression-clone {
+    position: absolute;
+}
+
 .debug-image {
     display: none;
     visibility: collapse;

public/style.css

@@ -3784,6 +3784,11 @@ label[for="extensions_autoconnect"] {
     color: lightgray;
 }
 
+/* possible place for WI Entry header styling */
+/* .world_entry_form .inline-drawer-header {
+    background-color: var(--SmartThemeShadowColor);
+} */
+
 #extensions_settings .inline-drawer-toggle.inline-drawer-header,
 #extensions_settings2 .inline-drawer-toggle.inline-drawer-header {
     background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%);
@@ -4413,6 +4418,9 @@ body.waifuMode .expression-holder {
     bottom: 0;
     filter: drop-shadow(2px 2px 2px #51515199);
     z-index: 2;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
 }
 
 /* movingUI*/
@@ -4789,16 +4797,13 @@ body.waifuMode .zoomed_avatar {
 
     body.waifuMode .expression-holder {
         display: inline;
-        width: unset;
-        max-height: unset;
-        max-width: unset;
-        bottom: unset;
-        left: unset;
-        top: unset;
+
         height: 100vh;
-        width: 100vw;
+        width: max-content;
         margin: 0 auto;
         position: absolute;
+        left: 0;
+        right: 0;
         filter: drop-shadow(2px 2px 2px #51515199);
         z-index: 1;
     }
@@ -5092,5 +5097,4 @@ body.waifuMode .zoomed_avatar {
     background-color: var(--SmartThemeBlurTintColor);
     text-align: center;
     line-height: 14px;
-}
-
+}