fix: fix regression in gold emote display (#518)

* fix: fix regression in gold emote display * reintroduce webkit
MemeLabs · Mar 9, 2024 · 1374a9e · 1374a9e
1 parent c7001c4
commit 1374a9e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/assets/chat/css/generify.scss b/assets/chat/css/generify.scss
@@ -838,3 +838,26 @@
         transform: translateY(2px);
     }
 }
+
+
+//manually tweaked gold emotes, mostly spritesheets
+.golden-modifier-HocusPocus {
+    -webkit-mask-position: 38px;
+    -webkit-mask-repeat: repeat-x !important;
+}
+.golden-modifier-AngelThump {
+    -webkit-mask-position: 84px;
+    -webkit-mask-repeat: repeat-x !important;
+}
+.golden-modifier-LAG {
+    -webkit-mask-position: 40px;
+    -webkit-mask-repeat: repeat-x !important;
+}
+.golden-modifier-WAYTOODANK {
+    -webkit-mask-position: 1904px;
+    -webkit-mask-repeat: repeat !important;
+}
+
+.golden-modifier-Gigachad {
+    -webkit-mask-position-x: -3068px !important;
+}
diff --git a/assets/chat/js/formatters.js b/assets/chat/js/formatters.js
@@ -165,24 +165,22 @@ function genGoldenEmote(emoteName, emoteHeight, emoteWidth) {
     }
 
     const innerEmoteCompStyle = getComputedStyle(emote, false)
-    let maskUrl = innerEmoteCompStyle.backgroundImage.slice(4, -1).replace(/"/g, '');
+    let maskUrl = innerEmoteCompStyle.backgroundImage.replace(/"/g, '');
 
     const goldenModifierMask =
         "width: " +
         emoteWidth +
         "px; height: " +
         emoteHeight +
-        "px; " +
-        "-webkit-mask-position: " +
-        innerEmoteCompStyle.backgroundPosition +
-        ";";
+        "px; ";
     const goldenModifierMarginTop = 30 - emoteHeight - 8;
     const goldenModifierStyle =
         'style="margin:' +
         goldenModifierMarginTop +
-        "px 2px 0px 2px; -webkit-mask-image: url(/" +
+        "px 2px 0px 2px; -webkit-mask-image: " +
         maskUrl +
-        ");" +
+        ";" +
+        "-webkit-mask-repeat: space;" +
         goldenModifierMask +
         '"';
 
@@ -196,7 +194,7 @@ function genGoldenEmote(emoteName, emoteHeight, emoteWidth) {
     const goldenModifier =
         "<span " +
         goldenModifierStyle +
-        'class="golden-modifier">' +
+        'class="golden-modifier golden-modifier-' + emoteName + '">' +
         goldenModifierGlimmer +
         "</span>";
 
@@ -320,7 +318,8 @@ class EmoteFormatter {
                 goldenProcChance = goldenProcChance / (emoteCount / 2);
             }
             // 0.001% proc chance
-            if (!isHalloween() && proc(seed, punish, goldenProcChance)) {
+            var isGolden = proc(seed, punish, goldenProcChance);
+            if (!isHalloween() && isGolden) {
                 var goldenEmote = genGoldenEmote(
                     emote,
                     this.emoteheights[emote],
@@ -348,19 +347,22 @@ class EmoteFormatter {
                 "generify-container",
                 "generify-emote-" + emote
             ];
-
-            for (var j = 0; j < options.length; j++) {
-                if (generifyExtraWraps.includes(suffixes[j])) {
-                    innerEmote = `<span class="generify-container">${innerEmote}</span>`;
+
+            //do not display modifiers on golden emotes
+            if (!isGolden) {
+                for (var j = 0; j < options.length; j++) {
+                    if (generifyExtraWraps.includes(suffixes[j])) {
+                        innerEmote = `<span class="generify-container">${innerEmote}</span>`;
+                    }
+                    innerEmote = ' <span class="' +
+                        generifyClasses.join(" ") + " " +
+                        options[j] +
+                        '" data-modifiers="' +
+                        options[j] +
+                        '">' +
+                        innerEmote +
+                        "</span>"
                 }
-                innerEmote = ' <span class="' +
-                    generifyClasses.join(" ") + " " +
-                    options[j] +
-                    '" data-modifiers="' +
-                    options[j] +
-                    '">' +
-                    innerEmote +
-                    "</span>"
             }
 
             return (